/* MOBILE PASS (PR O, 2026-09-25) — a phone-held demo at 390 px.
 *
 * Loaded by exactly five screens: login, the admin queue, the case file, the
 * one-stop release page and the citizen portal. Nothing here applies above
 * 480 px, so the desktop these pages were designed for is untouched, and no
 * page is restructured: the same markup, three rules applied at phone width.
 *
 *   1. NOTHING OVERFLOWS. A control is never wider than its container
 *      (a <select> sizes itself to its longest option — 509 px on the case
 *      file, which pushed the whole page to 576), media and tables never
 *      wider than the phone; a table scrolls inside its own box.
 *   2. TAP TARGETS ≥ 44 px (Apple HIG). Every button, form control, summary
 *      and stand-alone link is at least 44 px on its shorter side. Links that
 *      sit inside a sentence are left alone — they are read, not aimed at.
 *   3. LEGIBLE WITHOUT ZOOM. Form controls are 16 px (below that iOS zooms
 *      the page on focus, and a demo that jumps is a demo that is over); the
 *      rail's icon labels rise from 11 to 12 px; nothing is under 12 px.
 *
 * Measured, not assumed: e2e/mobile/mobile-audit.spec.js reads scrollWidth,
 * every visible target's box and every text node's font size at 390 px, and
 * fails on any of the three. The before/after frames are in
 * docs/evidence/mobile-pass/.
 */
@media (max-width: 480px) {
  html { -webkit-text-size-adjust: 100%; }
  /* The design system pins its label/meta token at 11 px as the DESKTOP floor
     (kickoff Ground Rule 4). At arm's length on a phone the floor is 12. */
  :root { --gv-text-meta: 12px; }

  /* ── 1. nothing overflows ─────────────────────────────────────────────── */
  img, svg, video, canvas, iframe, pre { max-width: 100%; }
  pre { white-space: pre-wrap; overflow-wrap: anywhere; }
  select,
  textarea,
  input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]) {
    max-width: 100%;
    box-sizing: border-box;
  }
  /* A table keeps its columns and scrolls inside its own box instead of
     widening the page. */
  table { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  /* Long tracking numbers, file names and e-mail addresses break rather than
     push. */
  body { overflow-wrap: anywhere; }
  /* The page-level flex rows that put two things side by side wrap here. */
  .flex.justify-between { flex-wrap: wrap; }
  /* The queue's four stat tiles are a fixed four-column grid (417 px at 390);
     two columns here, and the tile's padding comes down to match. */
  .grid.grid-cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }
  .stat-tile { padding: 1rem; }
  .stat-tile .text-3xl { font-size: 1.5rem; line-height: 2rem; }

  /* ── 2. tap targets ───────────────────────────────────────────────────── */
  button,
  [role="button"],
  select,
  textarea,
  input[type="file"],
  input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]) {
    min-height: 44px;
    min-width: 44px;
    box-sizing: border-box;
  }
  summary { min-height: 44px; box-sizing: border-box; padding-top: 12px; padding-bottom: 12px; }
  input[type="checkbox"], input[type="radio"] { width: 24px; height: 24px; }
  /* A stand-alone link — a nav item, a "Back to…", a card action — is a
     button in all but tag. Links inside prose keep their line. */
  a[href]:not(p a):not(li a):not(td a):not(span a):not(label a):not(small a):not(dd a) {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  /* Stand-alone links the generic rule above cannot reach (they sit in a <p>
     of their own) — a link that is the whole line is a button. */
  #forgotPasswordLink { display: inline-flex; align-items: center; min-height: 44px; }
  /* The chrome's avatar button. */
  .gvc-avatar { width: 44px !important; height: 44px !important; }
  /* Below 768 px the chrome's rail is a bottom tab bar of NINE items, spaced
     around 390 px — 30–41 px each. Nine 44 px targets need 396 px, so the bar
     scrolls sideways inside its own fixed box (it never widens the page); each
     tab is a full 44 px, and the last one is a thumb-flick away. */
  .gvc-rail { justify-content: flex-start !important; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .gvc-rail::-webkit-scrollbar { display: none; }
  .gvc-rail a, .gvc-rail button { min-height: 44px; min-width: 44px; flex: 0 0 auto; justify-content: center; }

  /* ── 3. legible without zoom ──────────────────────────────────────────── */
  select,
  textarea,
  input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]) {
    font-size: 16px !important;
  }
  .gvc-label { font-size: 12px !important; }
  .rl-cat { font-size: 12px !important; }  /* the release page's by-type chips */
  .rl-pill { font-size: 12px !important; }  /* …and its ready/flagged/blocked pill */
  /* The queue card's assignee suggestion — a fact, not a footnote. */
  .assign-suggest, .suggest-accept, .suggest-why { font-size: 12px !important; }
  .gvc-menu__role { font-size: 12px !important; }
}