/* ==========================================================================
   SciRisk 100 — design system
   --------------------------------------------------------------------------
   SOURCE FILE. Copied to public/scirisk-100/assets/ by scripts/build-pages.js.
   Everything under public/scirisk-100/ is generated and safe to delete; edit
   this file, not the copy.

   The rules this file follows, so a future session does not drift:

   1. DATA FIRST. Every page opens on a figure, not on a headline. The type
      scale is deliberately small — a terminal earns attention with numbers,
      not with 48px marketing type.
   2. ORDERED COLOUR, USED SPARINGLY. The risk grade is a five-step ORDERED
      scale, so it gets an ordered ramp: neutral at the safe end, warming
      through amber to red at the tail. Five different hues would read as five
      categories, and painting all 100 rows in colour destroys the signal that
      matters — which companies sit in the tail.
   3. MAGNITUDE IS ENCODED, NOT JUST PRINTED. Long numeric columns carry a
      subtle in-cell bar so 100 rows can be scanned rather than read.
   4. ONE UNIT PER COLUMN. Units live in the column header; cells carry bare
      numerals so digits align and the column can be compared vertically.
   5. PROVENANCE IS CHROME. As-of date, model version and beta status ride
      directly under the masthead on every data page.
   6. No card shadows, no gradients, no illustration, no motion beyond a
      120ms hover.

   Palette continues the production calculator's slate so the two products
   read as one site.
   ========================================================================== */

:root {
  --bg:        #0e1526;
  --bg-2:      #0a1020;
  --surface:   #141d31;
  --surface-2: #18233b;
  --line:      #223049;
  --line-soft: #1a2438;
  --text:      #e8eef8;
  --text-2:    #c3cfe0;
  --muted:     #93a3bd;
  --dim:       #64768f;
  --accent:    #7f9cf5;
  --accent-dk: #4557c4;

  /* Ordered risk ramp — neutral -> amber -> red. Monotonic in attention, so
     the scale reads as ordered even for a reader who cannot separate hues. */
  --sc1: #6b7d96;
  --sc2: #9aa8bd;
  --sc3: #cb9a44;
  --sc4: #dc7c46;
  --sc5: #e05265;

  /* Neutral encoding colour for magnitude bars: colour on 100 rows is noise,
     so the bars are structural, not semantic. */
  --bar: #35507e;
  --bar-soft: #1f2c47;

  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --page: 1320px;
  --gut: clamp(1rem, 3vw, 2.25rem);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

/* REVERTED (3 Sep, same day): `overflow-x: clip` on html/body, tried as a
   page-level safety net for the WebKit overflow below, made it worse — the
   next CI run showed overflow growing to 622px/532px/244px on routes that
   carry a table (previously a flat 47px everywhere), i.e. it broke
   `.table-scroll`'s own containment instead of fixing anything. `clip`
   likely needs overflow-y set alongside it to behave predictably across
   engines; not worth the risk blind. Left as a documented dead end so it
   isn't retried. See the `.nav { min-width: 0 }` fix below for the part
   that's still live, and the CI run log (33783221172) for the actual
   before/after overflow numbers this decision is based on. */

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 14.5px;
  line-height: 1.55;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px;
}

.wrap { max-width: var(--page); margin: 0 auto; padding: 0 var(--gut); }
.narrow { max-width: 76ch; }

/* ── Chrome ─────────────────────────────────────────────────────────────── */

.masthead {
  border-bottom: 1px solid var(--line);
  background: var(--bg-2);
  position: sticky; top: 0; z-index: 20;
}
.masthead .wrap { display: flex; align-items: center; gap: 1.5rem; min-height: 54px; flex-wrap: wrap; }
.brand { font-weight: 700; letter-spacing: -0.015em; font-size: 1rem; color: var(--text); }
.brand:hover { text-decoration: none; }
.brand span { color: var(--accent); }
.nav { display: flex; gap: 1.1rem; flex: 1 1 auto; flex-wrap: wrap; min-width: 0; }
.nav a { color: var(--muted); font-size: 0.82rem; padding: 0.25rem 0; }
.nav a:hover { color: var(--text); text-decoration: none; }
.nav a[aria-current="page"] { color: var(--text); box-shadow: inset 0 -2px 0 var(--accent); }

/* Provenance rail. The as-of date, the model version and the beta status are
   load-bearing on a model-derived product, so they ride under the masthead on
   every data page rather than sitting in a block below the fold. */
.asof {
  border-bottom: 1px solid var(--line-soft);
  background: var(--bg-2);
  font-family: var(--mono);
  font-size: 0.68rem;
  color: var(--dim);
  letter-spacing: 0.02em;
}
.asof .wrap { display: flex; gap: 0.55rem 1.15rem; flex-wrap: wrap; align-items: center; min-height: 30px; }
.asof b { color: var(--muted); font-weight: 500; }
.asof .sep { color: var(--line); }
.asof .beta {
  color: var(--sc3); border: 1px solid currentColor; border-radius: 2px;
  padding: 0 0.3rem; font-size: 0.62rem; letter-spacing: 0.08em;
}
.asof a { color: var(--dim); text-decoration: underline; text-underline-offset: 2px; }
.asof a:hover { color: var(--muted); }

.btn {
  display: inline-block; border: 1px solid var(--accent-dk); background: var(--accent-dk);
  color: #fff; padding: 0.46rem 0.9rem; border-radius: 2px; font-size: 0.82rem;
  font-weight: 600; letter-spacing: 0.01em; transition: background 120ms ease, border-color 120ms ease;
  cursor: pointer; font-family: inherit;
}
.btn:hover { background: #5266d8; border-color: #5266d8; text-decoration: none; }
.btn-ghost { background: transparent; border-color: var(--line); color: var(--text); }
.btn-ghost:hover { background: var(--surface); border-color: var(--dim); }
.btn-sm { padding: 0.28rem 0.55rem; font-size: 0.74rem; font-weight: 500; }

/* ── Type scale ─────────────────────────────────────────────────────────── */

h1, h2, h3, h4 { letter-spacing: -0.015em; line-height: 1.22; margin: 0 0 0.55rem; font-weight: 600; }
h1 { font-size: clamp(1.55rem, 2.8vw, 2.05rem); }
h2 { font-size: clamp(1.1rem, 1.9vw, 1.3rem); margin-top: 0; }
h3 { font-size: 0.95rem; }
p { margin: 0 0 0.85rem; }
.lede { font-size: 1rem; color: var(--muted); max-width: 72ch; }

.eyebrow {
  font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.15em;
  color: var(--dim); font-weight: 600; margin: 0 0 0.5rem;
}
.eyebrow a { color: var(--dim); }
.eyebrow a:hover { color: var(--muted); }

.section { padding: 2.3rem 0; border-top: 1px solid var(--line-soft); }
.section:first-of-type { border-top: 0; }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.section-head p { color: var(--muted); margin: 0.15rem 0 0; font-size: 0.87rem; max-width: 78ch; }
.note { color: var(--dim); font-size: 0.78rem; line-height: 1.5; }
.mono { font-family: var(--mono); }
.nowrap { white-space: nowrap; }

/* ── Index masthead (the fold) ──────────────────────────────────────────── */
/* Two columns: identity and the argument on the left, live figures and the
   current leaders on the right. A visitor sees real data without scrolling. */

.index-hero { padding: 2rem 0 1.8rem; border-bottom: 1px solid var(--line-soft); }
.index-hero .cols { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem; }
@media (min-width: 1000px) { .index-hero .cols { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: 3rem; } }

.index-title { font-size: clamp(1.9rem, 4.2vw, 2.9rem); letter-spacing: -0.03em; font-weight: 650; margin: 0.2rem 0 0.35rem; }
.index-title .mark { font-size: 0.62rem; vertical-align: super; color: var(--dim); letter-spacing: 0.04em; font-weight: 500; }
.index-sub { color: var(--muted); font-size: 1rem; margin: 0 0 1.15rem; }
.index-question {
  font-size: clamp(1rem, 1.9vw, 1.18rem); color: var(--text-2); max-width: 42ch;
  border-left: 2px solid var(--accent); padding-left: 0.95rem; margin: 0 0 1.4rem; line-height: 1.45;
}
.cta-row { display: flex; gap: 0.6rem; flex-wrap: wrap; align-items: center; }

/* The index level. One figure, unambiguously the headline. */
.headline {
  border: 1px solid var(--line); border-radius: 3px; background: var(--surface);
  padding: 1.15rem 1.3rem; margin-bottom: 1px;
}
.headline .k { font-size: 0.63rem; text-transform: uppercase; letter-spacing: 0.15em; color: var(--dim); font-weight: 600; }
.headline .v {
  font-family: var(--mono); font-size: clamp(2rem, 4.6vw, 2.9rem); line-height: 1.05;
  letter-spacing: -0.035em; margin: 0.35rem 0 0.2rem; color: var(--text);
}
.headline .s { font-size: 0.8rem; color: var(--muted); }
.headline-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-top: 0; border-radius: 0 0 3px 3px; }
.headline-row > div { background: var(--surface); padding: 0.75rem 1rem; }
.headline-row .k { font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.13em; color: var(--dim); font-weight: 600; }
.headline-row .v { font-family: var(--mono); font-size: 1.02rem; margin-top: 0.15rem; letter-spacing: -0.02em; }

/* ── Stat strip ─────────────────────────────────────────────────────────── */
/* Two weights, deliberately: `lead` for measures a reader acts on, `meta` for
   coverage facts that answer "what is in this index" and nothing more. */

.stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
  border: 1px solid var(--line); border-radius: 3px; overflow: hidden; background: var(--surface);
}
.stat {
  padding: 0.85rem 1rem; display: flex; flex-direction: column;
  border-right: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.stat:last-child { border-right: 0; }
.stat .k { min-height: 2.1em; font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--dim); font-weight: 600; }
.stat .v { font-family: var(--mono); font-size: 1.22rem; margin-top: 0.15rem; letter-spacing: -0.025em; }
.stat .s { font-size: 0.72rem; color: var(--dim); margin-top: 0.1rem; }
.stat.meta { background: var(--bg-2); }
.stat.meta .v { font-size: 1rem; color: var(--text-2); }

@media (min-width: 900px) { .stats { grid-template-columns: repeat(4, 1fr); } }

/* ── Metric blocks (company profile) ────────────────────────────────────── */
/* One dominant figure with its interval and intensity attached, then a quiet
   secondary row. The page exists for the ESCRC; the layout should say so. */

.profile-figure {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 1px;
  background: var(--line); border: 1px solid var(--line); border-radius: 3px;
}
@media (min-width: 820px) { .profile-figure { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); } }
.profile-figure > div { background: var(--surface); padding: 1.2rem 1.35rem; }
.profile-figure .k { font-size: 0.63rem; text-transform: uppercase; letter-spacing: 0.14em; color: var(--dim); font-weight: 600; }
.profile-figure .v { font-family: var(--mono); font-size: clamp(2rem, 4.4vw, 2.75rem); line-height: 1.05; letter-spacing: -0.035em; margin: 0.35rem 0 0.3rem; }
.profile-figure .primary .v { color: var(--accent); }
.profile-figure .s { font-size: 0.8rem; color: var(--muted); }

.metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-top: 0; }
.metric { background: var(--bg-2); padding: 0.8rem 1rem; }
.metric .k { font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.13em; color: var(--dim); font-weight: 600; }
.metric .v { font-family: var(--mono); font-size: 1.1rem; margin-top: 0.15rem; letter-spacing: -0.02em; color: var(--text-2); }
.metric .s { font-size: 0.72rem; color: var(--dim); margin-top: 0.1rem; }

/* ── Tables ─────────────────────────────────────────────────────────────── */

.table-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: 3px; }

/* Sticky column headers only inside a container that actually scrolls
   vertically (.table-scroll.frozen, used for the 100-row ranking). An
   `overflow-x: auto` box computes `overflow-y` to `auto` as well, so it is
   the sticky containing block — offsetting against the page masthead here
   instead pushed the header down over the first data row. */
.table-scroll.frozen { max-height: 78vh; overflow: auto; }
.table-scroll.frozen table.data thead th { position: sticky; top: 0; }

table.data { width: 100%; border-collapse: collapse; font-size: 0.83rem; min-width: 760px; }
table.data thead th {
  background: var(--bg-2); z-index: 2;
  text-align: left; font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--dim); font-weight: 600; padding: 0.55rem 0.65rem; white-space: nowrap;
  border-bottom: 1px solid var(--line); vertical-align: bottom;
}
/* One unit per column: it lives in the header so cells stay bare numerals and
   the column can be read vertically without re-parsing a suffix per row. */
table.data thead th .th-label { display: block; white-space: nowrap; }
table.data thead th .unit { display: block; color: var(--muted); font-size: 0.58rem; letter-spacing: 0.06em; text-transform: none; margin-top: 0.1rem; }
table.data.compact { min-width: 0; }
table.data.compact td, table.data.compact th { padding-left: 0.4rem; padding-right: 0.4rem; }
table.data th.sortable { cursor: pointer; user-select: none; }
table.data th.sortable:hover { color: var(--text); }
table.data th .dir { opacity: 0.3; margin-left: 0.25rem; font-size: 0.65rem; }
table.data th[aria-sort] { color: var(--text); }
table.data th[aria-sort] .dir { opacity: 1; color: var(--accent); }
table.data tbody td { padding: 0.42rem 0.65rem; border-bottom: 1px solid var(--line-soft); white-space: nowrap; }
table.data tbody tr:hover td { background: var(--surface); }
table.data tbody tr:last-child td { border-bottom: 0; }
table.data td.num, table.data th.num { text-align: right; font-family: var(--mono); }
table.data td.name { white-space: normal; min-width: 170px; font-weight: 500; }
table.data td.name a { color: var(--text); }
table.data td.name a:hover { color: var(--accent); }
table.data td.rank { font-family: var(--mono); color: var(--muted); width: 3rem; text-align: right; }
table.data td.dim, table.data .dim { color: var(--muted); }
table.data td .sub { display: block; font-size: 0.72rem; color: var(--dim); font-family: var(--sans); font-weight: 400; }
table.data tbody tr.is-self td { background: var(--surface-2); }
table.data tbody tr.is-self td.name a { color: var(--accent); }

/* In-cell magnitude bar. Sits behind the numeral so a 100-row column can be
   scanned for shape, not read row by row. Structural colour only. */
/* The bar needs runway: in a column sized to its own digits, a 100%-width bar
   is only as wide as the numeral and encodes nothing. Both bar columns get the
   same floor so their bars stay comparable with each other. */
td.bar-cell, th.bar-col { min-width: 104px; }
td.bar-cell { position: relative; }
td.bar-cell .fig { position: relative; z-index: 1; }
/* Anchored to the RIGHT edge, growing leftwards: the column is right-aligned,
   so a bar that grows from the left detaches from its own numeral and reads as
   though it belongs to the column before it. */
td.bar-cell .mag {
  position: absolute; right: 0; top: 50%; transform: translateY(-50%);
  height: 16px; background: var(--bar-soft); border-right: 2px solid var(--bar);
  border-radius: 1px 0 0 1px; z-index: 0;
}
tr:hover td.bar-cell .mag { background: #24365a; }

table.data caption {
  caption-side: bottom; text-align: left; color: var(--dim); font-size: 0.74rem;
  padding: 0.55rem 0.65rem; border-top: 1px solid var(--line-soft);
}

/* ── Grade pill ─────────────────────────────────────────────────────────── */
/* Quiet at the safe end by design: the reader should notice the tail, and a
   table where every row is coloured tells them nothing. */

.grade {
  display: inline-block; font-family: var(--mono); font-size: 0.68rem; font-weight: 600;
  padding: 0.05rem 0.36rem; border-radius: 2px; border: 1px solid currentColor; letter-spacing: 0.02em;
}
.grade-SC1 { color: var(--sc1); }
.grade-SC2 { color: var(--sc2); }
.grade-SC3 { color: var(--sc3); }
.grade-SC4 { color: var(--sc4); }
.grade-SC5 { color: var(--sc5); }
.grade-bg-SC1 { background: var(--sc1); }
.grade-bg-SC2 { background: var(--sc2); }
.grade-bg-SC3 { background: var(--sc3); }
.grade-bg-SC4 { background: var(--sc4); }
.grade-bg-SC5 { background: var(--sc5); }
.grade-lg { font-size: 0.8rem; padding: 0.15rem 0.5rem; }

/* Grade distribution as one stacked bar — it is a distribution, and five
   separate bars of similar length said less in more space. */
.stackbar { display: flex; height: 22px; border-radius: 2px; overflow: hidden; border: 1px solid var(--line); }
.stackbar span { display: block; }
.stackbar-key { display: flex; flex-wrap: wrap; gap: 0.35rem 1.1rem; margin-top: 0.7rem; font-size: 0.76rem; color: var(--muted); }
.stackbar-key i { display: inline-block; width: 8px; height: 8px; border-radius: 1px; margin-right: 0.4rem; vertical-align: 0; font-style: normal; }
.stackbar-key b { color: var(--text); font-family: var(--mono); font-weight: 500; }

/* ── Filter bar ─────────────────────────────────────────────────────────── */

.filters {
  display: flex; gap: 0.55rem; flex-wrap: wrap; align-items: center;
  padding: 0.75rem; border: 1px solid var(--line); border-radius: 3px;
  background: var(--surface); margin-bottom: 0.85rem;
}
.filters label { font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--dim); font-weight: 600; display: block; margin-bottom: 0.22rem; }
.filters .field { flex: 0 0 auto; }
.filters .field.grow { flex: 1 1 210px; min-width: 170px; }
input[type="search"], select {
  background: var(--bg-2); color: var(--text); border: 1px solid var(--line);
  border-radius: 2px; padding: 0.38rem 0.5rem; font-family: inherit; font-size: 0.83rem; width: 100%;
}
input[type="search"]::placeholder { color: var(--dim); }
.result-count { font-size: 0.76rem; color: var(--muted); margin-left: auto; align-self: flex-end; padding-bottom: 0.4rem; font-family: var(--mono); }

/* ── Charts ─────────────────────────────────────────────────────────────── */

.chart { border: 1px solid var(--line); border-radius: 3px; background: var(--surface); padding: 0.95rem; }
.chart-toolbar { display: flex; align-items: center; gap: 0.55rem; margin-bottom: 0.85rem; }
.chart-toolbar label { font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--dim); font-weight: 600; }
.chart-toolbar select { width: auto; min-width: 210px; }
.chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.chart .axis-label { font-size: 10px; fill: var(--dim); font-family: var(--sans); }
.chart .tick { font-size: 10px; fill: var(--dim); font-family: var(--mono); }
.chart .grid { stroke: var(--line-soft); stroke-width: 1; }
.chart .point-label { font-size: 10px; fill: var(--text-2); font-family: var(--sans); paint-order: stroke; stroke: var(--bg); stroke-width: 3px; stroke-linejoin: round; }
.bubble { cursor: pointer; transition: opacity 120ms ease; }
.bubble:hover { stroke: var(--text); stroke-width: 1.5; }
.chart-legend { display: flex; gap: 0.75rem; flex-wrap: wrap; font-size: 0.7rem; color: var(--muted); margin-top: 0.65rem; }
.chart-legend span.swatch { display: inline-block; width: 8px; height: 8px; border-radius: 1px; margin-right: 0.3rem; vertical-align: 0; }
.chart-tip {
  position: absolute; pointer-events: none; background: var(--bg-2); border: 1px solid var(--line);
  border-radius: 2px; padding: 0.45rem 0.6rem; font-size: 0.74rem; line-height: 1.4;
  box-shadow: 0 4px 14px rgba(0,0,0,0.5); z-index: 30; max-width: 240px;
}
.chart-tip b { font-size: 0.8rem; }
.chart-tip .mono { color: var(--muted); }

/* Horizontal bar rows (sector / driver breakdowns) */
.bars { display: grid; gap: 0.4rem; }
.bar-row { display: grid; grid-template-columns: minmax(115px, 1.3fr) 1fr minmax(68px, auto); gap: 0.7rem; align-items: center; font-size: 0.82rem; }
.bar-row .lbl { color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar-row .lbl a { color: var(--text-2); }
.bar-row .lbl a:hover { color: var(--accent); }
.bar-row .track { background: var(--line-soft); height: 7px; border-radius: 1px; overflow: hidden; }
.bar-row .fill { height: 100%; background: var(--bar); border-radius: 1px; }
.bar-row .val { font-family: var(--mono); font-size: 0.78rem; color: var(--muted); text-align: right; }

/* ── Panels & grids ─────────────────────────────────────────────────────── */

.panel { border: 1px solid var(--line); border-radius: 3px; background: var(--surface); padding: 1.05rem 1.15rem; }
.panel h3 { margin-top: 0; }
.panel > .note:last-child { margin-bottom: 0; }
.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 1rem; align-items: start; }
.grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1rem; align-items: start; }

.kv { display: grid; grid-template-columns: auto 1fr; gap: 0.28rem 1rem; font-size: 0.82rem; }
.kv dt { color: var(--dim); }
.kv dd { margin: 0; font-family: var(--mono); font-size: 0.8rem; color: var(--text-2); }

.tag {
  display: inline-block; font-size: 0.64rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--muted); border: 1px solid var(--line); border-radius: 2px; padding: 0.05rem 0.36rem; font-weight: 600;
}
.tag.beta { color: var(--sc3); border-color: currentColor; }

/* ── Disclosure blocks ──────────────────────────────────────────────────── */

.provenance {
  border: 1px solid var(--line); border-left: 2px solid var(--dim); border-radius: 2px;
  background: var(--bg-2); padding: 0.85rem 1.05rem; font-size: 0.77rem; color: var(--muted); line-height: 1.6;
}
.provenance strong { color: var(--text-2); font-weight: 600; }
.provenance .kv { margin-top: 0.55rem; font-size: 0.76rem; }
.disclaimer { border-left-color: var(--sc3); }

.callout {
  border: 1px solid var(--line); border-left: 2px solid var(--accent); border-radius: 2px;
  background: var(--surface); padding: 0.95rem 1.1rem;
}
.callout h3 { margin-bottom: 0.3rem; }
.callout p:last-child { margin-bottom: 0; }

/* Conversion block. Distinct from a callout: this is the one place on the
   page asking for an action, so it gets its own weight. */
.convert {
  border: 1px solid var(--accent-dk); border-radius: 3px;
  background: linear-gradient(0deg, var(--surface), var(--surface));
  padding: 1.15rem 1.3rem;
}
.convert h3 { font-size: 1.05rem; margin-bottom: 0.35rem; }
.convert p { color: var(--muted); font-size: 0.87rem; max-width: 58ch; }
.convert p:last-of-type { margin-bottom: 0.9rem; }
.convert .cta-row { margin-top: 0.2rem; }

/* ── Quarterly-update signup ───────────────────────────────────────────── */
.subscribe { border: 1px solid var(--line); border-radius: 3px; background: var(--surface); padding: 0.95rem 1.1rem; }
.subscribe label { font-size: 0.8rem; font-weight: 600; color: var(--text); display: block; margin-bottom: 0.5rem; }
.subscribe-row { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.subscribe-row input[type="email"] { flex: 1 1 220px; background: var(--bg-2); color: var(--text); border: 1px solid var(--line); border-radius: 2px; padding: 0.45rem 0.6rem; font-family: inherit; font-size: 0.85rem; }
.subscribe-status { font-size: 0.76rem; margin: 0.5rem 0 0; min-height: 1.1em; }
.subscribe-ok { color: #10b981; }
.subscribe-err { color: #f59e0b; }

.phase2 { border-left-color: var(--dim); }
.phase2 h3 { color: var(--muted); font-size: 0.9rem; }

/* ── Footer ─────────────────────────────────────────────────────────────── */

.foot { border-top: 1px solid var(--line); margin-top: 2.5rem; padding: 1.9rem 0 2.6rem; color: var(--dim); font-size: 0.78rem; }
.foot .cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 1.4rem; margin-bottom: 1.4rem; }
.foot h4 { font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--muted); margin-bottom: 0.45rem; }
.foot ul { list-style: none; margin: 0; padding: 0; }
.foot li { margin-bottom: 0.28rem; }
.foot a { color: var(--muted); }
.foot .rule { border-top: 1px solid var(--line-soft); padding-top: 1.1rem; }

.hidden { display: none !important; }
.empty-state { padding: 2.2rem 1rem; text-align: center; color: var(--muted); }

/* ── Insights (editorial) ───────────────────────────────────────────────── */
/* The only long-form reading surface on the site. Everything else here is a
   terminal: dense, scanned, numeric. An argument is READ, so this section
   gets the one thing the rest of the design system deliberately refuses —
   a comfortable measure and generous vertical rhythm. It borrows the same
   palette and the same .chart frame so it still reads as the same product. */

/* The prose keeps a 68ch measure; the FIGURES do not. A 920-unit chart
   squeezed into a reading column loses its 11px axis labels, so the article
   container runs the full width of .wrap.reading and the measure is applied
   to the text blocks individually. No negative margins, so nothing here can
   overflow the viewport on a phone. */
.wrap.reading { max-width: 1020px; }
.article { font-size: 1rem; line-height: 1.62; color: var(--text-2); }
.article > p, .article > ul, .article > h2, .article > dl,
.article > .statline, .article > .assumption, .article > .table-scroll,
.article figcaption { max-width: 68ch; }
.article h2 {
  font-size: 1.16rem; color: var(--text); margin: 2.6rem 0 0.25rem;
  max-width: 34ch; text-wrap: balance;
}
.article h2::before {
  content: ""; display: block; width: 26px; height: 2px;
  background: var(--accent); margin-bottom: 0.8rem;
}
.article p { margin: 0 0 1.05rem; }
.article strong { color: var(--text); font-weight: 600; }
.article em { color: var(--text); font-style: italic; }
.article .lead { font-size: 1.06rem; }
.article ul { margin: 0 0 1.1rem; padding: 0; list-style: none; }
.article ul li { position: relative; padding-left: 18px; margin-bottom: 0.7rem; }
.article ul li::before {
  content: ""; position: absolute; left: 0; top: 0.62em;
  width: 5px; height: 5px; background: var(--dim);
}

/* Run chrome for an article. The .asof rail carries the INDEX's settings;
   a worked example runs its own, so it states them itself rather than
   letting the reader assume the index bar applies. */
.runbar {
  display: flex; flex-wrap: wrap; gap: 0.35rem 1.15rem;
  border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft);
  padding: 0.6rem 0; margin: 0 0 0.4rem;
  font-family: var(--mono); font-size: 0.7rem; color: var(--dim);
}
.runbar b { color: var(--muted); font-weight: 500; }

.article figure { margin: 1.9rem 0 2.1rem; }
.article figcaption {
  font-family: var(--mono); font-size: 0.71rem; color: var(--dim);
  margin-top: 0.55rem; line-height: 1.55;
}

/* Two figures the reader compares against each other, so they share a rule
   rather than sitting in separate boxes. */
.statline { border-left: 2px solid var(--accent); padding: 0.2rem 0 0.2rem 1.1rem; margin: 1.5rem 0 1.6rem; }
.statline div { display: flex; justify-content: space-between; gap: 1.5rem; padding: 0.3rem 0; font-size: 0.9rem; }
.statline span:last-child { font-family: var(--mono); color: var(--text); font-weight: 600; }

/* A model assumption stated in the reader's path, not in a footnote. Amber
   because it is the same class of disclosure as the beta tag. */
.assumption {
  border: 1px solid var(--line); border-left: 2px solid var(--sc3); border-radius: 2px;
  background: var(--surface); padding: 1rem 1.25rem; margin: 1.6rem 0; font-size: 0.92rem;
}
.assumption p:last-child { margin-bottom: 0; }
.assumption .tag { display: block; width: max-content; color: var(--sc3); border-color: currentColor; margin-bottom: 0.5rem; }

/* Field glossary: the four inputs the article asks the reader to supply. */
.fieldlist { border-top: 1px solid var(--line); margin: 1.3rem 0 1.2rem; }
.fieldlist div {
  display: grid; grid-template-columns: minmax(120px, auto) 1fr; gap: 0.2rem 1.4rem;
  padding: 0.65rem 0; border-bottom: 1px solid var(--line-soft); font-size: 0.9rem;
}
.fieldlist dt { font-family: var(--mono); font-size: 0.78rem; color: var(--accent); }
.fieldlist dd { margin: 0; color: var(--text-2); }

/* Index of articles. Card-free by house rule 6 — a rule and a hover is enough. */
.insight-index { border-top: 1px solid var(--line); }
.insight-item { display: block; padding: 1.15rem 0; border-bottom: 1px solid var(--line-soft); }
.insight-item:hover { text-decoration: none; }
.insight-item h2 { font-size: 1.05rem; color: var(--text); margin: 0.3rem 0 0.35rem; max-width: 46ch; }
.insight-item:hover h2 { color: var(--accent); }
.insight-item p { color: var(--muted); font-size: 0.87rem; margin: 0; max-width: 72ch; }
.insight-meta { font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--dim); }

/* ── Responsive ─────────────────────────────────────────────────────────── */

@media (max-width: 860px) {
  /* Chrome must not eat the fold on a phone. The masthead action shrinks to
     sit on the brand's own line, the navigation becomes a single scrolling
     row, and the provenance rail keeps only the two facts a reader needs
     before scrolling — the as-of date and the beta status. The rest is still
     on the page, in the full disclosure block. */
  .masthead .wrap { min-height: 48px; padding-top: 0.4rem; padding-bottom: 0.4rem; gap: 0.75rem; }
  .masthead .btn { margin-left: auto; padding: 0.32rem 0.6rem; font-size: 0.74rem; }
  .nav { order: 3; width: 100%; gap: 0.85rem; overflow-x: auto; flex-wrap: nowrap; padding-bottom: 0.2rem; min-width: 0; }
  .nav a { white-space: nowrap; }
  .asof .wrap { min-height: 0; padding-top: 0.3rem; padding-bottom: 0.3rem; gap: 0.5rem; flex-wrap: nowrap; overflow: hidden; }
  .asof .opt { display: none; }
  .table-scroll.frozen { max-height: none; }
  .table-scroll.frozen table.data thead th { position: static; }
  .bar-row { grid-template-columns: minmax(88px, 1fr) 1fr auto; font-size: 0.78rem; }
  .index-hero { padding-top: 1.6rem; }
  .fieldlist div { grid-template-columns: 1fr; }
  .article { font-size: 0.97rem; }
}
@media (max-width: 520px) {
  body { font-size: 14px; }
  .stat .v { font-size: 1.1rem; }
}
@media print {
  .masthead, .cta-row, .filters, .convert, .foot { display: none; }
  body { background: #fff; color: #000; }
}