/* What If I Bought… — "Broadsheet"
 *
 * A committed single visual world: content sits directly on cool grey paper,
 * divided by hairlines, with a serif carrying the figures at full size. There
 * are no cards — air does the grouping that boxes would otherwise do.
 *
 * Deliberately light-only. "Dark paper" is a contradiction, and the direction
 * is the paper; an inverted variant would be a different design, not this one
 * with the lamps off.
 *
 * Contrast on the #e9eaea ground: ink 15.4, body 5.0, oxblood 6.8, slate 4.6,
 * green 6.6, ochre 4.2, burnt 4.5. Hairlines sit at 1.35 so they stay under
 * the content rather than competing with it.
 *
 * Two typefaces, two jobs. Georgia sets everything a person reads — headlines,
 * prose, single figures — and its old-style numerals are half the character of
 * the page. The system sans takes labels, and every column of digits that has
 * to line up (tables, axis ticks), because Georgia's hopping figures are
 * exactly wrong for a column.
 */

:root {
  --paper: #e9eaea;
  --paper-sunk: #e2e3e3;      /* input wells, hover washes */
  --ink: #101418;
  --ink-2: #3d444c;
  --dim: #5c646d;
  --rule: #c8cbcb;
  --rule-strong: #9aa0a0;

  --accent: #8c2f39;          /* oxblood — the stock, the headline figure */
  --bench: #5a6b7a;           /* slate — the benchmark */

  /* Categorical slots the chart asks for by name. Same two hues; the chart
     addresses them by slot so it never has to know what "accent" means. */
  --series-1: #8c2f39;
  --series-2: #5a6b7a;

  /* A separate scale for the comparison chart, which has to carry six
     identities at once rather than "the stock and its benchmark". Slate can't
     do that job — at OKLCH chroma 0.031 it reads as grey, which is fine as the
     second of two but not as one of six. These six sit just over the chroma
     floor and as dark as the paper allows, so they still read as printed inks:
     validated on #e9eaea at worst adjacent ΔE 14.9 under deuteranopia (target
     8), 22.5 unsimulated (floor 15), all ≥3:1 contrast. The order is part of
     the result — it's what keeps the weak pairs off each other. Lines also take
     a dash per slot, so identity never rests on hue alone where six of them
     cross. */
  --cmp-1: #82363c;
  --cmp-2: #0c74b7;
  --cmp-3: #815200;
  --cmp-4: #5c3d93;
  --cmp-5: #5b7c07;
  --cmp-6: #9d4c8c;

  /* Sign, not identity: deltas take these, the accent never means "up". */
  --pos: #1f5a4c;
  --neg: #8c2f39;

  /* Event severity. Each pairs with a written label — never colour alone. */
  --good: #1f5a4c;
  --warning: #8a6a1f;
  --serious: #9a5a2a;
  --critical: #8c2f39;

  /* chart.js reads this for the ring it draws around overlapping marks. */
  --surface-1: #e9eaea;

  --serif: Georgia, "Iowan Old Style", "Palatino Linotype", "Times New Roman", serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  color-scheme: light;
  font-family: var(--serif);
}

* { box-sizing: border-box; }

html { background: var(--paper); }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--paper);
  color: var(--ink);
  font-size: 17px;
  line-height: 1.6;
  padding: 40px 24px 80px;
  -webkit-font-smoothing: antialiased;
}

main { max-width: 940px; margin: 0 auto; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip {
  position: absolute; left: -9999px;
  background: var(--ink); color: var(--paper);
  padding: 10px 16px; z-index: 10; font-family: var(--sans); font-size: 14px;
}
.skip:focus { left: 24px; top: 24px; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* Uppercase sans labels, used everywhere a thing needs naming rather than reading. */
.stat-label,
.card-sub,
.legend,
.examples,
.seg-btn,
.tl-date,
.disclaimer,
.lb-hint,
.status,
.back,
.tag {
  font-family: var(--sans);
}

.stat-label,
.tl-date {
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--dim);
  margin: 0;
}

/* ------------------------------------------------------------------ header */

.page-head {
  max-width: 940px;
  margin: 0 auto 34px;
  border-bottom: 1.5px solid var(--ink);
  padding-bottom: 20px;
}

.back {
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--dim);
  text-decoration: none;
}
.back:hover { color: var(--accent); }

h1 {
  font-size: clamp(34px, 6.4vw, 58px);
  line-height: 1.02;
  letter-spacing: -0.03em;
  margin: 16px 0 8px;
  font-weight: 400;
  text-wrap: balance;
}

.tag {
  margin: 0;
  font-size: 13px;
  color: var(--dim);
  letter-spacing: 0.02em;
}

/* --------------------------------------------------------------- ask form */

.ask { margin-bottom: 26px; }

/* The question is the premise, so it's set as a standing headline rather than
   parked in a widget. */
.ask-row {
  display: flex;
  gap: 16px;
  align-items: baseline;
  border-bottom: 1.5px solid var(--ink);
  padding-bottom: 12px;
}

#q {
  flex: 1 1 260px;
  min-width: 0;
  font-family: var(--serif);
  font-size: clamp(17px, 2.5vw, 22px);
  font-style: italic;
  color: var(--ink);
  background: transparent;
  border: 0;
  padding: 0;
}
#q::placeholder { color: var(--rule-strong); font-style: italic; }
#q:focus { outline: 0; }
.ask-row:focus-within { border-bottom-color: var(--accent); }

#go {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  background: transparent;
  border: 0;
  padding: 4px 2px;
  cursor: pointer;
  white-space: nowrap;
}
#go:hover { color: var(--ink); }
#go:disabled { color: var(--dim); cursor: progress; }

.examples {
  margin: 14px 0 0;
  font-size: 12px;
  color: var(--dim);
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
  align-items: baseline;
}

.chip, .chips button {
  font-family: var(--sans);
  font-size: 12px;
  padding: 3px 0;
  color: var(--ink-2);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--rule-strong);
  cursor: pointer;
}
.chip:hover, .chips button:hover { color: var(--accent); border-bottom-color: var(--accent); }

.chips { display: flex; flex-wrap: wrap; gap: 10px 18px; }

.status {
  min-height: 20px;
  margin: 14px 0 0;
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--dim);
}
.status.is-error { color: var(--accent); }

/* ------------------------------------------------------------- containers */

/* "Cards" survive as structural hooks for the markup, but they are not boxes
   here — just blocks of air separated by a rule. */
.card {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
  margin: 0 0 40px;
}

.card-title {
  font-size: 22px;
  font-weight: 400;
  letter-spacing: -0.01em;
  margin: 0 0 4px;
}

.card-sub {
  margin: 0 0 20px;
  font-size: 12px;
  line-height: 1.6;
  color: var(--dim);
  max-width: 68ch;
}

.disambig {
  border-top: 1px solid var(--rule);
  padding-top: 16px;
  margin-bottom: 32px;
}
.disambig h2 {
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--dim);
  font-weight: 600;
  margin: 0 0 10px;
}

.story {
  font-size: clamp(17px, 2.2vw, 20px);
  line-height: 1.62;
  color: var(--ink-2);
  max-width: 60ch;
  margin: 34px 0 30px;
}
.story strong { color: var(--ink); font-weight: 400; }

/* ------------------------------------------------------- figures & tiles */

.hero-card { margin-bottom: 34px; }

.hero {
  font-family: var(--serif);
  font-size: clamp(52px, 12vw, 104px);
  line-height: 0.94;
  letter-spacing: -0.035em;
  font-weight: 400;
  color: var(--accent);
  margin: 10px 0 12px;
}

.hero-sub {
  margin: 0;
  max-width: 56ch;
  font-size: 16px;
  line-height: 1.6;
  color: var(--dim);
}

.tiles {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  margin-bottom: 40px;
}

.tiles .card {
  margin: 0;
  padding: 18px 22px 18px 0;
  border-right: 1px solid var(--rule);
}
.tiles .card:last-child { border-right: 0; padding-right: 0; }

.stat-value {
  font-family: var(--serif);
  font-size: 27px;
  line-height: 1.15;
  font-weight: 400;
  margin: 7px 0 4px;
}
.stat-value.is-up { color: var(--pos); }
.stat-value.is-down { color: var(--neg); }

.stat-note {
  margin: 0;
  font-family: var(--sans);
  font-size: 11.5px;
  line-height: 1.55;
  color: var(--dim);
}

/* --------------------------------------------------------------- controls */

.controls {
  display: flex;
  gap: 26px;
  flex-wrap: wrap;
  margin: 0 0 22px;
}

.seg { display: inline-flex; gap: 16px; }

.seg-btn {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  background: transparent;
  border: 0;
  border-bottom: 1.5px solid transparent;
  padding: 2px 0;
  color: var(--dim);
  cursor: pointer;
}
.seg-btn:hover { color: var(--ink); }
.seg-btn.is-on { color: var(--ink); border-bottom-color: var(--accent); }

/* A picker, not a toggle — same small-caps label, but the choice is a list. */
.seg-pick { align-items: baseline; gap: 10px; }
.seg-pick label {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dim);
}
.seg-pick select {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
  background: transparent;
  border: 0;
  border-bottom: 1.5px solid var(--rule-strong);
  padding: 1px 0 2px;
  cursor: pointer;
}
.seg-pick select:hover { border-bottom-color: var(--accent); }

/* ------------------------------------------------------------------ chart */

.chart { position: relative; width: 100%; }
.chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.chart svg:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }

.chart-card.is-loading .chart,
.chart-card.is-loading .table-wrap { opacity: 0.4; transition: opacity 0.15s ease; }

.legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 22px;
  margin-bottom: 14px;
  font-size: 12px;
  color: var(--ink-2);
}
.legend-item { display: inline-flex; align-items: center; gap: 8px; }
.legend-key { width: 18px; height: 2px; flex: none; }

/* Axis ticks are a column of digits, so they take the sans and tabular figures
   — Georgia's old-style numerals would stagger. */
.tick {
  fill: var(--dim);
  font-family: var(--sans);
  font-size: 10.5px;
  font-variant-numeric: tabular-nums;
}
.grid-line { stroke: var(--rule); stroke-width: 1; }
.axis-line { stroke: var(--rule-strong); stroke-width: 1; }
.end-label {
  fill: var(--ink);
  font-family: var(--sans);
  font-size: 11.5px;
  font-weight: 600;
}

.tip {
  position: absolute;
  pointer-events: none;
  min-width: 178px;
  padding: 12px 14px;
  background: var(--paper);
  border: 1px solid var(--ink);
  font-family: var(--sans);
  font-size: 12.5px;
  z-index: 3;
}
.tip[hidden] { display: none; }
.tip-date {
  margin: 0 0 8px;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dim);
}
.tip-row { display: flex; align-items: baseline; gap: 9px; margin-top: 5px; }
.tip-key { width: 16px; height: 2px; flex: none; transform: translateY(-4px); }
.tip-val { font-weight: 600; font-variant-numeric: tabular-nums; }
.tip-name { color: var(--dim); font-size: 11.5px; }
.tip-event {
  margin: 10px 0 0; padding-top: 9px;
  border-top: 1px solid var(--rule);
  font-size: 11.5px; color: var(--ink-2);
}

/* -------------------------------------------------------------- scenarios */

.head-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}

.drawer-toggle {
  background: transparent;
  border: 0;
  font-family: var(--sans);
  padding: 0;
  cursor: pointer;
}
.count {
  display: inline-block;
  min-width: 18px;
  margin-left: 4px;
  padding: 1px 5px;
  border: 1px solid var(--rule-strong);
  font-size: 10px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.drawer-toggle:hover .count { border-color: var(--accent); }

/* Like the stock card, this floats, so it gets an edge and a ground. */
.drawer {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: min(380px, 100vw);
  z-index: 30;
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border-left: 1px solid var(--ink);
  padding: 22px 24px 24px;
  overflow-y: auto;
  overscroll-behavior: contain;
  font-family: var(--sans);
}
.drawer[hidden] { display: none; }

.scrim {
  position: fixed;
  inset: 0;
  z-index: 29;
  background: rgba(16, 20, 24, 0.24);
}
.scrim[hidden] { display: none; }
body.drawer-open { overflow: hidden; }

.drawer-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1.5px solid var(--ink);
  padding-bottom: 10px;
}
.drawer-head h2 {
  font-family: var(--serif);
  font-size: 26px;
  font-weight: 400;
  letter-spacing: -0.02em;
  margin: 0;
}
.drawer-x {
  background: transparent;
  border: 0;
  font-size: 22px;
  line-height: 1;
  color: var(--dim);
  cursor: pointer;
  padding: 0 2px;
}
.drawer-x:hover { color: var(--accent); }

.drawer-sub {
  margin: 12px 0 0;
  font-size: 11.5px;
  line-height: 1.55;
  color: var(--dim);
}

.drawer-actions {
  display: flex;
  gap: 18px;
  margin: 16px 0 4px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--rule);
}
.drawer-btn {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  background: transparent;
  border: 0;
  border-bottom: 1.5px solid var(--accent);
  padding: 3px 0;
  color: var(--accent);
  cursor: pointer;
}
.drawer-btn.is-quiet { color: var(--dim); border-bottom-color: var(--rule-strong); }
.drawer-btn:hover:not(:disabled) { color: var(--ink); border-bottom-color: var(--ink); }
.drawer-btn:disabled { color: var(--rule-strong); border-bottom-color: var(--rule); cursor: default; }

.sc-list { list-style: none; margin: 0; padding: 0; }

.sc-item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: start;
  gap: 12px;
  padding: 13px 0;
  border-bottom: 1px solid var(--rule);
}

.sc-check { margin: 3px 0 0; accent-color: var(--accent); }
.sc-check:disabled { opacity: 0.35; }

.sc-main { min-width: 0; }

.sc-label {
  display: block;
  width: 100%;
  text-align: left;
  font-family: var(--serif);
  font-size: 15px;
  line-height: 1.35;
  color: var(--ink);
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
}
.sc-label:hover { color: var(--accent); }

.sc-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  margin: 4px 0 0;
  font-size: 11px;
  color: var(--dim);
}
.sc-summary { font-variant-numeric: tabular-nums; }
.sc-when { color: var(--rule-strong); }

.sc-drop {
  background: transparent;
  border: 0;
  font-size: 15px;
  line-height: 1;
  color: var(--rule-strong);
  cursor: pointer;
  padding: 2px 0 0;
}
.sc-drop:hover { color: var(--accent); }

/* ---------------------------------------------------------------- compare */

/* The terms are the premise of the comparison, so they're set like the ask
   box — a standing headline, not a settings panel. */
.terms {
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding: 18px 0 20px;
  margin-bottom: 34px;
}
.terms-title {
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--dim);
  font-weight: 600;
  margin: 0 0 14px;
}
.terms-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 24px;
}
.field { display: flex; flex-direction: column; gap: 5px; }
.field label {
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--dim);
}
.field input {
  font-family: var(--serif);
  font-size: 19px;
  color: var(--ink);
  background: transparent;
  border: 0;
  border-bottom: 1.5px solid var(--rule-strong);
  padding: 2px 0 5px;
  min-width: 168px;
}
.field input:focus { outline: 0; border-bottom-color: var(--accent); }

#cmp-apply {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  background: transparent;
  border: 0;
  border-bottom: 1.5px solid var(--accent);
  padding: 4px 0 6px;
  cursor: pointer;
}
#cmp-apply:hover { color: var(--ink); border-bottom-color: var(--ink); }

.terms-note {
  margin: 14px 0 0;
  font-family: var(--sans);
  font-size: 11.5px;
  line-height: 1.55;
  color: var(--dim);
}

/* In the ranking table the swatch sits inline with the scenario's name. */
.rank-key {
  display: inline-block;
  width: 16px;
  height: 2px;
  margin-right: 9px;
  transform: translateY(-3px);
}
td.is-up { color: var(--pos); }
td.is-down { color: var(--neg); }

/* ------------------------------------------------------------ stock card */

/* The one place on the page that is a box. It has to be: it floats over the
   paper, so it needs an edge and a ground of its own to sit on. Everything
   inside still follows the house rules — hairline rules, sans labels, Georgia
   for the name and the price. */
.stock-card {
  position: fixed;
  z-index: 20;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 16px 18px 15px;
  background: var(--paper);
  border: 1px solid var(--ink);
  box-shadow: 3px 3px 0 rgba(16, 20, 24, 0.09);
  font-family: var(--sans);
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ink-2);
}
.stock-card[hidden] { display: none; }

.sc-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.sc-sym {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
}
/* Exchange names arrive already cased ("NasdaqGS", "NYSE"); the uppercase
   transform the other small labels take would render that as NASDAQGS. */
.sc-ex {
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--dim);
  text-align: right;
}

.sc-name {
  font-family: var(--serif);
  font-size: 19px;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 5px 0 0;
}

.sc-quote {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  margin: 7px 0 0;
}
.sc-px {
  font-family: var(--serif);
  font-size: 21px;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.sc-chg { font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }
.sc-chg.is-up { color: var(--pos); }
.sc-chg.is-down { color: var(--neg); }

/* The figure the trigger was already showing, repeated because the card is
   sitting on top of it. */
.sc-note {
  margin: 9px 0 0;
  padding-top: 9px;
  border-top: 1px solid var(--rule);
  font-size: 11.5px;
  color: var(--dim);
}

.sc-range { margin: 13px 0 0; }
.sc-range-track {
  position: relative;
  height: 3px;
  background: var(--rule);
}
.sc-range-mark {
  position: absolute;
  top: -3px;
  width: 2px;
  height: 9px;
  margin-left: -1px;
  background: var(--accent);
}
.sc-range-labels {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-top: 5px;
  font-size: 10.5px;
  color: var(--dim);
  font-variant-numeric: tabular-nums;
}
.sc-range-title {
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 9.5px;
}

.sc-facts { margin: 13px 0 0; }
.sc-fact {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 5px 0;
  border-top: 1px solid var(--rule);
}
.sc-fact dt {
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dim);
  flex: none;
}
.sc-fact dd {
  margin: 0;
  text-align: right;
  font-size: 11.5px;
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}

.sc-section {
  margin: 15px 0 0;
  padding-top: 11px;
  border-top: 1px solid var(--rule-strong);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--dim);
}

.sc-news { list-style: none; margin: 8px 0 0; padding: 0; }
.sc-news li + li { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--rule); }

/* Wire headlines run long and a few of them would turn the card into a page.
   Two lines is enough to tell whether it's worth the click. */
.sc-story {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--ink);
  text-decoration: none;
  text-decoration-color: var(--rule-strong);
}
.sc-story:hover, .sc-story:focus-visible { color: var(--accent); text-decoration: underline; }

.sc-meta { margin: 3px 0 0; font-size: 10.5px; color: var(--dim); }

.sc-more {
  display: inline-block;
  margin-top: 14px;
  padding-top: 11px;
  border-top: 1px solid var(--rule);
  width: 100%;
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--dim);
  text-decoration: none;
}
.sc-more::after { content: " ↗"; }
.sc-more:hover, .sc-more:focus-visible { color: var(--accent); }

.sc-status { margin: 12px 0 0; font-size: 11.5px; color: var(--dim); }

/* The trigger. A dotted underline is the long-standing "there's more here"
   mark, and it keeps the name reading as part of the sentence. */
.stock-chip {
  font: inherit;
  color: inherit;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: help;
  text-decoration: underline dotted var(--rule-strong);
  text-underline-offset: 3px;
}
.stock-chip:hover { color: var(--accent); text-decoration-color: var(--accent); }

/* In running prose it takes the ink of the emphasised text around it, so the
   sentence still scans as a sentence. */
.stock-chip.is-prose { color: var(--ink); }
.stock-chip.is-prose:hover { color: var(--accent); }

/* In the ranked tables the ticker keeps its column's weight. */
td .stock-chip { font-weight: 600; color: var(--ink); letter-spacing: 0.02em; }

/* ------------------------------------------------------------ table view */

.table-wrap { overflow-x: auto; }

table {
  border-collapse: collapse;
  width: 100%;
  font-family: var(--sans);
  font-size: 12.5px;
}
th, td { padding: 9px 20px 9px 0; text-align: left; white-space: nowrap; }
td { font-variant-numeric: tabular-nums; color: var(--ink-2); }
thead th {
  color: var(--dim);
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--rule-strong);
}
tbody tr + tr td { border-top: 1px solid var(--rule); }

/* ----------------------------------------------------------- ranked bars */

.bar-label {
  fill: var(--ink);
  font-family: var(--sans);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.03em;
}
.bar-value {
  fill: var(--ink);
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.bar-row:focus-visible { outline: 2px solid var(--accent); }

.lb-hint {
  margin: 16px 0 0;
  font-size: 11.5px;
  letter-spacing: 0.04em;
  color: var(--dim);
}

#lb-table tbody tr { cursor: pointer; }
#lb-table tbody tr:hover td { color: var(--ink); background: var(--paper-sunk); }

/* --------------------------------------------------------------- timeline */

.timeline { list-style: none; margin: 0; padding: 0; }

/* No icons. The date carries the when, the tag carries the kind, and the
   headline carries the story — none of which an emoji was doing. */
.timeline li {
  padding: 18px 0;
  border-top: 1px solid var(--rule);
  max-width: 64ch;
}
.timeline li:first-child { border-top: 1px solid var(--rule-strong); }

.tl-date { margin: 0 0 6px; }
.tl-date .tl-tag { color: var(--ink-2); }

.tl-head {
  margin: 0;
  font-size: 19px;
  line-height: 1.3;
  font-weight: 400;
  letter-spacing: -0.005em;
}

.tl-detail {
  margin: 5px 0 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--dim);
}

/* Severity tints the small tag, never the headline — a page of coloured
   headlines reads as a warning label, not a timeline. */
.tl-good .tl-tag { color: var(--good); }
.tl-warning .tl-tag { color: var(--warning); }
.tl-serious .tl-tag { color: var(--serious); }
.tl-critical .tl-tag { color: var(--critical); }
.tl-neutral .tl-tag { color: var(--dim); }

.disclaimer {
  font-size: 11.5px;
  line-height: 1.7;
  color: var(--dim);
  max-width: 76ch;
  margin: 34px 0 0;
  padding-top: 18px;
  border-top: 1px solid var(--rule);
}

/* ----------------------------------------------------------- narrow view */

@media (max-width: 720px) {
  body { padding: 28px 18px 64px; }
  .tiles { grid-template-columns: repeat(2, 1fr); }
  .tiles .card { padding-right: 18px; }
  .tiles .card:nth-child(2n) { border-right: 0; padding-right: 0; }
  .tiles .card:nth-child(-n+2) { border-bottom: 1px solid var(--rule); }
  .ask-row { flex-wrap: wrap; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}