/* ACTUALS — design tokens
   Theme A (red-orange) is :root. Theme B (green-lilac) applies at [data-theme="b"].
   Accents carry meaning only: verdicts, deltas, flags, alerts. */

@import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,300..700;1,6..72,300..600&family=IBM+Plex+Mono:wght@400;500;600&family=IBM+Plex+Sans:wght@400;500;600&display=swap');

:root {
  /* type */
  --font-display: "Newsreader", "Iowan Old Style", Georgia, serif;
  --font-ui: "IBM Plex Sans", system-ui, -apple-system, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", monospace;

  --t-hero: clamp(46px, 6.4vw, 96px);
  --t-h1:   clamp(34px, 4.0vw, 56px);
  --t-h2:   clamp(26px, 2.6vw, 36px);
  --t-h3:   21px;
  --t-lead: clamp(17px, 1.4vw, 21px);
  --t-body: 16px;
  --t-small: 14px;
  --t-micro: 12px;
  --t-label: 10.5px;
  --t-fig:  clamp(40px, 5vw, 72px);

  /* spacing */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px; --s5: 24px;
  --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px; --s10: 144px;
  --measure: 62ch;
  --page: 1220px;

  /* surfaces + ink (Theme A) */
  --paper:      #FFFDF8;
  --cream:      #F7F2E9;
  --cream-deep: #EFE8DA;
  --ink:        #1B1714;
  --ink-soft:   #3C352E;
  --muted:      #6E655A;
  --faint:      #968C7E;
  --rule:       #E1D8C7;
  --rule-strong:#C8BCA6;

  /* meaning (Theme A: red-orange) */
  --alert:      #C1440E;
  --alert-deep: #8E2F06;
  --tint-alert: #F8E7DC;
  --good:       #37613F;
  --tint-good:  #E6EDE4;
  --flag:       #9A5B18;
  --tint-flag:  #F4E9D8;
  --neutral-tint:#EDE7DB;
}

[data-theme="b"] {
  --paper:      #FDFDFA;
  --cream:      #F3F4EF;
  --cream-deep: #E8EAE3;
  --ink:        #16191A;
  --ink-soft:   #333839;
  --muted:      #62696A;
  --faint:      #8B9291;
  --rule:       #DDE0D8;
  --rule-strong:#BEC4BA;

  --alert:      #6B48B8;
  --alert-deep: #4B2E8C;
  --tint-alert: #EDE7F8;
  --good:       #2C6B4F;
  --tint-good:  #E1EDE6;
  --flag:       #5E4AA6;
  --tint-flag:  #E9E5F6;
  --neutral-tint:#E9ECE5;
}

/* Dark mode — greys dominant. Same meaning tokens, re-tuned for a dark ground. */
[data-mode="dark"] {
  /* Native UI (scrollbars, form spinners, autofill) follows the mode —
     without this the browser paints light controls on the dark page. */
  color-scheme: dark;
  --scroll-shadow: rgba(237, 231, 222, 0.16);
  --paper:      #1C1A18;
  --cream:      #141312;
  --cream-deep: #242220;
  --ink:        #EDE7DE;
  --ink-soft:   #CFC6BA;
  --muted:      #9A9086;
  --faint:      #6F675E;
  --rule:       #332F2B;
  --rule-strong:#4C463F;

  --alert:      #E8703C;
  --alert-deep: #F2996E;
  --tint-alert: #2E2019;
  --good:       #77A87E;
  --tint-good:  #1D2620;
  --flag:       #C4913F;
  --tint-flag:  #2C2418;
  --neutral-tint:#282523;
}

[data-mode="dark"][data-theme="b"] {
  --paper:      #191B1C;
  --cream:      #131516;
  --cream-deep: #212425;
  --ink:        #E9ECEA;
  --ink-soft:   #C5CBC8;
  --muted:      #939A98;
  --faint:      #6B7271;
  --rule:       #2F3334;
  --rule-strong:#464B4A;

  --alert:      #A98BEF;
  --alert-deep: #C3ADF7;
  --tint-alert: #221C33;
  --good:       #6BAB86;
  --tint-good:  #17251E;
  --flag:       #9B85E0;
  --tint-flag:  #1F1B2E;
  --neutral-tint:#24282A;
}

html, body { margin: 0; padding: 0; }
body { background: var(--cream); color: var(--ink); font-family: var(--font-ui);
       -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
* { box-sizing: border-box; }
a { color: var(--ink); text-decoration-color: var(--rule-strong); text-underline-offset: 3px; }
a:hover { color: var(--alert); text-decoration-color: var(--alert); }
button { font-family: inherit; }
input, select { font-family: var(--font-ui); }
::selection { background: var(--tint-flag); }

@media print {
  :root, [data-mode], [data-mode][data-theme] { --paper: #fff; --cream: #fff; --cream-deep: #fff; --ink: #000; --ink-soft: #1a1a1a;
          --muted: #444; --rule: #bbb; --rule-strong: #888; }
  body { background: #fff; }
  [data-print-hide] { display: none !important; }
  [data-print-block] { display: block !important; }
  [data-print-break] { break-before: page; }
  [data-print-avoid] { break-inside: avoid; }
  @page { margin: 16mm; }
}

/* Wave-1 polish (2026-08-08): micro-transitions + keyboard focus.
   Screen-only — the print block below/above is untouched by these. */
@media screen {
  a, button { transition: background-color .16s ease, color .16s ease, border-color .16s ease, opacity .16s ease; }
  :focus-visible { outline: 2px solid var(--alert); outline-offset: 2px; }
  html { scroll-behavior: smooth; }
}

/* Wave-2 polish (2026-08-08, design freeze lifted): mobile + motion.
   Screen-only — print paths untouched. */
@media screen {
  /* Wide data tables scroll inside their own region instead of widening the
     page. Screen-only: print keeps normal table flow. Wrappers carry
     tabindex="0" + role="region" so the scroll area is keyboard-reachable.
     The scrolling-shadow backgrounds (attachment:local) make the hidden
     columns discoverable on touch — the human-baseline column was invisible
     at 390px with no cue that the region scrolls (UX audit P1-10). */
  .table-scroll {
    overflow-x: auto;
    background:
      linear-gradient(to right, var(--paper), transparent 18px) left / 100% 100% no-repeat local,
      linear-gradient(to left, var(--paper), transparent 18px) right / 100% 100% no-repeat local,
      radial-gradient(farthest-side at 0 50%, var(--scroll-shadow, rgba(27, 23, 20, 0.22)), transparent) left / 14px 100% no-repeat scroll,
      radial-gradient(farthest-side at 100% 50%, var(--scroll-shadow, rgba(27, 23, 20, 0.22)), transparent) right / 14px 100% no-repeat scroll;
  }
}
@media screen and (max-width: 420px) {
  /* auto-fit grids with a 340px floor overflow sub-~404px viewports; collapse them. */
  [style*="minmax(340px"] { grid-template-columns: 1fr !important; }
}
@media screen and (prefers-reduced-motion: no-preference) {
  /* Content rises in once the tally loader hands over. */
  #dc-root { animation: page-in .42s ease both; }
  @keyframes page-in { from { opacity: 0; transform: translateY(6px) } to { opacity: 1; transform: none } }
}

/* ---------------------------------------------------------------------------
   Brand — the tally mark (identity spec: Logo System sheet, 2026-08-08).
   `.tally-mark` is the static lockup mark; `.tally` is the animated loading
   instance. The slash bleeds past the strokes by design — never crop it.
   Colours ride the theme tokens (sanctioned by the sheet's Theming note) so
   the mark holds in both themes × both modes. */

.tally rect { transform-box: fill-box; transform-origin: 50% 100%;
              animation: tally-stroke 2.6s infinite; }
.tally rect:nth-child(2) { animation-delay: .16s }
.tally rect:nth-child(3) { animation-delay: .32s }
.tally rect:nth-child(4) { animation-delay: .48s }
.tally line { transform-box: fill-box; transform-origin: center;
              animation: tally-slash 2.6s infinite; }

@keyframes tally-stroke {
  0%,4%    { transform: scaleY(0); opacity: 0 }
  12%,76%  { transform: scaleY(1); opacity: 1 }
  88%,100% { transform: scaleY(1); opacity: 0 }
}
@keyframes tally-slash {
  0%,62%   { transform: scaleX(0); opacity: 0 }
  72%,76%  { transform: scaleX(1); opacity: 1 }
  88%,100% { transform: scaleX(1); opacity: 0 }
}
@media (prefers-reduced-motion: reduce) {
  .tally rect, .tally line { animation: tally-hold 1.6s infinite; }
  /* Beat the stagger rules' higher specificity: the held mark pulses in unison. */
  .tally rect:nth-child(2), .tally rect:nth-child(3), .tally rect:nth-child(4) { animation-delay: 0s; }
  @keyframes tally-hold { 0%,100% { opacity: 1 } 50% { opacity: .45 } }
}

/* Full-page loading state: hidden for the first 400ms of wait (if the work is
   faster than that, show nothing), then fades in. Removed by inline JS once
   the page hydrates. */
.tally-loader { position: fixed; inset: 0; z-index: 2000; display: grid;
                place-items: center; background: var(--cream);
                pointer-events: none; opacity: 0;
                animation: tally-loader-in .16s ease forwards; animation-delay: .4s; }
@keyframes tally-loader-in { to { opacity: 1 } }
.tally-sr { position: absolute; width: 1px; height: 1px; overflow: hidden;
            clip: rect(0 0 0 0); white-space: nowrap; }

/* One-colour print fallback: all five elements in ink, slash at 60% weight. */
@media print {
  .tally-loader { display: none !important; }
  .tally-mark rect, .tally rect { fill: var(--ink) !important; }
  .tally-mark line, .tally line { stroke: var(--ink) !important; stroke-width: 6 !important; }
}