/* Component classes. No utilities. Every value is a token from tokens.css.
   Rules: site/STYLEGUIDE.md. Anything not styled here does not go on the page. */

/* ---------- reset and base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { font-size: var(--fs-body); -webkit-text-size-adjust: 100%; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--ground);
  color: var(--text);
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: var(--w-regular);
  -webkit-font-smoothing: antialiased;
}
button, select, input, textarea { font: inherit; color: inherit; margin: 0; }
button { cursor: pointer; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 2px; }
:focus-visible { outline: var(--focus); outline-offset: 2px; }
h1, h2, h3, p, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
.num, td, th { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }

/* ---------- type: exactly four sizes ---------- */
.t-label { font-size: var(--fs-label); line-height: var(--lh-label); }
.t-body  { font-size: var(--fs-body);  line-height: var(--lh-body); }
.t-claim { font-size: var(--fs-claim); line-height: var(--lh-claim); font-weight: var(--w-semibold); letter-spacing: var(--tracking-tight); }
.t-title { font-size: var(--fs-title); line-height: var(--lh-title); font-weight: var(--w-semibold); letter-spacing: var(--tracking-tight); }
.caps { text-transform: uppercase; letter-spacing: var(--tracking-caps); }
.muted { color: var(--muted); }

/* ---------- page chassis ---------- */
.page {
  display: grid;
  grid-template-columns: var(--sidenav) minmax(0, 1fr);
  column-gap: var(--column-gap);
  max-width: var(--container);
  margin: 0 auto;
}
.content { min-width: 0; padding: var(--sp-5) 0 var(--sp-8); }
.page-head { padding: var(--sp-4) 0 var(--sp-5); border-bottom: 1px solid var(--rule); }
.page-head h1 { font-size: var(--fs-title); line-height: var(--lh-title); font-weight: var(--w-semibold); letter-spacing: var(--tracking-tight); }
.page-sub { color: var(--muted); margin-top: var(--sp-1); }
.section { padding: var(--sp-7) 0; border-bottom: 1px solid var(--rule); scroll-margin-top: var(--sp-4); }
.section:last-of-type { border-bottom: 0; }
.section:last-of-type:has(+ .page-foot) { border-bottom: 1px solid var(--rule); }
/* the first section of a ticker page is the tile row: no H2, no top padding, and the page head above it drops its rule */
.section.is-lead { padding-top: 0; }
.page-head:has(+ .section.is-lead) { border-bottom: 0; }
.page-foot { padding-top: var(--sp-5); } /* the last section keeps its bottom rule above it */
.section-title { font-size: var(--fs-claim); line-height: var(--lh-claim); font-weight: var(--w-semibold); letter-spacing: var(--tracking-tight); margin-bottom: var(--sp-4); }
.readout { color: var(--muted); margin: calc(-1 * var(--sp-2)) 0 var(--sp-5); max-width: 70ch; }
.readout:empty { display: none; }
.section > * + .card, .section > * + .chart-card, .section > * + .table-wrap, .section > * + .tile-row, .section > * + .link-btn { margin-top: var(--sp-4); }
.stack > * + * { margin-top: var(--sp-4); }
.stack-lg > * + * { margin-top: var(--sp-5); }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4); align-items: start; }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-4); align-items: start; }

/* ---------- sidenav with scroll-spy ---------- */
.sidenav {
  position: sticky; top: 0; align-self: start;
  height: 100vh; overflow-y: auto;
  padding: var(--sp-5) var(--sp-3) var(--sp-5) 0;
  border-right: 1px solid var(--rule);
}
.sidenav-brand { font-size: var(--fs-label); line-height: var(--lh-label); font-weight: var(--w-semibold); text-transform: uppercase; letter-spacing: var(--tracking-caps); color: var(--muted); padding: 0 var(--sp-3); margin-bottom: var(--sp-4); }
.sidenav-back { display: flex; align-items: center; height: var(--sp-6); padding: 0 var(--sp-3); margin-bottom: var(--sp-3); font-size: var(--fs-label); line-height: var(--lh-label); font-weight: var(--w-semibold); color: var(--muted); }
.sidenav-back:hover { color: var(--text); text-decoration: none; }
.sidenav-group + .sidenav-group { margin-top: var(--sp-2); }
.sidenav li + li { margin-top: var(--sp-1); }
.sidenav a {
  display: flex; align-items: center; height: 36px;
  padding: 0 var(--sp-3); border-left: 2px solid transparent;
  color: var(--muted); font-size: var(--fs-body);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.sidenav a { height: auto; min-height: 36px; padding-top: var(--sp-1); padding-bottom: var(--sp-1); } /* a label may wrap to two lines */
.sidenav a:hover { background: var(--ground-2); color: var(--text); text-decoration: none; }
.sidenav a[aria-current="true"] { color: var(--accent); font-weight: var(--w-semibold); border-left-color: var(--accent); }

/* mobile section bar and sheet, hidden on desktop */
.section-bar { display: none; }
.sheet { display: none; }
.section-bar button, .sheet-head button { min-height: var(--hit); min-width: var(--hit); border: 0; background: none; color: var(--accent); font-weight: var(--w-semibold); padding: 0 var(--sp-2); }

/* ---------- cards ---------- */
.card { background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius); padding: var(--sp-5); }
.chart-card { background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius); padding: var(--sp-5); }
.chart-card > .chart-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); min-height: var(--hit); margin-bottom: var(--sp-2); }
.chart-card > .chart-head:empty { display: none; }
.chart-head .chart-title { font-size: var(--fs-label); line-height: var(--lh-label); color: var(--muted); }
.chart-slot { position: relative; min-width: 0; }
.chart-slot svg { width: 100%; height: auto; display: block; overflow: visible; }
.chart-foot { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-4); margin-top: var(--sp-3); font-size: var(--fs-label); line-height: var(--lh-label); color: var(--muted); }
.chart-foot:empty { display: none; }
.caption { color: var(--muted); font-size: var(--fs-label); line-height: var(--lh-label); font-variant-numeric: tabular-nums; }
.stamp { display: inline-block; color: var(--muted); font-size: var(--fs-label); line-height: var(--lh-label); white-space: nowrap; font-variant-numeric: tabular-nums; }
.chart-foot .stamp { margin-left: auto; }
.stamp.is-stale { color: var(--amber); }
.chart-controls { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; margin-top: var(--sp-4); }

/* ---------- SVG chart marks (one chassis) ---------- */
.chart text { font-family: var(--font); font-size: var(--fs-label); font-weight: var(--w-regular); fill: var(--muted); }
.chart .c-grid { stroke: var(--grid); stroke-width: 1; shape-rendering: crispEdges; }
.chart .c-baseline { stroke: var(--rule); stroke-width: 1; shape-rendering: crispEdges; }
.chart .c-tick { fill: var(--muted); paint-order: stroke; stroke: var(--card); stroke-width: 4px; stroke-linejoin: round; }
.chart .c-tick.is-ref { fill: var(--text); font-weight: var(--w-semibold); }
.chart .c-unit { fill: var(--muted); }
.chart .c-label { fill: var(--text); font-weight: var(--w-semibold); }
.chart .c-label-value { fill: var(--muted); font-weight: var(--w-regular); font-variant-numeric: tabular-nums; }
.chart .c-label.is-gain, .chart .c-label-value.is-gain { fill: var(--gain); }
.chart .c-label.is-loss, .chart .c-label-value.is-loss { fill: var(--loss); }
.chart .c-chip.is-band { stroke-width: 1; stroke-opacity: var(--band-edge); }
.chart .c-leader { stroke: var(--faint); stroke-width: 1; fill: none; }
.chart .c-line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.chart .c-line.is-thin { stroke-width: 1.5; }
.chart .c-line.is-history { stroke: var(--muted); stroke-width: 1.5; }
.chart .c-line.is-dashed { stroke-dasharray: 4 4; }
.chart .c-line.is-dotted { stroke-width: 1; stroke-dasharray: 1 3; stroke-linecap: round; }
.chart .c-line.is-bridge { stroke: var(--muted); }
.chart .c-band:not(.is-outer) { stroke: none; }
.chart .c-band.is-outer { stroke-width: 1; stroke-opacity: var(--band-edge); }
.chart .c-ref { stroke: var(--muted); stroke-width: 1; stroke-dasharray: 2 3; fill: none; }
.chart .c-zero { stroke: var(--text); stroke-width: 2; }
.chart .c-dot { stroke: var(--card); stroke-width: 1.5; }
.chart .c-whisker { stroke-width: 2; stroke-linecap: butt; }
.chart .c-bar { stroke: none; }
.chart .c-hatch { stroke: var(--card); stroke-width: 1; stroke-opacity: var(--hatch); }
.chart .c-zone { stroke: none; fill-opacity: var(--zone); }
.chart-legend { display: none; }

/* ---------- tiles ---------- */
.tile-row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--sp-3); }
.tile { display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius); padding: var(--sp-5); min-width: 0; }
.tile-label { font-size: var(--fs-label); line-height: var(--lh-label); font-weight: var(--w-regular); text-transform: uppercase; letter-spacing: var(--tracking-caps); color: var(--muted); margin-bottom: var(--sp-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tile-value { margin-top: auto; font-size: var(--fs-claim); line-height: var(--lh-claim); font-weight: var(--w-semibold); font-variant-numeric: tabular-nums; color: var(--text); white-space: nowrap; }
.tile-value.is-spot { font-size: var(--fs-title); line-height: var(--lh-title); font-weight: var(--w-bold); }
.tile-sub { min-height: var(--lh-label); font-size: var(--fs-label); line-height: var(--lh-label); color: var(--muted); font-variant-numeric: tabular-nums; margin-top: var(--sp-1); white-space: nowrap; }

/* ---------- signed numbers and chips ---------- */
.signed { font-variant-numeric: tabular-nums; white-space: nowrap; }
.signed.is-gain { color: var(--gain); }
.signed.is-loss { color: var(--loss); }
.signed.is-flat { color: var(--muted); }
.chip {
  display: inline-flex; align-items: center; height: var(--sp-5); padding: 0 var(--sp-2);
  border: 1px solid var(--rule); border-radius: var(--radius-sm);
  font-size: var(--fs-label); line-height: var(--lh-label); color: var(--muted); white-space: nowrap;
  vertical-align: middle;
}
.na { color: var(--muted); }

/* ---------- tables ---------- */
.table-wrap { background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius); overflow: auto; max-height: 70vh; }
.chart-slot > .table-wrap { border: 0; border-radius: 0; }
.tbl { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--fs-body); line-height: var(--lh-body); }
.tbl th, .tbl td { height: var(--row); padding: var(--sp-2) var(--sp-3); text-align: right; white-space: nowrap; border-bottom: 1px solid var(--rule); vertical-align: middle; }
.tbl.is-tall td { height: 56px; }
.tbl td.is-prose { white-space: normal; }
.tbl td.is-clip { max-width: 0; width: 100%; overflow: hidden; text-overflow: ellipsis; }
.tbl th:first-child, .tbl td:first-child { text-align: left; }
.tbl th.is-left, .tbl td.is-left { text-align: left; }
.tbl th { position: sticky; top: 0; z-index: 1; background: var(--ground-2); color: var(--muted); font-size: var(--fs-label); line-height: var(--lh-label); font-weight: var(--w-semibold); text-transform: uppercase; letter-spacing: var(--tracking-caps); }
.tbl th .unit { font-weight: var(--w-regular); text-transform: none; letter-spacing: 0; }
.tbl th[aria-sort] { cursor: pointer; user-select: none; }
.tbl th[aria-sort]:hover { color: var(--text); }
.tbl th .sort { display: inline-block; width: var(--sp-2); margin-left: var(--sp-1); color: var(--accent); }
.tbl th[aria-sort="none"] .sort { visibility: hidden; }
.tbl tbody tr:hover td { background: var(--ground-2); }
.tbl tbody tr:last-child td { border-bottom: 0; }
.tbl td.is-id { color: var(--text); }
.tbl td .cell-sub { display: block; max-width: 40ch; font-size: var(--fs-label); line-height: var(--lh-label); color: var(--muted); font-weight: var(--w-regular); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tbl tr.is-total td { font-weight: var(--w-semibold); border-top: 1px solid var(--rule); }
.tbl .row-link { cursor: pointer; }
.tbl .row-expand { cursor: pointer; }
.tbl .row-expand td:first-child { padding-left: calc(var(--sp-3) + 6px + var(--sp-2)); position: relative; }
.tbl .row-expand td:first-child::before { content: ""; position: absolute; left: var(--sp-3); top: 50%; width: 6px; height: 6px; margin-top: -4px; border-right: 1.5px solid var(--muted); border-bottom: 1.5px solid var(--muted); transform: rotate(-45deg); transition: transform .12s; }
.tbl .row-expand.is-open td:first-child::before { transform: rotate(45deg); }
.tbl .row-detail td { height: auto; white-space: normal; text-align: left; padding: var(--sp-3) var(--sp-3) var(--sp-4) calc(var(--sp-3) + 6px + var(--sp-2)); background: var(--ground-2); }
.tbl .row-detail[hidden] { display: none; }
.tbl-cards { display: none; }

/* ---------- expanding row (list host) and quote list ---------- */
.xrow { border-bottom: 1px solid var(--rule); }
.xrow-summary { display: grid; grid-template-columns: minmax(0, 1fr) 72px 96px; gap: var(--sp-3); align-items: center; width: 100%; min-height: var(--row); padding: 0 var(--sp-3) 0 calc(var(--sp-3) + 6px + var(--sp-2)); border: 0; background: none; text-align: left; color: var(--text); position: relative; }
.xrow-summary::before { content: ""; position: absolute; left: var(--sp-3); top: 50%; width: 6px; height: 6px; margin-top: -4px; border-right: 1.5px solid var(--muted); border-bottom: 1.5px solid var(--muted); transform: rotate(-45deg); transition: transform .12s; }
.xrow-summary.is-open::before { transform: rotate(45deg); }
.xrow-summary:hover { background: var(--ground-2); }
.xrow-body { padding: var(--sp-3) var(--sp-3) var(--sp-4) calc(var(--sp-3) + 6px + var(--sp-2)); background: var(--ground-2); }
.xrow-body[hidden] { display: none; }
.quotes-head { display: flex; align-items: baseline; gap: var(--sp-3); min-height: var(--hit); padding: 0 var(--sp-3); border-bottom: 1px solid var(--rule); }
.quotes-list + .quotes-head { margin-top: var(--sp-5); }
.quotes-person { font-weight: var(--w-semibold); }
.quotes-meta { color: var(--muted); font-size: var(--fs-label); line-height: var(--lh-label); }
.quotes-claim { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.quotes-stance { color: var(--muted); }
.quotes-date { color: var(--muted); text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.quote-text { margin: 0; max-width: 70ch; }
.quote-source { margin-top: var(--sp-2); color: var(--muted); font-size: var(--fs-label); line-height: var(--lh-label); }
.row-detail-cell > * + *, .xrow-body > * + * { margin-top: var(--sp-2); }

/* ---------- details ---------- */
.details { border-top: 1px solid var(--rule); }
.details + .details { border-top: 0; }
.details:last-child { border-bottom: 1px solid var(--rule); }
.details > summary { display: flex; align-items: center; min-height: var(--hit); padding: 0 var(--sp-1); list-style: none; cursor: pointer; color: var(--text); font-weight: var(--w-semibold); }
.details > summary::-webkit-details-marker { display: none; }
.details > summary::before { content: ""; width: 6px; height: 6px; border-right: 1.5px solid var(--muted); border-bottom: 1.5px solid var(--muted); transform: rotate(-45deg); margin: 0 var(--sp-3) 0 var(--sp-1); flex: none; transition: transform .12s; }
.details[open] > summary::before { transform: rotate(45deg); }
.details > summary .summary-meta { margin-left: auto; color: var(--muted); font-size: var(--fs-label); line-height: var(--lh-label); font-weight: var(--w-regular); }
.details-body { padding: 0 var(--sp-1) var(--sp-4) calc(var(--sp-1) + 6px + var(--sp-3) + var(--sp-1)); color: var(--text); }
.details-body > * + * { margin-top: var(--sp-3); }

/* ---------- forms and controls ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  min-height: var(--hit); padding: 0 var(--sp-4);
  border: 1px solid var(--rule); border-radius: var(--radius-sm); background: var(--card); color: var(--text);
  font-weight: var(--w-semibold); white-space: nowrap;
}
.btn:hover { border-color: var(--accent); color: var(--accent); }
.btn.is-primary { background: var(--accent); border-color: var(--accent); color: var(--card); }
.btn.is-primary:hover { color: var(--card); }
.btn.is-quiet { border-color: transparent; background: transparent; color: var(--accent); padding: 0 var(--sp-2); }
.btn.is-quiet:hover { background: var(--ground-2); }
.btn:disabled { color: var(--muted); border-color: var(--rule); background: var(--card); cursor: default; }
.link-btn { border: 0; background: none; padding: 0; color: var(--accent); font-weight: var(--w-semibold); min-height: var(--hit); display: inline-flex; align-items: center; }
.link-btn:hover { text-decoration: underline; text-underline-offset: 2px; }
.field { display: grid; gap: var(--sp-1); }
.field > label { font-size: var(--fs-label); line-height: var(--lh-label); color: var(--muted); }
.input, .select {
  height: var(--hit); padding: 0 var(--sp-3);
  border: 1px solid var(--rule); border-radius: var(--radius-sm); background: var(--card); color: var(--text);
  font-variant-numeric: tabular-nums;
}
.input:hover, .select:hover { border-color: var(--muted); }
.input:focus-visible, .select:focus-visible { border-color: var(--accent); outline-offset: 0; }
.input[type="number"] { text-align: right; width: 112px; }
.input::placeholder { color: var(--muted); }
.input.is-unweighted::placeholder { color: var(--amber); }
.select {
  appearance: none; -webkit-appearance: none; padding-right: var(--sp-6); font-weight: var(--w-semibold);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6'><path d='M0 0l5 6 5-6z' fill='%236E6659'/></svg>");
  background-repeat: no-repeat; background-position: right var(--sp-3) center; background-size: 10px 6px;
}
.segmented { display: inline-flex; }
.segmented > button { min-height: var(--hit); box-sizing: border-box; border: 1px solid var(--rule); margin-left: -1px; background: var(--card); color: var(--muted); padding: 0 var(--sp-4); font-weight: var(--w-semibold); }
.segmented > button:first-child { margin-left: 0; border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
.segmented > button:last-child { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.segmented > button:hover { color: var(--text); }
.segmented > button:focus-visible { position: relative; z-index: 1; }
.segmented > button[aria-pressed="true"] { background: var(--accent-tint); color: var(--accent); }
.control-row { display: flex; flex-wrap: wrap; align-items: end; gap: var(--sp-3); }

/* ---------- range slider (dual handle, dated) ---------- */
.rs { position: relative; margin-top: var(--sp-5); }
.rs-inner { position: relative; }
.rs-track { position: relative; height: var(--hit); }
.rs-track::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: var(--strip); transform: translateY(-50%); background: var(--ground-2); border-radius: var(--radius-sm); }
.rs-fill { position: absolute; top: 50%; height: var(--strip); transform: translateY(-50%); background: var(--accent-tint); border: 1px solid var(--accent); border-radius: var(--radius-sm); pointer-events: none; }
.rs-spark { position: absolute; left: 0; right: 0; top: 50%; height: var(--strip); transform: translateY(-50%); pointer-events: none; overflow: hidden; }
.rs-spark svg { width: 100%; height: var(--strip); display: block; }
.rs-spark-line { fill: none; stroke: var(--muted); stroke-width: 1; }
.rs-today { position: absolute; top: 50%; height: var(--strip); width: 2px; background: var(--accent); transform: translate(-50%, -50%); pointer-events: none; }
.rs-handle {
  position: absolute; top: 50%; width: var(--hit); height: var(--hit);
  transform: translate(-50%, -50%); border-radius: 50%; border: 0; background: transparent; padding: 0;
  cursor: grab; touch-action: none; display: flex; align-items: center; justify-content: center;
}
.rs-handle::before { content: ""; width: var(--handle); height: var(--handle); border-radius: 50%; background: var(--card); border: 2px solid var(--accent); }
.rs-handle:hover::before { background: var(--accent-tint); }
.rs-handle:active { cursor: grabbing; }
.rs-handle:focus-visible { outline: 0; }
.rs-handle:focus-visible::before { outline: var(--focus); outline-offset: 2px; }
.rs-tip {
  position: absolute; bottom: calc(100% + var(--sp-1)); left: 50%; transform: translateX(-50%);
  background: var(--text); color: var(--card); font-size: var(--fs-label); line-height: var(--lh-label); font-weight: var(--w-semibold);
  padding: var(--sp-1) var(--sp-2); border-radius: var(--radius-sm); white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity .1s;
}
.rs-handle:hover .rs-tip, .rs-handle:focus-visible .rs-tip, .rs-handle.is-dragging .rs-tip { opacity: 1; }
.rs-axis { position: relative; height: var(--sp-6); }
.rs-tick { position: absolute; top: 0; width: 1px; height: var(--sp-1); background: var(--rule); }
.rs-tick.is-year { height: var(--sp-2); background: var(--faint); }
.rs-year { position: absolute; top: var(--sp-3); transform: translateX(-50%); font-size: var(--fs-label); line-height: var(--lh-label); color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.rs-year.is-today { color: var(--accent); font-weight: var(--w-semibold); }
.rs-year.is-first { transform: none; }
.rs-year.is-last { transform: translateX(-100%); }
.rs-range { margin-top: var(--sp-2); font-variant-numeric: tabular-nums; }

/* ---------- lens table (the legend) ---------- */
.lens-table { margin-top: var(--sp-4); }
.lens-head, .lens-row { display: grid; grid-template-columns: minmax(0, 1fr) 88px 168px 168px; gap: var(--sp-3); align-items: center; padding: 0 var(--sp-3); }
.lens-head { height: var(--sp-6); font-size: var(--fs-label); line-height: var(--lh-label); font-weight: var(--w-semibold); text-transform: uppercase; letter-spacing: var(--tracking-caps); color: var(--muted); border-bottom: 1px solid var(--rule); }
.lens-head > :not(:first-child), .lens-row > .lens-median, .lens-row > .lens-band { text-align: right; }
.lens-row { min-height: var(--hit); border-bottom: 1px solid var(--rule); }
.lens-row:hover { background: var(--ground-2); }
.lens-name { display: flex; align-items: center; gap: var(--sp-2); min-width: 0; font-weight: var(--w-semibold); }
.lens-name .swatch { width: 10px; height: 10px; border-radius: 2px; flex: none; }
.lens-name .name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lens-median, .lens-band { font-variant-numeric: tabular-nums; white-space: nowrap; }
.lens-band { color: var(--muted); }
.lens-actions { display: flex; justify-content: flex-end; align-items: center; gap: var(--sp-2); }
.lens-actions .link-btn { font-size: var(--fs-label); line-height: var(--lh-label); }
.lens-remove { width: var(--hit); height: var(--hit); border: 0; background: none; color: var(--muted); border-radius: var(--radius-sm); font-size: var(--fs-body); }
.lens-remove:hover { color: var(--loss); background: var(--ground-2); }
.lens-add { position: relative; display: flex; align-items: center; min-height: var(--hit); padding: 0 var(--sp-3); }
.lens-add .link-btn { font-size: var(--fs-body); }
.lens-add .count { color: var(--muted); font-weight: var(--w-regular); margin-left: var(--sp-2); }
.lens-row.is-single { grid-template-columns: minmax(0, 1fr) auto auto; }
.lens-detail { padding: var(--sp-3) var(--sp-3) var(--sp-4); color: var(--muted); border-bottom: 1px solid var(--rule); }
.lens-detail > * + * { margin-top: var(--sp-3); }

/* ---------- menu ---------- */
.menu { position: absolute; top: 100%; left: 0; z-index: 20; min-width: 280px; max-height: 340px; overflow-y: auto; margin-top: var(--sp-1); padding: var(--sp-1); background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius); }
.menu[hidden] { display: none; }
.menu-group { padding: var(--sp-2) var(--sp-3) var(--sp-1); font-size: var(--fs-label); line-height: var(--lh-label); font-weight: var(--w-semibold); text-transform: uppercase; letter-spacing: var(--tracking-caps); color: var(--muted); }
.menu-item { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-3); width: 100%; min-height: var(--hit); padding: 0 var(--sp-3); border: 0; border-radius: var(--radius-sm); background: none; text-align: left; color: var(--text); }
.menu-item:hover { background: var(--ground-2); }
.menu-item .swatch { width: 10px; height: 10px; border-radius: 2px; flex: none; margin-right: var(--sp-2); }
.menu-item .value { color: var(--muted); font-variant-numeric: tabular-nums; }
.menu-empty { padding: var(--sp-3); color: var(--muted); font-size: var(--fs-label); line-height: var(--lh-label); }

/* ---------- freshness, empty, error ---------- */
.fresh { margin-top: var(--sp-2); }
.fresh-line { font-size: var(--fs-label); line-height: var(--lh-label); color: var(--muted); }
.fresh-line.is-stale { color: var(--amber); }
.fresh .details { margin-top: var(--sp-2); }
.fresh-list li + li { margin-top: var(--sp-1); }
.empty { color: var(--muted); padding: var(--sp-5); border: 1px dashed var(--rule); border-radius: var(--radius); text-align: center; }
.error-line { color: var(--loss); font-weight: var(--w-semibold); }

/* ---------- mobile ---------- */
@media (max-width: 640px) {
  .page { grid-template-columns: minmax(0, 1fr); column-gap: 0; padding: 0 var(--sp-4); }
  .sidenav { display: none; }
  .content { padding-top: var(--sp-4); }
  .section { padding: var(--sp-6) 0; scroll-margin-top: 60px; } /* 44px section bar plus 16 */
  .section-bar {
    display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
    position: sticky; top: 0; z-index: 30; height: var(--hit); margin: 0 calc(-1 * var(--sp-4)); padding: 0 var(--sp-4);
    background: var(--ground); border-bottom: 1px solid var(--rule);
  }
  .section-bar .current { font-weight: var(--w-semibold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .sheet { display: block; position: fixed; inset: 0; z-index: 40; background: var(--ground); overflow-y: auto; padding: var(--sp-4); }
  .sheet[hidden] { display: none; }
  .sheet-head { display: flex; align-items: center; justify-content: space-between; height: var(--hit); margin-bottom: var(--sp-3); font-weight: var(--w-semibold); }
  .sheet a { display: flex; align-items: center; min-height: var(--hit); padding: 0 var(--sp-3); border-left: 2px solid transparent; color: var(--text); }
  .sheet a[aria-current="true"] { color: var(--accent); border-left-color: var(--accent); font-weight: var(--w-semibold); }
  .grid-2, .grid-3 { grid-template-columns: minmax(0, 1fr); }
  .tile-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tile { padding: var(--sp-4); }
  .chart-card, .card { padding: var(--sp-4); }
  .chart-foot { flex-direction: column; align-items: flex-start; gap: var(--sp-1); }
  .chart-foot .stamp { margin-left: 0; }
  .chart-legend { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); margin-top: var(--sp-3); font-size: var(--fs-label); line-height: var(--lh-label); color: var(--text); }
  .chart-legend span { display: inline-flex; align-items: center; gap: var(--sp-2); font-variant-numeric: tabular-nums; }
  .chart-legend i { width: 8px; height: 8px; border-radius: 2px; display: inline-block; flex: none; }
  .chart-legend i.is-line { height: 2px; border-radius: 0; }
  .chart-legend i.is-dashed { height: 0; background: none; border-top: 2px dashed; border-radius: 0; }
  .chart-legend i.is-dotted { height: 0; background: none; border-top: 2px dotted; border-radius: 0; }
  .chart-legend i.is-band { opacity: var(--band-edge); border: 1px solid; }
  .chart-legend .value { color: var(--muted); }
  .chart-legend .is-gain { color: var(--gain); }
  .chart-legend .is-loss { color: var(--loss); }
  /* chart before controls */
  .chart-card { display: flex; flex-direction: column; }
  .chart-card > .chart-slot { order: 1; }
  .chart-card > .chart-legend { order: 2; }
  .chart-card > .chart-foot { order: 3; }
  .chart-card > .rs { order: 4; }
  .chart-card > .chart-controls { order: 5; margin-top: var(--sp-4); margin-bottom: 0; }
  /* a head that only names the chart stays on top; one that holds controls moves under the plot */
  .chart-card > .chart-head { order: 0; }
  .chart-card > .chart-head:has(select, input, .btn) { order: 5; margin-top: var(--sp-4); margin-bottom: 0; }
  /* tables as cards */
  .table-wrap { overflow: visible; max-height: none; background: none; border: 0; }
  .tbl thead { display: none; }
  .tbl, .tbl tbody, .tbl tr { display: block; width: 100%; }
  .tbl tr { background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius); margin-bottom: var(--sp-3); padding: var(--sp-1) 0; }
  .tbl td { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--sp-3); height: auto; min-height: var(--hit); text-align: right; white-space: normal; }
  .tbl.is-tall td { height: auto; } /* a wrapped cell-sub grows its card row */
  .tbl td::before { content: attr(data-label); color: var(--muted); font-size: var(--fs-label); line-height: var(--lh-label); text-transform: uppercase; letter-spacing: var(--tracking-caps); text-align: left; flex: none; }
  .tbl td:first-child { font-weight: var(--w-semibold); justify-content: flex-start; }
  .tbl td:first-child::before { content: none; }
  .tbl td .cell-sub { flex: 1 0 100%; max-width: 100%; white-space: normal; overflow: visible; text-overflow: clip; }
  .tbl td.is-clip { max-width: none; width: auto; overflow: visible; text-overflow: clip; white-space: normal; }
  .tbl td.is-prose { display: block; text-align: left; }
  .tbl td.is-prose::before { content: none; }
  .tbl .row-expand td:first-child { padding-left: calc(var(--sp-3) + 6px + var(--sp-2)); }
  .tbl.is-ranked tr.row-expand { position: relative; }
  .tbl.is-ranked .row-expand td:first-child::before { content: none; }
  .tbl.is-ranked tr.row-expand::after { content: ""; position: absolute; left: var(--sp-3); top: 50%; width: 6px; height: 6px; margin-top: -4px; border-right: 1.5px solid var(--muted); border-bottom: 1.5px solid var(--muted); transform: rotate(-45deg); transition: transform .12s; }
  .tbl.is-ranked tr.row-expand.is-open::after { transform: rotate(45deg); }
  .tbl.is-ranked.has-below tr.row-expand::after { top: calc(var(--sp-2) + 11px); margin-top: 0; }
  .tbl .row-detail { padding: 0; }
  .tbl .row-detail td { display: block; }
  .xrow-summary { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "claim date" "stance stance"; row-gap: 0; padding-top: var(--sp-2); padding-bottom: var(--sp-2); }
  .quotes-head { flex-direction: column; align-items: flex-start; gap: 0; padding: var(--sp-2) var(--sp-3); }
  .quotes-claim { grid-area: claim; white-space: normal; }
  .quotes-stance { grid-area: stance; font-size: var(--fs-label); line-height: var(--lh-label); }
  .quotes-date { grid-area: date; font-size: var(--fs-label); line-height: var(--lh-label); }
  .tbl tbody tr:hover td { background: none; }
  .tbl tbody tr:last-child td { border-bottom: 1px solid var(--rule); }
  .tbl tr td:last-child { border-bottom: 0; }
  /* lens table rows as cards */
  .lens-head { display: none; }
  .lens-row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name median" "band band" "actions actions"; row-gap: var(--sp-1); padding: var(--sp-3); }
  .lens-name { grid-area: name; }
  .lens-median { grid-area: median; }
  .lens-band { grid-area: band; text-align: left; }
  .lens-actions { grid-area: actions; justify-content: flex-start; }
  .lens-row.is-single { grid-template-columns: minmax(0, 1fr) auto; }
  .lens-table.is-single .lens-row { display: none; } /* one lens: the legend and readout already name it */
  /* comparison tables as a ranked list: identifier left, the ranking metric right, the rest in the expanding row */
  .tbl.is-ranked tr.row-expand { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: var(--sp-3); min-height: 56px; margin: 0; padding: 0 var(--sp-3) 0 calc(var(--sp-3) + 6px + var(--sp-2)); border: 0; border-radius: 0; border-bottom: 1px solid var(--rule); background: var(--card); }
  .tbl.is-ranked.has-below tr.row-expand { min-height: var(--hit); }
  .tbl.is-ranked { background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius); overflow: hidden; }
  .tbl.is-ranked thead.rank-head { display: block; }
  .tbl.is-ranked thead.rank-head tr { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-3); height: var(--sp-6); margin: 0; padding: 0 var(--sp-3) 0 calc(var(--sp-3) + 6px + var(--sp-2)); border: 0; border-radius: 0; border-bottom: 1px solid var(--rule); background: var(--ground-2); }
  .tbl.is-ranked thead.rank-head th { position: static; display: block; height: auto; padding: 0; border: 0; background: none; white-space: nowrap; }
  .tbl.is-ranked tr.row-detail { margin: 0; padding: 0; border: 0; border-radius: 0; border-bottom: 1px solid var(--rule); }
  .tbl.is-ranked tbody tr:last-child { border-bottom: 0; }
  .tbl.is-ranked tr.row-expand td { display: block; min-height: 0; height: auto; padding: 0; border: 0; text-align: left; }
  .tbl.is-ranked tr.row-expand td::before { content: none; }
  .tbl.is-ranked td.is-id { font-weight: var(--w-semibold); padding-left: 0; }
  .tbl.is-ranked td.is-id::before { display: none; }
  .tbl.is-ranked td.is-rank { font-size: var(--fs-claim); line-height: var(--lh-claim); font-weight: var(--w-semibold); text-align: right; white-space: nowrap; }
  .tbl.is-ranked td.is-below { grid-column: 1 / -1; padding-bottom: var(--sp-2); white-space: normal; }
  .tbl.is-ranked .rank-tag { color: var(--muted); font-size: var(--fs-label); line-height: var(--lh-label); font-weight: var(--w-regular); margin-left: var(--sp-2); }
  .tbl.is-ranked tr.row-detail td { display: block; }
  .rank-rest li { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-3); min-height: var(--hit); border-bottom: 1px solid var(--rule); }
  .rank-rest li:last-child { border-bottom: 0; }
  .rank-rest .rank-label { color: var(--muted); font-size: var(--fs-label); line-height: var(--lh-label); text-transform: uppercase; letter-spacing: var(--tracking-caps); flex: none; }
  .rank-rest .rank-value { text-align: right; }
  .rank-rest .rank-value .cell-sub { display: block; max-width: none; white-space: normal; }
}