/* ============================================================================
   mobile.css - the mobile presentation layer.
   Loaded after app.css, contains ONLY narrow-viewport / touch rules, so the
   desktop layout stays exactly as it is.

   Design: the fixed right-hand panel becomes a bottom sheet (a phone has no
   spare horizontal axis but plenty of vertical), the chrome compacts to a single
   top row, the legend collapses to a chip, and the map gets bottom padding equal
   to the sheet height so a selected suburb is never hidden behind it.

   iOS / Android specifics handled here:
   - svh (small viewport height) for anything anchored to the bottom, falling back
     to vh: iOS Safari's toolbar and Chrome Android's URL bar both shrink the
     visible area and plain vh is the LARGE height, so a vh-sized sheet starts
     life partly under the browser chrome.
   - env(safe-area-inset-*) on all four edges (needs viewport-fit=cover, which
     index.html sets) for the notch, the home indicator and landscape cutouts.
   - 16px minimum font on the search field: iOS Safari zooms the whole page when a
     focused input is smaller than that, and it never zooms back out.
   - 44px minimum touch targets, tap-highlight suppression and text-size-adjust
     live in app.css so they apply on any viewport.
   ========================================================================== */

/* Phones by width, and any coarse-pointer device up to tablet width: a phone in LANDSCAPE is
   ~844px wide and would otherwise fall into the desktop layout with 9px buttons and a 352px
   sidebar. Touch-friendliness should follow the input device, not just the width. */
@media (max-width: 760px), (pointer: coarse) and (max-width: 1024px) {

  /* ---------- chrome: one compact row, clear of the notch ---------- */
  .brand {
    top: calc(10px + env(safe-area-inset-top, 0px));
    left: calc(12px + env(safe-area-inset-left, 0px));
    gap: 9px;
  }
  .brand-mark { width: 26px; height: 26px; flex: 0 0 26px; border-radius: 7px; font-size: 10px; }
  .brand h1 { font-size: 13.5px; letter-spacing: 0; }
  .brand p { display: none; }

  .topbar {
    top: calc(50px + env(safe-area-inset-top, 0px));
    left: calc(12px + env(safe-area-inset-left, 0px));
    right: calc(12px + env(safe-area-inset-right, 0px));
    gap: 8px;
  }
  .search { flex: 1 1 auto; min-width: 0; }
  /* 16px, not 15: below 16px iOS Safari zooms the page on focus and keeps it zoomed. */
  #q { width: 100%; padding: 12px 14px; font-size: 16px; min-height: 44px; }

  .results {
    left: 0; right: 0; width: auto;
    max-height: 340px; max-height: 46vh;
    overscroll-behavior: contain;         /* scroll the list, not the page behind it */
  }
  @supports (height: 100svh) { .results { max-height: 46svh; } }
  .results .row { padding: 12px 14px; min-height: 44px; font-size: 14px; }
  .results .row i { font-size: 12px; }

  .seg { flex: 0 0 auto; }
  .seg button { padding: 12px 13px; font-size: 12.5px; min-height: 44px; }
  /* app.css parks the topbar at the BOTTOM of the screen while the panel is open
     (body.panel-open .topbar{top:auto;bottom:16px}, ≤820px) — on a phone the sheet then covers it
     and the search box vanishes. Same specificity, later stylesheet: reset the anchoring. */
  body.panel-open .topbar {
    top: calc(50px + env(safe-area-inset-top, 0px));
    bottom: auto;
    left: calc(12px + env(safe-area-inset-left, 0px));
    right: calc(12px + env(safe-area-inset-right, 0px));
  }

  /* ---------- legend: compact, below the top row ---------- */
  .legend {
    left: calc(12px + env(safe-area-inset-left, 0px));
    right: calc(12px + env(safe-area-inset-right, 0px));
    bottom: auto;
    top: calc(104px + env(safe-area-inset-top, 0px));
    width: auto; padding: 9px 11px; border-radius: 11px;
  }
  .legend-title { font-size: 9.5px; margin-bottom: 6px; letter-spacing: .1em; }
  .legend-bar { height: 7px; }
  .legend-ticks { font-size: 9.5px; margin-top: 4px; }
  .legend-note { display: none; }

  /* ---------- panel -> bottom sheet ---------- */
  .panel {
    position: fixed;
    top: auto; left: 0; right: 0; bottom: 0;
    width: 100%; max-width: 100%;
    height: auto;
    max-height: 64vh;
    padding: 8px 16px calc(16px + env(safe-area-inset-bottom, 0px));
    border-left: 0;
    border-top: 1px solid var(--line-strong);
    border-radius: 18px 18px 0 0;
    box-shadow: 0 -18px 48px rgba(0,0,0,.6);
    /* The sheet sits over live map content and carries 11–12 px text, so it keeps a little more
       body than the desktop sidebar; same blur, plus the -webkit- form for iOS. */
    background: linear-gradient(180deg, rgba(9,13,18,.88), rgba(9,13,18,.80));
    -webkit-backdrop-filter: blur(26px) saturate(1.15);
    backdrop-filter: blur(26px) saturate(1.15);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;    /* iOS momentum scrolling (legacy but harmless) */
    overscroll-behavior: contain;         /* don't hand the scroll to the page / pull-to-refresh */
    animation: sheet-up .26s cubic-bezier(.22,.7,.28,1);
  }
  @supports (height: 100svh) { .panel { max-height: 64svh; } }
  @keyframes sheet-up {
    from { transform: translateY(18px); opacity: .6; }
    to   { transform: translateY(0);    opacity: 1; }
  }
  /* grab handle */
  .panel::before {
    content: "";
    position: sticky; top: 0;
    display: block;
    width: 38px; height: 4px; margin: 0 auto 10px;
    border-radius: 2px;
    background: rgba(255,255,255,.22);
  }

  .panel-close {
    top: 8px; right: calc(10px + env(safe-area-inset-right, 0px));
    width: 44px; height: 44px;          /* touch target */
    font-size: 22px;
  }
  .panel-head { padding-right: 52px; }
  .eyebrow { font-size: 10px; }
  .panel-head h2 { font-size: 20px; }

  .estimate { margin: 12px 0 10px; padding: 12px 0 11px; }
  .est-value { font-size: 42px; }
  .est-label { font-size: 10px; margin-top: 5px; }
  .est-ci { font-size: 12.5px; }

  .rankline { font-size: 12.5px; }
  .drivers { margin: 13px 0 4px; padding-top: 13px; }
  .drv { margin-bottom: 11px; }
  .drv-track { height: 6px; }         /* slightly heavier for fingers to read */
  .drv-head { margin-bottom: 9px; }
  .foot-row { font-size: 12.5px; padding: 6px 0; }
  .disclaimer { font-size: 10.5px; margin-top: 12px; }

  /* ---------- misc ---------- */
  .hovercard { display: none !important; }   /* no hover on touch */
  .attrib { display: none; }
  .maplibregl-ctrl-bottom-right {
    bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    right: calc(10px + env(safe-area-inset-right, 0px));
  }
  body.panel-open .maplibregl-ctrl-bottom-right { display: none; }
  .loading { font-size: 12.5px; }
}

/* ---------- very short screens (landscape phones) ---------- */
@media (max-width: 760px) and (max-height: 460px), (pointer: coarse) and (max-height: 460px) {
  .legend { display: none; }
  .panel { max-height: 70vh; }        /* keep some map visible in landscape */
  .est-value { font-size: 34px; }
  @supports (height: 100svh) { .panel { max-height: 70svh; } }
}

/* ---------- touch-specific behaviour, independent of width ---------- */
@media (pointer: coarse) {
  .hovercard { display: none !important; }
  .seg button { min-height: 44px; }
  .panel-close { min-width: 44px; min-height: 44px; }
  .results .row { min-height: 44px; }
  /* A 26px backdrop blur over a live WebGL canvas is expensive on phone GPUs (iOS in
     particular drops frames while the map moves behind the sheet); 18px looks the same. */
  .panel {
    -webkit-backdrop-filter: blur(18px) saturate(1.15);
    backdrop-filter: blur(18px) saturate(1.15);
  }
}