/* ==========================================================================
   Mobile app layer (docs/mobile/AUDIT.md). Loaded on every route after shell-polish.
   Desktop is untouched: layout rules sit inside (max-width: 760px), the phone breakpoint the shell already uses, and
   tap-target rules inside (pointer: coarse), so a mouse never sees them.
   Body classes come from the mobile-app script in index.html:
     m-focus   a session is on screen (practice question, full test, Survivor run): no site bars, no footer
     m-pq      a practice question is on screen (sticky action bar at the bottom)
   ========================================================================== */

/* ---------- 1. type and touch: every touch screen ---------- */
@media (pointer: coarse) {
  /* 44x44 targets. min-height only, so rows of chips keep their widths */
  :is(.chip, .seg-b, .set-tab, .xo-toggle, .hl-btn, .backbtn, .exitbtn, .fs-btn, .ss-pill, .calc-launch, .game-fs-btn,
      .pm-disclose, .btn-sm, .linkbtn, .flagbtn, .palette-toggle, #pgPrev, #pgNext, .pm-ps-go, .sb-act, .sb-brand, .xo-ref, .xo-head-ref, .hv-tog > button, .lx-seg-ctl > button) { min-height: 44px; }
  .chip { min-width: 44px; }
  :is(.chip, .seg-b, .xo-toggle, .hl-btn, .backbtn, .exitbtn, .fs-btn, .linkbtn, .flagbtn, .palette-toggle, #pgPrev, #pgNext, .pm-ps-go) {
    display: inline-flex; align-items: center; justify-content: center;
  }
  .sb-act.is-acct { min-width: 44px; justify-content: center; padding: 0; }
  #quizArea .pq-dot, #view-test .palette .pnum { min-width: 44px; height: 44px; }
  /* footer link rows: a 44px band per link, same look */
  footer :is(.foot-links, .foot-legal) a { display: inline-flex; align-items: center; min-height: 44px; }
  footer .foot-legal { row-gap: 0; }
  /* switches keep their size; the hit area grows around them */
  button.toggle { position: relative; }
  button.toggle::before { content: ""; position: absolute; inset: -9px -5px; }
  /* no sticky :hover lift after a tap */
  #view-test .palette .pnum:hover { transform: none; }
  /* no double-tap zoom delay on controls */
  :is(button, a, [role=button], .choice, summary) { touch-action: manipulation; }
}

/* ---------- 2. phones: type scale, safe areas, bars ---------- */
@media (max-width: 760px) {
  /* small labels: 12px is the floor (eyebrows, kickers, counters, badges) */
  :is(.glabel, .pm-q-l, .pm-an-k, .pm-an-eyebrow, .pm-tw, .ln-kicker, .ln-weight, .pm-wd-k, .pstat-lbl, .dmeta, .free-badge,
      .tsub, .acc-badge, .scoretxt, .counter, .qlvl, .qskill, .tb-l, #vcount, .pl-kicker, .hud-bar span, .hud-abil, .ln-chip, .lock-badge, .lock-badge span) { font-size: 12px !important; }
  .ms-k { font-size: 11px; }
  /* text inputs at 16px or more: iOS zooms the page into anything smaller */
  :where(input:not([type=checkbox], [type=radio], [type=range], [type=color]), select, textarea) { font-size: max(16px, 1em); }

  /* bars: 12px labels, notch-safe edges */
  body.sb-has-tabs .sb-tab { font-size: 12px; }
  .sb-topbar { padding-left: max(12px, env(safe-area-inset-left)); padding-right: max(12px, env(safe-area-inset-right)); }
  .sb-tabs { padding-left: max(6px, env(safe-area-inset-left)); padding-right: max(6px, env(safe-area-inset-right)); }
  .sb-act { height: 44px; }

  /* More sheet groups (shell-polish.js) */
  .sb-sheet-h { margin: 10px 12px 2px; font: 700 12px/1.2 var(--pm-mono, ui-monospace, monospace); letter-spacing: .12em; text-transform: uppercase; color: var(--muted, #6E6F62); }
  .sb-sheet-h:first-child { margin-top: 2px; }
  .sb-sheet-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px; }
  .sb-sheet-grid .sb-sheet-item { padding: 12px 10px; gap: 10px; font-size: 15.5px; min-height: 48px; }
  .sb-sheet-grid .sb-sheet-item span { min-width: 0; overflow-wrap: anywhere; }

  /* ---- focus mode: nothing but the session ---- */
  body.m-focus .sb-topbar, body.m-focus .sb-tabs, body.m-focus > footer, body.m-focus .kip-fab { display: none !important; }
  body.m-focus main { padding-top: 0 !important; }
  body.m-focus.sb-has-tabs { padding-bottom: 0; }
  body.m-focus main::before, body.m-pq #view-practice > .wrap::before { display: none !important; }
  body.m-focus .kip { display: none !important; }                 /* the mascot; Hint from Kip stays in the action bar */

  /* ---- practice question ---- */
  body.m-pq { padding-bottom: calc(72px + env(safe-area-inset-bottom)) !important; }
  body.m-pq #view-practice > .wrap { padding-left: 10px; padding-right: 10px; }
  body.m-pq #quizArea .practbar {
    position: sticky; top: 0; z-index: 45; display: flex; flex-wrap: nowrap; align-items: center; gap: 8px;
    margin: 0 -10px 8px; padding: calc(6px + env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) 6px max(10px, env(safe-area-inset-left));
    background: var(--paper, #EAEAE3); border-bottom: 1px solid var(--line, #D8D7CB);
  }
  body.m-pq #quizArea .practbar .backbtn { white-space: nowrap; flex: 0 0 auto; padding: 0 12px; }
  body.m-pq #quizArea .practbar .ptitle { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 17px; }
  body.m-pq #quizArea .practbar .calc-launch { flex: 0 0 auto; flex-direction: row; white-space: nowrap; margin-left: 0 !important; padding: 0 12px; min-height: 44px; font-size: 14px; }
  body.m-pq #quizArea .scorebar { margin: 0 0 6px; }
  /* question numbers: one row that scrolls sideways */
  body.m-pq #quizArea .pq-nav {
    flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scrollbar-width: none;
    margin: 0 -10px 10px; padding: 4px 10px 6px; gap: 6px;
  }
  body.m-pq #quizArea .pq-nav::-webkit-scrollbar { display: none; }
  body.m-pq #quizArea .pq-dot { flex: 0 0 auto; min-width: 44px; height: 44px; font-size: 14px; scroll-snap-align: center; }
  /* the card: less nested padding, so answers get the width */
  body.m-pq #quizArea .qshell { margin: 0; border-radius: 16px; }
  body.m-pq #quizArea .qshell :is(.qs-left, .qs-right) { padding: 18px 16px; }
  body.m-pq #quizArea .qshell .qs-right { padding-bottom: 20px; }
  body.m-pq #quizArea .qshell .choice { min-height: 56px; }
  /* the action bar: Flag, Kip, Back, Next always under the thumb */
  body.m-pq #quizArea .qfoot {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; margin: 0;
    display: flex; flex-wrap: nowrap; align-items: center; gap: 6px;
    padding: 8px max(10px, env(safe-area-inset-right)) calc(8px + env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left));
    background: var(--surface, #fff); border-top: 1px solid var(--line, #D8D7CB); box-shadow: 0 -8px 24px rgba(32, 33, 28, .08);
  }
  body.m-pq #quizArea .qfoot .pq-foot-l { flex: 0 0 auto; flex-wrap: nowrap; gap: 2px; }
  body.m-pq #quizArea .qfoot .pq-foot-r { flex: 1 1 auto; flex-wrap: nowrap; justify-content: flex-end; gap: 8px; margin-left: 0; }
  body.m-pq #quizArea .qfoot #restartBtn { display: none; }        /* the same as Exit, which is always in the top bar */
  body.m-pq #quizArea .qfoot #flagQ { padding: 0 10px; white-space: nowrap; font-size: 15px; }
  body.m-pq #quizArea .qfoot .btn { min-height: 48px; padding: 0 16px; white-space: nowrap; }
  body.m-pq #quizArea .qfoot #nextBtn { flex: 1 1 auto; max-width: 220px; justify-content: center; }
  body.m-pq #quizArea .qfoot .kip-ask { width: 44px; min-width: 44px; padding: 0; justify-content: center; border-width: 0; background: none; }
  body.m-pq #quizArea .qfoot .kip-ask > span:not(.kip-ask-i) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  body.m-pq .ss:not(.in-test) { display: none; }                   /* sounds: from the More sheet, Settings, or a test's bar */
  body.m-pq #toast { bottom: calc(84px + env(safe-area-inset-bottom)) !important; }

  /* ---- full test ---- */
  body.test-mode .sb-topbar { display: none !important; }
  body.test-mode main { padding-top: 0 !important; }
  body.test-mode #view-test .runbar { padding-top: calc(6px + env(safe-area-inset-top)); padding-bottom: 6px; }
  body.test-mode #view-test .runbar .wrap { gap: 6px; padding-left: max(10px, env(safe-area-inset-left)); padding-right: max(10px, env(safe-area-inset-right)); }
  body.test-mode #view-test .runbar .ss-slot { margin-left: 0; }
  body.test-q #view-test .navrow {
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 8px;
    padding: 8px max(10px, env(safe-area-inset-right)) calc(8px + env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left));
  }
  body.test-q #view-test .navrow > div { display: flex; gap: 8px; }
  body.test-q #view-test .navrow .flagbtn { padding: 0 12px; white-space: nowrap; }
  body.test-q #view-test .navrow .palette-toggle {
    justify-self: center; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line, #D8D7CB);
    color: var(--ink, #20211C); background: var(--surface, #fff); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
  }
  body.test-q #view-test .navrow .btn { min-height: 48px; padding: 0 16px; white-space: nowrap; }
  body.test-q #toast { bottom: calc(80px + env(safe-area-inset-bottom)) !important; }
  body.test-q #view-test .qshell .qs-right { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
  /* the question navigator as a sheet above the bar */
  body.test-q #view-test .palette.on {
    left: 8px; right: 8px; transform: none; width: auto; bottom: calc(74px + env(safe-area-inset-bottom));
    max-height: 58vh; border-radius: 18px; padding: 16px max(14px, env(safe-area-inset-right)) 18px max(14px, env(safe-area-inset-left));
    display: grid; grid-template-columns: repeat(auto-fill, minmax(48px, 1fr)); gap: 8px; justify-content: stretch;
    box-shadow: 0 -18px 50px rgba(27, 27, 24, .22);
  }
  body.test-q #view-test .palette.on .pnum { width: auto; height: 48px; font-size: 15px; }
  body.test-q #view-test .palette.on > :not(.pnum) { grid-column: 1 / -1; }

  /* ---- math and figures: wide things scroll inside their box, never the page ---- */
  :is(#quizArea, #view-test, .arena-overlay, #view-learn) :is(.katex-display, .mjx-display) { overflow-x: auto; overflow-y: hidden; max-width: 100%; padding-bottom: 2px; }
  :is(#quizArea, #view-test, .arena-overlay) .qshell .qtable-wrap { max-width: 100%; overflow-x: auto; }
  :is(#quizArea, #view-test, .arena-overlay) .qshell :is(svg, img):not(.key svg) { max-width: 100%; height: auto; }
  .m-zoomable { position: relative; cursor: zoom-in; }
  .m-zoomable::after { content: "⤢"; position: absolute; top: 6px; right: 6px; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 8px;
    background: rgba(32, 33, 28, .66); color: #fff; font-size: 17px; line-height: 1; pointer-events: none; }
}

/* the enlarge view for graphs, tables and figures (any width: it is opened only from a phone) */
.m-zoom { position: fixed; inset: 0; z-index: 400; display: flex; flex-direction: column; background: var(--surface, #fff); }
.m-zoom-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: calc(8px + env(safe-area-inset-top)) 12px 8px; border-bottom: 1px solid var(--line, #D8D7CB); }
.m-zoom-bar b { font-size: 16px; font-weight: 600; }
.m-zoom-bar button { min-height: 44px; padding: 0 16px; border-radius: 10px; border: 1px solid var(--line, #D8D7CB); background: var(--surface, #fff); color: var(--ink, #20211C); font-size: 15px; font-weight: 600; }
.m-zoom-body { flex: 1 1 auto; overflow: auto; touch-action: pan-x pan-y pinch-zoom; padding: 16px 12px calc(16px + env(safe-area-inset-bottom)); display: flex; }
.m-zoom-body > * { margin: auto; }
.m-zoom-body > :is(svg, img) { width: 100%; max-width: none; height: auto; }
.m-zoom-body > table { font-size: 16px; }
.m-zoom-zoom > :is(svg, img) { width: 200%; }

/* ---------- 3. PEAK Survivor on a phone: the run fills the screen (the game's own full-window mode) ---------- */
@media (max-width: 760px) {
  #gamesArea.game-fs-fake { padding: calc(6px + env(safe-area-inset-top)) max(6px, env(safe-area-inset-right)) calc(6px + env(safe-area-inset-bottom)) max(6px, env(safe-area-inset-left)); }
  #gamesArea.game-fs-fake .arena-hud { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; align-items: center; margin-bottom: 4px; }
  #gamesArea.game-fs-fake .arena-hud .hud-left { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4px 6px; width: auto; min-width: 0; }
  #gamesArea.game-fs-fake .arena-hud .hud-bar { margin: 0; height: 16px; }
  #gamesArea.game-fs-fake .arena-hud :is(.hud-abil, .hud-ult) { margin: 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  #gamesArea.game-fs-fake .arena-hud .hud-ult { padding-top: 3px; padding-bottom: 3px; }
  #gamesArea.game-fs-fake .arena-hud .hud-right { display: flex; flex-direction: column; align-items: flex-end; gap: 0; font-size: 12px; line-height: 1.25; }
  #gamesArea.game-fs-fake .arena-objbar { margin: 0 0 4px; }
  #gamesArea.game-fs-fake .arena-stage { border-radius: 12px; }
}

/* narrow phones: the navigator button reads "▦ 12 / 27" */
@media (max-width: 430px) {
  body.test-q #view-test .navrow .palette-toggle .pt-w { display: none; }
}
/* Back is an arrow on narrow phones (the button keeps its text for screen readers) */
@media (max-width: 400px) {
  :is(body.test-q #view-test .navrow, body.m-pq #quizArea .qfoot) #prevBtn { font-size: 0; min-width: 48px; padding: 0 14px; }
  :is(body.test-q #view-test .navrow, body.m-pq #quizArea .qfoot) #prevBtn::before { content: "←"; font-size: 20px; line-height: 1; }
}
@media (max-width: 360px) {
  body.test-mode #view-test .runbar .fs-btn { display: none; }      /* phone browsers rarely allow it; the test already fills the screen */
  body.test-mode #view-test .runbar .timer { font-size: 19px; padding-left: 10px; padding-right: 10px; }
  body.m-pq #quizArea .practbar .ptitle { display: none; }
  body.m-pq #quizArea .practbar .hl-wrap { margin-left: auto; }
}

/* Peak Defense / Peak Hoover top bar on a phone: title, then Full screen (an icon) and Back */
@media (max-width: 480px) {
  .collapse-overlay .collapse-bar { gap: 8px; padding-left: max(10px, env(safe-area-inset-left)); padding-right: max(10px, env(safe-area-inset-right)); padding-top: env(safe-area-inset-top); }
  .collapse-overlay .collapse-sub { display: none; }
  .collapse-overlay .collapse-title { white-space: nowrap; font-size: 17px; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .collapse-overlay .game-bar-btns { margin-left: auto; }
  .collapse-overlay .game-fs-btn { font-size: 0; min-width: 44px; padding: 0 12px; }
  .collapse-overlay .game-fs-btn::before { content: "⛶"; font-size: 18px; line-height: 1; }
  .collapse-overlay .game-fs-btn[aria-pressed="true"]::before { content: "⤢"; }
}
@media (max-width: 760px) {
  /* PEAK Survivor: 44px pause and exit, readable tutorial labels */
  .arena-stage .sv-tbtn.sv-pause, .arena-stage #aExit { min-height: 44px; min-width: 44px; }
  .arena-stage .ptut-skip { min-height: 44px; }
  .arena-stage .game-fs-btn { min-height: 44px; }
}

/* Passage / Question jump for long passages (mobile-app script) */
.m-jump { display: none; }
@media (max-width: 760px) {
  body:is(.m-pq, .test-q) .m-jump:not([hidden]) {
    display: inline-flex; align-items: center; position: fixed; z-index: 61; right: max(12px, env(safe-area-inset-right));
    bottom: calc(78px + env(safe-area-inset-bottom)); min-height: 44px; padding: 0 16px; border: 0; border-radius: 999px;
    background: var(--ink, #20211C); color: var(--paper-2, #F3F2EC); font-size: 14px; font-weight: 600; box-shadow: 0 8px 24px rgba(32, 33, 28, .28);
  }
  body.m-pq .calc-panel.min { bottom: calc(80px + env(safe-area-inset-bottom)) !important; }
}

@media (pointer: coarse) { #view-duel .dl-q .dl-actions .dl-hint { display: none; } }   /* keyboard keys */
/* Duels: a question on screen keeps the top bar (the way out) but drops the tabs and footer; Lock it in stays in reach */
@media (max-width: 760px) {
  body.m-duel .sb-tabs, body.m-duel > footer { display: none !important; }
  body.m-duel.sb-has-tabs { padding-bottom: 0; }
  body.m-duel #view-duel .dl-q .dl-actions {
    position: sticky; bottom: 0; z-index: 5; margin-left: -16px; margin-right: -16px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
    background: var(--surface, #fff); border-top: 1px solid var(--line, #D8D7CB);
  }
  body.m-duel #view-duel .dl-q .dl-actions .dl-primary { min-height: 48px; width: 100%; }
  body.m-duel #view-duel .dl-q .dl-actions { background: var(--dl-surface, var(--surface, #fff)); }
  body.m-duel #view-duel .dl-choice { min-height: 56px; }
}

/* keyboard open (mobile-app script sets --m-kb to its height): bars sit on top of it */
@media (max-width: 760px) {
  body.m-kbd.m-pq #quizArea .qfoot, body.m-kbd.test-q #view-test .navrow { bottom: var(--m-kb, 0px); padding-bottom: 8px; }
  body.m-kbd .m-jump { display: none !important; }
}

/* Peak Plan on a phone: today's session comes right after the countdown, last week's review after it (order only) */
@media (max-width: 760px) {
  #planRoot:has(> .pl-today):has(> .pl-review) { display: flex; flex-direction: column; }
  #planRoot:has(> .pl-today) > .pl-review { order: 1; }
  #planRoot:has(> .pl-today) > .pl-score { order: 2; }
}