/*
  Poster variant.
  Idea: lean into the joke. The bubble chart owns the first screen, the headline
  is set big in Archivo's wide cut, and the consequences sit right under the chart
  as large figures. White page, black type. Bubble-gum pink appears only on the
  Pop button (bubble gum pops); losses are told by the numbers, not by tinting.
*/

:root {
  color-scheme: light;
  --page: #ffffff;
  --tray: #f4f4f2;
  --ink: #121212;
  --ink-2: #474747;
  --ink-3: #686868;
  --rule: #e2e2df;
  --rule-strong: #121212;
  --pop: #d81b60;
  --pop-hover: #b8154f;
  --gain: #1e7a46;
  --warning: #7a5200;
  --error: #b3261e;
  --range-band: #7186a5;
  --badge-ink: #6e4a00;
  --badge-fill: #fbf0d6;
  --observed-ink: #155d36;
  --observed-fill: #dcf1e4;
  --font: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --gutter: clamp(16px, 4vw, 48px);

  --chart-surface: #ffffff;
  --chart-text: #121212;
  --chart-text-secondary: #474747;
  --chart-text-muted: #686868;
  --chart-grid: #e7e7e4;
  --chart-modeled: #2563c9;
  --chart-modeled-index: #121212;
  --chart-history: #686868;
  --chart-drag: #3a3a3a;
  --chart-cushion: #1e7a46;
  --chart-on-series: #ffffff;
  --chart-on-series-shadow: rgba(0, 0, 0, 0.3);
  --chart-hull-fill: rgba(0, 0, 0, 0);
  --chart-hull-stroke: #e2e2df;
  --chart-tooltip-bg: #ffffff;
  --chart-tooltip-border: #121212;
  --chart-tooltip-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
  --chart-radius: 8;
  --chart-font: "Archivo", "Helvetica Neue", Arial, sans-serif;

  /* Saturated mid-tones that hold white labels; nothing near the pop pink. */
  --layer-compute: #2563c9;
  --layer-fab: #d9701c;
  --layer-infra: #16906a;
  --layer-cloud: #a87d00;
  --layer-neocloud: #6a4fbf;
  --layer-power: #8a6339;
  --layer-apps: #0e8fa3;
}

/* Palettes change data colors, not the data. Layer numbers and line styles
   provide the same information when several colors are perceived alike. */
:root[data-palette="deutan"] {
  --layer-compute: #005a9c;
  --layer-fab: #a64700;
  --layer-infra: #007b87;
  --layer-cloud: #795000;
  --layer-neocloud: #624b9b;
  --layer-power: #4a4a4a;
  --layer-apps: #a23465;
  --pop: #005a9c;
  --pop-hover: #004476;
  --gain: #005a9c;
  --chart-modeled: #005a9c;
  --chart-drag: #a64700;
  --chart-cushion: #005a9c;
  --range-band: #6b8ba5;
  --warning: #795000;
  --error: #a64700;
  --badge-ink: #795000;
  --badge-fill: #f5ead6;
  --observed-ink: #005a9c;
  --observed-fill: #e1edf6;
}

:root[data-palette="protan"] {
  --layer-compute: #005a9c;
  --layer-fab: #8f4800;
  --layer-infra: #006b74;
  --layer-cloud: #6c6000;
  --layer-neocloud: #6d5795;
  --layer-power: #4a4a4a;
  --layer-apps: #9b3f78;
  --pop: #005a9c;
  --pop-hover: #004476;
  --gain: #005a9c;
  --chart-modeled: #005a9c;
  --chart-drag: #8f4800;
  --chart-cushion: #005a9c;
  --range-band: #6b8ba5;
  --warning: #6c6000;
  --error: #8f4800;
  --badge-ink: #6c6000;
  --badge-fill: #f4f0dc;
  --observed-ink: #005a9c;
  --observed-fill: #e1edf6;
}

:root[data-palette="tritan"] {
  --layer-compute: #006873;
  --layer-fab: #a51e4d;
  --layer-infra: #384d6e;
  --layer-cloud: #8e4734;
  --layer-neocloud: #78415d;
  --layer-power: #555555;
  --layer-apps: #005145;
  --pop: #a51e4d;
  --pop-hover: #80163b;
  --gain: #006873;
  --chart-modeled: #006873;
  --chart-drag: #a51e4d;
  --chart-cushion: #006873;
  --range-band: #6e9397;
  --warning: #8e4734;
  --error: #a51e4d;
  --badge-ink: #8e4734;
  --badge-fill: #f7e7e1;
  --observed-ink: #006873;
  --observed-fill: #e0f0f1;
}

:root[data-palette="monochrome"] {
  --tray: #f4f4f4;
  --rule: #e2e2e2;
  --chart-grid: #e7e7e7;
  --chart-hull-stroke: #e2e2e2;
  --layer-compute: #242424;
  --layer-fab: #3b3b3b;
  --layer-infra: #525252;
  --layer-cloud: #656565;
  --layer-neocloud: #333333;
  --layer-power: #494949;
  --layer-apps: #5e5e5e;
  --pop: #242424;
  --pop-hover: #000000;
  --gain: #242424;
  --chart-modeled: #242424;
  --chart-drag: #3b3b3b;
  --chart-cushion: #656565;
  --range-band: #888888;
  --warning: #474747;
  --error: #121212;
  --badge-ink: #474747;
  --badge-fill: #eeeeee;
  --observed-ink: #121212;
  --observed-fill: #dddddd;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font: 400 16px/1.55 var(--font);
}

a { color: inherit; text-underline-offset: 3px; }

h1, h2, h3 { margin: 0; }

b { font-weight: 650; }

.muted { color: var(--ink-3); }

/* ─── Top bar ─────────────────────────────────────────────────────────────── */

.topbar {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 16px;
  padding: 16px var(--gutter);
}

.topbar-tools { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 8px 20px; min-width: 0; }
.palette-control { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-2); }
.palette-control select {
  min-height: 36px;
  max-width: 100%;
  padding: 6px 8px;
  border: 1px solid var(--ink-3);
  border-radius: 6px;
  background: var(--page);
  color: var(--ink);
  font: inherit;
  cursor: pointer;
}
.palette-control select:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

.status {
  font-size: 13px;
  color: var(--ink-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 60vw;
}

.status-snapshot { color: var(--warning); }
.status-error { color: var(--error); }

main {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 var(--gutter) 64px;
}

/* ─── Stage: headline, button, chart ──────────────────────────────────────── */

/* The headline is set as three fixed lines, so centering the button on the
   block puts it on the middle line ("when the AI"). Auto margins center the
   button in the space between the headline and the right edge; the empty
   ::after item mirrors the gap on the right so the centering stays exact. */
.stage-head {
  display: flex;
  align-items: center;
  gap: 24px;
  padding-top: clamp(8px, 2vw, 24px);
}

.stage-head::after { content: ""; }

h1 {
  min-width: 0;
  font-size: clamp(38px, 6.4vw, 96px);
  line-height: 0.95;
  font-weight: 850;
  font-stretch: 120%;
  letter-spacing: -0.02em;
}

h1 span { display: block; }

/* Desktop: share the free space on both sides so title + button sit centered */
@media (min-width: 641px) {
  .stage-head h1 { margin-left: auto; }
  .stage-head::after { display: none; }
}

.pop-button {
  appearance: none;
  flex-shrink: 0;
  margin-inline: auto;
  width: clamp(112px, 11vw, 152px);
  aspect-ratio: 1;
  border: 0;
  border-radius: 50%;
  padding: 12px;
  font: 800 clamp(16px, 1.5vw, 20px)/1.05 var(--font);
  font-stretch: 112%;
  color: #ffffff;
  background: var(--pop);
  cursor: pointer;
  transition: background-color 0.15s;
}

.pop-button:hover { background: var(--pop-hover); }

.pop-button.is-popped {
  background: var(--page);
  color: var(--ink);
  box-shadow: inset 0 0 0 2px var(--ink);
}

.pop-button:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  .pop-button { transition: none; }
}

.chart { width: 100%; min-width: 0; }
.bubbles-wrap { position: relative; margin-top: 8px; }
.chart-bubbles { height: clamp(420px, 68vh, 760px); }
.pop-fx { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.chart-path { height: 380px; }
.chart-layers { height: 380px; }
.chart-waterfall { height: 360px; }

.stage-foot {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px 32px;
  flex-wrap: wrap;
}

.stage-note { margin: 0; font-size: 15px; color: var(--ink-2); }

.legend {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 13px;
  color: var(--ink-2);
}

.legend li { display: flex; align-items: center; gap: 6px; }

.swatch { display: inline-block; width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.layer-code { display: none; }
:root[data-palette]:not([data-palette="default"]) .swatch {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border: 1px solid var(--ink);
  font-size: 11px;
  font-weight: 700;
}
:root[data-palette]:not([data-palette="default"]) .layer-code { display: inline; }

/* ─── Consequences: big figures under the chart ───────────────────────────── */

.kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
  margin-top: 32px;
  padding-top: 20px;
  border-top: 2px solid var(--rule-strong);
}

.kpi { min-width: 0; }

.kpi h3 { font-size: 14px; font-weight: 500; color: var(--ink-2); }

.kpi-value {
  margin: 4px 0 0;
  font-size: clamp(36px, 4.4vw, 64px);
  line-height: 1;
  font-weight: 800;
  font-stretch: 110%;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.kpi-sub {
  margin: 8px 0 0;
  font-size: 13px;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}

/* ─── Controls tray ───────────────────────────────────────────────────────── */

.controls {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr);
  gap: 40px;
  margin-top: 40px;
  padding: 32px;
  background: var(--tray);
  border-radius: 20px;
}

.controls h2,
.section h2 {
  font-size: clamp(26px, 3vw, 40px);
  line-height: 1.05;
  font-weight: 800;
  font-stretch: 115%;
  letter-spacing: -0.015em;
}

.lede { margin: 12px 0 0; max-width: 50ch; color: var(--ink-2); }

.presets {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 20px;
}

.chip {
  appearance: none;
  border: 2px solid var(--ink);
  background: transparent;
  color: var(--ink);
  font: 600 14px/1 var(--font);
  padding: 9px 14px;
  border-radius: 999px;
  cursor: pointer;
}

.chip:hover { background: var(--page); }

.chip.active { background: var(--ink); color: var(--page); }

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

.preset-blurb { min-height: 3.2em; margin: 14px 0 0; font-size: 15px; color: var(--ink-2); }

.controls-foot { display: flex; gap: 20px; margin-top: 12px; }

.plain-button {
  appearance: none;
  border: 0;
  padding: 4px 0;
  background: none;
  color: var(--ink);
  font: 600 15px/1.3 var(--font);
  text-decoration: underline;
  text-underline-offset: 4px;
  cursor: pointer;
}

.plain-button:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }

.sliders {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px 32px;
}

.sliders-compact { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px 24px; margin-top: 12px; }

.sliders-compact .slider-hint { display: none; }

.sliders-grid {
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 20px 32px;
  margin-top: 16px;
}

.slider { display: grid; gap: 4px; align-content: start; }

.slider-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  font-size: 14px;
  font-weight: 600;
}

.slider output {
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.slider-hint { font-size: 13px; color: var(--ink-3); line-height: 1.4; }

input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 28px;
  margin: 0;
  background: transparent;
  cursor: pointer;
}

input[type="range"]::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: #cfcfcb; }
input[type="range"]::-moz-range-track { height: 4px; border-radius: 2px; background: #cfcfcb; }

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 22px;
  height: 22px;
  margin-top: -9px;
  border-radius: 50%;
  background: var(--ink);
  border: 4px solid var(--page);
  box-shadow: 0 0 0 1px var(--ink);
}

input[type="range"]::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--ink);
  border: 4px solid var(--page);
  box-shadow: 0 0 0 1px var(--ink);
}

input[type="range"]:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; border-radius: 4px; }

.drawer {
  margin-top: 24px;
  border-top: 1px solid var(--rule);
  padding-top: 14px;
}

.controls .drawer { border-top-color: #d6d6d2; }

.drawer summary {
  cursor: pointer;
  font-size: 15px;
  font-weight: 700;
  list-style: none;
}

.drawer summary::-webkit-details-marker { display: none; }

.drawer summary::before {
  content: "+";
  display: inline-block;
  width: 1.2em;
  font-weight: 800;
}

.drawer[open] summary::before { content: "−"; }

.drawer summary:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }

.drawer-note { margin: 6px 0 0; font-size: 13px; color: var(--ink-3); }

.evidence-note { margin: 24px 0 0; max-width: 70ch; font-size: 14px; color: var(--ink-2); }

.data-drawer { margin-top: 12px; }

.data-details { font-size: 13px; color: var(--ink-2); }
.data-list { list-style: none; padding: 0; }
.data-list li { display: grid; grid-template-columns: 160px 1fr 1fr; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--rule); }
.data-warning { font-size: 14px; color: var(--error); }

/* ─── Sections ────────────────────────────────────────────────────────────── */

.section { margin-top: 88px; }

.section-head p {
  margin: 12px 0 24px;
  color: var(--ink-2);
}

.two-up {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: 48px;
}

/* ─── Stock table ─────────────────────────────────────────────────────────── */

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

/* Let canvas charts shrink inside the single-column mobile grid. */
.two-up > div { min-width: 0; }

.stock-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  min-width: 940px;
}

.stock-table th,
.stock-table td {
  padding: 10px 10px;
  text-align: left;
  border-bottom: 1px solid var(--rule);
  vertical-align: middle;
}

.stock-table th:first-child,
.stock-table td:first-child { padding-left: 0; }

.stock-table thead th {
  position: sticky;
  top: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-2);
  border-bottom: 2px solid var(--rule-strong);
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  background: var(--page);
}

.stock-table thead th:hover { color: var(--ink); }

.stock-table thead th[aria-sort="ascending"]::after { content: " ↑"; }
.stock-table thead th[aria-sort="descending"]::after { content: " ↓"; }

.stock-table .num { text-align: right; white-space: nowrap; }

.stock-table td .muted,
.stock-table td .chg { display: block; font-size: 12.5px; }

.stock-table tbody tr:hover { background: var(--tray); }

.stock-table tbody th { font-weight: 400; cursor: help; }

.company { display: flex; align-items: center; gap: 10px; }
.company-text { display: grid; line-height: 1.25; }
.company-text b { font-weight: 800; }
.company-text .muted { font-size: 12.5px; white-space: nowrap; }

.company-details summary { cursor: pointer; list-style: none; }
.company-details summary::-webkit-details-marker { display: none; }
.company-details summary::after { content: "+"; color: var(--ink-3); margin-left: auto; }
.company-details[open] summary::after { content: "−"; }
.company-extra { width: min(300px, 70vw); font-size: 13px; color: var(--ink-2); }
.company-extra p { margin: 8px 0; }

.assumption-table { font-size: 13px; }
.assumption-table td { max-width: 300px; }
.assumption-table thead th { cursor: default; }

.chg.up { color: var(--gain); }
.chg.down { color: var(--ink); }

.blend-col { min-width: 220px; }

.blend { display: grid; grid-template-columns: 1fr 68px; align-items: center; gap: 12px; }

.range { position: relative; height: 14px; }

.range-zero { position: absolute; top: -3px; bottom: -3px; width: 2px; margin-left: -1px; background: var(--ink); }

.range-band { position: absolute; top: 4px; height: 6px; border-radius: 3px; background: var(--range-band); }

.range-mark {
  position: absolute;
  top: 0;
  width: 14px;
  height: 14px;
  margin-left: -7px;
  border-radius: 50%;
  background: var(--chart-modeled);
  border: 2px solid var(--page);
}

.blend-value { text-align: right; font-weight: 800; font-size: 15px; }

.blend-value.wipeout { font-size: 12.5px; }

.analog { min-width: 150px; }
.analog .muted { white-space: nowrap; }

.context { font-size: 13px; color: var(--ink-3); margin: 14px 0 0; }

.badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  color: var(--badge-ink);
  background: var(--badge-fill);
  border-radius: 999px;
  padding: 1px 8px;
  white-space: nowrap;
}

.badge-observed { color: var(--observed-ink); background: var(--observed-fill); }

/* ─── Follow the money ────────────────────────────────────────────────────── */

.watch-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 40px 48px;
}

.watch-card { min-width: 0; }

.watch-meta { display: flex; justify-content: space-between; gap: 8px; align-items: center; }

.watch-card h3 { margin-top: 10px; font-size: 15px; font-weight: 600; color: var(--ink-2); }

.watch-card p { font-size: 14px; margin: 8px 0; color: var(--ink-2); }

.watch-card .watch-value {
  font-size: 44px;
  line-height: 1;
  font-weight: 800;
  font-stretch: 110%;
  color: var(--ink);
  margin: 6px 0 10px;
  font-variant-numeric: tabular-nums;
}

.watch-card a { font-size: 13px; font-weight: 600; }

.guidance-list { padding-left: 18px; font-size: 13px; color: var(--ink-2); }
.guidance-list li { margin: 6px 0; }

/* ─── Economy ─────────────────────────────────────────────────────────────── */

.economy {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 48px;
  align-items: start;
}

.econ-stats dl { margin: 0; display: grid; }

.stat {
  display: grid;
  grid-template-columns: 170px minmax(0, 1fr);
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--rule);
}

.stat dt { font-size: 14px; font-weight: 600; color: var(--ink-2); white-space: nowrap; }

.stat dd { margin: 0; display: grid; gap: 2px; }

.stat dd b { font-size: 26px; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; }

.stat dd span { font-size: 13px; color: var(--ink-3); }

/* ─── Method ──────────────────────────────────────────────────────────────── */

.method-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 40px 56px;
}

.method-grid article { min-width: 0; }

.method-grid h3 { font-size: 20px; font-weight: 800; font-stretch: 110%; }

.method-grid p { font-size: 15px; color: var(--ink-2); margin: 10px 0 0; }

.method-grid b { color: var(--ink); }

.formula {
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: 14px !important;
  color: var(--ink) !important;
  background: var(--tray);
  border-radius: 10px;
  padding: 12px 16px;
  overflow-x: auto;
  white-space: nowrap;
}

.notes {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  gap: 56px;
  margin-top: 56px;
  padding-top: 24px;
  border-top: 2px solid var(--rule-strong);
}

.caveats h3,
.sources h3 { font-size: 20px; font-weight: 800; font-stretch: 110%; }

.caveats ul,
.sources ul { margin: 10px 0 0; padding-left: 18px; font-size: 14px; color: var(--ink-2); }

.caveats li,
.sources li { margin: 6px 0; }

.footer {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 var(--gutter) 48px;
  font-size: 13px;
  color: var(--ink-3);
}

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

@media (max-width: 1080px) {
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .controls { grid-template-columns: 1fr; gap: 28px; }
  .two-up, .economy, .method-grid, .notes { grid-template-columns: 1fr; }
  .watch-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .section { margin-top: 64px; }
}

@media (max-width: 640px) {
  .topbar { flex-wrap: wrap; gap: 8px; }
  .topbar-tools { flex: 1 0 100%; justify-content: space-between; gap: 8px 12px; }
  .stage-head { gap: 12px; }
  h1 { font-size: clamp(22px, 7.6vw, 38px); }
  .pop-button { width: 88px; padding: 8px; font-size: 14px; }
  .chart-bubbles { height: 420px; }
  .kpis { gap: 20px 16px; }
  .controls { padding: 20px 16px; margin-left: calc(-1 * var(--gutter)); margin-right: calc(-1 * var(--gutter)); border-radius: 0; }
  .sliders { grid-template-columns: 1fr; }
  .watch-grid { grid-template-columns: 1fr; }
  .stat { grid-template-columns: 1fr; gap: 4px; }
  .data-list li { grid-template-columns: 1fr; gap: 2px; }
  .chart-path, .chart-layers { height: 320px; }
  .status { max-width: 100%; white-space: normal; }

  /* Stock table becomes one card per company; the header turns into sort chips. */
  #stock-table { min-width: 0; }
  #stock-table thead, #stock-table tbody, #stock-table th, #stock-table td { display: block; }
  #stock-table thead tr { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding-bottom: 14px; border-bottom: 2px solid var(--rule-strong); }
  #stock-table thead tr::before { content: "Sort by"; font-size: 12.5px; color: var(--ink-3); margin-right: 2px; }
  #stock-table thead th { position: static; padding: 5px 10px; border: 1px solid var(--rule); border-radius: 999px; font-size: 12.5px; text-align: left; }
  #stock-table thead th[aria-sort="ascending"], #stock-table thead th[aria-sort="descending"] { color: var(--ink); border-color: var(--ink); }
  #stock-table tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px 16px; padding: 16px 0; border-bottom: 1px solid var(--rule); }
  #stock-table tbody tr:hover { background: none; }
  #stock-table tbody th, #stock-table tbody td { padding: 0; border: 0; text-align: left; white-space: normal; }
  #stock-table tbody th, #stock-table .blend-col, #stock-table .analog { grid-column: 1 / -1; }
  #stock-table tbody th { order: 0; }
  #stock-table .blend-col { order: 1; min-width: 0; }
  #stock-table tbody td { order: 2; }
  #stock-table .analog { order: 3; min-width: 0; }
  #stock-table td[data-label]::before { content: attr(data-label); display: block; margin-bottom: 2px; font-size: 12px; font-weight: 600; color: var(--ink-3); }
  #stock-table .company-extra { width: auto; }
}