/* ============================================================================
   20/20 (SiteVoice) — shared foundation.

   Linked FIRST in every page, before that page's own <style>, so page rules win
   on equal specificity without needing !important. Order matters: see the
   comment on each page's <link>.

   Scope note: supervisor.html does NOT link this file yet (pass 2). Everything
   here is written so that it can, without breaking that page — hence no
   @media print block and no bare `svg` rule. Both would collide with it.
   ========================================================================== */

:root {
  /* ---- type ---------------------------------------------------------------
     The root font-size is deliberately left at the browser default (see the
     `html` rule below), so every rem here tracks:
       - the browser's default-font-size setting (Chrome desktop, Android, Firefox)
       - Android's system font scale
       - page zoom, everywhere
     Note iOS Dynamic Type does NOT resize ordinary web text — it only affects
     `font: -apple-system-body`. On iOS the lever that works is page zoom, which
     is why worker.html must not pin maximum-scale.

     Numeric scale rather than t-shirt sizes: supervisor.html carries ~140 sizes
     on a half-pixel grid (10.5/11/11.5/12/13/13.5/14/14.5/15…) and will need a
     lossless mapping onto this in pass 2. */
  --fs-100: .75rem;      /* 12 — UPPERCASE micro-chips only, never sentences */
  --fs-200: .8125rem;    /* 13 — the floor for prose. Replaces 11 and 11.5    */
  --fs-300: .875rem;     /* 14 — meta, hints, captions                        */
  --fs-400: .9375rem;    /* 15 — secondary copy                               */
  --fs-500: 1rem;        /* 16 — body                                         */
  --fs-600: 1.0625rem;   /* 17 — primary action label                         */
  --fs-700: 1.125rem;    /* 18                                                */
  --fs-800: 1.1875rem;   /* 19 — card headings, wordmark                      */
  --fs-900: 1.3125rem;   /* 21                                                */

  /* Display sizes are the only fluid ones, and BOTH bounds are rem on purpose.
     A clamp with px bounds would cancel the user's text-size setting outright:
     someone on a 24px base would be clamped straight back down to the ceiling.
     With rem bounds a large base still yields a large heading, and the vw term
     only steers between them (~2px of travel across the phone range). */
  --fs-d1: clamp(1.4375rem, 1.36rem + .40vw, 1.5625rem);  /* 23 → 25 */
  --fs-d2: clamp(1.5rem,    1.40rem + .50vw, 1.6875rem);  /* 24 → 27 */
  --fs-d3: clamp(1.625rem,  1.45rem + .80vw, 2rem);       /* 26 → 32 */

  --lh-tight: 1.2;  --lh-snug: 1.3;  --lh-base: 1.5;  --lh-loose: 1.6;

  /* "Inter" was in the old stacks but is never loaded — no @font-face, no font
     file, no <link> anywhere in the repo — so it only ever applied for the few
     users with Inter installed locally, making rendering less consistent rather
     than more. Dropped, with real fallbacks added in its place. */
  --font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
             "Helvetica Neue", Arial, sans-serif;
  --font-display: Georgia, "Times New Roman", serif;

  /* ---- space --------------------------------------------------------------
     rem, so vertical rhythm and control padding breathe with the user's text. */
  --sp-1: .25rem;  --sp-2: .5rem;   --sp-3: .75rem;  --sp-4: 1rem;
  --sp-5: 1.25rem; --sp-6: 1.5rem;  --sp-8: 2rem;    --sp-10: 2.5rem;

  /* The page gutter is px on purpose: it is a device constant, not a
     typographic one. In rem, a 24px-base user would surrender 24px of a 320px
     screen to margins. */
  --gutter: clamp(16px, 4.5vw, 28px);

  /* Also px on purpose: 44px is a FINGER. Fingers do not get bigger when you
     raise your font size. It does scale under page zoom, which is correct.
     Keeping it px is also what keeps .mic a circle — in rem, a large base would
     push min-height past its 58px width and turn it into an ellipse. */
  --tap: 44px;

  --r-sm: 8px; --r-md: 10px; --r-lg: 12px; --r-xl: 16px;

  /* ---- colour -------------------------------------------------------------
     A superset of all five pages, so supervisor.html can adopt this file whole
     in pass 2.

     These MUST stay on :root. worker.html's open_() reads them off
     document.documentElement to colour the Send button:
       getComputedStyle(document.documentElement).getPropertyValue('--green')
     Move them to body or a class and the Send button goes transparent. */
  --paper:      #FAF8F4;   /* action surfaces: launcher, login, worker        */
  --paper-read: #F7F5F0;   /* reading surfaces: about, supervisor            */
  --card:       #FFFFFF;
  --ink:        #1A1A18;
  --mut:        #6B6862;
  --faint:      #9B9790;
  --line:       #E4E0D8;   /* borders only — never text (1.3:1 on white)     */
  --wash:       #EFEBE2;
  --accent:     #1F4E46;
  --green:      #3F7A5E;
  --red:        #B0533F;
  --amber:      #B08A3F;
  --au: #1F4E46;  --uk: #2F4A6E;  --iso: #6E2F55;
  --on-accent:  #FFFFFF;   /* replaces the hardcoded #fff on coloured fills  */

  /* Declares the light-only intent explicitly, which stops Android WebView
     force-dark and iOS control auto-darkening from improvising — most visibly
     by inverting form fields into white-on-white. The QR entry path lands in a
     WebView, so this is not hypothetical. */
  color-scheme: light;
}

/* ---- reset ---------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  /* Stops iOS inflating text in landscape. Never `none` — that breaks pinch
     zoom scaling and is the WCAG 1.4.4 trap. */
  -webkit-text-size-adjust: 100%;
          text-size-adjust: 100%;
  /* Branded rather than transparent: `transparent` removes all touch feedback
     from plain text links, which the :active transforms on buttons don't cover. */
  -webkit-tap-highlight-color: rgba(31, 78, 70, .15);
  /* No font-size here, deliberately. Setting one — in px OR in clamp() —
     silently overrides the user's browser default-font-size setting, which is
     the single most important accessibility lever on the platform. */
}

body {
  font-family: var(--font-ui);
  font-size: var(--fs-500);
  line-height: var(--lh-base);
  color: var(--ink);
  background: var(--paper);
  /* Gentle: only breaks a word when it genuinely cannot fit. `anywhere` is
     applied surgically where arbitrary user text is rendered. */
  overflow-wrap: break-word;
}

/* Scoped to img/video on purpose. A bare `svg { max-width:100%; height:auto }`
   would distort supervisor.html's fixed-ratio timeline SVGs in pass 2. */
img, video { max-width: 100%; height: auto; }

/* ---- form controls --------------------------------------------------------
   Nothing in this app inherited the UI font before this rule, so every <button>
   computed to Arial and every <input>/<textarea> to the UA control font. Two
   pages also carried `font: 16px inherit`, which is invalid — `inherit` is not
   a legal family inside the shorthand, so the whole declaration was dropped and
   those fields rendered at ~13.3px monospace. This is the fix for both. */
button, input, select, textarea, optgroup {
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
}

/* iOS Safari zooms the viewport whenever a focused control computes under 16px,
   and does not zoom back out afterwards. 1rem is normally 16px — but a user who
   SHRANK their base would fall under it and get the zoom back. max() pins the
   floor while still growing with a large base. The bare 1rem is the fallback for
   engines without max(); everything we target has it (Safari 11.1+). */
input, select, textarea {
  font-size: 1rem;
  font-size: max(1rem, 16px);
}

/* Text fields only. Deliberately NOT <select>: dropping its appearance loses the
   native iOS wheel picker affordance and forces a hand-drawn chevron for no gain. */
input:where([type="text"], [type="password"], [type="number"], [type="email"]),
textarea {
  -webkit-appearance: none;
          appearance: none;
}

::placeholder { color: var(--mut); opacity: 1; }   /* Firefox defaults to .54 */

/* Removes the 300ms double-tap-zoom delay WITHOUT disabling pinch zoom. This is
   the correct replacement for the `maximum-scale=1` that worker.html used to
   carry — that blocked zoom entirely in Android Chrome and in-app WebViews. */
a, button, summary, label, [role="button"] { touch-action: manipulation; }

/* Stops the iOS long-press selection/callout when a gloved hand rests on a
   control. Most visible on .mic, which is held down. */
button, summary, [role="button"] {
  -webkit-user-select: none; user-select: none;
  -webkit-touch-callout: none;
}

button, [role="button"] { cursor: pointer; }
button[disabled] { cursor: default; }

/* ---- focus ---------------------------------------------------------------- */

:where(a, button, summary, input, select, textarea):focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}
@supports not selector(:focus-visible) {           /* Safari < 15.4 */
  :where(a, button, summary, input, select, textarea):focus {
    outline: 3px solid var(--accent);
    outline-offset: 2px;
  }
}

/* ---- touch targets --------------------------------------------------------
   min-height alone leaves text top-aligned in the taller box, so text-styled
   controls also need centring — pages add `display:inline-flex; align-items:
   center` where that applies. */
button, summary, [role="button"] { min-height: var(--tap); }

/* ---- shared components ----------------------------------------------------- */

.mark {
  font-family: var(--font-display);
  font-size: var(--fs-800);
  color: inherit;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
}
.mark b { color: var(--accent); font-weight: 600; }

/* ---- motion ----------------------------------------------------------------
   Covers worker.html's infinite recording pulse. The 24-bar audio meter is
   driven by requestAnimationFrame and needs its own guard in JS. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* No @media print block here, deliberately. supervisor.html carries a large
   self-contained print stylesheet that produces every PDF report; a shared print
   rule is the easiest way to silently break it when that page adopts this file. */