/* =====================================================================
   MOBILE / TOUCH OVERRIDES — loaded after style.css, wins the cascade
   without !important. Three axes, all inert on desktop:
     1. @supports (height: 100dvh)  — dvh == vh everywhere except mobile
        browsers with a collapsing URL bar (the reason it exists).
     2. env(safe-area-inset-*)      — 0px on non-notched devices.
     3. @media (pointer: coarse) /  — never matches a mouse-driven desktop.
        @media (max-width: 700px)     matches the app's existing breakpoint.
   Desktop rendering must be pixel-identical: anything that would change a
   wide-viewport mouse layout is scoped under axis 3.
   ===================================================================== */

/* ── 1. Dynamic-viewport heights ───────────────────────────────────────
   iOS Safari's URL bar shrinks the visual viewport but 100vh keeps the
   URL-bar-hidden height, clipping the bottom of every capped panel.
   Same selectors as style.css so the later file wins on equal specificity. */
@supports (height: 100dvh) {
  #about-us,
  #aq-hub,
  #aq-module,
  #encyclopedia {
    max-height: calc(100dvh - 250px);
  }
  #profile-dropdown,
  #city-expand-panel {
    max-height: calc(100dvh - 100px);
  }
  #home-panel #home-menu,
  section.menu-screen.sd-fixed {
    max-height: calc(100dvh - 160px);
  }
  .country-compare-panel,
  .geo-compare-panel {
    max-height: 86dvh;
  }
  .geo-card {
    max-height: 82dvh;
  }
  .countries-locate-result-box {
    max-height: calc(100dvh - 80px);
  }
  .adjacent-panel {
    max-height: calc(100dvh - 28px);
  }
  .borders-panel {
    max-height: calc(100dvh - 82px);   /* sits below the admin pill bar */
  }
}

/* ── Globe touch gestures ──────────────────────────────────────────────
   The canvas owns its touch gestures (drag/pinch handled in globe.js);
   touch-action never affects mouse input. DOM overlays above the canvas
   keep their default touch-action so lists still scroll natively.
   overscroll-behavior stops rubber-band/pull-to-refresh chaining while
   dragging the globe; it does not prevent normal page scrolling. */
#globe-canvas {
  touch-action: none;
}
html,
body {
  overscroll-behavior: none;
}

/* ── 2. Safe-area insets (notch / home indicator) ──────────────────────
   viewport-fit=cover is set in index.html; env() resolves to 0 elsewhere. */
#top-left-bar {
  top: calc(20px + env(safe-area-inset-top, 0px));
  left: calc(20px + env(safe-area-inset-left, 0px));
}
#cookies-banner {
  padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px));
}
.explore-right-panel {
  top: calc(12px + env(safe-area-inset-top, 0px));
  right: calc(12px + env(safe-area-inset-right, 0px));
  bottom: calc(12px + env(safe-area-inset-bottom, 0px));
}
#countries-exam-header {
  top: calc(14px + env(safe-area-inset-top, 0px));
}
#countries-exam-dock {
  bottom: calc(22px + env(safe-area-inset-bottom, 0px));
}
.adjacent-panel,
.borders-bar {
  top: calc(14px + env(safe-area-inset-top, 0px));
  right: calc(16px + env(safe-area-inset-right, 0px));
}
.borders-panel {
  top: calc(68px + env(safe-area-inset-top, 0px));   /* below the admin pill bar */
  right: calc(16px + env(safe-area-inset-right, 0px));
}

/* ── 3a. Touch-capability overrides — never match on desktop ─────────── */
@media (pointer: coarse) {

  /* iOS zooms the page when a focused control's font-size is under 16px
     and never zooms back out. Higher-specificity style.css rules
     (.auth-modal-content input 0-1-1, #ency-search 1-0-0) are matched
     explicitly so this wins without !important. */
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  select,
  textarea,
  .auth-modal-content input,
  .explore-search-input,
  #ency-search,
  .ency-filter-input,
  #explore-search {
    font-size: 16px;
  }

  /* Keyboard covers a vertically-centered modal — pin it to the top third. */
  .auth-modal {
    align-items: flex-start;
    padding-top: 10vh;
    box-sizing: border-box;
  }

  /* Tap targets: 24px tool buttons up to 40px. */
  .explore-tool-btn {
    width: 40px;
    height: 40px;
    font-size: 1rem;
  }

  /* Invisible hit-area expansion on small close/clear buttons — the pseudo
     element hit-tests to its originating button, no visual change. All of
     these are already position:absolute in style.css. */
  .geo-card-close-btn::after,
  .ccp-close::after,
  .ccl-close::after,
  .geo-compare-close::after,
  .cep-close::after,
  .explore-card-close-btn::after,
  .explore-search-clear::after,
  .ency-search-clear::after {
    content: "";
    position: absolute;
    inset: -10px;
  }
  .theme-switch::after {
    content: "";
    position: absolute;
    inset: -8px;
  }
  .logged-out-auth-btn {
    position: relative;
  }
  .logged-out-auth-btn::after {
    content: "";
    position: absolute;
    inset: -10px;
  }

  /* Touch has no hover feedback — give buttons a visible press-down. */
  .glass-btn:active,
  .btn-primary:active,
  .answer-option:active,
  .explore-tool-btn:active,
  .profile-menu-item:active {
    transform: scale(0.97);
  }

  /* style.css sets touch-action:none on the whole home panel (drag surface),
     which swallows scroll swipes on a tall menu. pan-y hands vertical swipes
     back to native scrolling; the drag JS (menu-drag.js / submenu-drag.js)
     only starts touch drags from the handles below. */
  #home-panel,
  section.menu-screen.sd-fixed {
    touch-action: pan-y;
  }
  /* Touch drag handles: #site-header drags the home panel (or the active
     submenu); .sd-handle is the h2/module header inside each submenu panel
     (class added by submenu-drag.js initEl). #site-header is already
     touch-action:none in style.css. */
  .sd-handle {
    touch-action: none;
  }
}

/* ── Low-tier blur reduction — html.aq-reduce-fx set by device-tier.js ──
   ~50 simultaneous backdrop-filter surfaces are a heavy compositing cost on
   weak GPUs. The glass system reads --glass-blur / --glass-bg everywhere, so
   overriding the variables converts most surfaces at once; the glass tint is
   made near-opaque to preserve legibility without the frost. Components with
   hardcoded blur() values are switched off explicitly below. Never matches on
   desktop (the class requires a low device tier). */
html.aq-reduce-fx {
  --glass-blur: none;
  --glass-bg: rgba(10, 14, 24, 0.88);
}
html.aq-reduce-fx.light-mode {
  --glass-blur: none;
  --glass-bg: rgba(255, 236, 224, 0.92);
}
html.aq-reduce-fx section {
  will-change: auto;
}
html.aq-reduce-fx .country-compare-panel,
html.aq-reduce-fx .geo-compare-panel,
html.aq-reduce-fx .geo-card,
html.aq-reduce-fx .explore-right-panel,
html.aq-reduce-fx .explore-country-card,
html.aq-reduce-fx #city-expand-panel,
html.aq-reduce-fx #countries-exam-header,
html.aq-reduce-fx #countries-exam-dock,
html.aq-reduce-fx .cookies-card,
html.aq-reduce-fx .answer-option,
html.aq-reduce-fx .countries-locate-result-box,
html.aq-reduce-fx .bigger-result-box {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* ── 3b. Narrow-viewport reflow — matches the existing 700px breakpoint ── */
@media screen and (max-width: 700px) {

  /* In-game HUD pill (Ping + title + count + timer + Give Up) is
     content-driven width with no cap — on a 360-430px phone it can exceed
     the viewport. Let it wrap instead of clipping/overflowing; the pill
     shape only reads well on one line, so relax it to a rounded rect when
     wrapped. countries-puzzle.js's _flyOut reads this element's live rect
     for its piece-scatter clear zone, so this reflow is picked up automatically. */
  .puzzle-header {
    max-width: calc(100vw - 40px);
    height: auto;
    min-height: 44px;
    white-space: normal;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.5rem;
    padding: 8px 10px;
    border-radius: 16px;
  }

  /* Fixed-width centered panels overflow a 360-430px screen. min() keeps
     the desktop-tuned width on anything wide enough; border-box makes the
     clamp include padding (no global reset in this codebase — see
     docs/CodingStandards.md). */
  .country-compare-panel {
    width: min(530px, calc(100vw - 24px));
    box-sizing: border-box;
  }
  .geo-compare-panel {
    width: min(480px, calc(100vw - 24px));
    box-sizing: border-box;
  }
  /* content-box min-width:320px + 5rem horizontal padding = ~400px floor. */
  .countries-locate-result-box {
    min-width: 0;
    width: min(400px, calc(100vw - 24px));
    box-sizing: border-box;
    padding: 1.5rem 1.25rem;
  }
  .bigger-result-box {
    min-width: 0;
    width: min(380px, calc(100vw - 24px));
    box-sizing: border-box;
    padding: 1.5rem 1.25rem;
  }
  #city-expand-panel {
    width: min(300px, calc(100vw - 24px));
    box-sizing: border-box;
  }
  .auth-modal-content {
    width: min(320px, calc(100vw - 32px));
    box-sizing: border-box;
  }

  /* Geo compare panel: side-by-side stat columns stay, but the two tall
     peak/country list columns stack — side-by-side they get ~150px each. */
  .geo-compare-list-pair {
    flex-direction: column;
  }
  .geo-compare-list-pair .geo-compare-list-col:first-child {
    direction: ltr;
    padding-left: 0;
    padding-right: 6px;
  }
  .geo-compare-list-col {
    max-height: 150px;
  }

  /* Explore right panel: 272px pinned right leaves a ~90px globe strip on
     phones. Dock it as a bottom sheet instead — globe gets the upper screen. */
  .explore-right-panel {
    top: auto;
    left: 12px;
    right: 12px;
    bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    width: auto;
    max-height: 42vh;
    max-height: 42dvh;
  }

  /* Cookie banner card is desktop-sized. */
  .cookies-card {
    font-size: 1rem;
    padding: 16px 18px;
  }
}