/* Bloombroke: ice blue on black. A dense, instant market terminal.
   Spacing scale: 2 4 6 8 12 16 24 32. Type scale: 11 12 13 14 16 18 24 32 44. */

:root {
  /* Surfaces: near-black with a hint of blue, lighter as they rise */
  --bg: hsl(213, 43%, 3%);          /* #05080C */
  --panel: hsl(213, 36%, 6%);
  --panel-2: hsl(212, 32%, 9%);
  --panel-3: hsl(211, 30%, 12%);

  /* Rules */
  --rule: hsl(211, 28%, 12%);        /* row dividers */
  --rule-strong: hsl(210, 24%, 22%); /* panel borders */

  /* Text: primary, secondary, tertiary */
  --text: hsl(206, 100%, 91%);       /* #CFEAFF */
  --text-2: hsl(206, 45%, 76%);
  --dim: hsl(208, 24%, 58%);         /* muted steel blue labels, 5.9:1 on --bg */
  --faint: hsl(210, 18%, 36%);

  --accent: hsl(201, 100%, 71%);     /* #6CCBFF */
  --accent-tint: hsla(201, 100%, 71%, .1);
  --ink: hsl(213, 60%, 3%);          /* text on the accent */

  /* Compare lines on a chart: white, a deeper ice blue, steel grey */
  --cmp-1: hsl(0, 0%, 96%);
  --cmp-2: hsl(222, 90%, 70%);
  --cmp-3: hsl(210, 10%, 60%);

  --up: hsl(147, 70%, 55%);          /* #3DDC84 */
  --down: hsl(0, 100%, 68%);         /* #FF5C5C */
  --up-flash: hsla(147, 70%, 45%, .30);
  --down-flash: hsla(0, 100%, 60%, .28);

  --gutter: 12px;
  /* Every row shares one centred content column. Bar backgrounds stay full-bleed;
     only their contents are inset. 100% resolves against each element's own width. */
  --maxw: 1440px;
  --inset: max(var(--gutter), calc((100% - var(--maxw)) / 2));
  --topbar-h: 30px;
  --cmd-h: 40px;
  --status-h: 22px;
  --tape-h: 0px; /* tape hidden by default; TAPE ON brings it back (nav.css) */
  --keybar-h: 28px;
  /* The tape is off by default; body.has-tape adds its row (see nav.css). */
  --dock-h: calc(var(--status-h) + var(--keybar-h) + 1px);
  --row-h: 24px;

  --font: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;

  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 13px;
  line-height: 1.45;
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1, 'zero' 0;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

::selection { background: hsla(201, 100%, 71%, .28); color: var(--text); }

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
:focus-visible { outline: 1px solid var(--accent); outline-offset: 1px; }

h1, h2, p, ul, ol, dl, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }

.num { font-variant-numeric: tabular-nums; }
.dim, .muted { color: var(--dim); }
.up { color: var(--up); }
.down { color: var(--down); }
.flat { color: var(--dim); }
.offscreen { position: fixed; top: 0; left: 0; opacity: 0; pointer-events: none; }

kbd {
  display: inline-block;
  min-width: 18px;
  padding: 0 4px;
  border: 1px solid var(--rule-strong);
  font-family: var(--font);
  font-size: 11px;
  line-height: 16px;
  color: var(--text-2);
  text-align: center;
}

.code { color: var(--accent); white-space: nowrap; }

/* ---- Top bar ---------------------------------------------------------- */
.topbar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  height: var(--topbar-h);
  padding: 0 var(--inset);
  background: var(--bg);
  border-bottom: 1px solid var(--rule);
}
.wordmark { font-size: 13px; font-weight: 600; letter-spacing: .22em; color: var(--text); }
.wordmark:hover { text-decoration: none; color: var(--accent); }

.clock { display: flex; align-items: center; gap: 10px; font-size: 12px; white-space: nowrap; }
.clock .label { color: var(--dim); letter-spacing: .1em; }
.clock-time { color: var(--text); }
.status {
  display: inline-flex; align-items: center; gap: 6px;
  padding-left: 10px; border-left: 1px solid var(--rule-strong);
  color: var(--dim); letter-spacing: .08em; font-weight: 600;
}
.status-dot { width: 6px; height: 6px; background: var(--faint); }
/* Freshness: ice blue when the screen's data is fresh, a hollow red ring when it is
   stale (old data, or no update for a while); the time is in the tooltip. No data on
   the screen, no dot. */
.fresh-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); cursor: help; }
.fresh-dot[data-state="stale"] { background: transparent; box-shadow: inset 0 0 0 1.5px var(--down); }
.fresh-dot[data-state="none"] { visibility: hidden; }
/* Provenance: the dot opens a small list of this screen's sources (public/provenance.js). */
.fresh-dot { cursor: pointer; padding: 0; border: 0; }
.fresh-dot:focus-visible { outline: 1px solid var(--accent); outline-offset: 3px; }
.prov-pop { position: fixed; z-index: 60; max-width: min(360px, calc(100vw - 16px)); padding: 6px 8px; background: var(--panel-2); border: 1px solid var(--rule-strong); font-size: 11px; line-height: 1.5; }
.prov-pop[hidden] { display: none; }
.pv-list { list-style: none; margin: 0 0 4px; padding: 0; }
.pv-list li { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pv-list a, .pv-all { color: var(--text-2); text-decoration: none; }
.pv-list a:hover .pv-src, .pv-all:hover { color: var(--accent); }
.pv-dim { color: var(--dim); }
.pv-all { color: var(--accent); }
/* Tiny tags: PRE, MKT, AH, WKD (EDGAR acceptance time), 8-K or 10-Q (earnings). */
.tod { margin-left: 1px; font-size: 9px; letter-spacing: 0; font-weight: 400; color: var(--faint); vertical-align: 1px; }
.fin-v, .fin-nv { position: relative; color: inherit; text-decoration: none; }
.fin-v:hover, .fin-v:focus-visible { color: var(--accent); }
/* The derived marker hangs past the number, so the digits stay aligned with the column. */
/* DATA: every column on one desktop screen, small type, cells wrap. */
.dt-scroll { overflow-x: auto; }
.data-table { table-layout: fixed; width: 100%; font-size: 11px; }
.grid-table.data-table th, .grid-table.data-table td { white-space: normal; overflow-wrap: break-word; max-width: none; text-overflow: clip; height: auto; line-height: 1.35; padding-top: 3px; padding-bottom: 3px; vertical-align: top; }
.data-table .dt-name { width: 17%; } .data-table .dt-src { width: 15%; }
.data-table .dt-cov { width: 15%; } .data-table .dt-hist { width: 11%; } .data-table .dt-upd { width: 11%; }
.data-table .dt-age { width: 5%; } .data-table .dt-delay { width: 7%; } .data-table .dt-gaps { width: 16%; }
.data-table tr.is-lit > * { background: var(--accent-tint); }
@media (max-width: 639px) { .data-table .hide-m, .status-table .hide-m { display: none; } .data-table .dt-name { width: 38%; } .data-table .dt-src { width: 30%; } .data-table .dt-age { width: 13%; } .data-table .dt-delay { width: 19%; } }
/* STATUS: the HOME markets grid, four columns on desktop, one on phones. */
.mk-cols.st-cols { columns: 4 260px; }
@media (max-width: 639px) { .mk-cols.st-cols { columns: 1; } }
.st-group .c-st { width: 11ch; }
.st-group .c-age { width: 7ch; }
.sx-dot { display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; vertical-align: 1px; background: var(--faint); }
.sx-dot[data-state="ok"] { background: var(--up); }
.sx-dot[data-state="slow"] { background: var(--dim); }
.sx-dot[data-state="failing"] { background: transparent; box-shadow: inset 0 0 0 1.5px var(--down); }
.sx-word { font-size: 11px; letter-spacing: .04em; color: var(--dim); }
.sx-word.sx-ok { color: var(--text-2); }
.sx-word.sx-failing { color: var(--down); }
.fin-d { position: absolute; left: 100%; top: -3px; padding-left: 1px; font-size: 8px; line-height: 1; color: var(--dim); }
.status[data-open="true"] { color: var(--up); }
.status[data-open="true"] .status-dot { background: var(--up); }

/* ---- Command bar ------------------------------------------------------ */
.commandbar { position: sticky; top: 0; z-index: 10; background: var(--panel); border-bottom: 1px solid var(--rule-strong); }
.cmd { position: relative; display: flex; align-items: center; gap: 10px; height: var(--cmd-h); padding: 0 var(--inset); }
.prompt { font-size: 16px; font-weight: 600; color: var(--accent); line-height: 1; }
.cmd-field { position: relative; flex: 1; min-width: 0; height: 100%; display: flex; align-items: center; }

#cmd {
  width: 100%; height: 100%;
  padding: 0; border: 0; outline: 0;
  background: transparent;
  color: var(--text);
  font-family: var(--font);
  font-size: 16px;
  letter-spacing: 0;
  text-transform: uppercase;
  caret-color: transparent;
}
#cmd::placeholder { color: var(--faint); text-transform: none; opacity: 1; }
.cmd-focused #cmd:placeholder-shown { text-indent: calc(1ch + 8px); }
#cmd:focus-visible { outline: 0; }

.measure { position: absolute; visibility: hidden; white-space: pre; font-family: var(--font); font-size: 16px; letter-spacing: 0; }

.cursor {
  position: absolute; left: 0; top: 50%;
  width: 10px; height: 20px; margin-top: -10px;
  background: var(--accent);
  opacity: 0;
  pointer-events: none;
}
.cmd-focused .cursor { opacity: .9; }
.cmd-focused .cursor.blink { animation: blink 1.1s steps(1, end) infinite; }
@keyframes blink { 0%, 55% { opacity: .9; } 56%, 100% { opacity: 0; } }

.cmd-keys { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--dim); white-space: nowrap; }
.cmd-keys kbd:not(:first-child) { margin-left: 6px; }

.suggest {
  position: absolute;
  top: 100%;
  left: calc(var(--inset) + var(--label-w, 0px) + 28px);
  width: min(600px, calc(100% - var(--inset) * 2 - var(--label-w, 0px) - 28px));
  background: var(--panel-2);
  border: 1px solid var(--rule-strong);
  z-index: 20;
}
.suggest li {
  display: grid;
  grid-template-columns: minmax(96px, max-content) 1fr;
  gap: 16px;
  align-items: center;
  height: var(--row-h);
  padding: 0 8px;
  cursor: pointer;
}
.suggest li:hover, .suggest li.is-active { background: var(--panel-3); }
.suggest .sug-name { color: var(--text); font-weight: 600; }
.suggest .sug-hint { color: var(--dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.suggest li.is-usage { cursor: default; }
.suggest li.is-usage .sug-name { color: var(--accent); font-weight: 400; }

/* ---- Screen ----------------------------------------------------------- */
.screen { padding: 8px var(--inset) calc(var(--dock-h) + 16px); outline: 0; }

.footnote { margin-top: 6px; font-size: 11px; color: var(--dim); }
.footnote:empty { display: none; }
.notice { font-size: 16px; font-weight: 600; line-height: 1.35; color: var(--text); margin-bottom: 6px; }
.examples { margin-top: 8px; line-height: 2; }
.examples .code { margin-right: 12px; }
.codes { color: var(--text-2); word-spacing: 4px; }
.loading { color: var(--dim); letter-spacing: .08em; }
.panel-msg { color: var(--text-2); }

/* ---- Panels ----------------------------------------------------------- */
.grid, .stack {
  display: grid;
  gap: 1px;
  background: var(--rule-strong);
  border: 1px solid var(--rule-strong);
}
.grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.stack { grid-template-columns: minmax(0, 1fr); }

.panel { display: flex; flex-direction: column; min-width: 0; background: var(--bg); }
.panel-solo { border: 1px solid var(--rule-strong); }
.panel[hidden] { display: none; }

.panel-head {
  display: flex; align-items: stretch; justify-content: space-between; gap: 8px;
  height: 22px;
  background: var(--panel);
  border-bottom: 1px solid var(--rule-strong);
}
.panel-label {
  display: flex; align-items: center;
  margin: 0;
  padding: 0 8px;
  background: var(--accent);
  color: var(--ink);
  font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  white-space: nowrap;
}
a.panel-label:hover { text-decoration: none; background: var(--text); }
.panel-meta {
  display: flex; align-items: center; justify-content: flex-end; gap: 8px;
  min-width: 0;
  padding-right: 8px;
  font-size: 11px; color: var(--dim); letter-spacing: .04em;
  white-space: nowrap; overflow: hidden;
}
/* "Stock: $GOLD": a plain word that is also a listed stock. One dim link, never more. */
.stock-hint {
  display: flex; align-items: center; flex: 0 0 auto;
  margin-right: auto; /* next to the label; the panel's own meta stays right */
  padding: 0 8px;
  font-size: 11px; color: var(--dim); letter-spacing: .04em; white-space: nowrap;
}
.stock-hint:hover, .stock-hint:focus-visible { color: var(--text); text-decoration: none; }
.help-search .stock-hint, .desk-bar .stock-hint { margin-right: 0; margin-left: auto; }
/* Phones: a long panel title wraps inside its label instead of pushing the page wide. */
@media (max-width: 639px) {
  .panel-head { height: auto; min-height: 22px; }
  .panel-label { flex: 0 0 auto; min-width: 0; max-width: 70%; padding-top: 3px; padding-bottom: 3px; white-space: normal; line-height: 16px; overflow-wrap: anywhere; }
  .panel-meta { flex: 0 1 auto; flex-wrap: wrap; white-space: normal; text-align: right; line-height: 14px; padding-top: 3px; padding-bottom: 3px; }
  /* A long command in a sentence (a Format: line) may break. */
  p .code { white-space: normal; overflow-wrap: anywhere; }
}
.panel-body { flex: 1; min-height: 0; padding: 8px 10px; }
.panel-body.flush, .panel-body:has(> table) { padding: 0; }
.panel-body.flush > .loading, .panel-body.flush > .panel-msg,
.panel-body.flush > .chart-host > .loading, .panel-body.flush > .chart-host > .panel-msg { padding: 8px 2px; }

.tabs { display: flex; align-self: stretch; margin-right: -8px; border-left: 1px solid var(--rule-strong); }
.tab { display: flex; align-items: center; padding: 0 8px; color: var(--dim); font-size: 11px; }
button.tab { border: 0; background: transparent; font-family: var(--font); cursor: pointer; }
.tab:hover { text-decoration: none; color: var(--text); background: var(--panel-3); }
.tab.is-active { color: var(--ink); background: var(--text-2); }

/* ---- Live or delayed tags ------------------------------------------------ */
/* Quiet text, not a box (a box means you can press it). A fixed width, so RT and DLY
   line up in a column. */
.fresh {
  display: inline-block;
  width: 3.4em;
  font-size: 9px; font-weight: 600; line-height: 12px; letter-spacing: .06em;
  text-align: left;
  vertical-align: middle;
}
.fresh.is-rt { color: var(--accent); }
.fresh.is-dly { color: var(--dim); }
/* In a panel head (DLY 15 MIN) the tag is a word in the line, not a column. */
.panel-meta .fresh { width: auto; }
/* A note on how to read the numbers (metaNote): it wraps inside the title strip rather
   than being cut off, so the strip grows a line when it has to. */
.panel-head:has(.meta-note) { height: auto; min-height: 22px; }
.panel-meta:has(.meta-note) { flex-wrap: wrap; white-space: normal; text-align: right; line-height: 14px; padding-top: 4px; padding-bottom: 4px; row-gap: 0; column-gap: 6px; }
.meta-note { min-width: 0; overflow-wrap: anywhere; text-transform: uppercase; }
/* Phones: the note takes its own line under the panel title, full width. */
@media (max-width: 639px) {
  .panel-head:has(.meta-note) { flex-wrap: wrap; }
  .panel-meta:has(.meta-note) { flex: 1 1 100%; justify-content: flex-start; text-align: left; padding-left: 8px; }
}
.meta-note[title] { cursor: help; }

/* ---- Tables ----------------------------------------------------------- */
.grid-table { width: 100%; border-collapse: collapse; }
.grid-table th, .grid-table td { height: var(--row-h); padding: 0 10px; text-align: left; white-space: nowrap; }
.grid-table thead th {
  height: 22px;
  font-size: 11px; font-weight: 400; letter-spacing: .08em; text-transform: uppercase;
  color: var(--dim);
  border-bottom: 1px solid var(--rule-strong);
}
.grid-table .num { text-align: right; }
.grid-table tbody tr:not(.group-row) { border-bottom: 1px solid var(--rule); }
.grid-table tbody tr:not(.group-row):hover { background: var(--panel-2); }
.grid-table .row-link { cursor: pointer; }
.grid-table .row-link:hover { background: var(--panel-3); }
.grid-table .row-link:hover .name a { color: var(--accent); }
.grid-table .row-link:focus { outline: 0; background: var(--panel-3); box-shadow: inset 2px 0 0 var(--accent); }
.grid-table th.tag, .grid-table td.tag { width: 1%; padding: 0 0 0 4px; text-align: left; }
.grid-table .name { width: 100%; font-weight: 400; color: var(--text-2); max-width: 0; overflow: hidden; text-overflow: ellipsis; }
.grid-table .name a { color: var(--text-2); }
.grid-table .name a:hover { color: var(--accent); text-decoration: none; }
.grid-table .last { color: var(--text); font-weight: 600; }
.grid-table .time { color: var(--dim); }
.grid-table .moves { color: var(--dim); }
.group-row th {
  height: 20px;
  font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--accent);
  background: var(--panel);
  border-bottom: 1px solid var(--rule);
}

/* Price tick: a flat 400 ms background flash, no motion */
.tick-up { background: var(--up-flash); }
.tick-down { background: var(--down-flash); }

/* ---- HOME ------------------------------------------------------------- */
.grid-home .panel-wide { grid-column: 1 / -1; }
/* HOME's MARKETS list: one group per column on desktop (four), two columns on tablets
   (two groups each, all the same height), one on phones. .mk-cols.h-mk: it must win over
   the MARKETS screen's own .mk-cols column count further down. Desktop is a grid of four
   (not CSS columns), so each group always gets its own column and all four end on one
   line; the rule between them is each group's left border. */
.mk-cols.h-mk { columns: 2; }
@media (max-width: 639px) { .mk-cols.h-mk { columns: 1; } }
@media (min-width: 1100px) {
  .mk-cols.h-mk { columns: auto; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: start; }
  .mk-cols.h-mk > .mk-group + .mk-group { border-left: 1px solid var(--rule-strong); }
}
/* Dense rows (20px, 12px type) with thin dim ice blue sub-heading bars. Colour only on
   the change; a price that moved 2% or more gets a thin box around its change. */
.panel-body:has(> .h-mk) { padding: 4px 10px; }
.h-mk .mk-group .c-last { width: 10ch; }
.h-mk .mk-group .c-pct { width: 9ch; }
.h-mk .mk-group td.num { padding: 0 5px; }
.h-mk .mk-group .sub-row th {
  height: 15px; padding: 0 10px;
  font-size: 10px; font-weight: 600; letter-spacing: .1em; line-height: 15px;
  color: var(--text-2); background: var(--accent-tint); border-bottom: 0;
}
.h-mk .mk-group td.pct.is-big { outline: 1px solid currentColor; outline-offset: -3px; }
@media (min-width: 640px) {
  .h-mk .mk-group th, .h-mk .mk-group td { height: 20px; font-size: 12px; }
  .h-mk .mk-group .group-row:not(.sub-row) th { height: 18px; font-size: 11px; }
  .h-mk .mk-group .sub-row th { height: 15px; font-size: 10px; }
}
/* 1100 to 1279px: four columns are narrow, so smaller type and tighter cells keep the
   longest names (Nasdaq 100 fut, Euro Stoxx 50) whole. */
@media (min-width: 1100px) and (max-width: 1279px) {
  .h-mk .mk-group th, .h-mk .mk-group td { font-size: 11px; }
  .h-mk .mk-group .c-tag { width: 28px; }
  .h-mk .mk-group .c-last { width: 68px; }
  .h-mk .mk-group .c-pct { width: 58px; }
  .h-mk .mk-group .name { padding: 0 2px 0 6px; }
  .h-mk .mk-group td.num { padding: 0 4px; }
}
/* Phones and tablets: HOME's news stops at eight headlines (NEWS has them all). */
@media (max-width: 1099px) { .h-news .news-row:nth-child(n+9) { display: none; } }
.mk-cols { columns: 3 340px; column-gap: 0; column-rule: 1px solid var(--rule-strong); }
.mk-cols .mk-group { break-inside: avoid; background: var(--bg); }
.mk-cols .mk-group .group-row th { border-top: 0; }
/* Same column widths in every group table, so tags and numbers line up across groups. */
/* Fixed layout from the colgroup; number widths include 6px side padding. */
.mk-group { table-layout: fixed; }
.mk-group .c-tag { width: 34px; }
.mk-group .c-last { width: 11ch; }
.mk-group .c-chg { width: 9ch; }
.mk-group .c-pct { width: 8ch; }
.mk-group .c-time { width: 7ch; }
.mk-group .name { width: auto; }
.mk-group td.num { padding: 0 6px; }
.mk-cols-time { columns: 3 400px; }

/* ---- Range chart: presets, bar sizes, dates, header, chart --------------- */
.rc { display: flex; flex-direction: column; min-width: 0; container: rc / inline-size; }
.ch-bar {
  display: flex; align-items: stretch; flex-wrap: wrap; gap: 0 12px;
  min-height: 28px;
  border-bottom: 1px solid var(--rule);
  background: var(--panel);
}
.ch-tabs { margin-right: 0; border-left: 0; overflow-x: auto; scrollbar-width: none; }
.ch-tabs::-webkit-scrollbar { display: none; }
.ch-tabs .tab { height: 28px; font-size: 12px; }
.ch-tabs .tab.is-zoomed { background: var(--panel-3); color: var(--text); }
/* The range chart's bar is one left-aligned row: ranges and bar period, then ch-right
   (the two dates | LINE or CANDLES | + COMPARE) right after it, no spacer. Every control
   is 28px high. A .ch-grp starts with a thin dim separator (a background: taking it off a
   group that starts a wrapped row changes no width). */
.rc > .ch-bar { gap: 0; }
.rc .ch-rng { padding-right: 10px; }
.ch-right { display: flex; align-items: stretch; flex-wrap: wrap; gap: 0; min-width: 0; }
.ch-grp {
  padding: 0 10px 0 11px;
  background: linear-gradient(var(--rule-strong), var(--rule-strong)) 0 50% / 1px 16px no-repeat;
}
.ch-grp.is-row-start { background: none; }
.ch-right > .ch-grp:last-child { padding-right: 0; }
.ch-tools { display: flex; align-items: center; gap: 6px; min-width: 0; flex-wrap: wrap; }
.ch-tools > .tab { height: 28px; font-size: 12px; }
.ch-seg { display: flex; align-items: center; }
.ch-seg .tab { height: 28px; font-size: 12px; }
/* LINE or CANDLES, one button as wide as CANDLES, so a click never moves the row. */
.ch-sty { justify-content: center; min-width: calc(7ch + 16px); color: var(--text); }
.ch-add-s { display: none; }
.ch-chip {
  display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 0 0 8px;
  border: 1px solid var(--rule-strong); font-size: 12px; color: var(--text); white-space: nowrap;
}
.ch-chip-sw { width: 10px; height: 2px; background: currentColor; }
.ch-chip.cmp-1 .ch-chip-sw { background: var(--cmp-1); }
.ch-chip.cmp-2 .ch-chip-sw { background: var(--cmp-2); }
.ch-chip.cmp-3 .ch-chip-sw { background: var(--cmp-3); }
.ch-chip-x { height: 20px; padding: 0 7px; border: 0; background: transparent; color: var(--dim); font-family: var(--font); font-size: 13px; cursor: pointer; }
.ch-chip-x:hover { color: var(--text); background: var(--panel-3); }
.ch-dates { display: flex; align-items: center; gap: 10px; margin-left: auto; padding: 2px 8px 2px 0; font-size: 12px; color: var(--dim); }
.ch-right > .ch-dates { margin-left: 0; padding: 0 10px 0 11px; }
.ch-right > .ch-dates input { font-size: 12px; }
.ch-dates label { display: flex; align-items: center; gap: 6px; letter-spacing: .06em; }
.ch-right > .ch-dates { gap: 6px; }
.ch-dsep { color: var(--dim); }
/* The date boxes: inverse ice blue, typed as MM/DD/YYYY or MM/DD/YY; red when they hold
   no real day. */
.ch-dates input {
  width: 13ch; height: 28px; padding: 0 8px;
  border: 0; background: var(--text-2); color: var(--ink);
  font-family: var(--font); font-size: 13px; font-weight: 600; letter-spacing: .02em;
}
.ch-dates.is-active input { background: var(--accent); }
.ch-dates input:focus { outline: 2px solid var(--text); outline-offset: 0; background: var(--text); }
.ch-dates input.is-bad { background: var(--down); color: var(--ink); }
/* The bar period: a button right of MAX ("DAILY" with a caret) opening a grid of period
   rows and the ranges each may draw. The grid floats over the chart (absolute, from the
   toolbar's top row), so opening it never changes a size. */
.ch-bar { position: relative; }
.ch-rng { display: flex; align-items: stretch; min-width: 0; }
.ch-per { display: flex; }
.ch-per-btn { height: 28px; gap: 6px; font-size: 12px; white-space: nowrap; border: 1px solid var(--rule-strong); border-width: 0 1px; color: var(--text); cursor: pointer; }
.ch-per-btn[aria-expanded="true"] { color: var(--ink); background: var(--text-2); }
.ch-caret { font-size: 10px; }
.ch-per-grid {
  position: absolute; top: 28px; left: 0; z-index: 30;
  max-width: 100%; overflow-x: auto; padding: 4px 0 6px;
  background: var(--panel); border: 1px solid var(--rule-strong);
}
.ch-per-grid[hidden] { display: none; }
.ch-per-g { padding: 6px 10px 2px; font-size: 10px; letter-spacing: .1em; color: var(--faint); }
.ch-per-row { display: grid; grid-template-columns: 76px repeat(11, 36px); align-items: center; height: 24px; }
.ch-per-k { padding: 0 10px; font-size: 11px; letter-spacing: .06em; color: var(--dim); white-space: nowrap; }
.ch-per-c {
  width: 34px; height: 22px; padding: 0; border: 0; background: transparent; cursor: pointer;
  font-family: var(--font); font-size: 12px; color: var(--text-2);
}
.ch-per-c:hover { color: var(--text); background: var(--panel-3); }
.ch-per-c.is-active { color: var(--ink); background: var(--text-2); font-weight: 600; }
.ch-per-c:focus-visible { outline: 2px solid var(--text); outline-offset: -2px; }
.ch-hv { color: var(--text); }
/* Narrow chart boxes (HOME, DESK panels) keep the bar on one row by compacting in steps,
   by the chart box's own width: short dates (09/25/26, --ch-yy tells chart.js) and + VS,
   then tighter range buttons, then 2Y and 10Y go (the period grid still has them). Only
   under about 640px does the bar wrap to a second row. */
@container rc (max-width: 859px) {
  .ch-bar { --ch-yy: 1; }
  .ch-right > .ch-dates input { width: calc(8ch + 18px); padding: 0 7px; }
  .ch-add-l { display: none; }
  .ch-add-s { display: inline; }
}
@container rc (max-width: 779px) {
  .ch-tabs .tab, .ch-per-btn, .ch-add { padding: 0 5px; }
  .ch-sty { padding: 0 5px; min-width: calc(7ch + 10px); }
}
@container rc (max-width: 719px) {
  .ch-tabs .ch-r-minor:not(.is-active) { display: none; }
}

/* The header strip: last and the change over the window, big; the window's numbers or
   the crosshair's bar under it. One line each, so hovering never moves the chart. */
.ch-head { padding: 6px 10px 0; min-width: 0; }
.ch-l1, .ch-l2 { margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ch-l1 { height: 28px; font-size: 20px; line-height: 28px; letter-spacing: .01em; }
.ch-l1 .ch-k { font-size: 12px; letter-spacing: .08em; color: var(--dim); vertical-align: 3px; }
.ch-l1 .ch-v { color: var(--text); font-weight: 600; margin-right: 6px; }
.ch-l1 .ch-c { margin-right: 6px; font-weight: 600; }
.ch-l2 { height: 20px; font-size: 13px; line-height: 20px; color: var(--text-2); }
.ch-l2 .ch-k { color: var(--dim); letter-spacing: .06em; }
.ch-l2 .ch-when { color: var(--text); }
.ch-l2 .ch-cmpk.cmp-1 { color: var(--cmp-1); }
.ch-l2 .ch-cmpk.cmp-2 { color: var(--cmp-2); }
.ch-l2 .ch-cmpk.cmp-3 { color: var(--cmp-3); }
.ch-sep { color: var(--faint); margin: 0 4px; }
.rc.is-compact .ch-l2, .rc.is-tight .ch-l2 { display: none; }
.rc.is-compact .ch-head, .rc.is-tight .ch-head { padding-top: 2px; }
/* Compact (HOME, short panels): the range row and the LAST line share one row, so the
   plot keeps the height. */
.rc.is-compact, .rc.is-tight {
  display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr);
}
.rc.is-compact > .ch-bar, .rc.is-tight > .ch-bar { grid-area: 1 / 1; }
.rc.is-compact > .ch-head, .rc.is-tight > .ch-head { grid-area: 1 / 2; display: flex; align-items: center; justify-content: flex-end; padding: 0 10px; border-bottom: 1px solid var(--rule); background: var(--panel); }
.rc.is-compact > .chart-host, .rc.is-tight > .chart-host { grid-area: 2 / 1 / 3 / 3; min-height: 0; height: auto; }
.rc.is-compact .ch-tabs .tab, .rc.is-tight .ch-tabs .tab { padding: 0 6px; font-size: 11px; }
.rc.is-compact .ch-l1, .rc.is-tight .ch-l1 { font-size: 16px; }
.rc.is-loading .ch-head { opacity: .7; }

.panel-body:has(> .rc-home) { position: relative; min-height: 330px; }
.rc-home { position: absolute; inset: 0; }
.rc-home .chart-host-home { position: relative; inset: auto; flex: 1; min-height: 0; height: auto; margin: 4px 0 0 10px; }

/* ---- Charts ----------------------------------------------------------- */
/* The chart box takes its size from the layout only: the SVG sits absolutely inside and
   is clipped, so drawing can never grow the box or its panel (no scrollbar loops). */
.chart-host { position: relative; height: 320px; min-height: 0; overflow: hidden; margin: 4px 0 0 10px; }
.chart-host-lg { height: 400px; }
.chart-host:focus { outline: none; }
.chart-host:focus-visible { outline: 1px solid var(--rule-strong); outline-offset: 2px; }
.chart { display: block; overflow: visible; touch-action: pan-y; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.chart-host.is-measuring .chart { touch-action: none; }
.ch-grid, .ch-vgrid { stroke: var(--rule); stroke-width: 1; shape-rendering: crispEdges; }
.ch-axis { stroke: var(--rule-strong); stroke-width: 1; shape-rendering: crispEdges; }
.ch-zero { stroke: var(--text-2); stroke-width: 1; opacity: .5; shape-rendering: crispEdges; }
.ch-ylab, .ch-xlab, .ch-vlab { fill: var(--dim); font-family: var(--font); font-size: 11px; }
.ch-xlab.is-strong { fill: var(--text-2); }
.ch-vlab { font-size: 9px; letter-spacing: .08em; }
.ch-line { fill: none; stroke: var(--accent); stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }
.ch-line.is-ext { opacity: .5; }
.ch-area { fill: var(--accent); opacity: .07; }
.ch-cmp { fill: none; stroke-width: 1.5; stroke-linejoin: round; }
.ch-cmp.cmp-1 { stroke: var(--cmp-1); }
.ch-cmp.cmp-2 { stroke: var(--cmp-2); }
.ch-cmp.cmp-3 { stroke: var(--cmp-3); }
.ch-candle.up { fill: var(--up); }
.ch-candle.down { fill: var(--down); }
.ch-wick { fill: none; stroke-width: 1; shape-rendering: crispEdges; }
.ch-wick.up { stroke: var(--up); }
.ch-wick.down { stroke: var(--down); }
.ch-vol { opacity: .45; }
.ch-vol.up { fill: var(--up); }
.ch-vol.down { fill: var(--down); }
.ch-last-line { stroke: var(--accent); stroke-width: 1; stroke-dasharray: 2 3; opacity: .45; shape-rendering: crispEdges; }
.ch-last-bg { fill: var(--accent); }
.ch-last .ch-last-t, .ch-last-t { fill: var(--ink); font-family: var(--font); font-size: 11px; font-weight: 600; }
.ch-last.cmp-1 .ch-last-bg { fill: var(--cmp-1); }
.ch-last.cmp-2 .ch-last-bg { fill: var(--cmp-2); }
.ch-last.cmp-3 .ch-last-bg { fill: var(--cmp-3); }
.ch-cross { stroke: var(--text-2); stroke-width: 1; stroke-dasharray: 2 2; shape-rendering: crispEdges; pointer-events: none; }
.ch-dot { fill: var(--text); pointer-events: none; }
.ch-day { stroke: var(--rule-strong); stroke-width: 1; shape-rendering: crispEdges; }
.ch-ext { fill: var(--panel-2); }
.ch-ext-lab { fill: var(--dim); font-family: var(--font); font-size: 9px; letter-spacing: .08em; }
.ch-ref { stroke-width: 1; shape-rendering: crispEdges; }
.ch-ref-prev { stroke: var(--text-2); stroke-dasharray: 6 4; opacity: .7; }
.ch-ref-open { stroke: var(--dim); stroke-dasharray: 1 3; }
.ch-lab { font-family: var(--font); font-size: 10px; fill: var(--text-2); }
.ch-lab-bg { fill: var(--bg); opacity: .82; }
.ch-ref-prev-lab { fill: var(--text-2); }
.ch-ref-open-lab { fill: var(--dim); }
.ch-mk-lab { fill: var(--text); }
.ch-mk-lab.up, .ch-mk-move.up { fill: var(--up); }
.ch-mk-lab.down, .ch-mk-move.down { fill: var(--down); }
.ch-mk { fill: var(--bg); stroke: var(--text); stroke-width: 1.5; }
.ch-mk-move.up { stroke: var(--up); }
.ch-mk-move.down { stroke: var(--down); }
.ch-move { fill: none; stroke-width: 3; stroke-linecap: round; opacity: .85; }
.ch-move.up { stroke: var(--up); }
.ch-move.down { stroke: var(--down); }
.ch-tag-bg { fill: var(--text-2); }
.ch-tag { fill: var(--ink); font-family: var(--font); font-size: 11px; font-weight: 600; }
/* Event flags: E earnings (links to the SEC filing), D ex-dividend. */
.ch-flag { cursor: default; }
a.ch-flag { cursor: pointer; }
.ch-flag-box { fill: var(--bg); stroke: var(--text-2); stroke-width: 1; shape-rendering: crispEdges; }
.ch-flag-t { fill: var(--text-2); font-family: var(--font); font-size: 9px; font-weight: 700; }
.ch-flag.is-E .ch-flag-box { stroke: var(--accent); }
.ch-flag.is-E .ch-flag-t { fill: var(--accent); }
.ch-flag:hover .ch-flag-box { fill: var(--panel-3); }
/* N: news and other 8-K filings, same box as E and D. */
.ch-flag.is-N .ch-flag-box { stroke: var(--text); }
.ch-flag.is-N .ch-flag-t { fill: var(--text); }
a.ch-flag:focus { outline: none; }
a.ch-flag:focus-visible .ch-flag-box { fill: var(--panel-3); stroke: var(--accent); stroke-width: 2; }
/* The measure: a shaded band between two bars and a big label. */
.ch-meas { pointer-events: none; }
.ch-meas-band { opacity: .14; }
.ch-meas-band.up { fill: var(--up); }
.ch-meas-band.down { fill: var(--down); }
.ch-meas-band.flat { fill: var(--text-2); }
.ch-meas-line { stroke-width: 1.5; stroke-dasharray: 4 3; }
.ch-meas-line.up { stroke: var(--up); }
.ch-meas-line.down { stroke: var(--down); }
.ch-meas-line.flat { stroke: var(--text-2); }
.ch-meas-dot { fill: var(--text); }
.ch-meas-bg { fill: var(--bg); opacity: .92; stroke: var(--rule-strong); }
.ch-meas-text { font-family: var(--font); font-size: 17px; font-weight: 700; white-space: pre; }
.ch-meas-text.up { fill: var(--up); }
.ch-meas-text.down { fill: var(--down); }
.ch-meas-text.flat { fill: var(--text); }

/* ---- Stats (key numbers) --------------------------------------------- */
.stats { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; border-top: 1px solid var(--rule); }
.stat { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: var(--row-h); border-bottom: 1px solid var(--rule); }
.stat dt { color: var(--dim); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.stat dd { display: flex; align-items: center; margin: 0; color: var(--text); text-align: right; }
.stats-row { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 24px; margin-top: 12px; }
.rangebar { width: 72px; height: 6px; margin-left: 8px; flex: 0 0 auto; }
.rb-track { fill: var(--rule-strong); }
.rb-mark { fill: var(--accent); }

/* ---- QUOTE ------------------------------------------------------------ */
.q-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 420px); gap: 24px; }
.q-name { color: var(--text-2); font-size: 14px; }
.q-hero .fresh { align-self: center; width: auto; font-size: 10px; line-height: 14px; }
.q-hero { display: flex; align-items: baseline; gap: 10px; margin-top: 2px; font-size: 44px; font-weight: 600; line-height: 1.1; letter-spacing: -.02em; }
.q-ccy { font-size: 14px; font-weight: 400; letter-spacing: .06em; color: var(--accent); }
.q-chg { margin-top: 2px; font-size: 16px; }
.q-chg span { margin-left: 8px; }
.q-ext { margin-top: 8px; font-size: 12px; }
.q-asof { margin-top: 4px; font-size: 11px; letter-spacing: .06em; }

/* ---- FX and CPI ------------------------------------------------------- */
.fx-from { font-size: 14px; color: var(--text-2); }
.fx-from .num { color: var(--text); }
.hero {
  display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 12px;
  margin-top: 2px;
  font-size: 44px; font-weight: 600; line-height: 1.15; letter-spacing: -.02em;
  color: var(--text);
}
.hero-unit { font-size: 18px; font-weight: 400; letter-spacing: .06em; color: var(--accent); }
.hero.is-long { font-size: 36px; }
.hero.is-xlong { font-size: 28px; }
.fx-to { margin-top: 2px; font-size: 13px; color: var(--text-2); }
.fx-to.dim { color: var(--dim); }
.swap { margin-top: 10px; }

/* ---- BUY -------------------------------------------------------------- */
.buy { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 380px); gap: 32px; padding: 4px 0 8px; }
.buy-stats { margin-top: 16px; max-width: 640px; }
.buy-stats dd.dim { color: var(--dim); font-size: 12px; }
.buy-side { display: flex; flex-direction: column; align-items: center; padding-top: 12px; }
.stamp {
  display: inline-flex; flex-direction: column; align-items: center;
  padding: 8px 28px 10px;
  border: 2px solid currentColor;
  outline: 1px solid currentColor; outline-offset: 3px;
  text-transform: uppercase;
  transform: rotate(-4deg);
  animation: stamp-in 180ms cubic-bezier(.2, .8, .2, 1) both;
}
.stamp-k { font-size: 11px; font-weight: 600; letter-spacing: .3em; }
.stamp-v { font-size: 30px; font-weight: 600; line-height: 1.1; letter-spacing: .1em; white-space: nowrap; }
.stamp-worth { color: var(--up); }
.stamp-sleep { color: var(--accent); }
.stamp-skip { color: var(--down); }
@keyframes stamp-in { from { transform: rotate(var(--stamp-rot, -4deg)) scale(1.25); opacity: 0; } to { transform: rotate(var(--stamp-rot, -4deg)) scale(1); opacity: 1; } }
.stamp-line { margin-top: 14px; color: var(--text-2); text-align: center; }
.how { align-self: stretch; margin-top: 16px; border-top: 1px solid var(--rule); padding-top: 8px; }
.how summary { cursor: pointer; color: var(--accent); font-size: 12px; list-style: none; }
.how summary::-webkit-details-marker { display: none; }
.how summary::before { content: '+ '; }
.how[open] summary::before { content: '- '; }
.how-list { margin-top: 8px; display: grid; gap: 6px; color: var(--text-2); font-size: 12px; line-height: 1.5; }

/* ---- WHATIF ----------------------------------------------------------- */
.wi-intro { color: var(--text-2); margin-bottom: 10px; }
.wi-tabs { margin-bottom: 8px; }
/* The shelf: doodle cards in a grid. */
.wi-shelf {
  --wi-bar-h: 40px;
  list-style: none; margin: 0; padding: 0; outline: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(196px, 1fr)); gap: 6px;
}
.wi-card {
  position: relative;
  display: grid; grid-template-columns: 50px minmax(0, 1fr); grid-template-rows: 1fr auto; column-gap: 8px;
  min-height: 64px; padding: 5px 8px 5px 4px;
  border: 1px solid var(--rule); background: var(--bg);
  cursor: pointer; user-select: none; color: var(--text-2);
  scroll-margin-bottom: calc(var(--wi-bar-h) + 8px);
}
.wi-card:hover { background: var(--panel-2); }
.wi-card:focus { outline: 0; border-color: var(--accent); background: var(--panel-3); }
.wi-card.is-on { color: var(--text); background: var(--accent-tint); border-color: var(--rule-strong); }
.wi-doodle { grid-row: 1 / span 2; align-self: center; width: 50px; height: 50px; object-fit: contain; }
.wi-box { position: absolute; top: 3px; right: 6px; font-size: 11px; color: var(--faint); }
.wi-card.is-on .wi-box { color: var(--accent); font-weight: 600; }
.wi-cname {
  align-self: end; padding-right: 24px; font-size: 12px; line-height: 15px;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.wi-cmeta { display: flex; align-items: center; gap: 6px; margin-top: 2px; font-size: 11px; white-space: nowrap; }
.wi-years input {
  width: 8ch; height: 20px; padding: 0 4px;
  border: 1px solid var(--rule-strong); background: var(--panel);
  color: var(--text); font-family: var(--font); font-size: 12px; text-transform: uppercase; text-align: right;
}
.wi-years input:focus { outline: 1px solid var(--accent); outline-offset: 0; }
/* YOUR OWN: the first card on every shelf, and its inline form under the tabs. */
.wi-own .wi-cname { color: var(--accent); font-weight: 600; letter-spacing: .06em; }
/* The form reads as one sentence: [$ 15] [a week] in [AAPL] since [2015]  ADD. */
.wi-ownform { margin-bottom: 8px; padding: 8px 10px; border: 1px solid var(--rule-strong); background: var(--panel); }
.wi-ownform[hidden] { display: none; }
.wo-line { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; font-size: 14px; color: var(--text-2); }
.wo-line input, .wo-line select {
  height: 28px; padding: 0 6px;
  border: 1px solid var(--rule-strong); background: var(--bg);
  color: var(--text); font-family: var(--font); font-size: 14px;
}
.wo-line input::placeholder { color: var(--faint); }
.wo-line input:focus, .wo-line select:focus { outline: 1px solid var(--accent); outline-offset: 0; }
.wo-amt { position: relative; display: inline-flex; }
.wo-cur { position: absolute; left: 7px; top: 50%; transform: translateY(-50%); color: var(--dim); pointer-events: none; }
.wo-amt input { width: 9ch; padding-left: 18px; }
.wo-tk { width: 7ch; text-transform: uppercase; }
.wo-dt { width: 10ch; }
.wi-ownform .wo-add { height: 28px; margin-left: 4px; }
.wo-close { height: 28px; padding: 0 8px; border: 0; background: transparent; color: var(--dim); font-family: var(--font); font-size: 16px; cursor: pointer; }
.wo-close:hover { color: var(--text); }
.wo-msg { margin-top: 6px; font-size: 12px; color: var(--down); }
.wo-msg:empty { display: none; }
/* The RUN bar sticks right on the dock (no gap for cards to show through); a card moved
   to by keys is never left under it (scroll-margin), and the card behind it fades. */
@media (max-width: 639px) { .wi-shelf { --wi-bar-h: 40px; } }
.wi-bar {
  position: sticky; bottom: var(--dock-h);
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  margin-top: 10px; padding: 6px 8px;
  background: var(--panel-2); border: 1px solid var(--rule-strong);
  box-shadow: 0 -8px 10px -4px var(--bg);
  font-size: 12px;
}
.wi-count { color: var(--text); font-weight: 600; letter-spacing: .06em; white-space: nowrap; }
.wi-cmd { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.wi-run {
  height: 24px; padding: 0 16px;
  border: 1px solid var(--accent); background: var(--accent); color: var(--ink);
  font-family: var(--font); font-size: 12px; font-weight: 600; letter-spacing: .12em; cursor: pointer;
}
.wi-run:hover { background: var(--text); border-color: var(--text); }

.wi-hero { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 16px; }
.hero-value.up, .wi-x.up { color: var(--up); }
.hero-value.down, .wi-x.down { color: var(--down); }
.wi-x { font-size: 26px; font-weight: 700; }
.wi-sentence { margin-top: 4px; font-size: 15px; color: var(--text); }
.wi-quip { margin-top: 6px; color: var(--text-2); font-size: 13px; }
.wi-receipt { margin: 16px -10px 0; border-top: 1px solid var(--rule-strong); overflow-x: auto; }
.wi-table tfoot th, .wi-table tfoot td { height: 28px; font-weight: 600; border-top: 1px solid var(--rule-strong); padding: 0 10px; }
.wi-table tfoot .name { color: var(--text); letter-spacing: .08em; text-transform: uppercase; font-size: 12px; }
.wi-table .is-loss .name a { color: var(--down); }
.wi-when { color: var(--text-2); }
.wi-when-m { display: none; }
.wi-source { margin-top: 10px; font-size: 11px; color: var(--dim); }
.wi-actions { display: flex; gap: 16px; margin-top: 10px; font-size: 11px; letter-spacing: .06em; }
.wi-actions .code { color: var(--dim); }
.wi-actions .code:hover { color: var(--accent); }
/* EMBED (public/embed-snippet.js): a button that looks like the links beside it. */
.wi-actions button.code { padding: 0; border: 0; background: none; font: inherit; letter-spacing: inherit; cursor: pointer; }
.gs-share .gs-embed { cursor: pointer; }
.wi-note-name { color: var(--text); }
.how-list a { color: var(--accent); }
.how-h { margin-top: 12px; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--dim); }
.wi-details { margin-top: 10px; }

/* WHATIF certificate: text over the art, placed in % of the image (the same numbers as
   POS in lib/og.js), sized in cqw so it scales with the paper. */
.wi-layout { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "replay" "cert" "body"; gap: 14px 28px; }
.wi-head { grid-area: head; min-width: 0; }
.wi-certcol { grid-area: cert; min-width: 0; }
.wi-body { grid-area: body; min-width: 0; }
.wi-body > .wi-receipt:first-child { margin-top: 0; }
@media (min-width: 1100px) {
  .wi-layout:not(.no-cert) { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "cert head" "cert replay" "cert body"; grid-template-rows: auto auto 1fr; align-items: start; }
}
/* REPLAY: the race in thin terminal lines, in the right column under the number (on
   phones too), so it is in view while it plays however long the table is. The
   certificate waits, then stamps in when the race ends. */
.wi-replay { grid-area: replay; min-width: 0; border-top: 1px solid var(--rule-strong); padding-top: 8px; }
.wr-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 16px; font-size: 11px; letter-spacing: .06em; }
.wr-date { min-width: 11ch; color: var(--text); font-weight: 600; }
.wr-key .num { margin-left: 4px; color: var(--text); font-weight: 600; letter-spacing: 0; }
.wr-stock { color: var(--accent); }
.wr-jar { color: var(--cmp-3); }
.wr-spent { color: var(--down); }
.wr-canvas { display: block; width: 100%; height: 130px; margin-top: 6px; }
/* REPLAY: a small quiet control at the chart's top right. */
.wr-play {
  margin-left: auto; height: 20px; padding: 0 8px;
  border: 1px solid var(--rule-strong); background: transparent; color: var(--text-2);
  font-family: var(--font); font-size: 10px; letter-spacing: .1em; cursor: pointer;
}
.wr-play:hover { border-color: var(--text); color: var(--text); }
.wi-btn:disabled { opacity: .5; cursor: progress; }
.wi-vmsg { margin-top: 6px; font-size: 11px; color: var(--dim); letter-spacing: .04em; }
.wi-vmsg:empty { display: none; }
.wi-vneeds { align-self: center; font-size: 11px; color: var(--dim); }
/* Title strip parts, split by a dot (on phones they wrap, one per line, no dots). */
.wi-panel .panel-meta > * + *::before { content: '· '; }
.wi-certcol { overflow: clip; }
.wc-seal { position: absolute; inset: 0; pointer-events: none; transform-origin: 82.5% 68.4%; }
/* While racing, the number rolls in ink (red while behind) and the seal is empty; it
   stamps in with the multiple when the race ends. */
.wi-cert.is-racing .wc-seal, .wi-cert.is-racing .wc-today { visibility: hidden; }
.wi-cert.is-racing .wc-big { color: var(--paper-ink); }
.wi-cert.is-racing.is-behind .wc-big { color: var(--paper-red); }
.wi-cert.is-stamped .wc-seal { --stamp-rot: 0deg; animation: stamp-in 260ms cubic-bezier(.2, .8, .2, 1) both; }
.wi-cert {
  --paper-ink: #2A1A10; --paper-soft: #5A4330; --paper-red: #C23B2A;
  position: relative; container-type: inline-size;
  width: 97%; max-width: 860px; margin: 4px 0 0 3%;
}
.wc-paper { display: block; width: 100%; height: auto; }
.wc {
  position: absolute; transform: translate(-50%, -50%);
  white-space: nowrap; text-align: center; line-height: 1; color: var(--paper-ink); pointer-events: none;
}
.wc-receipt {
  left: 7.33%; top: 13.3%; transform: rotate(-15deg); transform-origin: top left;
  display: flex; flex-direction: column; text-align: left;
  font-size: .92cqw; line-height: 2.18cqw; font-weight: 800; color: var(--paper-soft);
}
.wc-ribbon { left: 49.6%; top: 20.2%; font-family: 'Caveat', cursive; font-weight: 700; font-size: 3.8cqw; }
.wc-big { left: 49%; top: 43.5%; font-size: 11cqw; font-weight: 800; letter-spacing: -.04em; transform: translate(-50%, -50%) rotate(-1.5deg); }
.wi-cert.is-loss .wc-big { color: var(--paper-red); }
.wc-today { left: 49%; top: 56.5%; font-family: 'Caveat', cursive; font-weight: 700; font-size: 2.8cqw; color: var(--paper-soft); }
.wc-l1, .wc-l2 { left: 49.9%; font-size: calc(var(--fs, 2.4) * var(--k, 1) * 1cqw); }
.wc-l1 { top: calc(71.3% - .62em); font-weight: 800; }
.wc-l2 { top: calc(76.9% - .62em); font-weight: 600; color: var(--paper-soft); }
.wc-mult { left: 82.5%; top: 68.4%; font-size: 3cqw; font-weight: 800; }
.wi-cert.is-loss .wc-mult { top: 66.2%; color: var(--paper-soft); }
.wc-strike {
  left: 82.5%; top: 66.2%; width: 9.2%; height: .45cqw; border-radius: .3cqw;
  background: var(--paper-red); transform: translate(-50%, -50%) rotate(-14deg);
}
.wc-dodged { left: 82.5%; top: 72%; font-family: 'Caveat', cursive; font-weight: 700; font-size: 2.4cqw; color: var(--paper-red); }
/* On a phone the small lines grow a little; they still stay on the paper. */
@container (max-width: 520px) {
  .wc-l1, .wc-l2 { --k: 1.15; }
  .wc-today { font-size: 3.4cqw; }
}
.wc-sticker { position: absolute; left: -3%; bottom: -5%; width: 17%; height: auto; transform: rotate(-8deg); pointer-events: none; }
.wi-share { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.wi-btn {
  display: inline-flex; align-items: center; height: 28px; padding: 0 12px;
  border: 1px solid var(--rule-strong); background: transparent; color: var(--text);
  font-family: var(--font); font-size: 11px; font-weight: 600; letter-spacing: .1em; text-decoration: none; cursor: pointer;
}
.wi-btn:first-child { background: var(--accent); border-color: var(--accent); color: var(--ink); }
.wi-btn:hover { text-decoration: none; background: var(--text); border-color: var(--text); color: var(--ink); }

/* ---- NEWS ------------------------------------------------------------- */
.news-row {
  display: grid;
  grid-template-columns: 48px 40px minmax(0, 1fr);
  gap: 10px;
  align-items: baseline;
  padding: 4px 10px;
  min-height: var(--row-h);
  border-bottom: 1px solid var(--rule);
}
.news-row:hover { background: var(--panel-2); }
.news-time { color: var(--dim); }
.news-time .nt-s { display: none; }
.news-src { color: var(--accent); font-size: 11px; letter-spacing: .04em; }
.news-title { color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.news-title:visited { color: var(--text-2); }
.news-title:hover { color: var(--accent); text-decoration: none; }
/* Live NEWS: a new story slides in at the top and glows ice blue for about 2 s. */
.news-row.is-new { animation: news-in .3s ease-out, news-glow 2s ease-out; }
@keyframes news-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@keyframes news-glow { from { background: hsla(201, 100%, 71%, .22); box-shadow: inset 2px 0 0 var(--accent); } to { background: transparent; box-shadow: inset 2px 0 0 transparent; } }
@media (prefers-reduced-motion: reduce) { .news-row.is-new { animation: news-glow 2s ease-out; } }
.news-new { color: var(--ink); background: var(--accent); padding: 0 5px; margin-right: 8px; font-weight: 700; letter-spacing: .06em; }

/* ---- HELP ------------------------------------------------------------- */
.cmd-list { margin: -8px -10px; }
.cmd-row {
  display: grid;
  grid-template-columns: minmax(120px, 190px) minmax(0, 1fr) auto;
  gap: 12px;
  align-items: baseline;
  padding: 4px 10px;
  min-height: var(--row-h);
  border-bottom: 1px solid var(--rule);
}
.cmd-row:last-child { border-bottom: 0; }
.cmd-name { font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cmd-hint { color: var(--text-2); }
.cmd-example { text-align: right; }
.cmd-example .code + .code { margin-left: 10px; }
.cmd-row.is-soon .cmd-name, .cmd-row.is-soon .cmd-hint, .cmd-row.is-soon .cmd-example { color: var(--faint); }
.cmd-row.is-soon .cmd-example { font-size: 11px; letter-spacing: .1em; }

.keys { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 16px; }
.keys div { display: flex; align-items: baseline; gap: 10px; }
.keys dt { flex: 0 0 96px; }
.keys dd { margin: 0; color: var(--text-2); }

/* ---- Boot log (first visit) ------------------------------------------ */
.boot { padding-top: 4px; font-size: 13px; line-height: 1.7; color: var(--text-2); }
.boot-line:first-child { color: var(--text); font-weight: 600; letter-spacing: .12em; margin-bottom: 6px; }
.boot-ok { color: var(--accent); }
.boot-cursor { display: inline-block; width: 1ch; height: 15px; margin-top: 4px; background: var(--accent); animation: blink 1.1s steps(1, end) infinite; }
.boot-skip { margin-top: 24px; font-size: 11px; color: var(--dim); }

/* ---- Dock: status line, ticker tape, function keys --------------------- */
.dock {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 5;
  background: var(--bg);
  border-top: 1px solid var(--rule-strong);
}
.statusline {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  height: var(--status-h);
  padding: 0 var(--inset);
  background: var(--panel);
  font-size: 11px; letter-spacing: .06em;
  white-space: nowrap;
}
.status-msg { color: var(--accent); overflow: hidden; text-overflow: ellipsis; }
.status-msg[data-kind="warn"] { color: var(--down); }

.tape {
  display: none;
  position: relative;
  height: var(--tape-h);
  overflow: hidden;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.tape-track { display: flex; width: max-content; height: 100%; }
.tape-track.is-running { animation: tape var(--tape-duration, 60s) linear infinite; }
.tape:hover .tape-track { animation-play-state: paused; }
.tape-group { display: flex; align-items: center; }
.tape-item {
  display: inline-flex; align-items: baseline; gap: 6px;
  padding: 0 16px;
  font-size: 12px;
  line-height: calc(var(--tape-h) - 2px);
  color: var(--text);
  border-right: 1px solid var(--rule);
}
.tape-item:hover { text-decoration: none; background: var(--panel-2); }
.tape-name { color: var(--dim); text-transform: uppercase; letter-spacing: .04em; }
.tape-item .fresh { align-self: center; width: auto; font-size: 8px; line-height: 10px; padding: 0 2px; }
.tape-empty { padding: 0 var(--gutter); line-height: var(--tape-h); font-size: 11px; color: var(--dim); }
@keyframes tape { from { transform: translateX(0); } to { transform: translateX(-50%); } }

.keybar {
  display: flex;
  height: var(--keybar-h);
  padding: 0 calc(var(--inset) - 8px);
  overflow: hidden;
}
.fkeys {
  display: flex; flex: 1 1 auto; min-width: 0;
  overflow-x: auto; overflow-y: hidden;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}
.fkeys::-webkit-scrollbar { display: none; }
.fkey {
  flex: 0 0 auto;
  display: flex; align-items: center; gap: 6px;
  padding: 0 10px 0 8px;
  font-size: 12px; font-weight: 600; letter-spacing: .06em;
  color: var(--text-2);
  white-space: nowrap;
}
.fkey:hover { text-decoration: none; background: var(--panel-3); color: var(--text); }
.fkey-n { color: var(--dim); font-weight: 400; }
.fkey.is-active { background: var(--accent); color: var(--ink); }
.fkey.is-active .fkey-n { color: var(--ink); }

/* ---- Narrower screens ------------------------------------------------- */
@media (max-width: 1100px) {
  .cmd-keys { display: none; }
  .grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 639px) {
  :root { --gutter: 8px; --row-h: 28px; }
  body { font-size: 13px; }

  .clock .label { display: none; }
  .clock { gap: 8px; }
  .status { padding-left: 8px; letter-spacing: .04em; }
  .wordmark { letter-spacing: .14em; }

  .suggest { left: var(--gutter); width: calc(100% - var(--gutter) * 2); }
  .suggest li { grid-template-columns: 72px 1fr; gap: 10px; height: 32px; }

  .grid-table th, .grid-table td { padding: 0 8px; }
  .grid-table .chg, .grid-table .time, .grid-table .moves { display: none; }
  .mk-group .c-chg, .mk-group .c-time { width: 0; }
  .ch-bar { gap: 0; }
  .ch-tabs { width: 100%; border-bottom: 1px solid var(--rule); }
  .ch-rng { width: 100%; border-bottom: 1px solid var(--rule); }
  .ch-rng > .ch-tabs { flex: 1 1 auto; width: auto; min-width: 0; border-bottom: 0; }
  .ch-right { width: 100%; margin-left: 0; gap: 0; }
  .rc .ch-rng { padding-right: 0; }
  .ch-right > .ch-dates { padding: 4px 8px; }
  .ch-right > .ch-seg { padding: 4px 10px 4px 8px; }
  .ch-tools { padding: 4px 8px 4px 11px; }
  .ch-dates { margin-left: 0; padding: 4px 8px; gap: 8px; }
  .ch-dates input { width: 13ch; padding: 0 6px; }
  .ch-head { padding: 4px 6px 0; }
  .ch-l1 { font-size: 18px; }
  .ch-l2 { font-size: 12px; }
  .rc.is-compact, .rc.is-tight { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto minmax(0, 1fr); }
  .rc.is-compact > .ch-head, .rc.is-tight > .ch-head { grid-area: 2 / 1; justify-content: flex-start; padding: 0 6px; }
  .rc.is-compact > .chart-host, .rc.is-tight > .chart-host { grid-area: 3 / 1; }
  .panel-body:has(> .rc-home) { min-height: 300px; }

  .q-top { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .q-hero, .hero { font-size: 34px; }
  .hero.is-long { font-size: 28px; }
  .hero.is-xlong { font-size: 22px; }
  .hero-unit { font-size: 14px; }
  .buy { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .wi-shelf { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wi-hint, .wi-cmd { display: none; }
  .wi-bar { gap: 8px; flex-wrap: nowrap; }
  .wi-run { margin-left: auto; }
  .wr-canvas { height: 150px; }
  .wi-panel .panel-head { flex-wrap: wrap; }
  .wi-panel .panel-label { flex: 1 1 100%; max-width: none; }
  .wi-panel .panel-meta { flex: 1 1 100%; justify-content: flex-start; text-align: left; padding-left: 8px; }
  .wi-panel .panel-meta > * + *::before { content: none; }
  .wi-panel .panel-meta:has(> .wi-hint:only-child) { display: none; }
  .wi-sh, .wi-table .wi-sh, .wi-table .wi-when { display: none; }
  .wi-table tbody .name { white-space: normal; padding-top: 4px; padding-bottom: 4px; }
  .wi-when-m { display: block; font-size: 11px; }
  .wi-sentence { font-size: 14px; }
  .wi-x { font-size: 20px; }
  .wo-line { gap: 6px; font-size: 13px; }
  .wo-line input, .wo-line select { padding: 0 4px; font-size: 13px; }
  .wo-amt input { width: 6ch; padding-left: 16px; }
  .wo-cur { left: 5px; }
  .wo-dt { width: 8ch; }
  .wi-receipt { margin: 12px -10px 0; }
  .stamp-v { font-size: 26px; }
  .stats-row { grid-template-columns: minmax(0, 1fr); }
  .chart-host { height: 240px; margin-left: 6px; }
  .chart-host-lg { height: 280px; }
  .rc-home .chart-host-home { margin-left: 6px; }

  .news-row { grid-template-columns: 44px minmax(0, 1fr); gap: 8px; padding: 4px 8px; }
  .news-src { display: none; }
  .news-time .nt-l { display: none; }
  .news-time .nt-s { display: inline; }
  .news-title { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

  .cmd-row { grid-template-columns: minmax(0, 1fr); gap: 2px; padding: 6px 8px; }
  .cmd-name { white-space: normal; }
  .cmd-example { text-align: left; }
  .cmd-hint { font-size: 12px; }
  .keys { grid-template-columns: minmax(0, 1fr); }

  .tape-item { padding: 0 12px; }
  .fkey { padding: 0 10px; }
}

/* ---- Reduced motion: no tape scroll, flash as text colour only -------- */
@media (prefers-reduced-motion: reduce) {
  .tape-track.is-running { animation: none; }
  .tape { overflow-x: auto; scrollbar-width: none; }
  .cmd-focused .cursor.blink { animation: none; opacity: .9; }
  .boot-cursor { animation: none; }
  .stamp { animation: none; }
  .wi-cert.is-stamped .wc-seal { animation: none; }
  .tick-up { background: none; color: var(--up) !important; }
  .tick-down { background: none; color: var(--down) !important; }
}

/* ---- FINANCIALS and SCREEN ------------------------------------------- */
:root {
  --series-1: #3987e5; /* revenue: blue, validated with --series-2 on the dark surface */
  --series-2: #d55181; /* net income: magenta */
}
.fin-bar { justify-content: space-between; }
.fin-periods { border-left: 1px solid var(--rule-strong); }
.fin-basis { margin-left: auto; }
.fin-chart-wrap { padding: 6px 0 0 10px; border-bottom: 1px solid var(--rule-strong); }
.fin-chart-head { display: flex; align-items: center; gap: 16px; min-height: 18px; padding-right: 10px; font-size: 11px; color: var(--text-2); letter-spacing: .04em; }
.fin-key { display: inline-flex; align-items: center; gap: 6px; }
.fin-sw { display: inline-block; width: 10px; height: 10px; }
.fin-sw-rev { background: var(--series-1); }
.fin-sw-net { background: var(--series-2); }
.fin-hover { margin-left: auto; color: var(--text); white-space: pre; overflow: hidden; text-overflow: ellipsis; }
.fin-chart-host { position: relative; height: 150px; margin-top: 4px; }
.fin-bar-rev { fill: var(--series-1); }
.fin-bar-net { fill: var(--series-2); }
.fin-hit { fill: transparent; }
.fin-col.is-on .fin-hit { fill: var(--panel-2); }
.fin-scroll { overflow-x: auto; }
.fin-table th:first-child { position: sticky; left: 0; z-index: 1; background: var(--bg); }
.fin-table tbody tr:not(.group-row):hover th:first-child { background: var(--panel-2); }
.fin-table .name { width: auto; max-width: none; min-width: 150px; }
.fin-table thead th { height: auto; padding-top: 4px; padding-bottom: 4px; vertical-align: bottom; }
.fin-table thead .fin-unit { text-align: left; }
.fin-per, .fin-end { display: block; }
.fin-per a { color: var(--text); }
.fin-per a:hover { color: var(--accent); text-decoration: none; }
.fin-end { color: var(--faint); font-size: 10px; letter-spacing: .04em; }
.fin-table td.num { min-width: 84px; }
.fin-table .group-row td, .fin-table .group-row th:first-child { background: var(--panel); border-bottom: 1px solid var(--rule); }
.fin-table .fin-ratio .name, .fin-table .fin-ratio td:not(.up):not(.down) { color: var(--dim); }
.fin-msg { padding: 8px 10px; }

.sc-filters > summary { display: none; }
.sc-form { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px 16px; }
.sc-field { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.sc-lab { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--dim); }
.sc-range { display: grid; grid-template-columns: 1fr 1fr; gap: 3px 6px; }
.sc-range .sc-lab { grid-column: 1 / -1; }
.sc-form select, .sc-form input {
  width: 100%; min-width: 0; height: 24px; padding: 0 6px;
  border: 1px solid var(--rule-strong); background: var(--panel);
  color: var(--text); font-family: var(--font); font-size: 12px;
  color-scheme: dark;
}
.sc-form input { text-transform: uppercase; }
.sc-form input::placeholder { color: var(--faint); text-transform: none; opacity: 1; }
.sc-form select:focus, .sc-form input:focus { outline: 1px solid var(--accent); outline-offset: 0; border-color: var(--accent); }
.sc-actions { grid-column: 1 / -1; display: flex; align-items: center; gap: 12px; }
.sc-clear, .sc-more {
  height: 24px; padding: 0 12px;
  border: 1px solid var(--rule-strong); background: transparent; color: var(--text-2);
  font-family: var(--font); font-size: 12px; font-weight: 600; letter-spacing: .1em; cursor: pointer;
}
.sc-clear:hover, .sc-more:hover { color: var(--ink); background: var(--accent); border-color: var(--accent); }
.sc-err { color: var(--down); font-size: 12px; }
.sc-presets { margin-top: 8px; font-size: 12px; line-height: 2; }
.sc-presets .code { margin-right: 6px; }
.sc-presets + .sc-presets { margin-top: 0; }
.sc-scroll { overflow-x: auto; }
.sc-table .sc-sym { font-weight: 600; }
.sc-table .sc-sym a { color: var(--text); }
.sc-table .name { min-width: 180px; }
.sc-table .sc-ind { max-width: 260px; overflow: hidden; text-overflow: ellipsis; }
.sc-sort { color: var(--dim); }
.sc-sort:hover { color: var(--text); text-decoration: none; }
.sc-sort.is-on { color: var(--accent); }
.sc-more-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 10px; font-size: 12px; }
.sc-none { padding: 8px 10px; }
.sc-rule { padding: 4px 10px; border-bottom: 1px solid var(--rule-strong); background: var(--panel); color: var(--text-2); font-size: 12px; }
.sc-rule-k { margin-right: 8px; color: var(--accent); font-weight: 600; letter-spacing: .08em; }

@media (max-width: 1100px) {
  .sc-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 639px) {
  .fin-table .name { min-width: 128px; white-space: normal; line-height: 1.2; }
  .fin-table td.num { min-width: 72px; }
  .fin-hover { flex-basis: 100%; margin-left: 0; }
  .fin-chart-head { flex-wrap: wrap; gap: 4px 12px; }
  .fin-chart-wrap { padding-left: 6px; }
  .sc-form { grid-template-columns: minmax(0, 1fr); margin-top: 8px; }
  .sc-filters > summary { display: flex; gap: 8px; align-items: baseline; cursor: pointer; list-style: none; font-size: 12px; }
  .sc-filters > summary::-webkit-details-marker { display: none; }
  .sc-filters > summary::before { content: '+'; color: var(--accent); }
  .sc-filters[open] > summary::before { content: '-'; }
  .sc-sum-k { color: var(--accent); letter-spacing: .08em; text-transform: uppercase; }
  .sc-sum-v { color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .sc-table .sc-vol, .sc-table .sc-sec, .sc-table .sc-ind, .sc-table .sc-cty { display: none; }
  /* Phones: ticker only, so the numbers fit; a tap on the row opens the company. */
  .sc-table .name { display: none; }
}

/* ---- WATCH, PORTFOLIO, the watchlist star and the function bar ---------- */
.star {
  display: flex; align-items: center;
  padding: 0 8px; margin-right: auto;
  border: 0; border-right: 1px solid var(--rule-strong);
  background: transparent; color: var(--dim);
  font-family: var(--font); font-size: 14px; line-height: 1; cursor: pointer;
}
.star:hover { color: var(--text); background: var(--panel-3); }
.star.is-on { color: var(--accent); }

.fnbar {
  display: flex; align-items: stretch;
  min-height: 24px;
  background: var(--panel);
  border-bottom: 1px solid var(--rule);
  overflow-x: auto; scrollbar-width: none;
}
.fnbar::-webkit-scrollbar { display: none; }
.fn {
  flex: 0 0 auto;
  display: flex; align-items: center; gap: 6px;
  padding: 0 10px;
  border: 0; border-right: 1px solid var(--rule);
  background: transparent; color: var(--text-2);
  font-family: var(--font); font-size: 11px; font-weight: 600; letter-spacing: .08em;
  cursor: pointer; white-space: nowrap;
}
.fn:hover { text-decoration: none; background: var(--panel-3); color: var(--text); }
.fn-n { color: var(--faint); font-weight: 400; }
.fn.is-active { background: var(--text-2); color: var(--ink); }
.fn.is-active .fn-n { color: var(--ink); }
.fn.is-soon { color: var(--faint); }
.fn.is-soon:hover { color: var(--dim); }

.wl-top:empty { display: none; }
.wl-top, .pf-top { padding: 0; }
.wl-top > *, .pf-top > * { padding: 6px 10px; border-bottom: 1px solid var(--rule); }
.wl-msg { color: var(--text); }
.wl-msg.is-warn { color: var(--down); }
.wl-note { color: var(--dim); font-size: 12px; }
.wl-note .code { margin-left: 8px; }
.wl-export, .pf-export { display: flex; align-items: center; gap: 10px; }
.wl-export input, .pf-export textarea, .pf-import textarea {
  flex: 1; min-width: 0;
  padding: 2px 6px;
  border: 1px solid var(--rule-strong); background: var(--bg);
  color: var(--text); font-family: var(--font); font-size: 12px;
}
.wl-export input { height: 24px; }
.pf-export { align-items: flex-start; }
.pf-export textarea, .pf-import textarea { resize: vertical; line-height: 1.5; }
.wl-export input:focus, .pf-export textarea:focus, .pf-import textarea:focus { outline: 1px solid var(--accent); outline-offset: 0; }
.pf-import { display: grid; gap: 6px; }
.pf-import label { font-size: 11px; letter-spacing: .06em; }
.pf-import-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.pf-file { color: var(--dim); }
.pf-file input { margin-left: 6px; color: var(--text-2); font-family: var(--font); font-size: 11px; }
.pf-btn {
  display: inline-flex; align-items: center; height: 24px; padding: 0 12px;
  border: 1px solid var(--accent); background: var(--accent); color: var(--ink);
  font-family: var(--font); font-size: 11px; font-weight: 600; letter-spacing: .1em; cursor: pointer; white-space: nowrap;
}
.pf-btn:hover { text-decoration: none; background: var(--text); border-color: var(--text); }
.wl-empty, .pf-empty { padding: 10px; line-height: 2; }
.wl-empty .code, .pf-empty .code { margin: 0 4px; }

.wl-table .th-sort {
  padding: 0; border: 0; background: transparent;
  color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer;
}
.wl-table .th-sort:hover, .wl-table .th-sort.is-on { color: var(--text); }
.wl-table .wl-sym, .pf-table .pf-sym { width: 1%; font-weight: 600; }
.wl-table .wl-sym a, .pf-table .pf-sym a { color: var(--text); }
.wl-table tbody .name, .pf-table tbody .name { color: var(--dim); }
.wl-table .name-h, .pf-table .name-h { width: 100%; }
.wl-52 { display: flex; align-items: center; justify-content: flex-end; gap: 0; height: var(--row-h); }
.wl-52 .rangebar { margin: 0 8px; }
.wl-lo, .wl-hi { color: var(--dim); font-size: 11px; }
.wl-act { width: 1%; padding: 0 4px 0 0 !important; text-align: right; }
.wl-btn {
  width: 22px; height: 20px; padding: 0;
  border: 0; background: transparent; color: var(--faint);
  font-family: var(--font); font-size: 13px; line-height: 1; cursor: pointer;
}
.wl-btn:hover:not([disabled]) { color: var(--text); background: var(--panel-3); }
.wl-btn[data-act="remove"]:hover { color: var(--down); }
.wl-btn[disabled] { opacity: .3; cursor: default; }
.wl-table tr.is-dragging { opacity: .45; }
.wl-table tr.drop-before { box-shadow: inset 0 2px 0 var(--accent); }
.wl-table tr.drop-after { box-shadow: inset 0 -2px 0 var(--accent); }
.wl-table tr[draggable="true"] { cursor: grab; }
.wl-cname { margin-left: 6px; font-size: 11px; }
.h-more { padding: 4px 10px; font-size: 12px; }

.pf-table tfoot th, .pf-table tfoot td { height: 28px; padding: 0 10px; font-weight: 600; border-top: 1px solid var(--rule-strong); white-space: nowrap; }
.pf-table tfoot .name { font-weight: 400; font-size: 11px; letter-spacing: .04em; max-width: none; }
.pf-table .pf-val { color: var(--text); font-weight: 600; }
.pf-table .pf-ph { display: none; }
.pf-flag { margin-left: 6px; padding: 0 3px; border: 1px solid var(--rule-strong); color: var(--dim); font-size: 9px; font-weight: 600; letter-spacing: .06em; vertical-align: middle; }
.pf-alloc { padding: 2px 0; }
.alloc-bar { display: flex; gap: 1px; height: 14px; background: var(--bg); }
.alloc-seg { flex: 1 1 0; min-width: 2px; }
.alloc-legend { display: flex; flex-wrap: wrap; gap: 6px 20px; margin-top: 10px; font-size: 12px; }
.alloc-legend li { display: flex; align-items: center; gap: 8px; }
.alloc-legend a { color: var(--text); font-weight: 600; }
.alloc-dot { width: 8px; height: 8px; flex: 0 0 auto; }

@media (max-width: 1100px) {
  .wl-table .wl-wide { display: none; }
}
@media (max-width: 639px) {
  .wl-table .name-h, .wl-table tbody .name, .pf-table .name-h, .pf-table .name { display: none; }
  .wl-table .wl-sym, .pf-table .pf-sym { width: 100%; }
  .pf-table .pf-nm { display: none; }
  .pf-table tfoot .name { display: none; }
  /* The Total $ column is hidden on phones, so the totals row shows it over Total %. */
  .pf-table tfoot th, .pf-table tfoot td { height: auto; padding: 4px; line-height: 16px; }
  .pf-table tfoot .pf-ph { display: block; font-size: 11px; }
  .pf-table th, .pf-table td { padding: 0 6px; }
  .wl-top > *, .pf-top > * { padding: 6px 8px; }
  .wl-note .code { margin-left: 0; margin-right: 8px; }
  .wl-export, .pf-export { flex-wrap: wrap; }
  .wl-btn { width: 28px; height: 26px; }
  .fn { padding: 0 9px; }
  .fnbar { min-height: 30px; }
}

/* ---- DESK: your own screen ------------------------------------------------ */
.desk { --desk-row: 40px; }
.desk-bar {
  display: flex; align-items: stretch; gap: 10px;
  height: 26px; margin-bottom: 1px;
  background: var(--panel); border: 1px solid var(--rule-strong);
  font-size: 11px; letter-spacing: .06em;
}
.desk-label { display: flex; align-items: center; padding: 0 8px; background: var(--accent); color: var(--ink); font-size: 12px; font-weight: 600; }
.desk-tabs { margin-right: 0; border-left: 0; }
.desk-tabs .tab { min-width: 26px; justify-content: center; font-size: 12px; font-weight: 600; }
.desk-focus { display: flex; align-items: center; min-width: 0; color: var(--accent); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.desk-hint { display: none; align-items: center; min-width: 0; color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.desk[data-editing="true"] .desk-hint { display: flex; }
.desk[data-editing="true"] .desk-focus { display: none; }
.desk-btn {
  align-self: center; height: 20px; padding: 0 8px;
  border: 1px solid var(--rule-strong); background: transparent; color: var(--text-2);
  font-family: var(--font); font-size: 11px; font-weight: 600; letter-spacing: .08em; cursor: pointer; white-space: nowrap;
}
.desk-btn:hover { color: var(--ink); background: var(--accent); border-color: var(--accent); }
.desk-bar .desk-add { margin-left: auto; }
.desk-bar .desk-edit { margin: 0 6px 0 0; }
.desk-edit[aria-pressed="true"] { color: var(--ink); background: var(--accent); border-color: var(--accent); }

.desk-picker { margin-bottom: 1px; background: var(--panel-2); border: 1px solid var(--rule-strong); }
.desk-picker[hidden] { display: none; }
.desk-pick-form { display: flex; align-items: center; gap: 8px; height: 32px; padding: 0 8px; border-bottom: 1px solid var(--rule-strong); }
.desk-pick-input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: transparent; color: var(--text); font-family: var(--font); font-size: 14px; text-transform: uppercase; }
.desk-pick-input::placeholder { color: var(--faint); text-transform: none; }
.desk-pick-list { max-height: 260px; overflow-y: auto; }
.desk-pick-list li { display: grid; grid-template-columns: minmax(120px, max-content) 1fr; gap: 16px; align-items: center; height: var(--row-h); padding: 0 8px; cursor: pointer; }
.desk-pick-list li:hover { background: var(--panel-3); }
.desk-pick-list .sug-name { color: var(--text); font-weight: 600; }
.desk-pick-list .sug-hint { color: var(--dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.desk-grid {
  display: grid; gap: 1px;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-auto-rows: var(--desk-row);
  background: var(--bg); border: 1px solid var(--rule-strong);
}
/* EDIT shows the grid the panels snap to. */
.desk[data-editing="true"] .desk-grid {
  background-image:
    linear-gradient(to right, var(--rule) 1px, transparent 1px),
    linear-gradient(to bottom, var(--rule) 1px, transparent 1px);
  background-size: calc((100% + 1px) / 12) calc(var(--desk-row) + 1px);
  background-position: -1px -1px;
  min-height: calc(16 * (var(--desk-row) + 1px));
}
.desk.is-mobile[data-editing="true"] .desk-grid { min-height: 0; background-image: none; }
.desk-grid[hidden], .desk-empty[hidden] { display: none; }
.desk-empty { padding: 16px 12px; border: 1px solid var(--rule-strong); }

.dp { position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--bg); outline: 1px solid var(--rule-strong); }
.dp.is-focused { box-shadow: inset 0 0 0 1px var(--accent); z-index: 1; }
.dp-head {
  display: flex; align-items: center; gap: 6px;
  flex: 0 0 auto; height: 24px; padding-right: 2px;
  background: var(--panel); border-bottom: 1px solid var(--rule-strong);
  font-size: 11px;
}
.dp.is-focused .dp-head { background: var(--panel-3); }
.dp-link { flex: 0 0 auto; position: relative; width: 24px; height: 100%; padding: 0; border: 0; background: transparent; cursor: pointer; }
.dp-link::after { content: ''; position: absolute; left: 8px; top: 8px; width: 8px; height: 8px; border: 1px solid var(--dim); }
.dp-link[data-link="blue"]::after { background: var(--accent); border-color: var(--accent); }
.dp-link[data-link="green"]::after { background: var(--up); border-color: var(--up); }
.dp-title { flex: 0 1 auto; min-width: 0; color: var(--text); font-weight: 600; letter-spacing: .04em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dp-form { flex: 1 1 60px; min-width: 40px; height: 100%; display: flex; }
.dp-cmd {
  width: 100%; height: 100%; padding: 0 6px; border: 0; border-left: 1px solid var(--rule); outline: 0;
  background: transparent; color: var(--text); font-family: var(--font); font-size: 11px; text-transform: uppercase;
}
.dp-cmd::placeholder { color: var(--faint); }
.dp-cmd:focus { background: var(--bg); box-shadow: inset 0 -1px 0 var(--accent); }
.dp-asof { flex: 0 0 auto; color: var(--dim); white-space: nowrap; }
.dp-asof.is-stale { color: var(--down); }
.dp-btn {
  flex: 0 0 auto; display: flex; align-items: center; justify-content: center;
  min-width: 22px; height: 18px; padding: 0 4px; border: 0; background: transparent;
  color: var(--dim); font-family: var(--font); font-size: 11px; font-weight: 600; letter-spacing: .06em; cursor: pointer;
}
.dp-btn:hover { color: var(--ink); background: var(--accent); text-decoration: none; }
.dp-close { font-size: 14px; }
.dp-move { display: none; }
.dp-body { position: relative; flex: 1 1 auto; min-height: 0; }
.dp-body iframe { display: block; width: 100%; height: 100%; border: 0; background: var(--bg); }
.dp-resize { display: none; }

.dp-head { cursor: grab; user-select: none; }
.dp-head .dp-cmd { cursor: text; }
/* The add tile, after the last panel. */
.dp-add {
  grid-column: 1 / -1; order: 9999;
  display: flex; align-items: center; justify-content: center;
  min-height: 0; border: 1px dashed var(--rule-strong); background: transparent;
  color: var(--dim); font-family: var(--font); font-size: 12px; font-weight: 600; letter-spacing: .08em; cursor: pointer;
}
.dp-add:hover { color: var(--accent); border-color: var(--accent); background: var(--accent-tint); }
.dp-add[hidden] { display: none; }
.desk[data-editing="true"] .dp-resize {
  display: block; position: absolute; right: 0; bottom: 0; z-index: 2;
  width: 14px; height: 14px; cursor: nwse-resize;
  background: linear-gradient(135deg, transparent 50%, var(--accent) 50%);
}
.desk.is-dragging { user-select: none; }
.desk.is-dragging .dp-body iframe { pointer-events: none; }
.desk.is-dragging .dp-head { cursor: grabbing; }
.dp.is-moving { z-index: 3; box-shadow: inset 0 0 0 1px var(--accent), 0 0 0 1px var(--accent); }
.dp.is-moving .dp-body { opacity: .7; }
.dp-ghost { z-index: 2; background: var(--accent-tint); outline: 1px dashed var(--accent); outline-offset: -1px; pointer-events: none; }
/* The desk uses the whole width of the window, like a terminal workspace. */
.screen:has(> .view > .desk) { padding-left: var(--gutter); padding-right: var(--gutter); }

/* Phones: one column, no drag; up and down buttons in EDIT */
.desk.is-mobile .desk-grid { display: flex; flex-direction: column; }
.desk.is-mobile .dp { height: max(320px, calc(var(--h) * 46px)); }
.desk.is-mobile .dp-asof, .desk.is-mobile .desk-focus, .desk.is-mobile .desk-hint { display: none; }
.desk.is-mobile[data-editing="true"] .dp-move { display: flex; }
.desk.is-mobile[data-editing="true"] .dp-resize { display: none; }
.desk.is-mobile .dp-head { cursor: default; }
.desk.is-mobile .dp-add { height: 44px; }

/* ---- DESK cards and presets (screens/desk-cards.js) ------------------------------ */
/* A card is its WEIRD tile's panel in a DESK panel. It sizes with CSS only (container
   queries), so no script redraws it when the box changes. */
.desk-bar .desk-presets { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.desk-bar .desk-presets ~ .desk-add { margin-left: 0; }
.desk-confirm { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; min-height: 30px; margin-bottom: 1px; padding: 4px 8px; background: var(--panel-2); border: 1px solid var(--accent); color: var(--text); font-size: 12px; }
.desk-confirm[hidden] { display: none; }
.desk-confirm:focus { outline: 0; }
/* The same line over any screen, for a link that would change something saved here. */
.link-confirm { flex: 0 0 auto; margin-bottom: 8px; }
.desk-pick-list .desk-pick-group { display: flex; height: 22px; color: var(--dim); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; cursor: default; border-top: 1px solid var(--rule); }
.desk-pick-list .desk-pick-group:first-child { border-top: 0; }
.desk-pick-list .desk-pick-group:hover { background: transparent; }
.dp.is-card .dp-link, .dp.is-card .dp-asof { visibility: hidden; }
.dp.is-card .dp-body { display: flex; overflow: hidden; }
.dp .dp-card { flex: 1 1 auto; min-width: 0; min-height: 0; box-shadow: none; container: dpcard / size; }
.dp .dp-card:focus { box-shadow: inset 2px 0 0 var(--accent); }
.dp .dp-card > .panel { min-height: 0; }
.dp .dp-card .panel-body { min-height: 0; overflow: hidden; }
.dp .dp-card .wd-line { overflow: hidden; }
/* Narrow or short: each line on one row. */
@container dpcard (max-height: 104px) or (max-width: 300px) {
  .dp .dp-card :is(.wd-big, .wd-line, .wd-src) { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}
/* Short (3 x 3 cells on a short screen): tighter. */
@container dpcard (max-height: 104px) {
  .dp .dp-card .panel-body { padding: 4px 8px; gap: 1px; }
  .dp .dp-card .wd-big { font-size: 18px; line-height: 1.15; }
  .dp .dp-card .wd-line { min-height: 0; font-size: 11px; line-height: 15px; }
  .dp .dp-card .wd-spark { min-height: 0; }
  .dp .dp-card .wd-spark svg { height: 14px; }
  .dp .dp-card .wd-src { margin-top: 1px; line-height: 12px; }
}
/* Bigger cards: a bigger headline, and the sparkline takes the room left. */
@container dpcard (min-width: 420px) and (min-height: 200px) {
  .dp .dp-card .panel-body { padding: 12px 14px; gap: 4px; }
  .dp .dp-card .wd-big { font-size: 30px; }
  .dp .dp-card .wd-line { font-size: 13px; }
  .dp .dp-card .wd-spark { flex: 1 1 18px; min-height: 18px; max-height: 72px; }
  .dp .dp-card .wd-spark svg { width: 100%; height: 100%; }
  .dp .dp-card .wd-spark polyline { vector-effect: non-scaling-stroke; }
}
@container dpcard (min-width: 640px) and (min-height: 320px) {
  .dp .dp-card .wd-big { font-size: 40px; }
  .dp .dp-card .wd-line { font-size: 14px; }
}
.desk.is-mobile .dp.is-card { height: calc(var(--h) * 34px); min-height: 124px; }
.desk.is-mobile .desk-bar { flex-wrap: wrap; height: auto; min-height: 26px; }
.desk.is-mobile .desk-bar .desk-presets { order: 9; flex: 1 0 100%; margin: 0; padding: 3px 0 3px 8px; border-top: 1px solid var(--rule-strong); }
.desk.is-mobile .desk-bar .desk-presets ~ .desk-add { margin-left: auto; }
/* ---- end DESK cards ---- */

/* ---- A numbered panel over the whole screen (keys 1 to 9 off stock screens) ---- */
.panel.is-max {
  position: fixed; z-index: 6;
  top: var(--max-top, calc(var(--topbar-h) + var(--cmd-h)));
  left: var(--inset); right: var(--inset); bottom: calc(var(--dock-h) + 8px);
  border: 1px solid var(--rule-strong);
}
.panel.is-max > .panel-body { flex: 1 1 auto; min-height: 0; overflow: auto; scrollbar-gutter: stable; }
.panel.is-max > .panel-body:has(> .rc-home) { min-height: 0; overflow: hidden; scrollbar-gutter: auto; }
.panel.is-max .panel-label { box-shadow: inset 0 -2px 0 var(--ink); }

/* A chart takes its size from the layout, never from its own drawing: the SVG covers
   its box exactly (a drawing a moment out of date is scaled, not spilled), so a redraw
   cannot grow or scroll anything around it. */
.chart-host > svg { position: absolute; inset: 0; width: 100%; height: 100%; }

/* Scrollbars: thin and dark, the terminal's own colours (classic Windows scrollbars
   too). */
:root { scrollbar-color: var(--rule-strong) var(--bg); }
* { scrollbar-width: thin; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track, ::-webkit-scrollbar-corner { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--rule-strong); border: 2px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: var(--faint); }

/* ---- Desktop: the screen fills the window exactly, panels scroll inside ---------
   The page never scrolls: the screen area sits between the command bar and the dock,
   the main panel of a screen stretches to the bottom and its body scrolls. When a
   screen has more than fits, the screen area itself scrolls. Phones keep the stacked,
   page-scrolling layout. */
@media (min-width: 1100px) {
  html:not(.is-embed) body {
    display: flex; flex-direction: column;
    height: 100vh; height: 100dvh; min-height: 0;
    padding-bottom: var(--dock-h);
    overflow: hidden;
  }
  html:not(.is-embed) .topbar, html:not(.is-embed) .commandbar, html:not(.is-embed) .tickerbar { flex: 0 0 auto; }
  html:not(.is-embed) .screen {
    display: flex; flex-direction: column;
    flex: 1 1 auto; min-height: 0;
    padding-bottom: 8px;
    overflow: auto;
    scrollbar-gutter: stable;
    scrollbar-width: thin; scrollbar-color: var(--rule-strong) var(--bg);
  }
  html:not(.is-embed) .screen > .view { display: flex; flex-direction: column; flex: 1 1 0; min-height: 0; }
  html:not(.is-embed) .view > * { flex: 0 0 auto; }

  /* The blocks of a screen: panels, stacks of panels, grids, a panel with a side. The
     last one takes the room left; the ones above keep their size. */
  html:not(.is-embed) .view > :is(.panel, .stack, .grid, .with-side, #er-host) { flex: 0 1 auto; min-height: 96px; }
  html:not(.is-embed) .view > :nth-last-child(1 of :is(.panel, .stack, .grid, .with-side, #er-host):not([hidden])) { flex: 1 1 auto; min-height: 240px; }
  html:not(.is-embed) .view > .panel > .panel-body,
  html:not(.is-embed) .view > #er-host > .panel > .panel-body { flex: 1 1 auto; min-height: 0; overflow: auto; scrollbar-gutter: stable; }
  html:not(.is-embed) .view > #er-host { display: flex; flex-direction: column; }
  html:not(.is-embed) .view > #er-host > .panel { flex: 1 1 auto; min-height: 0; }

  /* A stack: the last part takes the room left, the ones above keep their size. */
  html:not(.is-embed) .view > .stack { display: flex; flex-direction: column; }
  html:not(.is-embed) .view > .stack > * { flex: 0 1 auto; min-height: 96px; }
  html:not(.is-embed) .view > .stack > :nth-last-child(1 of :not([hidden])) { flex: 1 1 auto; min-height: 160px; }
  html:not(.is-embed) .view > .stack > .panel > .panel-body,
  html:not(.is-embed) .view > .stack > :not(.panel) > .panel > .panel-body { flex: 1 1 auto; min-height: 0; overflow: auto; scrollbar-gutter: stable; }
  html:not(.is-embed) .view > .stack > :not(.panel) > .panel { min-height: 0; }

  /* A grid or a panel with a side: rows stretch, each panel scrolls inside. */
  html:not(.is-embed) .view > .grid { grid-auto-rows: minmax(0, auto); align-content: stretch; }
  html:not(.is-embed) .view > :is(.grid, .with-side) > .panel { min-height: 0; }
  html:not(.is-embed) .view > :is(.grid, .with-side) > .panel > .panel-body { min-height: 0; overflow: auto; scrollbar-gutter: stable; }
  html:not(.is-embed) .view > .with-side { align-items: stretch; }

  /* A chart in a stretched panel grows with it; the chart redraws to its box. */
  html:not(.is-embed) .view .panel-body:has(> .rc:not(.rc-home)),
  html:not(.is-embed) .view > :is(.stack, .panel) .panel-body:has(> .chart-host) { display: flex; flex-direction: column; }
  html:not(.is-embed) .view .panel-body > .rc:not(.rc-home) { flex: 1 1 auto; min-height: 0; }
  html:not(.is-embed) .view .panel-body > .rc:not(.rc-home) > :not(.chart-host) { flex: 0 0 auto; }
  html:not(.is-embed) .view .panel-body > .rc:not(.rc-home) > .chart-host,
  html:not(.is-embed) .view > :is(.stack, .panel) .panel-body > .chart-host { flex: 1 1 0; height: auto; min-height: 160px; }
  html:not(.is-embed) .view > :is(.stack, .panel) .panel-body:has(> .chart-host) > :not(.chart-host) { flex: 0 0 auto; }

  /* HOME: three boxes. MARKETS across the top at its own height (four columns of ten),
     then the S&P 500 chart (about 62%) and NEWS (38%, scrolls inside) sharing the rest.
     On a short window MARKETS stops at 48% of the screen and scrolls inside; the gutter
     for its scrollbar is kept either way, so a scrollbar coming never resizes anything. */
  html:not(.is-embed) .view > .grid-home {
    grid-template-columns: minmax(0, 62fr) minmax(0, 38fr);
    grid-template-rows: fit-content(48%) minmax(140px, 1fr);
    min-height: 0;
  }
  html:not(.is-embed) .grid-home > .panel-wide > .panel-body { overflow: auto; scrollbar-gutter: stable; }
  html:not(.is-embed) .grid-home .panel-body:has(> .rc-home) { min-height: 0; overflow: hidden; scrollbar-gutter: auto; }
}

/* ---- Embed mode: the app inside a DESK panel ------------------------------- */
.is-embed body { min-height: 0; }
.is-embed .topbar, .is-embed .commandbar, .is-embed .dock, .is-embed .footnote { display: none; }
.is-embed .screen { padding: 0; }
.is-embed .grid, .is-embed .stack, .is-embed .panel-solo { border: 0; }
.is-embed { scrollbar-width: thin; scrollbar-color: var(--rule-strong) var(--bg); }
/* An instrument in a panel: a one-line header strip, key numbers in a row, and the chart
   takes the rest of the panel. Short panels drop the key numbers. */
.is-embed .stack:has(#q-rc) { display: flex; flex-direction: column; height: 100vh; }
.is-embed .stack > .panel:has(#q-rc) { flex: 1 1 auto; min-height: 0; }
.is-embed .panel-body:has(> #q-rc) { display: flex; flex-direction: column; min-height: 0; }
.is-embed #q-rc { flex: 1 1 auto; min-height: 0; }
.is-embed #q-rc > .ch-bar, .is-embed #q-rc > .ch-head { flex: 0 0 auto; }
.is-embed #q-rc .chart-host { flex: 1 1 auto; height: auto; min-height: 140px; }
.is-embed .q-top { grid-template-columns: minmax(0, 1fr); gap: 6px; }
.is-embed .q-main { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; }
.is-embed .q-hero { margin: 0; font-size: 24px; }
.is-embed .q-chg, .is-embed .q-ext, .is-embed .q-asof { margin: 0; }
.is-embed .q-chg { font-size: 14px; }
.is-embed .q-top .stats { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); column-gap: 16px; }
@media (max-height: 560px) {
  .is-embed .q-top .stats, .is-embed .q-ext { display: none; }
}

/* ---- WEIRD (phase 3: screens/weird.js, weird-gauges.js) --------------------------- */
/* The rules between tiles are each tile's own 1px outline, drawn into the 1px gaps, so
   a short last row or a tall screen leaves plain background, not grey blocks or lines. */
.wd-grid {
  display: grid; gap: 1px; padding: 1px;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  align-content: start;
}
.wd-tile { display: flex; min-width: 0; background: var(--bg); cursor: pointer; outline: 0; box-shadow: 0 0 0 1px var(--rule-strong); }
.wd-tile > .panel { flex: 1; }
.wd-tile:hover .panel-body, .wd-tile:focus .panel-body { background: var(--panel-2); }
.wd-tile:focus { box-shadow: 0 0 0 1px var(--rule-strong), inset 2px 0 0 var(--accent); }
.wd-tile .panel-body { display: flex; flex-direction: column; gap: 2px; min-height: 112px; }
.wd-big { font-size: 22px; font-weight: 600; line-height: 1.2; color: var(--text); overflow-wrap: anywhere; }
.wd-big.is-none { color: var(--dim); }
.wd-big.is-stale { color: var(--text-2); opacity: .6; }
.wd-line { color: var(--text-2); font-size: 12px; min-height: 17px; }
.wd-spark { min-height: 18px; margin-top: auto; }
.wd-src { font-size: 10px; letter-spacing: .04em; color: var(--dim); text-transform: uppercase; margin-top: 2px; }
.wd-src a { color: var(--text-2); text-decoration: underline; }
.wd-head { margin-bottom: 8px; }
.wd-head .wd-big { font-size: 28px; }
.wd-body { display: grid; gap: 10px; min-width: 0; overflow-x: auto; }
.wd-body .stats { max-width: 520px; }
.wd-stats dd { gap: 6px; }
.wd-table { max-width: 820px; }
.wd-table .name { width: auto; max-width: none; }
.wd-spark-cell { width: 1%; }
.wd-chart { height: 240px; margin-left: 0; max-width: 820px; }
.wd-chart-head .legend { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 11px; color: var(--text-2); }
.wd-sub { font-size: 11px; color: var(--dim); letter-spacing: .06em; text-transform: uppercase; margin: 4px 0; }
.wd-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; max-width: 820px; }
.wd-how { max-width: 820px; margin-top: 12px; }
.wd-how + .wd-src { margin-top: 8px; }
.wd-table .wd-wrap { white-space: normal; height: auto; padding-top: 4px; padding-bottom: 4px; line-height: 1.3; }
/* WEIRD periods: the chart toolbar's range look; a period the source does not cover is
   greyed and not a link (its title says why). */
.wd-bar { display: flex; padding: 0 0 6px; }
.wd-periods { flex: 0 0 auto; align-self: flex-start; border: 1px solid var(--rule-strong); }
.wd-periods .tab.is-off { color: var(--faint); cursor: default; }
.wd-periods .tab.is-off:hover { color: var(--faint); background: transparent; }
.wd-rec { font-size: 10px; letter-spacing: .06em; color: var(--accent); text-transform: uppercase; }
/* One gauge: the number and the period row on top, the big chart with the table beside
   it (below it under 1100px), then how it is measured, the source and SHARE. */
.wd-solo > .panel-body { display: flex; flex-direction: column; gap: 10px; }
.wd-top { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 6px 16px; }
.wd-top .wd-head { margin: 0; min-width: 0; }
.wd-main { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px 16px; min-width: 0; }
.wd-chartbox { display: flex; flex-direction: column; min-width: 0; }
.wd-chartbox .wd-chart { height: 260px; max-width: none; }
.wd-chartbox .wd-chart-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 12px; min-height: 17px; font-size: 11px; color: var(--text-2); }
.wd-chart-label { letter-spacing: .06em; color: var(--dim); text-transform: uppercase; }
.wd-read { font-variant-numeric: tabular-nums; color: var(--text); }
.wd-side { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.wd-side > .wd-body { overflow-x: auto; align-content: start; }
/* The notes under the table never widen its column: they wrap to the table's width. */
.wd-side > .wd-foot { width: 0; min-width: 100%; }
.wd-side .wd-table, .wd-side .wd-two, .wd-side .stats { max-width: none; }
.wd-side tr[data-key] { cursor: pointer; }
.wd-side tr[data-key]:hover > * { background: var(--panel-2); }
.wd-side tr.is-picked > th { color: var(--accent); box-shadow: inset 2px 0 0 var(--accent); }
.wd-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; }
.wd-foot .wd-how { margin-top: 0; flex: 1 1 100%; max-width: none; }
.wd-foot .wd-src { margin-top: 0; }
.wd-foot .wi-share { margin: 0; }
@media (min-width: 1100px) {
  /* The table keeps its own width (up to half); the chart takes the rest. */
  .wd-main { grid-template-columns: minmax(0, 1fr) fit-content(50%); }
  .wd-main.is-nochart { grid-template-columns: minmax(0, 1fr); }
  /* The chart takes the height left; the table scrolls inside its column. */
  html:not(.is-embed) .view > .stack > .wd-solo > .panel-body { overflow: hidden; }
  html:not(.is-embed) .wd-solo .wd-main { flex: 1 1 0; min-height: 180px; }
  html:not(.is-embed) .wd-solo .wd-chartbox .wd-chart { flex: 1 1 0; height: auto; min-height: 160px; }
  html:not(.is-embed) .wd-solo .wd-side { overflow: auto; min-height: 0; scrollbar-gutter: stable; }
  .wd-main.is-nochart .wd-side > .wd-foot { width: auto; }
}
/* Desktop, full-height screen: the grid takes the room left and scrolls inside. */
@media (min-width: 1100px) {
  /* scrollbar-gutter: the room for a classic scrollbar is kept either way, so it
     showing up never changes the column count (no resize loop on Windows). */
  html:not(.is-embed) .view > .wd-grid { flex: 1 1 auto; min-height: 0; overflow: auto; scrollbar-gutter: stable; scrollbar-width: thin; scrollbar-color: var(--rule-strong) var(--bg); }
}
@media (max-width: 639px) {
  .wd-grid { grid-template-columns: minmax(0, 1fr); }
  .wd-tile .panel-body { min-height: 0; padding: 6px 8px; }
  .wd-spark { margin-top: 2px; }
  .wd-big { font-size: 18px; }
  .wd-head .wd-big { font-size: 22px; }
  .wd-line { font-size: 11px; }
  .wd-spark svg { width: 100%; }
  .wd-hide-sm { display: none; }
  .wd-two { grid-template-columns: minmax(0, 1fr); }
  .wd-table th, .wd-table td { padding: 0 6px; }
  .wd-chart { height: 200px; }
  .wd-chartbox .wd-chart { height: 220px; }
  .wd-top { align-items: flex-start; }
}

/* --- NEWS SEC tab rows (phase 4) ------------------------------------------------ */
.news-filing .news-tkr { display: inline-block; width: 7ch; color: var(--accent); }
.news-filing .news-link { color: inherit; }
.news-filing .news-link:hover { color: var(--accent); text-decoration: none; }
.news-row.is-dim .news-title, .news-row.is-dim .news-src { color: var(--dim); }
/* --- end NEWS SEC tab rows ------------------------------------------------------ */

/* --- FISHTANK (screens/fishtank.js): the S&P 100 as fish ----------------------- */
/* The canvas sits absolutely inside its box, so drawing never changes the box size. */
.ft-host { position: relative; height: clamp(420px, 72vh, 760px); min-height: 0; overflow: hidden; background: hsl(213, 43%, 4%); }
.ft-host > .loading, .ft-host > .panel-msg { padding: 8px; }
.ft-canvas { position: absolute; left: 0; top: 0; display: block; touch-action: manipulation; }
.ft-tip {
  position: absolute; left: 0; top: 0; pointer-events: none; white-space: nowrap;
  padding: 2px 6px; font-size: 11px; line-height: 16px;
  background: var(--panel-2); border: 1px solid var(--rule-strong); color: var(--text-2);
}
.ft-tip b { color: var(--text); font-weight: 600; }
.ft-tip-sec { color: var(--dim); }
/* The legend: one button per sector, a species glyph and its short name. One row that
   scrolls sideways on a narrow screen, so its height never changes. */
.ft-leg {
  display: flex; flex: 0 0 auto; height: 26px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none;
  background: var(--panel); border-bottom: 1px solid var(--rule-strong);
}
.ft-leg::-webkit-scrollbar { display: none; }
.ft-leg[hidden] { display: none; }
.ft-leg-btn {
  display: flex; align-items: center; gap: 5px; flex: 0 0 auto; height: 25px; padding: 0 9px 0 6px;
  border: 0; border-right: 1px solid var(--rule); background: transparent; color: var(--dim);
  font-family: var(--font); font-size: 11px; font-weight: 600; letter-spacing: .08em; cursor: pointer; white-space: nowrap;
}
.ft-leg-btn:hover { color: var(--text); background: var(--panel-3); }
.ft-leg-btn:focus-visible { outline: 1px solid var(--accent); outline-offset: -1px; }
.ft-leg-btn[aria-pressed="true"] { color: var(--accent); background: var(--accent-tint); box-shadow: inset 0 -2px 0 var(--accent); }
.ft-glyph { display: block; width: 26px; height: 16px; }
.ft-sr { position: absolute; width: 1px; height: 1px; margin: 0; padding: 0; overflow: hidden; clip: rect(0 0 0 0); }
.ft-sr:focus-within {
  width: auto; height: auto; max-height: calc(100% - 32px); max-width: calc(100% - 16px); left: 8px; top: 24px; z-index: 2;
  overflow: auto; clip: auto; list-style: none; padding: 4px 0;
  background: var(--panel-2); border: 1px solid var(--rule-strong);
}
.ft-sr:focus-within a { display: block; padding: 0 8px; line-height: 20px; white-space: nowrap; color: var(--text-2); }
.ft-sr:focus-within a:focus { color: var(--ink); background: var(--accent); outline: none; }
@media (min-width: 1100px) {
  html:not(.is-embed) .view > .panel .panel-body:has(> .ft-host) { display: flex; flex-direction: column; overflow: hidden; scrollbar-gutter: auto; }
  html:not(.is-embed) .view > .panel .panel-body > .ft-host { flex: 1 1 0; height: auto; min-height: 200px; }
}
.is-embed .ft-host { height: calc(100vh - 28px); min-height: 160px; }
.is-embed .ft-leg:not([hidden]) + .ft-host { height: calc(100vh - 54px); }
.ft-short { display: none; }
@media (max-width: 639px) {
  .ft-idx, .ft-upd, .ft-sep, .ft-long { display: none; }
  .ft-key { display: block; }
  .ft-short { display: inline; }
  .ft-leg { mask-image: linear-gradient(to right, #000 88%, transparent); -webkit-mask-image: linear-gradient(to right, #000 88%, transparent); }
}
/* --- end FISHTANK -------------------------------------------------------------- */

/* --- GUESS (screens/guess.js): one mystery stock a day ------------------------- */
.grid-guess { grid-template-columns: minmax(0, 1fr); }
.gs-chart { position: relative; height: 280px; min-height: 0; overflow: hidden; }
@media (min-width: 1100px) {
  .grid-guess { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
  html:not(.is-embed) .view > .grid-guess { grid-template-rows: minmax(0, 1fr); }
  html:not(.is-embed) .view > .grid-guess > .gs-chart-panel > .panel-body { display: flex; flex-direction: column; overflow: hidden; scrollbar-gutter: auto; }
  html:not(.is-embed) .view > .grid-guess .gs-chart { flex: 1 1 0; height: auto; min-height: 200px; }
  .is-embed .gs-chart { height: calc(100vh - 40px); }
}
.gs-svg { display: block; }
.gs-line { fill: none; stroke: var(--accent); stroke-width: 1.5; stroke-linejoin: round; }
.gs-area { fill: var(--accent-tint); stroke: none; }
.gs-grid { stroke: var(--rule); stroke-width: 1; }
.gs-grid.is-zero { stroke: var(--rule-strong); stroke-dasharray: 4 3; }
.gs-mtick { stroke: var(--rule); stroke-width: 1; stroke-dasharray: 1 3; }
.gs-ylab, .gs-xlab { fill: var(--dim); font-family: var(--font); font-size: 11px; }
.gs-tag { fill: var(--accent); }
.gs-tagt { fill: var(--ink); font-family: var(--font); font-size: 11px; font-weight: 600; }
.gs-form { flex-wrap: nowrap; padding: 8px 10px; border-bottom: 1px solid var(--rule); }
.gs-field { position: relative; flex: 1 1 auto; min-width: 0; }
.gs-in { width: 100%; }
.gs-in:focus { outline: 1px solid var(--accent); outline-offset: 0; }
.gs-sug { position: absolute; top: 100%; left: 0; right: 0; z-index: 20; list-style: none; padding: 0; background: var(--panel-2); border: 1px solid var(--rule-strong); }
.gs-sug[hidden] { display: none; }
.gs-sug button {
  display: flex; align-items: center; gap: 10px; width: 100%; height: 26px; padding: 0 8px;
  border: 0; background: transparent; color: var(--text-2); font-family: var(--font); font-size: 12px; text-align: left; cursor: pointer;
}
.gs-sug li[aria-selected="true"] button, .gs-sug button:hover { background: var(--panel-3); color: var(--text); }
.gs-sug .gs-tk { min-width: 6ch; color: var(--text); font-weight: 600; }
.gs-sug .gs-nm { color: var(--dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gs-table { width: 100%; border-collapse: collapse; table-layout: fixed; font-variant-numeric: tabular-nums; }
.gs-table th, .gs-table td { height: 34px; padding: 0 6px; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-bottom: 1px solid var(--rule); }
.gs-table thead th { height: 22px; font-size: 11px; font-weight: 400; letter-spacing: .06em; text-transform: uppercase; color: var(--dim); }
.gs-table .gs-i { width: 4ch; color: var(--dim); }
.gs-table .gs-g { width: 24%; font-weight: 400; color: var(--faint); }
.gs-g .gs-tk { display: block; color: var(--text); font-weight: 600; line-height: 15px; }
.gs-g .gs-nm { display: block; font-size: 11px; line-height: 14px; color: var(--dim); overflow: hidden; text-overflow: ellipsis; }
.gs-cell { border-left: 2px solid var(--bg); }
.gs-cell .gs-v { font-size: 12px; font-weight: 600; }
/* The arrow that points to the answer, after the guess's value. */
.gs-cell .gs-d { margin-left: 6px; font-size: 14px; font-weight: 700; }
.gs-table tbody th, .gs-table tbody td { height: 36px; padding-top: 2px; padding-bottom: 2px; }
/* Green: same or close, as the green square in the share text. Blue: near. */
.gs-cell.g-hit { background: var(--up); color: var(--ink); }
.gs-cell.g-near { box-shadow: inset 0 0 0 1px var(--accent); color: var(--accent); }
.gs-cell.g-miss { color: var(--text-2); }
.gs-cell.g-miss .gs-d { color: var(--dim); }
.gs-cell.g-none { color: var(--faint); }
.gs-end { display: grid; gap: 8px; padding: 4px 10px 10px; }
.gs-result { font-size: 16px; font-weight: 600; color: var(--text); }
.gs-result .gs-tk { color: var(--accent); }
.gs-sk { font-size: 11px; color: var(--dim); letter-spacing: .08em; }
.gs-next { margin-left: auto; align-self: center; font-size: 11px; letter-spacing: .06em; color: var(--dim); }
.gs-cd { color: var(--text); font-weight: 600; }
.gs-stats { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 12px; }
.gs-stats b { color: var(--text); font-weight: 600; }
.gs-share { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.gs-x { height: 24px; }
.gs-legend { padding: 8px 10px; font-size: 11px; line-height: 15px; color: var(--dim); }
@media (max-width: 639px) {
  .gs-table .gs-g { width: 18%; }
  .gs-table .gs-i { width: 3ch; }
  .gs-g .gs-nm { display: none; }
  .gs-table th, .gs-table td { padding: 0 4px; }
  .gs-table thead th { height: 28px; font-size: 10px; line-height: 12px; letter-spacing: .02em; white-space: normal; }
  .gs-cell .gs-v { font-size: 11px; }
  .gs-cell .gs-d { margin-left: 3px; }
}
/* --- end GUESS ------------------------------------------------------------------ */

/* --- SINCE on HOME (since.js): one line in the MARKETS title strip ------------ */
.since { color: var(--dim); }
.since .sn-sep { color: var(--faint); }
.since .sn-i { white-space: nowrap; }
/* Phones: the line takes its own row under the panel title, like a metaNote. */
@media (max-width: 639px) {
  .panel-head:has(.since) { flex-wrap: wrap; }
  .panel-meta:has(.since) { flex: 1 1 100%; justify-content: flex-start; text-align: left; padding-left: 8px; }
}
/* --- end SINCE ------------------------------------------------------------------ */

/* --- Phone key bar: short labels, so every key shows its whole word -------------- */
.fkey-short { display: none; }
@media (max-width: 639px) {
  .fkeys .fkey-l:has(+ .fkey-short) { display: none; }
  .fkeys .fkey-short { display: inline; }
}
/* --- end phone key bar ----------------------------------------------------------- */

/* --- ALERTS (price and gauge alerts) -------------------------------------------- */
.status-alerts {
  margin-left: auto; height: 16px; padding: 0 6px;
  border: 0; background: var(--accent); color: var(--ink);
  font-family: var(--font); font-size: 11px; font-weight: 600; letter-spacing: .08em; cursor: pointer;
}
.status-alerts:hover { background: var(--text); }
.status-alerts[hidden] { display: none; }
.al-honest { color: var(--dim); font-size: 12px; white-space: normal; }
.al-perm { color: var(--text-2); }
.al-perm .quiet { margin-left: 8px; }
.al-table .al-cond { color: var(--text); }
.al-table .al-dist { color: var(--dim); }
.al-table .last.is-stale { color: var(--dim); font-weight: 400; }
.al-stale { margin-left: 4px; color: var(--faint); font-size: 10px; letter-spacing: .06em; }
.al-table .al-st { width: 1%; white-space: nowrap; }
.al-table td.wl-act { text-align: right; }
.al-state { color: var(--dim); font-size: 11px; font-weight: 600; letter-spacing: .08em; }
.al-state.is-fired { padding: 1px 5px; background: var(--accent); color: var(--ink); }
.al-table tr.is-fired .wl-sym a { color: var(--accent); }
/* Phones: each alert is two lines, symbol, condition, state; then now, distance, actions. */
@media (max-width: 639px) {
  .al-table thead, .al-table .al-name { display: none; }
  .al-table tbody tr {
    display: grid; grid-template-columns: minmax(0, 1fr) auto auto; column-gap: 12px; align-items: center;
    grid-template-areas: "sym cond st" "now dist act";
    padding: 3px 8px;
  }
  .al-table tbody th, .al-table tbody td { height: 22px; padding: 0 !important; width: auto; }
  .al-table .wl-sym { grid-area: sym; }
  .al-table .al-cond { grid-area: cond; }
  .al-table .al-st { grid-area: st; text-align: right; }
  .al-table .last { grid-area: now; text-align: left; }
  .al-table .last::before { content: 'NOW '; color: var(--dim); font-size: 11px; font-weight: 400; letter-spacing: .06em; }
  .al-table .al-dist { grid-area: dist; }
  .al-table tbody .wl-act { grid-area: act; justify-self: end; text-align: right; }
  .al-table .wl-btn { height: 22px; }
}
/* --- end ALERTS ----------------------------------------------------------------- */

/* ---- Pro structure: seat, sponsor line, PRO breakdown, GIFT, FEEDBACK ------------ */
.brand { display: flex; align-items: baseline; gap: 12px; min-width: 0; }
.seat { font-size: 11px; font-weight: 600; letter-spacing: .12em; color: var(--accent); white-space: nowrap; }
.seat:hover { text-decoration: none; color: var(--text); }
.seat[hidden] { display: none; }
/* The sponsor line gives way first (ellipsis); the legal line and its links never do. */
/* It takes the free space between the status text and the legal block, and sits centred
   in it: clear of the legal links on every screen. */
.status-sponsor { flex: 1 1 0; min-width: 0; display: flex; justify-content: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--dim); }
.status-sponsor > .spon-item { max-width: 100%; min-width: 0; }
@media (max-width: 639px) { .status-sponsor { flex: 0 1 auto; justify-content: flex-start; } }
/* SPONSOR opens: the real strip is outlined for 2 s, so it is clear where it runs. */
.status-sponsor.is-spot { outline: 1px solid var(--accent); outline-offset: -1px; animation: spon-spot 2s ease-out; }
@keyframes spon-spot { from { box-shadow: 0 0 0 3px var(--accent-tint); } to { box-shadow: none; } }
@media (prefers-reduced-motion: reduce) { .status-sponsor.is-spot { animation: none; } }
.status-sponsor[hidden] { display: none; }
.status-sponsor .sponsor-k { margin-right: 2ch; color: var(--faint); letter-spacing: .12em; }
.status-sponsor a { color: var(--text-2); }
.status-sponsor a:hover { color: var(--text); text-decoration: none; }
/* The rotating strip (sponsor-strip.js): one line, cut with an ellipsis, a short slide up
   on each change. The status bar and the SPONSOR preview share it. */
.spon-strip { overflow: hidden; }
.spon-strip .sponsor-k { margin-right: 2ch; color: var(--faint); letter-spacing: .12em; }
.spon-strip .spon-item { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-2); }
.spon-strip a.spon-item:hover, .spon-strip a.spon-item:focus-visible { color: var(--text); text-decoration: none; }
.spon-strip a.spon-item:focus-visible { outline: 1px solid var(--accent); outline-offset: -1px; }
.spon-strip.is-sliding .spon-item { animation: spon-in 180ms linear; }
@keyframes spon-in { from { transform: translateY(100%); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .spon-strip.is-sliding .spon-item { animation: none; } }
.spon-facts { margin: 0 0 12px; border-top: 1px solid var(--rule); }
.spon-facts li { min-height: var(--row-h); padding: 3px 0; border-bottom: 1px solid var(--rule); color: var(--text-2); }
.spon-facts li.is-no { color: var(--dim); }
.spon-proofs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 24px; margin: 0 0 12px; max-width: 900px; }
.spon-h { display: flex; gap: 12px; margin: 0 0 6px; font-size: 11px; font-weight: 600; letter-spacing: .14em; color: var(--dim); }
.spon-nums { width: 100%; border-collapse: collapse; }
.spon-nums th, .spon-nums td { height: var(--row-h); padding: 0 8px 0 0; border-bottom: 1px solid var(--rule); text-align: left; font-weight: 400; color: var(--text-2); white-space: nowrap; }
.spon-nums thead th { font-size: 11px; letter-spacing: .08em; color: var(--dim); }
.spon-nums .num { text-align: right; color: var(--text); }
.spon-tile .wd-line, .spon-tile .wd-src { display: none; }
/* The bottom-row mock on SPONSOR: the status row and the key bar, small. */
.spon-mock { overflow: hidden; margin: 0 0 12px; border: 1px solid var(--rule-strong); background: var(--bg); font-size: 11px; letter-spacing: .06em; }
.spon-mock-row { display: flex; align-items: center; gap: 12px; height: 22px; padding: 0 10px; background: var(--panel); white-space: nowrap; }
.spon-mock-msg { flex: 0 0 8ch; height: 6px; background: var(--rule-strong); }
.spon-mock-strip { flex: 1 1 0; min-width: 0; display: flex; justify-content: center; outline: 1px solid var(--accent); outline-offset: 2px; }
.spon-mock-legal { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; color: var(--dim); }
.spon-mock-keys { display: flex; align-items: center; gap: 16px; height: 22px; padding: 0 10px; border-top: 1px solid var(--rule); color: var(--dim); }
.spon-mock-key { width: 7ch; height: 6px; background: var(--rule-strong); }
.spon-mock-more { flex: 1 1 auto; height: 6px; background: linear-gradient(90deg, var(--rule-strong) 0 30%, transparent 30%); }
/* A phone has less room: the mock keeps the ad line readable and the links short. */
@media (max-width: 639px) { .spon-mock-msg, .spon-mock-nfa { display: none; } .spon-mock-row { gap: 8px; } }
.spon-tile .panel-body { min-height: 0; }
@media (max-width: 639px) { .spon-proofs { grid-template-columns: minmax(0, 1fr); } }
.spon-proof { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 0 0 12px; }
.spon-proof li { white-space: nowrap; color: var(--dim); }
.panel-head > .wd-sponsor { margin-left: auto; padding-right: 0; }
.pro-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 24px; margin: 8px 0 12px; }
.pro-col-h { margin: 0 0 4px; font-size: 11px; font-weight: 600; letter-spacing: .14em; color: var(--dim); }
.pro-cols .pro-list, .pro-gifts .pro-list { margin: 0 0 8px; }
.pro-cols .pro-row, #gift-body .pro-row { grid-template-columns: minmax(0, 1fr) auto; gap: 12px; }
.pro-tag { font-size: 11px; letter-spacing: .08em; color: var(--dim); text-align: right; white-space: nowrap; }
.pro-tag.is-live { color: var(--accent); }
.pro-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 24px; }
.pro-head .fx-from { margin: 0; }
.pro-price { margin: 0; font-size: 28px; }
.pro-price .hero-unit { font-size: 14px; }
.pro-price .pro-or { color: var(--dim); }
.pro-cols .pro-row { min-height: 22px; }
#pro-year-note[hidden] { display: none; }
.stats.pro-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fb { display: grid; gap: 6px; max-width: 80ch; }
.fb-l { font-size: 11px; letter-spacing: .08em; color: var(--dim); }
.fb-msg, .fb-email {
  width: 100%; padding: 6px 8px; border: 1px solid var(--rule-strong); border-radius: 0;
  background: var(--bg); color: var(--text); font: inherit;
}
.fb-msg { min-height: 96px; max-height: 32vh; resize: vertical; line-height: 1.5; }
.fb-msg:focus, .fb-email:focus { outline: 1px solid var(--accent); outline-offset: 0; }
.fb-count { margin: 0; font-size: 11px; color: var(--dim); text-align: right; }
.fb-hp { position: absolute; left: -10000px; width: 1px; height: 1px; opacity: 0; }
.fb .pro-actions { margin: 4px 0 0; }
.fb-keys { font-size: 11px; }
.fb-mail { margin-top: 8px; }
@media (max-width: 639px) {
  .pro-cols { grid-template-columns: minmax(0, 1fr); }
  .pro-cols .pro-row, #gift-body .pro-row { padding: 0; }
  .stats.pro-stats { grid-template-columns: minmax(0, 1fr); }
  /* A seat by the name: the name and the seat tighten so the clock keeps its room. */
  .brand { gap: 6px; }
  .brand:has(.seat:not([hidden])) .wordmark { letter-spacing: .04em; }
  .seat { font-size: 10px; letter-spacing: .04em; }
  .status-legal { gap: 6px; }
  .fb-keys { display: none; }
}
@media (max-width: 379px) {
  .seat { display: none; }
}

/* ---- WHY: biggest daily moves and what came out that day ------------------------ */
.dt.why-dt { width: 100%; max-width: none; }
.dt.why-dt td { vertical-align: top; padding-top: 4px; padding-bottom: 4px; height: auto; }
.dt.why-dt td.why-what { width: 100%; max-width: 0; white-space: normal; }
.why-dt .why-date { white-space: nowrap; }
.why-it { display: flex; gap: 8px; min-width: 0; line-height: 16px; }
.why-tag { flex: 0 0 5ch; color: var(--accent); font-size: 11px; letter-spacing: .04em; }
.why-link { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); }
a.why-link:hover { color: var(--accent); text-decoration: none; }
.why-filing .why-link { color: var(--text); }
.why-news .why-link { color: var(--text-2); }
.why-more { display: block; font-size: 11px; line-height: 16px; padding-left: calc(5ch + 8px); }
@media (max-width: 639px) {
  .why-link { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .why-tag { flex-basis: 4ch; }
}

/* ---- NEWS push: the LIVE marker in the title strip (filled: streaming, hollow: polling) */
.news-live { display: inline-block; margin-right: 8px; padding: 0 4px; border: 1px solid var(--accent); color: var(--accent); font-weight: 700; letter-spacing: .08em; line-height: 13px; }
.news-live.is-on { background: var(--accent); color: var(--ink); }

/* ---- A source line a data licence asks for (the New York Fed on RATES and FEDPATH) ---- */
.src-note { margin: 6px 0 0; padding: 0 10px 4px; font-size: 11px; letter-spacing: .04em; color: var(--dim); }
.src-note a { color: var(--accent); }