/* ============================================================================
   HOUSE DESIGN SYSTEM — components.css
   Reusable primitives for every artifact. Imports assume tokens.css is loaded.
   Principle: difference is signalled by shape / weight / label / position —
   almost never by colour. Amber is the only hue, used once per screen.
   ============================================================================ */

/* ------------------------------------------------------------------ *
 * 0 · UTILITIES
 * ------------------------------------------------------------------ */
.mono   { font-family:var(--font-mono); }
.num    { font-family:var(--font-mono); font-variant-numeric:tabular-nums; }
.muted  { color:var(--ink-muted); }
.faint  { color:var(--ink-faint); }
.amber  { color:var(--accent); }
.measure{ max-width:var(--measure); }
.hair   { border:0; border-top:var(--rule-hair) solid var(--rule); margin:0; }
hr.rule { border:0; border-top:var(--rule-thin) solid var(--rule); margin:var(--sp-6) 0; }

/* ------------------------------------------------------------------ *
 * 1 · TYPOGRAPHY
 * ------------------------------------------------------------------ */
.eyebrow{
  font-family:var(--font-mono); font-size:var(--fs-50); font-weight:400;
  letter-spacing:var(--tracking-label); text-transform:uppercase; color:var(--ink-muted);
}
h1,h2,h3,h4,.h1,.h2,.h3,.h4{
  font-family:var(--font-serif); font-weight:700; line-height:var(--lh-tight); margin:0;
}
h1,.h1{ font-size:var(--fs-800); letter-spacing:var(--tracking-tight); }
h2,.h2{ font-size:var(--fs-700); letter-spacing:var(--tracking-tight); }
h3,.h3{ font-size:var(--fs-500); }
h4,.h4{ font-size:var(--fs-400); }
.lead{ font-size:var(--fs-400); line-height:var(--lh-snug); color:var(--ink); }
.caption{ font-size:var(--fs-100); color:var(--ink-muted); }
.footnote{ font-family:var(--font-mono); font-size:var(--fs-50); color:var(--ink-faint); line-height:1.6; }

/* Pull quote — a rare expressive moment, serif, oversized */
.pullquote{
  font-family:var(--font-serif); font-size:var(--fs-600); line-height:var(--lh-snug);
  font-style:italic; color:var(--ink); max-width:30ch; margin:var(--sp-6) 0;
  padding-left:var(--sp-4); border-left:2px solid var(--accent);
}
blockquote{
  margin:var(--sp-5) 0; padding-left:var(--sp-4);
  border-left:var(--rule-thin) solid var(--rule-strong); color:var(--ink-muted);
}

/* ------------------------------------------------------------------ *
 * 2 · SECTION LABEL / NUMBERED DIVIDER
 * ------------------------------------------------------------------ */
.sec-head{ display:flex; align-items:baseline; gap:var(--sp-4); margin-bottom:var(--sp-5); }
.sec-head .no{ font-family:var(--font-mono); font-size:var(--fs-100); color:var(--ink-faint); }
.divider{
  display:flex; align-items:center; gap:var(--sp-4);
  font-family:var(--font-mono); font-size:var(--fs-50); letter-spacing:var(--tracking-label);
  text-transform:uppercase; color:var(--ink-muted); margin:var(--sp-6) 0 var(--sp-4);
}
.divider::after{ content:""; flex:1; border-top:var(--rule-thin) solid var(--rule); }

/* ------------------------------------------------------------------ *
 * 3 · MARGIN APPARATUS — Tufte-style sidenotes + footnote refs
 * ------------------------------------------------------------------ */
.proseblock{ display:grid; grid-template-columns:var(--measure) 1fr; gap:var(--sp-6); }
.sidenote{
  font-family:var(--font-mono); font-size:var(--fs-50); line-height:1.5;
  color:var(--ink-muted); border-left:var(--rule-thin) solid var(--rule); padding-left:var(--sp-3);
}
.snref{ font-family:var(--font-mono); font-size:.7em; vertical-align:super; color:var(--accent); }
@media(max-width:820px){ .proseblock{ grid-template-columns:1fr; } }

/* Evidence / citation block */
.evidence{
  border:var(--rule-hair) solid var(--rule); border-left:var(--rule-thin) solid var(--rule-strong);
  padding:var(--sp-4); margin:var(--sp-4) 0; background:var(--bg-sunken);
}
.evidence .quote{ font-family:var(--font-serif); font-style:italic; color:var(--ink); margin:0 0 var(--sp-2); }
.evidence .cite{ font-family:var(--font-mono); font-size:var(--fs-50); color:var(--ink-faint); }

/* Source apparatus */
.sources{ font-family:var(--font-mono); font-size:var(--fs-50); color:var(--ink-faint); line-height:1.6; }
.sources ol{ margin:0; padding-left:2.5ch; }

/* Key-value fact list */
.kv{ display:grid; grid-template-columns:auto 1fr; gap:var(--sp-2) var(--sp-5); align-items:baseline; }
.kv dt{ font-family:var(--font-mono); font-size:var(--fs-50); letter-spacing:var(--tracking-label);
  text-transform:uppercase; color:var(--ink-muted); }
.kv dd{ margin:0; font-family:var(--font-mono); font-variant-numeric:tabular-nums; color:var(--ink); }

/* ------------------------------------------------------------------ *
 * 4 · DATA TABLE  (base + .compact + .peer variants)
 * ------------------------------------------------------------------ */
table.data{
  width:100%; border-collapse:collapse;
  font-family:var(--font-mono); font-size:var(--fs-100); font-variant-numeric:tabular-nums;
}
table.data caption{
  text-align:left; font-family:var(--font-mono); font-size:var(--fs-50);
  letter-spacing:var(--tracking-label); text-transform:uppercase; color:var(--ink-muted);
  padding-bottom:var(--sp-3);
}
table.data thead th{
  text-align:right; font-weight:400; color:var(--ink-muted);
  border-bottom:var(--rule-thin) solid var(--rule-strong); padding:var(--sp-2) var(--sp-3); white-space:nowrap;
}
table.data thead th:first-child{ text-align:left; }
table.data tbody td{
  text-align:right; padding:var(--sp-2) var(--sp-3);
  border-bottom:var(--rule-hair) solid var(--rule); color:var(--ink);
}
table.data tbody td:first-child{ text-align:left; }
table.data tbody tr:hover{ background:var(--bg-raised); }
table.data tfoot td{
  text-align:right; padding:var(--sp-2) var(--sp-3); font-weight:700;
  border-top:var(--rule-thin) solid var(--rule-strong); color:var(--ink);
}
table.data tfoot td:first-child{ text-align:left; }
table.data .flag{ color:var(--accent); }          /* the one figure that drives the call */
table.data.compact td, table.data.compact th{ padding:var(--sp-1) var(--sp-2); }
table.data.peer tbody tr:first-child td{ color:var(--ink); }   /* subject row emphasis via weight below */
table.data.peer tbody tr.subject td{ font-weight:700; border-bottom:var(--rule-thin) solid var(--rule-strong); }

/* ------------------------------------------------------------------ *
 * 5 · METRIC / STAT BLOCK
 * ------------------------------------------------------------------ */
.stats{ display:grid; grid-template-columns:repeat(4,1fr); border:var(--rule-thin) solid var(--rule); }
.stat{ padding:var(--sp-4); border-right:var(--rule-thin) solid var(--rule); }
.stat:last-child{ border-right:0; }
.stat .k{ font-family:var(--font-mono); font-size:var(--fs-50); letter-spacing:var(--tracking-label);
  text-transform:uppercase; color:var(--ink-muted); display:block; margin-bottom:var(--sp-2); }
.stat .v{ font-family:var(--font-mono); font-variant-numeric:tabular-nums; font-size:var(--fs-600);
  line-height:1; color:var(--ink); }
.stat .d{ font-family:var(--font-mono); font-size:var(--fs-50); color:var(--ink-faint); margin-top:var(--sp-2); }
.stat.hero .v{ color:var(--accent); }

/* Sparkline (inline trend, set width/height inline) */
.spark{ vertical-align:middle; }
.spark polyline{ fill:none; stroke:var(--ink-muted); stroke-width:1.5; }
.spark .dot{ fill:var(--accent); }

/* Delta indicator — direction by GLYPH, not colour (colour-blind-safe) */
.delta{ font-family:var(--font-mono); font-variant-numeric:tabular-nums; font-size:var(--fs-100); color:var(--ink-muted); }
.delta::before{ margin-right:.35ch; color:var(--ink); }
.delta.up::before{ content:"\25B2"; }     /* ▲ */
.delta.down::before{ content:"\25BC"; }   /* ▼ */
.delta.flat::before{ content:"\2013"; }   /* – */

/* ------------------------------------------------------------------ *
 * 6 · SCORE / GAUGE / CREDIT BAND
 * ------------------------------------------------------------------ */
/* Credit-band chip — band by LETTER + monochrome fill, never hue */
.band{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:3.2ch; padding:.15em .5em; font-family:var(--font-mono); font-weight:700;
  font-size:var(--fs-200); letter-spacing:.02em; border:var(--rule-thin) solid var(--rule-strong);
  border-radius:var(--radius); color:var(--ink); background:var(--bg-raised);
}
.band.top{ background:var(--ink); color:var(--bg); }       /* A / A+ : inverted = strongest */
.band.watch{ border-color:var(--accent); color:var(--accent); }  /* single amber = watch */

/* 0–10 score bar */
.score{ font-family:var(--font-mono); }
.score .track{ position:relative; height:8px; background:var(--bg-sunken);
  border:var(--rule-hair) solid var(--rule); border-radius:var(--radius); overflow:hidden; }
.score .fill{ position:absolute; inset:0 auto 0 0; background:var(--ink-muted); }
.score .fill.hi{ background:var(--accent); }
.score .val{ font-variant-numeric:tabular-nums; font-size:var(--fs-100); color:var(--ink); }
.score .cap{ font-size:var(--fs-50); letter-spacing:var(--tracking-label); text-transform:uppercase; color:var(--ink-muted); }

/* Status tag / chip */
.tag{
  display:inline-block; font-family:var(--font-mono); font-size:var(--fs-50);
  letter-spacing:var(--tracking-label); text-transform:uppercase; color:var(--ink-muted);
  border:var(--rule-hair) solid var(--rule); border-radius:var(--radius); padding:.2em .6em;
}
.tag.signal{ color:var(--accent); border-color:var(--accent); }

/* ------------------------------------------------------------------ *
 * 7 · CALLOUT / VERDICT
 * ------------------------------------------------------------------ */
.verdict{
  border:var(--rule-thin) solid var(--rule-strong); border-left:3px solid var(--rule-strong);
  padding:var(--sp-4) var(--sp-5); background:var(--bg-raised);
}
.verdict .tag-line{ font-family:var(--font-mono); font-size:var(--fs-50);
  letter-spacing:var(--tracking-label); text-transform:uppercase; color:var(--ink-muted); }
.verdict .headline{ font-family:var(--font-serif); font-size:var(--fs-500); font-weight:700; margin:var(--sp-2) 0; }
/* verdict register set by label + border weight, not fill colour */
.verdict.approve{ border-left-color:var(--ink); }
.verdict.approve .tag-line{ color:var(--ink); }
.verdict.watch{ border-left-color:var(--accent); }
.verdict.watch .tag-line{ color:var(--accent); }
.verdict.avoid{ border-left-style:double; border-left-width:4px; border-left-color:var(--ink-muted); }

/* Note / callout (monochrome, differentiated by label + rule) */
.note{ border:var(--rule-hair) solid var(--rule); border-left:var(--rule-thin) solid var(--rule-strong);
  padding:var(--sp-3) var(--sp-4); font-size:var(--fs-200); color:var(--ink-muted); }
.note .label{ font-family:var(--font-mono); font-size:var(--fs-50); letter-spacing:var(--tracking-label);
  text-transform:uppercase; color:var(--ink); display:block; margin-bottom:var(--sp-1); }

/* ------------------------------------------------------------------ *
 * 8 · CHART THEME  (hand-authored themed SVG conventions)
 * ------------------------------------------------------------------ */
.chart-card{ border:var(--rule-thin) solid var(--rule); padding:var(--sp-4); }
.chart-card .cap{ font-family:var(--font-mono); font-size:var(--fs-50); letter-spacing:var(--tracking-label);
  text-transform:uppercase; color:var(--ink-muted); margin-bottom:var(--sp-3); }
.chart .axis{ stroke:var(--rule); stroke-width:1; }
.chart .gridline{ stroke:var(--rule); stroke-width:.5; stroke-dasharray:2 3; }
.chart .bar{ fill:var(--data-2); }
.chart .bar.hi{ fill:var(--accent); }
.chart .bar.neg{ fill:var(--data-4); }             /* waterfall down step */
.chart .series{ fill:none; stroke:var(--ink-muted); stroke-width:1.5; }
.chart .series.amber{ fill:none; stroke:var(--accent); stroke-width:1.5; }
.chart .area{ fill:var(--ink-muted); opacity:.10; }
.chart .tick{ font-family:var(--font-mono); font-size:9px; fill:var(--ink-faint); }
.chart .node{ fill:var(--bg-raised); stroke:var(--rule-strong); stroke-width:1; }
.chart .node.core{ fill:var(--accent); stroke:var(--accent); }
.chart .edge{ stroke:var(--rule-strong); stroke-width:1; }
.chart .nlabel{ font-family:var(--font-mono); font-size:9px; fill:var(--ink-muted); }
.smallmults{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--sp-3); }
.smallmults .cell .t{ font-family:var(--font-mono); font-size:var(--fs-50); color:var(--ink-muted); margin-bottom:var(--sp-1); }

/* ------------------------------------------------------------------ *
 * 9 · REPORT FRAME  (header / footer / cover)
 * ------------------------------------------------------------------ */
.rpt-header{
  display:flex; justify-content:space-between; align-items:flex-end;
  border-bottom:var(--rule-thin) solid var(--rule-strong); padding-bottom:var(--sp-3);
}
.rpt-header .title{ font-family:var(--font-serif); font-size:var(--fs-500); font-weight:700; }
.rpt-header .meta{ font-family:var(--font-mono); font-size:var(--fs-50); color:var(--ink-muted);
  text-align:right; line-height:1.5; }
.rpt-footer{
  display:flex; justify-content:space-between;
  border-top:var(--rule-thin) solid var(--rule); padding-top:var(--sp-2); margin-top:var(--sp-5);
  font-family:var(--font-mono); font-size:var(--fs-50); color:var(--ink-faint);
}
.cover{
  border:var(--rule-thin) solid var(--rule-strong); padding:var(--sp-8) var(--sp-7);
  min-height:340px; display:flex; flex-direction:column; justify-content:space-between; background:var(--bg-sunken);
}
.cover .kicker{ font-family:var(--font-mono); font-size:var(--fs-50); letter-spacing:var(--tracking-label);
  text-transform:uppercase; color:var(--ink-muted); }
.cover .display{ font-family:var(--font-serif); font-size:var(--fs-900); font-weight:700;
  line-height:var(--lh-tight); letter-spacing:var(--tracking-tight); max-width:16ch; }
.cover .foot{ font-family:var(--font-mono); font-size:var(--fs-50); color:var(--ink-muted);
  display:flex; justify-content:space-between; border-top:var(--rule-thin) solid var(--rule); padding-top:var(--sp-3); }

/* ------------------------------------------------------------------ *
 * 10 · DECK SLIDE FRAME  (16:9)
 * ------------------------------------------------------------------ */
.slide{
  aspect-ratio:16/9; border:var(--rule-thin) solid var(--rule-strong); background:var(--bg);
  padding:var(--sp-6); display:flex; flex-direction:column; position:relative;
}
.slide .runhead{ display:flex; justify-content:space-between; font-family:var(--font-mono);
  font-size:var(--fs-50); letter-spacing:var(--tracking-label); text-transform:uppercase; color:var(--ink-muted); }
.slide .body{ flex:1; display:flex; flex-direction:column; justify-content:center; }
.slide .body h2{ max-width:20ch; }
.slide .pageno{ position:absolute; right:var(--sp-6); bottom:var(--sp-4);
  font-family:var(--font-mono); font-size:var(--fs-50); color:var(--ink-faint); }

/* ------------------------------------------------------------------ *
 * 11 · SITE  (asymmetric hero + feature row — NOT centered)
 * ------------------------------------------------------------------ */
.hero{ display:grid; grid-template-columns:1.4fr 1fr; gap:var(--sp-7); align-items:end;
  padding:var(--sp-8) 0; border-bottom:var(--rule-thin) solid var(--rule); }
.hero h1{ font-size:var(--fs-900); letter-spacing:var(--tracking-tight); max-width:14ch; }
.hero .sub{ color:var(--ink-muted); }
.feature-row{ display:grid; grid-template-columns:auto 1fr; gap:var(--sp-5); padding:var(--sp-5) 0;
  border-bottom:var(--rule-hair) solid var(--rule); align-items:baseline; }
.feature-row .idx{ font-family:var(--font-mono); font-size:var(--fs-100); color:var(--ink-faint); }
@media(max-width:820px){ .hero{ grid-template-columns:1fr; } }