/* ═══════════════════════════════════════════════════════════════════════
   components.css — one block per view. Each block is styled only through
   tokens, so a different aesthetic direction is a token + block swap.
   ═══════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────── register (498 rows) ─────────────────────── */
.filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--gap);
  margin-bottom: 0.9rem;
}
.filters__search { flex: 1 1 14rem; max-width: 22rem; }
.filters__count { margin-left: auto; font-size: var(--t-small); color: var(--ink-3); }
.filters__count b { color: var(--ink); font-weight: 600; }

.register { max-height: 27rem; overflow: auto; border-bottom: 1px solid var(--rule); }
.register table { width: 100%; min-width: 52rem; border-collapse: collapse; font-size: var(--t-body); }
.register thead th {
  position: sticky; top: 0; z-index: 1;
  background: var(--paper);
  text-align: right;
  font-weight: 600;
  font-size: var(--t-micro);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding: 0.45rem 0.55rem;
  border-bottom: 1px solid var(--ink);
  cursor: pointer;
  white-space: nowrap;
  user-select: none;
}
.register thead th:nth-child(-n + 3) { text-align: left; }
.register thead th:hover { color: var(--ink); }
.register thead th[aria-sort] { color: var(--red); }
.register thead th[aria-sort]::after { content: " ↓"; }
.register thead th[aria-sort="ascending"]::after { content: " ↑"; }

.register td { text-align: right; padding: 0.42rem 0.55rem; border-bottom: 1px solid var(--rule); white-space: nowrap; }
.register td:nth-child(-n + 3) { text-align: left; }
.register tbody tr { cursor: pointer; transition: background var(--fast) var(--ease); }
.register tbody tr:hover { background: var(--paper-2); }
.register tbody tr[aria-selected="true"] { background: var(--ink); color: var(--paper); }
.register tbody tr[aria-selected="true"] td { border-bottom-color: var(--ink); }
.register tbody tr[aria-selected="true"] :is(.up, .down, .flat, .spec, .register__name) { color: var(--paper); }
.register tbody tr.is-unrateable td { color: var(--ink-3); font-style: italic; }

.register__no { color: var(--ink-3); font-variant-numeric: tabular-nums; }
.register__tk { font-weight: 700; letter-spacing: 0.02em; }
.register__name { color: var(--ink-2); max-width: 18ch; overflow: hidden; text-overflow: ellipsis; }
.register__grade { font-weight: 700; }

.register__empty { padding: 2rem 0.55rem; color: var(--ink-3); }
.register__empty b { color: var(--ink); font-weight: 600; }

/* distribution strip: 27 notches, height = count. Not decoration — it is
   the only view that shows where the whole index sits at once. */
.dist { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 1px; height: 2.6rem; margin-bottom: 1.6rem; }
.dist__bar { flex: 1 1 0; background: var(--paper-3); position: relative; cursor: default; }
.dist__bar--ig { background: var(--ink-3); }
.dist__bar--spec { background: var(--red); }
.dist__bar[data-on="true"] { background: var(--red); }
.dist__axis { display: flex; justify-content: space-between; font-size: var(--t-micro);
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 0.9rem; }

/* ──────────────────────────────── verdict ───────────────────────────── */
.verdict { display: grid; grid-template-columns: repeat(12, 1fr); }
@media (max-width: 760px) { .verdict { grid-template-columns: 1fr; } }

.verdict__mark {
  grid-column: 1 / span 5;
  /* the letter block used to sit at the top of a tall row, leaving a hole
     under it; centring it against the KPI grid closes that gap */
  display: flex; flex-direction: column; justify-content: center;
  padding: 0.4rem 0 1rem;
}
@media (max-width: 760px) { .verdict__mark { grid-column: auto; } }
.verdict__letter {
  font-family: var(--black);
  font-size: clamp(3.6rem, 11vw, 8rem);
  line-height: 0.8;
  letter-spacing: -0.055em;
  margin-left: -0.055em;
  text-transform: uppercase;
}
.verdict__bar { height: 8px; background: var(--red); width: min(100%, 17rem); margin: 0.5rem 0 0.8rem; }
.verdict__meta { display: flex; flex-wrap: wrap; gap: 0.2rem 1.4rem; font-size: var(--t-micro);
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-3); }
.verdict__prior { margin-top: 0.9rem; font-size: var(--t-body); color: var(--ink-2); }
.verdict__prior b { font-weight: 700; color: var(--ink); }

.verdict__kpis {
  grid-column: 6 / span 7;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  border-left: 1px solid var(--ink);
}
@media (max-width: 760px) { .verdict__kpis { grid-column: auto; border-left: 0; border-top: 1px solid var(--ink); } }
.kpi { padding: 0.9rem 1rem; border-bottom: 1px solid var(--rule); }
.kpi:nth-child(odd) { border-right: 1px solid var(--rule); }
.kpi__v { font-family: var(--black); font-size: clamp(1.1rem, 2vw, 1.5rem); line-height: 1;
  letter-spacing: -0.03em; display: block; margin-top: 0.3rem; }
.kpi__d { font-size: var(--t-small); margin-top: 0.3rem; }

.verdict__lede { grid-column: 1 / span 12; border-top: 1px solid var(--ink); padding-top: 1rem; margin-top: 0.4rem; }
@media (max-width: 760px) { .verdict__lede { grid-column: auto; } }
.verdict__lede p { margin: 0; max-width: 78ch; color: var(--ink-2); font-size: 0.95rem; }
.verdict__lede b { color: var(--ink); font-weight: 600; }

/* conversion chain: PIT measures → TTC letter, one cell per hop */
.chain { display: flex; flex-wrap: wrap; margin-top: 1.2rem; border: 1px solid var(--ink); }
.chain > div { flex: 1 1 8rem; padding: 0.6rem 0.7rem; border-right: 1px solid var(--rule); min-width: 0; }
.chain > div:last-child { border-right: 0; background: var(--red); color: var(--paper); }
.chain > div:last-child .label { color: oklch(92% 0.04 30); }
.chain__v { font-weight: 700; font-size: 0.98rem; display: block; margin-top: 0.2rem; }

/* ─────────────────────────────── entries ────────────────────────────── */
.entries { width: 100%; min-width: 21rem; border-collapse: collapse; }
.entries thead th {
  text-align: right; font-weight: 600; font-size: var(--t-micro);
  letter-spacing: 0.15em; text-transform: uppercase; color: var(--ink-3);
  padding: 0 0 0.5rem 0.8rem; border-bottom: 1px solid var(--ink);
}
.entries thead th:first-child { text-align: left; }
.entries tbody tr { border-bottom: 1px solid var(--rule); }
.entries tbody tr:hover { background: var(--paper-2); }
.entries th[scope="row"] {
  text-align: left; font-weight: 600; padding: 0.55rem 1rem 0.55rem 0;
  font-size: var(--t-small); letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap;
}
.entries__gloss {
  display: block; font-weight: 400; letter-spacing: 0; text-transform: none;
  font-size: 0.73rem; color: var(--ink-3); margin-top: 0.1rem;
}
.entries td { text-align: right; padding: 0.55rem 0 0.55rem 0.8rem; font-size: var(--t-lead);
  font-weight: 500; white-space: nowrap; }
.entries td.is-prior { color: var(--ink-3); font-weight: 400; font-size: var(--t-body); }
.entries td.is-change { font-size: var(--t-small); width: 9rem; font-weight: 500; }
.entries tr.is-key td:not(.is-prior):not(.is-change) {
  font-family: var(--black); font-size: var(--t-fig); letter-spacing: -0.02em;
}

.note {
  margin: 0.8rem 0 0; font-size: 0.74rem; color: var(--ink-3); max-width: 70ch;
  border-top: 1px solid var(--rule); padding-top: 0.5rem;
}
.note b { color: var(--red); font-weight: 600; }

/* ──────────────────────────────── plates ───────────────────────────── */
.plates { display: grid; grid-template-columns: 1fr 1fr; gap: var(--pad); }
@media (max-width: 960px) { .plates { grid-template-columns: 1fr; } }
.plate { margin: 0; border-top: 1px solid var(--ink); padding-top: 0.7rem; }
.plate svg { display: block; width: 100%; height: auto; }
.plate figcaption { margin-top: 0.5rem; font-size: 0.74rem; color: var(--ink-3); max-width: 60ch; }
.plate figcaption b { color: var(--ink); font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; font-size: var(--t-micro); }
.plate__empty { padding: 1.2rem 0 0.4rem; font-size: var(--t-small); color: var(--ink-3); max-width: 44ch; }
.plate__empty b { color: var(--red); font-weight: 700; }

/* chart primitives — geometry comes from charts.js, all colour from here */
svg .ch-grid { stroke: var(--grid); stroke-width: 1; }
svg .ch-grid.ch-ig { stroke: var(--red); stroke-dasharray: 2 3; opacity: 0.6; }
svg .ch-ig-lab { fill: var(--red); }
svg .ch-axis { stroke: var(--ink); stroke-width: 1; }
svg .ch-tick { fill: var(--ink-3); font-family: var(--sans); font-size: 8px; letter-spacing: 0.06em; }
svg .ch-lab  { fill: var(--ink-2); font-family: var(--sans); font-size: 9px; font-weight: 600; }
svg .ch-val  { fill: var(--ink);   font-family: var(--sans); font-size: 9.5px; font-weight: 700; }
svg .ch-conn { stroke-width: 2; }
svg .ch-conn.ch-up { stroke: var(--green); }
svg .ch-conn.ch-down { stroke: var(--red); }
svg .ch-conn.ch-flat { stroke: var(--rule); }
svg .ch-prior { fill: var(--paper); stroke: var(--ink); stroke-width: 1.4; }
svg .ch-cur { fill: var(--ink); }
svg .ch-cur.ch-up { fill: var(--green); }
svg .ch-cur.ch-down { fill: var(--red); }
svg .ch-lab.ch-up { fill: var(--green); }
svg .ch-lab.ch-down { fill: var(--red); }
svg .ch-bar-a { fill: var(--ink); }
svg .ch-bar-e { fill: var(--red); fill-opacity: 0.85; }
svg .ch-line-a { fill: none; stroke: var(--ink); stroke-width: 2; }
svg .ch-line-e { fill: none; stroke: var(--ink-3); stroke-width: 1.4; }
svg .ch-line-d { fill: none; stroke: var(--red); stroke-width: 2; }
svg .ch-fill-a { fill: var(--ink); fill-opacity: 0.05; stroke: none; }

/* ─────────────────────────────── reading ───────────────────────────── */
.reading { display: grid; grid-template-columns: repeat(12, 1fr); gap: 0 var(--pad); }
@media (max-width: 960px) { .reading { grid-template-columns: 1fr; } }
.reading__head {
  grid-column: 1 / span 4;
  font-family: var(--black);
  font-size: clamp(1.1rem, 2vw, 1.5rem);
  line-height: 1.02;
  letter-spacing: -0.035em;
  text-transform: uppercase;
}
@media (max-width: 960px) { .reading__head { grid-column: auto; margin-bottom: 1rem; } }
.reading__body { grid-column: 5 / span 8; }
@media (max-width: 960px) { .reading__body { grid-column: auto; } }
.reading__body p { margin: 0 0 0.8rem; max-width: 70ch; color: var(--ink-2); }
.reading__body p b { color: var(--ink); font-weight: 600; }
.reading__lead {
  font-size: var(--t-lead); font-weight: 500; color: var(--ink);
  border-left: 4px solid var(--red); padding-left: 0.9rem;
}
.ai-reading {
  margin-top: 1.35rem;
  padding-top: 1rem;
  border-top: 3px solid var(--ink);
}
.ai-reading__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.ai-reading__bar p {
  margin: 0.28rem 0 0;
  color: var(--ink-3);
  font-size: var(--t-small);
}
.ai-reading__action {
  flex: 0 0 auto;
  border-color: var(--red);
  color: var(--red);
  font-weight: 700;
}
.ai-reading__action:hover:not(:disabled) {
  background: var(--red);
  color: var(--paper);
}
.ai-reading__action:disabled { cursor: wait; opacity: 0.55; }
.ai-reading__status {
  min-height: 1.1rem;
  margin: 0.8rem 0 0;
  font-size: var(--t-micro);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.ai-reading__status[data-state="loading"] { color: var(--red); }
.ai-reading__status[data-state="error"] { color: var(--red); font-weight: 700; }
.ai-reading__output {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 1.4rem;
  margin-top: 0.8rem;
  padding: 1rem;
  border: 1px solid var(--ink);
  background: var(--paper-2);
}
.ai-reading__output[hidden] { display: none; }
.ai-reading__output article + article { border-left: 1px solid var(--rule); padding-left: 1.4rem; }
.ai-reading__copy { margin-top: 0.65rem; }
.ai-reading__copy p {
  margin: 0 0 0.75rem;
  color: var(--ink-2);
  line-height: 1.58;
  white-space: pre-line;
}
.ai-reading__model {
  grid-column: 1 / -1;
  margin-top: 0.45rem;
  padding-top: 0.6rem;
  border-top: 1px solid var(--rule);
  color: var(--ink-3);
  font-size: var(--t-micro);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
@media (max-width: 760px) {
  .ai-reading__bar { align-items: flex-start; flex-direction: column; }
  .ai-reading__output { grid-template-columns: 1fr; }
  .ai-reading__output article + article {
    margin-top: 0.6rem; padding-top: 0.8rem; padding-left: 0;
    border-top: 1px solid var(--rule); border-left: 0;
  }
}

/* ─────────────────────────────── appendix ──────────────────────────── */
.kv { display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); border-top: 1px solid var(--ink); }
.kv > div { padding: 0.55rem 0.8rem 0.6rem 0; border-right: 1px solid var(--rule); }
.kv > div:last-child { border-right: 0; }
.kv__v { font-weight: 600; font-size: 0.95rem; display: block; margin-top: 0.2rem; }

.data-table { width: 100%; border-collapse: collapse; font-size: 0.76rem; }
.data-table th {
  position: sticky; top: 0; background: var(--paper-2); text-align: right; font-weight: 600;
  padding: 0.42rem 0.6rem; font-size: 0.54rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-2); border-bottom: 1px solid var(--ink);
}
.data-table th:first-child, .data-table td:first-child { text-align: left; font-weight: 700; }
.data-table td { text-align: right; padding: 0.34rem 0.6rem; border-bottom: 1px solid var(--rule); white-space: nowrap; }
.data-table tbody tr:hover { background: var(--paper-2); }
.scroller { max-height: 21rem; overflow: auto; border: 1px solid var(--rule); }

/* ─────────────────────────────── skeleton ──────────────────────────── */
.is-loading { color: var(--ink-3); font-size: var(--t-small); letter-spacing: 0.12em; text-transform: uppercase; }

/* ═══════════════════════════════════════════════════════════════════════
   date control — the reader picks which trading day the rating is read on.
   The date itself is the loudest element: it is what changes the answer.
   ═══════════════════════════════════════════════════════════════════════ */
.dctl { border: 1px solid var(--rule); padding: 0.7rem 0.9rem 0.8rem; margin-bottom: 1.1rem; }
.dctl--compare { border-color: var(--rule); background: var(--paper-2); }
.dctl__row { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.35rem 0.9rem; }
.dctl__lead {
  font-size: var(--t-micro); letter-spacing: var(--track-label);
  text-transform: uppercase; color: var(--ink-3);
}
.dctl__date {
  font-family: var(--black);
  font-size: clamp(1.1rem, 2.4vw, 1.55rem);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--red);          /* the chosen date, in the one accent */
  font-variant-numeric: tabular-nums;
}
.dctl__grade { font-weight: 700; font-size: var(--t-body); color: var(--ink); }
.dctl__grade.spec { color: var(--red); }
.dctl__presets { margin-left: auto; display: flex; gap: 0; }
.dctl__preset {
  border: 1px solid var(--rule); border-right: 0; background: none;
  font: inherit; font-size: var(--t-micro); letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ink-2);
  padding: 0.3rem 0.55rem; cursor: pointer;
  transition: background var(--fast) var(--ease), color var(--fast) var(--ease);
}
.dctl__preset:last-child { border-right: 1px solid var(--rule); }
.dctl__preset:hover:not(:disabled) { background: var(--paper-3); }
.dctl__preset[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.dctl__preset:disabled { opacity: 0.35; cursor: not-allowed; }

.dctl__slider { -webkit-appearance: none; appearance: none; width: 100%;
  height: 22px; background: none; margin-top: 0.5rem; cursor: pointer; }
.dctl__slider::-webkit-slider-runnable-track { height: 2px; background: var(--rule); }
.dctl__slider::-moz-range-track { height: 2px; background: var(--rule); }
.dctl__slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 3px; height: 18px; background: var(--red); border: 0; border-radius: 0;
  margin-top: -8px;
}
.dctl__slider::-moz-range-thumb { width: 3px; height: 18px; background: var(--red); border: 0; border-radius: 0; }
.dctl__slider:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }
.dctl__scale { display: flex; justify-content: space-between;
  font-size: var(--t-micro); letter-spacing: 0.1em; color: var(--ink-3); }

/* ── compare module ─────────────────────────────────────────────────── */
.cmp {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 0.6rem 1.2rem;
  border: 1px solid var(--ink);
  padding: 1rem 1.1rem;
  margin-bottom: 1rem;
}
@media (max-width: 660px) { .cmp { grid-template-columns: 1fr; text-align: left; } }
.cmp__side { display: flex; flex-direction: column; gap: 0.25rem; }
.cmp__side:last-of-type { text-align: right; align-items: flex-end; }
@media (max-width: 660px) { .cmp__side:last-of-type { text-align: left; align-items: flex-start; } }
.cmp__letter {
  font-family: var(--black);
  font-size: clamp(2rem, 6vw, 3.4rem);
  line-height: 0.9;
  letter-spacing: -0.045em;
  color: var(--grade-ig);
}
.cmp__letter.spec { color: var(--grade-spec); }
.cmp__arrow { display: flex; flex-direction: column; align-items: center; gap: 0.2rem;
  padding: 0 0.6rem; border-left: 1px solid var(--rule); border-right: 1px solid var(--rule); }
@media (max-width: 660px) { .cmp__arrow { align-items: flex-start; border: 0; padding: 0; } }
.cmp__move { font-weight: 700; font-size: var(--t-body); white-space: nowrap; }
.cmp__arrow.up .cmp__move { color: var(--green); }
.cmp__arrow.down .cmp__move { color: var(--red); }
.cmp__arrow.flat .cmp__move { color: var(--ink-3); }
.cmp__span { font-size: var(--t-micro); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); }
.cmp__lede { grid-column: 1 / -1; border-top: 1px solid var(--rule); padding-top: 0.7rem;
  margin: 0.2rem 0 0; font-size: var(--t-body); color: var(--ink-2); max-width: 88ch; }
.cmp__lede b { color: var(--ink); }
.cmp__lede b.up { color: var(--green); }
.cmp__lede b.down { color: var(--red); }
.cmp__table th[scope="row"] { width: 40%; }

.verdict__date { color: var(--red); font-weight: 600; }

.q-list__head {
  font-size: var(--t-micro); letter-spacing: var(--track-label); text-transform: uppercase;
  color: var(--ink-3); padding: 0.45rem 0.7rem 0.3rem; border-bottom: 1px solid var(--rule);
  cursor: default;
}

/* the control before its daily path lands: present, but plainly not yet yours */
.dctl.is-waiting { opacity: 0.55; }
.dctl.is-waiting .dctl__slider { cursor: default; }

/* ═══════════════════════════════════════════════════════════════════════
   company page identity — the field you type in on the left, who you are
   looking at on the right. The code is the largest thing on the row because
   it is the answer to "where am I".
   ═══════════════════════════════════════════════════════════════════════ */
.ident {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 1rem var(--pad);
}
@media (max-width: 720px) {
  .ident { grid-template-columns: 1fr; }
  .ident__who { text-align: left; }
}
.ident__search { min-width: 0; }
.ident__who { text-align: right; min-width: 0; }
.ident__ticker {
  font-family: var(--black);
  font-size: clamp(2.2rem, 6vw, 4rem);
  line-height: 0.9;
  letter-spacing: -0.045em;
  text-transform: uppercase;
}
.ident__name { font-size: var(--t-lead); font-weight: 500; margin-top: 0.15rem; }
.ident__sector {
  font-size: var(--t-micro); letter-spacing: var(--track-label);
  text-transform: uppercase; color: var(--ink-3); margin-top: 0.2rem;
}
/* on a company page the field already holds the answer, so it reads as ink */
.search__field.is-current { color: var(--ink); }

/* ── dashboard: the shared pair of dates ────────────────────────────── */
.dpair { border: 1px solid var(--ink); padding: 0.85rem 1rem 0.9rem; }
.dpair__row { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.35rem 0.9rem; }
.dpair__row + .dctl__slider { margin-bottom: 0.9rem; }

/* ── dashboard: the watchlist ───────────────────────────────────────── */
.wl__bar { display: flex; align-items: center; gap: var(--gap); margin-bottom: 0.7rem; }
.wl__actions { margin-left: auto; display: flex; gap: 0.4rem; }
table.wl { width: 100%; min-width: 46rem; border-collapse: collapse; font-size: var(--t-body); }
.wl thead th {
  text-align: right; font-weight: 600; font-size: var(--t-micro);
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3);
  padding: 0 0.55rem 0.5rem; border-bottom: 1px solid var(--ink);
}
.wl thead th:nth-child(-n+2) { text-align: left; }
.wl td, .wl th[scope="row"] { text-align: right; padding: 0.5rem 0.55rem; border-bottom: 1px solid var(--rule); white-space: nowrap; }
.wl th[scope="row"], .wl td:nth-child(2) { text-align: left; }
.wl tbody tr:hover { background: var(--paper-2); }
.wl__tk { font-weight: 700; }
.wl__name { color: var(--ink-2); max-width: 20ch; overflow: hidden; text-overflow: ellipsis; }
.wl__name a, .wl__tk { text-decoration: none; }
.wl__name a:hover, .wl__tk:hover { text-decoration: underline; }
.wl__grade { font-weight: 700; }
.wl__grade.spec { color: var(--red); }
.wl__delta { display: block; font-size: var(--t-micro); font-weight: 400; }
.wl__drop button {
  border: 0; background: none; color: var(--ink-3); cursor: pointer;
  font-size: 1rem; line-height: 1; padding: 0 0.2rem;
}
.wl__drop button:hover { color: var(--red); }
.wl__empty { text-align: left; color: var(--ink-3); padding: 1rem 0.55rem; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.fold { border-top: 1px solid var(--rule); }
.fold > summary {
  list-style: none; cursor: pointer; padding: 0.6rem 0;
  display: flex; align-items: baseline; gap: 0.6rem; font-size: var(--t-body); font-weight: 600;
}
.fold > summary::-webkit-details-marker { display: none; }
.fold > summary::before { content: "+"; color: var(--red); font-weight: 700; }
.fold[open] > summary::before { content: "−"; }
.fold__ct { margin-left: auto; font-weight: 400; color: var(--ink-3); font-size: var(--t-small); }

/* ═══════════════════════════════════════════════════════════════════════
   rating history — the step chart and the methodology knob beside it
   ═══════════════════════════════════════════════════════════════════════ */
.hist__bar { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.5rem 1rem; margin-bottom: 0.7rem; }
.hist__knob { display: flex; gap: 0; }
.hist__w {
  border: 1px solid var(--rule); border-right: 0; background: none; font: inherit;
  font-size: var(--t-small); font-weight: 700; padding: 0.32rem 0.7rem; cursor: pointer;
  transition: background var(--fast) var(--ease), color var(--fast) var(--ease);
}
.hist__w:last-child { border-right: 1px solid var(--rule); }
.hist__w[aria-pressed="true"] { background: var(--red); border-color: var(--red); color: var(--paper); }
.hist__w:disabled { opacity: 0.35; cursor: not-allowed; }
.hist__note { font-size: var(--t-micro); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.hist__readout { margin-left: auto; font-size: var(--t-body); font-weight: 600; min-height: 1.2em; }
.hist__readout .spec { color: var(--red); }
.hist__frame { border-top: 1px solid var(--ink); padding-top: 0.5rem; }
.hist__svg { display: block; width: 100%; height: auto; cursor: crosshair; }
.hist__line { fill: none; stroke: var(--ink); stroke-width: 1.8; }
.hist__ylab.spec { fill: var(--red); }
.hist__foot { margin-top: 0.6rem; }

/* ── the rating-scale reference card ────────────────────────────────── */
.verdict__letterrow { position: relative; display: flex; align-items: flex-start; gap: 0.5rem; }
/* the letter itself is always ink — the reference card, the tables and the
   charts carry the speculative colour; the headline does not shout */
.verdict__letter, .verdict__letter.spec { color: var(--ink); }
.verdict__tk {
  font-family: var(--black);
  font-size: clamp(1.1rem, 2.2vw, 1.5rem);   /* the search field's size */
  letter-spacing: -0.02em;
  margin-bottom: 0.2rem;
}
.verdict__why {
  border: 1px solid var(--ink-3); border-radius: 50%;
  width: 1.35rem; height: 1.35rem; display: inline-grid; place-items: center;
  background: none; color: var(--ink-3);
  font-family: var(--sans); font-size: 0.72rem; font-weight: 700; line-height: 1;
  cursor: pointer; margin-top: 0.5rem; padding: 0;
}
.verdict__why:hover, .verdict__why[aria-expanded="true"] { color: var(--red); border-color: var(--red); }
.scalecard {
  display: none; position: absolute; left: 0; top: calc(100% + 0.5rem); z-index: 30;
  width: min(21rem, 80vw); max-height: 19rem; overflow: auto;
  background: var(--paper); border: 1px solid var(--ink);
  box-shadow: 4px 4px 0 var(--paper-3);
  padding: 0.7rem 0.8rem;
}
.scalecard.is-open { display: block; }
.scalecard__head { font-size: var(--t-small); color: var(--ink-2); margin-bottom: 0.5rem; }
.scalecard table { width: 100%; border-collapse: collapse; font-size: var(--t-small); }
.scalecard th { text-align: left; font-size: var(--t-micro); letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ink-3); padding: 0.2rem 0.4rem; border-bottom: 1px solid var(--rule); }
.scalecard td { padding: 0.18rem 0.4rem; border-bottom: 1px solid var(--paper-3); }
.scalecard td:first-child { font-weight: 700; }
.scalecard td.spec { color: var(--red); }
.scalecard tr.is-here { background: var(--ink); }
.scalecard tr.is-here td { color: var(--paper); }
.scalecard tr.is-here td.spec { color: oklch(0.78 0.12 30); }

/* ── compare companies ──────────────────────────────────────────────── */
.pcmp__bar { display: flex; align-items: center; flex-wrap: wrap; gap: 0.6rem 1rem; margin-bottom: 0.8rem; }
.pcmp__adder { position: relative; display: flex; gap: 0.4rem; }
.pcmp__q { width: 14rem; }
.pcmp__list { position: absolute; top: 100%; left: 0; width: 20rem; z-index: 10; }
.pcmp__hint { font-size: var(--t-micro); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.pcmp__table th.pcmp__col { text-align: right; position: relative; padding-right: 1.4rem; }
.pcmp__table th.pcmp__col a { font-family: var(--black); font-size: 1rem; letter-spacing: -0.02em; text-decoration: none; }
.pcmp__colname { display: block; font-weight: 400; font-size: var(--t-micro); letter-spacing: 0;
  text-transform: none; color: var(--ink-3); max-width: 11rem; margin-left: auto;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pcmp__drop { position: absolute; top: 0.1rem; right: 0.2rem; border: 0; background: none;
  color: var(--ink-3); cursor: pointer; font-size: 0.9rem; }
.pcmp__drop:hover { color: var(--red); }
.pcmp__table td { text-align: right; }
.pcmp__table td.cmp-grade { font-family: var(--black); font-size: 1.05rem; }
.pcmp__table td.cmp-grade.spec { color: var(--red); }

/* dashboard extras: wide plates, compact date pair, the two new figures */
.plate--wide { grid-column: 1 / -1; }
.dpair { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--pad); align-items: start;
  border: 1px solid var(--ink); padding: 0.7rem 0.9rem 0.6rem; }
@media (max-width: 760px) { .dpair { grid-template-columns: 1fr; } }
.dpair__cell { min-width: 0; }
.dpair__row { display: flex; align-items: baseline; gap: 0.6rem; }
.dpair .dctl__date { font-size: clamp(0.95rem, 1.8vw, 1.2rem); }
.dpair .dctl__slider { margin-top: 0.2rem; height: 18px; }
.dpair .dctl__presets { margin: 0.1rem 0 0.2rem; }
.dpair__scale { grid-column: 1 / -1; margin-top: 0.1rem; }

.sc { display: block; width: 100%; height: auto; }
.sc-dot { fill: var(--paper); stroke: var(--ink-2); stroke-width: 0.9; }
.sc-dot.spec { stroke: var(--red); }
.sc-dot.is-hot { fill: var(--red); stroke: var(--red); }
.sc-dot:hover { stroke-width: 2.2; }

.mh__legend { display: flex; flex-wrap: wrap; gap: 0.25rem 0.35rem; margin-bottom: 0.5rem; }
.mh__chip { border: 1px solid var(--rule); background: none; font: inherit; font-size: var(--t-micro);
  font-weight: 700; letter-spacing: 0.08em; padding: 0.2rem 0.5rem; cursor: default; }
.mh__chip.is-hot { background: var(--red); border-color: var(--red); color: var(--paper); }
.mh__svg { display: block; width: 100%; height: auto; }
.mh__line { fill: none; stroke: var(--ink-3); stroke-width: 1.1; opacity: 0.26;
  transition: opacity var(--fast) var(--ease), stroke var(--fast) var(--ease); }
.mh__line.is-hot { stroke: var(--red); stroke-width: 2; opacity: 1; }
.mh__line.is-dim { opacity: 0.14; }
.mh__mark { stroke: var(--ink-2); stroke-width: 1; stroke-dasharray: 2 3; }
.mh__chip--avg { cursor: pointer; }
.mh__chip--avg[aria-pressed="false"] { opacity: 0.4; }

/* the universe table earns its full width: the company name breathes, the
   sector fills what used to be dead space, and rows get real padding */
table.reg td, table.reg thead th { padding: 0.52rem 0.9rem; }
.register__name { max-width: none; }
.register__sector { color: var(--ink-3); white-space: nowrap; }
.reg__bar { display: flex; gap: 0.6rem; align-items: center; margin-bottom: 0.7rem; flex-wrap: wrap; }
.reg__bar .field { max-width: 18rem; }

/* appendix: three labelled provenance blocks before the raw tables */
.appx { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: var(--pad); margin-bottom: 1.2rem; }
.appx__block { border-top: 2px solid var(--ink); padding-top: 0.5rem; min-width: 0; }
.appx__title { font-size: var(--t-micro); letter-spacing: var(--track-label); text-transform: uppercase;
  font-weight: 700; margin-bottom: 0.5rem; }
.appx .kv { grid-template-columns: 1fr; border-top: 0; }
.appx .kv > div { display: flex; justify-content: space-between; gap: 0.8rem; align-items: baseline;
  border-right: 0; border-bottom: 1px solid var(--paper-3); padding: 0.3rem 0; }
.appx .kv__v { font-weight: 600; text-align: right; }

/* plate titles: every chart states what it is before the caption explains it */
.plate__bar { display: flex; align-items: baseline; gap: 0.8rem; margin-bottom: 0.45rem; flex-wrap: wrap; }
.plate__title { font-size: var(--t-micro); letter-spacing: var(--track-label);
  text-transform: uppercase; font-weight: 700; }
.plate__hint { font-size: var(--t-micro); letter-spacing: 0.06em; color: var(--ink-3); }
.plate__bar .dctl__presets { margin-left: auto; }

.mh__line.is-coloured { opacity: 0.95; stroke-width: 1.9; }
.mh__chip[aria-pressed="true"] { font-weight: 700; }
.mh__chip--avg { border-style: dashed; color: var(--ink-2); cursor: default; }
.mh__avg { fill: none; stroke: var(--ink); stroke-width: 2.4; stroke-dasharray: 7 4; opacity: 0.85; }

.ddc { display: block; width: 100%; height: auto; cursor: crosshair; }
.ddc__line { fill: none; stroke: var(--ink); stroke-width: 1.6; }


/* 3) captions align: every plate is a column, its caption pinned to the foot */
.plate { display: flex; flex-direction: column; }
/* a fixed caption box: one- and two-line captions occupy the same slab, so
   neighbouring plates' captions start on the same line and hover readouts
   never reflow the grid */
.plate figcaption { margin-top: auto; padding-top: 0.5rem; height: 3.9rem; overflow: hidden; }

/* 7) the date control stacks its label above the date */
.dctl__stack { display: flex; flex-direction: column; gap: 0.15rem; }

/* 9) the masthead line wraps to two measured lines instead of one long one */
.mast__sub { max-width: 96ch; }


/* ── the dashboard masthead earns a brand ──────────────────────────────
   One red block, a heavier title, and the three numbers that describe the
   build — presence without abandoning the one-accent rule. */
.mast--hero { align-items: center; gap: 1rem 1.4rem; border-bottom: 3px solid var(--red); padding-bottom: 1rem; }
.mast__brand {
  width: 3.2rem; height: 3.2rem; flex: 0 0 auto;
  background: var(--red); color: var(--paper);
  display: grid; place-items: center;
  font-size: 1.7rem; line-height: 1;
  box-shadow: 4px 4px 0 var(--paper-3);
}
.mast--hero .mast__title { font-size: clamp(1.5rem, 3.2vw, 2.3rem); }
.mast__id { min-width: 0; }
.mast__stats { margin-left: auto; display: flex; gap: 1px; }
.mstat {
  background: var(--ink); color: var(--paper);
  padding: 0.5rem 0.9rem; display: flex; flex-direction: column; gap: 0.1rem;
  min-width: 6.2rem;
}
.mstat b { font-family: var(--black); font-size: 1.02rem; letter-spacing: -0.01em; }
.mstat span { font-size: var(--t-micro); letter-spacing: 0.14em; text-transform: uppercase; color: oklch(72% 0.01 255); }
@media (max-width: 860px) { .mast__stats { margin-left: 0; width: 100%; } .mstat { flex: 1; min-width: 0; } }