/* ══════════════════════════════════════════════════════════════════════════
   sz.css — the Strategzilla design system.

   WHY THIS EXISTS
   Measured across the 34 live pages on 2026-09-09: 0 shared stylesheets,
   836 distinct hex colours against 18 declared tokens, 39 font sizes from
   8px to 48px (including nine half-pixel steps), 18 border radii, 293
   distinct two-value paddings, 25 table classes, 78 button classes, 69
   pill classes, 64 card classes. There was no design system to repair —
   there were 25 of them, and every new page invented a 26th.

   🔴 WHY EVERY NAME IS PREFIXED --sz- / .sz-
   The same token NAME already holds different values on different pages:
       --red    #EF4444 · #B00020 · #DC2626 · #C62828 · #B91C1C
       --gold   #F5C400 · #FFC200 · #CDA716
       --green  #2E7D32 · #15803D
       --text   #1C1C1E on most pages, #E8E8EA on review-collector (dark)
   So a bare `--red` or `--text` here would either be overridden at random
   or silently repaint a page — and on the dark page it would turn body text
   the colour of the background. Prefixing means LINKING THIS FILE IS A NO-OP.
   Nothing changes until an element opts in with an sz- class. That is what
   makes it safe to add to a page without auditing that page first.

   HOW TO USE IT
       <link rel="stylesheet" href="/static/sz.css">
   then use the classes. Migrate one component at a time and DELETE the
   local rules it replaces — a page that links this and keeps its own copy
   has made things worse, not better.

   Guarded by test_ads_stream_contracts.py (sz.css exists, is linked, and
   its semantic pair is not re-declared as literals elsewhere).
══════════════════════════════════════════════════════════════════════════ */

:root {
  /* ── neutrals ────────────────────────────────────────────────────────
     Warm-biased rather than pure grey, so they sit with the brand gold
     instead of fighting it. */
  --sz-paper:      #F7F6F3;
  --sz-surface:    #FFFFFF;
  --sz-zone:       #FAFAF8;   /* totals rows, quiet strips              */
  --sz-rule:       #ECECE8;   /* hairline between rows                  */
  --sz-rule-2:     #D8D7D2;   /* header underline, frozen-column edge   */
  --sz-ink:        #1A1A1A;
  --sz-ink-2:      #56534A;
  --sz-ink-3:      #8E8A7E;   /* column labels, captions                */

  /* ── brand ───────────────────────────────────────────────────────────
     #F5C400 is the app's gold (index.html and most pages). Two pages
     disagree — client_report #FFC200, the Analytic Dashboard #CDA716 —
     and both should come here. --sz-gold-ink is the ONLY text colour
     that may sit on gold: white measures 1.64:1 on it, which is under
     the 3:1 floor even for large text. */
  --sz-gold:       #F5C400;
  --sz-gold-edge:  #E0B400;
  --sz-gold-wash:  #FFFBEA;
  --sz-gold-ink:   #241E00;

  /* ── semantic: ONE good, ONE bad ─────────────────────────────────────
     Chosen by MAJORITY first, then verified on contrast — a standard that
     19 of the 24 pages already use is the standard; picking a different one
     would mean changing 19 pages to match 1.
         --sz-ok  #2E7D32 — 5.13 white, 4.57 ok-tint, 4.41 bad-tint, 4.91 zone
         --sz-bad #C62828 — 5.62 white, 5.01 ok-tint, 4.83 bad-tint, 5.38 zone
     Both clear AA (4.5) on every surface in this file. The pairs they retire
     did not: #059669 3.77/3.43, #16A34A 3.30, #1a9d52 3.51, and #DC2626 and
     #E11D48 both passed on white but failed on the tint they print on
     (3.95 / 3.85).

     🔴 THESE ARE LIGHT-THEME VALUES. On review-collector.html (bg #0F0F10)
     both score ~3.5 and its own #10B981/#EF4444 score 7.55/5.09. A dark page
     must NOT adopt these — it simply does not opt in, which is the whole
     reason these names are prefixed.
     🔴 These are VERDICTS. They are not category colours and not a scale.
     A categorical palette (per metric family) and a sequential ramp (a
     heatmap) are different jobs and must not be collapsed into these. */
  --sz-ok:         #2E7D32;
  --sz-ok-bg:      #ECF4ED;
  --sz-warn:       #9A4A00;
  --sz-warn-bg:    #FBF0E2;
  --sz-bad:        #C62828;
  --sz-bad-bg:     #FBEAEA;

  /* ── type: six sizes, against the 39 in the wild ─────────────────── */
  --sz-t1:  10px;    /* micro label, uppercase                          */
  --sz-t2:  11.5px;  /* secondary, captions                             */
  --sz-t3:  12.5px;  /* table body, controls — the workhorse            */
  --sz-t4:  14.5px;  /* card title                                      */
  --sz-t5:  20px;    /* headline figure                                 */
  --sz-t6:  26px;    /* hero figure                                     */
  --sz-font: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --sz-mono: ui-monospace, SFMono-Regular, Menlo, monospace;

  /* ── spacing: five steps, against 293 padding pairs ──────────────── */
  --sz-s1: 4px;  --sz-s2: 8px;  --sz-s3: 12px;  --sz-s4: 16px;  --sz-s5: 24px;

  /* ── two radii, against 18 ───────────────────────────────────────── */
  --sz-r1: 6px;  --sz-r2: 10px;
  --sz-shadow: 0 1px 2px rgba(0,0,0,.05);

  /* ── density knob: one number changes every table's row height ───── */
  --sz-row-y: 9px;
}
.sz-compact { --sz-row-y: 4px; --sz-t3: 12px; }

/* ══ NUMBERS ══════════════════════════════════════════════════════════
   Digits must line up in a column or the eye cannot compare them. Nothing
   in the app had this before. */
.sz-num, .sz-table td.n, .sz-table th.n {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  text-align: right;
  white-space: nowrap;
}

/* ══ SCROLL CONTAINER ═════════════════════════════════════════════════
   min-width:0 is not optional. A grid or flex child defaults to
   min-width:auto and will not shrink below its content, which is how a
   20-column table pushed its neighbour off the right edge with no
   scrollbar that reached it. */
.sz-scroll { overflow: auto; min-width: 0; }

/* ══ TABLE ════════════════════════════════════════════════════════════ */
.sz-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-family: var(--sz-font);
  font-size: var(--sz-t3);
  color: var(--sz-ink);
}
.sz-table thead th {
  position: sticky; top: 0; z-index: 3;
  background: var(--sz-surface);
  padding: var(--sz-s2) var(--sz-s3);
  text-align: right; white-space: nowrap;
  font-size: var(--sz-t1); font-weight: 700; color: var(--sz-ink-3);
  text-transform: uppercase; letter-spacing: .08em;
  border-bottom: 1.5px solid var(--sz-rule-2);
}
.sz-table thead th:first-child { text-align: left; }

/* ONE separator direction. Zebra stripes AND cell borders is two grids
   fighting each other; this keeps the horizontal hairline and drops both. */
.sz-table tbody td {
  padding: var(--sz-row-y) var(--sz-s3);
  border-bottom: 1px solid var(--sz-rule);
  background: var(--sz-surface);
  transition: background .08s;
}
.sz-table tbody tr:last-child td { border-bottom: none; }
.sz-table tbody tr:hover td { background: var(--sz-gold-wash); }

/* frozen first column — the one place a vertical rule earns its keep */
.sz-table .froz {
  position: sticky; left: 0; z-index: 2;
  border-right: 1px solid var(--sz-rule-2);
}
.sz-table thead th.froz { z-index: 4; }
.sz-table tbody tr:hover td.froz { background: var(--sz-gold-wash); }

.sz-table tfoot td {
  position: sticky; bottom: 0; z-index: 3;
  background: var(--sz-zone);
  border-top: 1.5px solid var(--sz-rule-2);
  padding: var(--sz-s3);
  font-weight: 800;
}
.sz-table tfoot td.froz { z-index: 4; }

/* a cost is a cost — say it with a sign, not an alarm colour, so red is
   left free for the things that are actually wrong */
.sz-table td.cost { color: var(--sz-ink-2); }
.sz-table td.cost::before { content: "−"; }

/* ══ CARD ═════════════════════════════════════════════════════════════ */
.sz-card {
  background: var(--sz-surface);
  border: 1px solid var(--sz-rule-2);
  border-radius: var(--sz-r2);
  overflow: hidden;
  box-shadow: var(--sz-shadow);
}
.sz-card > .sz-card-head {
  display: flex; align-items: baseline; gap: var(--sz-s2);
  padding: var(--sz-s3) var(--sz-s3) 10px;
  border-bottom: 1px solid var(--sz-rule);
}
.sz-card-head h3, .sz-card-head .sz-title {
  margin: 0; font-size: var(--sz-t4); font-weight: 700; letter-spacing: -.01em;
}
.sz-card-head .sz-sub { font-size: var(--sz-t2); color: var(--sz-ink-2); }
.sz-card-head .sz-right { margin-left: auto; display: flex; gap: var(--sz-s1); }

/* a banded head, for cards whose identity is worth colouring. Set the band
   with --sz-band; the text colour follows it so the pair can never drift. */
.sz-card.sz-banded > .sz-card-head {
  background: var(--sz-band, var(--sz-ink-2));
  color: var(--sz-band-ink, #fff);
  border-bottom: 0;
}
.sz-card.sz-banded > .sz-card-head .sz-sub { color: rgba(255,255,255,.8); }

/* the basis strip: says which of a card's numbers are measured and which
   are estimated, because a derived figure that looks measured is how 34
   products all showed the same TACoS */
.sz-card .sz-basis {
  padding: var(--sz-s2) var(--sz-s3);
  border-top: 1px solid var(--sz-rule);
  background: #FCFCFA;
  font-size: var(--sz-t2); color: var(--sz-ink-2); line-height: 1.5;
}

/* ══ PILL — a verdict, never decoration ═══════════════════════════════ */
.sz-pill {
  display: inline-block;
  padding: 2px 8px; border-radius: 20px;
  font-size: var(--sz-t2); font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.sz-pill.ok   { background: var(--sz-ok-bg);   color: var(--sz-ok); }
.sz-pill.warn { background: var(--sz-warn-bg); color: var(--sz-warn); }
.sz-pill.bad  { background: var(--sz-bad-bg);  color: var(--sz-bad); }
.sz-pill.flat { background: var(--sz-rule);    color: var(--sz-ink-2); }

/* ══ BUTTON ═══════════════════════════════════════════════════════════ */
.sz-btn {
  display: inline-flex; align-items: center; gap: 6px;
  height: 32px; padding: 0 var(--sz-s3);
  border: 1px solid var(--sz-rule-2); border-radius: var(--sz-r1);
  background: var(--sz-surface); color: var(--sz-ink-2);
  font-family: var(--sz-font); font-size: var(--sz-t3); font-weight: 600;
  cursor: pointer; white-space: nowrap;
  transition: background .1s, border-color .1s;
}
.sz-btn:hover { border-color: var(--sz-gold-edge); background: var(--sz-gold-wash); }
.sz-btn:focus-visible { outline: 2px solid var(--sz-gold); outline-offset: 1px; }
.sz-btn[disabled] { opacity: .5; cursor: not-allowed; }
.sz-btn.primary {
  background: var(--sz-gold); border-color: var(--sz-gold-edge);
  color: var(--sz-gold-ink); font-weight: 800;
}
.sz-btn.primary:hover { background: #FFD22B; }
.sz-btn.ghost { border-color: transparent; background: transparent; }
.sz-btn.ghost:hover { background: var(--sz-rule); border-color: transparent; }

/* ══ CONTROL BAR ══════════════════════════════════════════════════════
   One card, one row, clusters divided by a hairline. Mark a cluster start
   with .sz-grp and push the actions right with .sz-actions. */
.sz-bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  padding: var(--sz-s2) 10px;
  background: var(--sz-surface);
  border: 1px solid var(--sz-rule-2); border-radius: var(--sz-r2);
  box-shadow: var(--sz-shadow);
}
.sz-bar .sz-grp { border-left: 1px solid var(--sz-rule); padding-left: 9px; margin-left: 2px; }
.sz-bar .sz-actions { margin-left: auto; display: flex; gap: 6px; align-items: center; }
@media (max-width: 1180px) {
  .sz-bar .sz-grp { border-left: 0; padding-left: 0; margin-left: 0; }
  .sz-bar .sz-actions { margin-left: 0; }
}

/* ══ OPT-IN: ALIGN THE DIGITS IN EVERY TABLE ON THE PAGE ══════════════
   Put class="sz-nums" on <body>. Proportional digits make a money column
   impossible to compare down its length — 1 is narrow, 0 is wide, so the
   decimal points wander. Measured 2026-09-10: 13 of the 27 pages that
   have tables never set this on a table cell, 60 tables between them.

   Scoped under a class rather than a bare `table` selector so that linking
   sz.css stays a no-op — a page gets this only by asking for it.
   Safe on text cells: tabular-nums affects digits and nothing else. */
.sz-nums table td, .sz-nums table th {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

@media (prefers-reduced-motion: reduce) {
  .sz-table tbody td, .sz-btn { transition: none; }
}