/* ==========================================================================
   css/ — the stylesheet, split by concern — CIT-7
   ==========================================================================
   One file per component so a two-line change reads one short file, not 1,700
   lines. Load order is the <link> list in index.html (and onboarding.html):
   tokens, base, then the components in the order the single file had them.
   Plain <link>s, never @import (serialises requests) and never a bundler.
   Cascade order is the one thing that can silently change here: keep it.
   ========================================================================== */

/* ==========================================================================
   Clockhour — interface stylesheet
   ==========================================================================
   Implements docs/clockhour-brand-spec.md, which is LOCKED. The :root block,
   the four stamps, the meter fills and the focus ring below are copied from it
   verbatim. Do not re-derive the palette, do not add colors, do not substitute
   fonts, do not soften the focus ring.

   The accessibility rules in that spec are procurement requirements, not
   polish, so the ones that live in CSS are marked WCAG with their criterion:

     1.4.1   status is never carried by color alone — every state is
             color + glyph + word
     1.4.3   all text >= 4.5:1, large text >= 3:1 (measured table in the spec)
     1.4.4   body text survives 200% zoom
     1.4.11  input borders and focus rings >= 3:1, which is why --rule is
             NEVER used on anything that carries meaning
     2.4.7   every control reachable and visible on keyboard
     3.3.1   errors name the field and the fix, in text
   ========================================================================== */

/* --- VERBATIM :root block from the brand spec ---------------------------- */
:root{
  --ink:#1B2A3A; --ink-soft:#4A5A68; --paper:#F6F7F5; --field:#FFFFFF;
  --rule:#C9D1CE; --rule-strong:#7E8A85;
  --approved:#1F5D3F; --rejected:#8C2F26; --pending:#8A6516;
  --approved-wash:#E8F0EA; --rejected-wash:#F6E9E7; --pending-wash:#F6EFDF;
  --ui:'Public Sans',system-ui,sans-serif;
  --legible:'Atkinson Hyperlegible',var(--ui);
  --data:'Roboto Mono',ui-monospace,monospace;

  --r:7px; --r-sm:4px; --r-xs:3px;
  --sh-sm:0 1px 2px rgba(27,42,58,.07);
  --sh:0 1px 2px rgba(27,42,58,.06), 0 4px 12px rgba(27,42,58,.07);
  --sh-lg:0 2px 6px rgba(27,42,58,.07), 0 14px 34px rgba(27,42,58,.11);
}
/* --- end verbatim block -------------------------------------------------- */

/* Layout scale only. Nothing here is a color and nothing overrides the above. */
:root{
  --gap:20px;
  --gap-lg:40px;
  --page:1180px;
  --inset:inset 0 1px 2px rgba(27,42,58,.05);
}

/* ==========================================================================
   Narrow viewports and zoom
   ==========================================================================
   Body text must survive 200% zoom without loss of content (WCAG 1.4.4). The
   grids collapse to single columns rather than scrolling the page sideways;
   only .table-wrap scrolls horizontally, and it does so on purpose.
   ========================================================================== */
/* THE 640PX TOKEN STEP-DOWN (12/18) IS GONE — CIT-15. The approved mock keeps
   the 20/40 rhythm on its phone toggle, so a phone gets the same scale. */