/* ============================================================================
   desktop.css — the desktop scale layer
   ----------------------------------------------------------------------------
   The app was built phone-first: a 384px panel on a 1920px screen, a 14px base
   with 10-12px labels, 36px inputs and 640px dialogs. That reads as a phone UI
   stranded in the middle of a desktop window. The owner works desktop-only, so
   this file rescales the app's own components for mouse-and-keyboard widths.

   Rules for editing this file:
   - GEOMETRY ONLY (type scale, spacing, control heights, panel/dialog widths).
     Never a colour, border or shadow: those belong to css/cyberpunk.css.
   - It loads LAST, so an equal-specificity selector here wins. Reuse a source
     selector verbatim when overriding it (see the .field input rule below).
   - Everything is behind a min-width query, so phone layouts are untouched.
   - Map imagery stays neutral: only the map's own CONTROLS are scaled.
   ========================================================================= */

/* ---------- ≥1024px: desktop ---------- */
@media (min-width: 1024px) {
  :root {
    --header-h: 62px;              /* was 56: taller header, roomier controls */
  }

  html, body { font-size: 15px; line-height: 1.5; }

  /* ---- header ---- */
  .app-header { gap: 12px; padding: 0 14px; }
  .brand-name { font-size: 14px; }
  .hdr-project { font-size: 13.5px; max-width: 34vw; }
  .build-stamp { font-size: 11.5px; }
  .hdr-actions, .hdr-extra { gap: 8px; }
  .more-menu button, .acct-menu button { padding: 12px 14px; font-size: 14px; }
  .more-build { font-size: 11.5px; padding: 8px 14px 3px; }
  .acct-head { padding: 10px 12px 7px; font-size: 12px; }
  .acct-name { max-width: 130px; }

  /* ---- panel: a sidebar, not a phone sheet ---- */
  .panel { flex: 0 0 440px; width: 440px; }
  .panel-head { gap: 8px; padding: 10px 12px; }
  .tabs { gap: 6px; }
  .tab-btn { padding: 11px 15px; font-size: 13.5px; }
  .tab-pane { padding: 18px 20px; }
  .pane-actions { gap: 10px; margin-bottom: 14px; }

  /* ---- type scale ---- */
  h2 { font-size: 19px; }
  h3.sect { font-size: 12.5px; }
  .boot b { font-size: 17px; }
  .boot span { font-size: 13px; }

  /* ---- buttons: same visual language, comfortable at a mouse ---- */
  .btn { gap: 7px; padding: 10px 16px; min-height: 42px; font-size: 13.5px; }
  /* .btn-sm must still clear the app's own 40px floor: at 36px the UI audit
     flagged 13 sub-floor controls (every header and card button). */
  .btn-sm { padding: 9px 13px; min-height: 40px; font-size: 13px; }
  .icon-btn { width: 40px; height: 40px; }
  [data-seg] { min-height: 42px; font-size: 13.5px; }

  /* ---- cards / lists ---- */
  .list { gap: 12px; }
  .card { padding: 14px 15px; }
  .card-head { gap: 9px; }
  .card-head b { font-size: 15px; }
  .chip { font-size: 11.5px; padding: 3px 9px; }
  .tag { font-size: 11px; padding: 2px 8px; }
  .kv { gap: 5px; }
  .kv > div { gap: 14px; font-size: 13.5px; }
  .card-actions { gap: 8px; }
  .radio-list { gap: 6px; }
  .radio-row { gap: 9px; font-size: 13px; padding: 5px 6px; }
  .rr-meta { font-size: 12px; }
  .empty-state { gap: 6px; padding: 26px 20px; font-size: 13.5px; }

  /* ---- settings & forms ---- */
  .setting { padding: 14px 15px; }
  .setting h3 { font-size: 12.5px; }
  .field { font-size: 13px; }
  .field input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=submit]):not([type=button]),
  .field select, .field textarea,
  .user-reset input {
    padding: 10px 11px; min-height: 42px; font-size: 14px;
  }
  .user-reset input { min-height: 38px; }
  .field .val { font-size: 12.5px; }
  .field > .switch-row { gap: 12px; min-height: 46px; }
  .switch-lbl { font-size: 12.5px; }
  span.switch { width: 64px; height: 32px; }
  .switch .knob { width: 24px; height: 24px; }
  .switch-input:checked ~ span.switch .knob { transform: translateX(32px); }
  .check { gap: 10px; font-size: 13.5px; }
  .check input { width: 17px; height: 17px; }
  .hint { font-size: 12.5px; }
  .hint-inline { font-size: 11.5px; }
  .row-2 { gap: 10px; }
  .grid-2, .grid-3 { gap: 0 18px; }
  .calc { padding: 12px 13px; }
  .calc > div { gap: 14px; font-size: 13.5px; padding: 3px 0; }
  .progress-line { font-size: 12.5px; min-height: 16px; }

  /* ---- dialogs: real desktop dialogs ---- */
  .modal-content { max-width: 760px; }
  .modal-content.narrow { max-width: 520px; }
  .modal-content.wide { max-width: 980px; }
  .modal-head { gap: 10px; padding: 15px 18px; }
  .modal-sub { font-size: 12.5px; }
  .modal-body { padding: 20px 22px; }
  .modal-actions { gap: 10px; padding: 12px 0 4px; }
  .confirm-text { font-size: 14.5px; }

  /* ---- map furniture ---- */
  .map-left-stack { gap: 8px; }
  .map-readout { gap: 3px; padding: 8px 11px; font-size: 12px; }
  .units-btn { min-height: 42px; padding: 9px 14px; font-size: 12.5px; }
  .pin-text { padding: 4px 10px; font-size: 12.5px; }
  .pin-text span { font-size: 11.5px; }
  .pin-dot { width: 15px; height: 15px; }
  .pick-bar { gap: 12px; padding: 11px 16px; font-size: 13.5px; }
  .maplibregl-ctrl-group button { width: 44px !important; height: 44px !important; }
  .maplibregl-ctrl-attrib { font-size: 11px; }

  /* ---- feedback ---- */
  .toast { padding: 11px 15px; font-size: 14px; max-width: 520px; }
  .sync-chip { gap: 9px; padding: 8px 14px; font-size: 12.5px; }
  .sync-dot { width: 9px; height: 9px; }

  /* ---- studies / findings ---- */
  .findings-summary { gap: 9px; }
  .sev { padding: 10px; }
  .sev b { font-size: 21px; }
  .sev span { font-size: 11px; }
  .sev-pill { font-size: 10.5px; padding: 3px 8px; }
  .finding { padding: 12px 13px; }
  .finding-head { gap: 9px; }
  .finding-head b { font-size: 14px; }
  .finding-detail { font-size: 13.5px; }
  .finding-meta { font-size: 12px; }
  .finding-advice { font-size: 13px; }
  .study { padding: 12px 13px; }
  .study-head { gap: 9px; }
  .profile-svg { height: 340px; }   /* more chart, more detail, on a big screen */
  .search-results { gap: 8px; }
  .search-hit { padding: 10px 12px; }
  .search-hit b { font-size: 14px; }
  .search-hit span { font-size: 12.5px; }

  /* ---- auth gate ---- */
  .auth-card { max-width: 440px; padding: 30px 26px 22px; }
  .auth-title { font-size: 24px; }
  .auth-sub { font-size: 12px; }
  .auth-error { padding: 10px 12px; font-size: 13.5px; }
  .auth-foot { font-size: 12.5px; }
}

/* ---------- ≥1440px: large desktop — use the extra room, don't just centre it ---------- */
@media (min-width: 1440px) {
  html, body { font-size: 16px; }

  .panel { flex: 0 0 500px; width: 500px; }
  .tab-pane { padding: 22px 24px; }
  .tab-btn { padding: 12px 17px; font-size: 14px; }

  .card { padding: 16px 17px; }
  .kv > div { font-size: 14px; }
  .setting { padding: 16px 17px; }

  .modal-content { max-width: 820px; }
  .modal-content.narrow { max-width: 560px; }
  .modal-content.wide { max-width: 1100px; }
  .modal-body { padding: 24px 26px; }

  .profile-svg { height: 400px; }
  .field input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=submit]):not([type=button]),
  .field select, .field textarea { min-height: 44px; font-size: 14.5px; }
  .btn { min-height: 44px; font-size: 14px; }
  h2 { font-size: 20px; }
}

/* ---------- ≥1800px: dim the welcome mat, keep line lengths readable ---------- */
@media (min-width: 1800px) {
  .panel { flex: 0 0 540px; width: 540px; }
  .tab-pane { padding: 24px 28px; }
  .modal-content.wide { max-width: 1200px; }
  .profile-svg { height: 440px; }
}