/* 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; }
.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;
}
/* 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 CBOE, 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); }
/* 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(-4deg) scale(1.25); opacity: 0; } to { transform: rotate(-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-groups { columns: 4 250px; column-gap: 12px; outline: 0; }
.wi-group { break-inside: avoid; margin-bottom: 12px; border: 1px solid var(--rule); background: var(--bg); }
.wi-co { margin: 0; padding: 0 8px; height: 22px; display: flex; align-items: center; gap: 8px; background: var(--panel); border-bottom: 1px solid var(--rule); font-size: 11px; font-weight: 600; letter-spacing: .1em; color: var(--accent); }
.wi-item {
  display: grid; grid-template-columns: 3ch minmax(0, 1fr) auto; align-items: center; gap: 8px;
  min-height: var(--row-h); padding: 0 8px;
  cursor: pointer; user-select: none; color: var(--text-2);
}
.wi-item:hover { background: var(--panel-2); }
.wi-item:focus { outline: 0; background: var(--panel-3); box-shadow: inset 2px 0 0 var(--accent); }
.wi-item.is-on { color: var(--text); }
.wi-box { color: var(--faint); }
.wi-item.is-on .wi-box { color: var(--accent); font-weight: 600; }
.wi-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wi-meta { color: var(--dim); font-size: 12px; white-space: nowrap; }
.wi-years input {
  width: 10ch; 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; }
/* The RUN bar sticks right on the dock (no gap for rows to show through), and the
   list keeps the bar's height clear below it: a row moved to by keys or by the last
   scroll is never under the bar. */
.wi-groups { --wi-bar-h: 40px; padding-bottom: var(--wi-bar-h); }
.wi-groups .wi-item { scroll-margin-bottom: calc(var(--wi-bar-h) + 8px); }
@media (max-width: 639px) { .wi-groups { --wi-bar-h: 64px; } }
.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);
  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-keys { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.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-sentence { font-size: 16px; color: var(--text-2); }
.wi-sentence .num { color: var(--text); font-weight: 600; }
.wi-sentence .up, .hero-value.up { color: var(--up); }
.wi-sentence .down, .hero-value.down { color: var(--down); }
.wi-mult { font-size: 18px; font-weight: 600; }
.wi-mult span + span { margin-left: 12px; }
.wi-quip { margin-top: 8px; color: var(--text-2); }
.wi-risk { margin-top: 6px; color: var(--text-2); font-size: 12px; }
.wi-risk-list { margin-top: 8px; color: var(--text-2); font-size: 12px; }
.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: 12px; }
.wi-note-name { color: var(--text); }
.how-list a { color: var(--accent); }

/* 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" "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 body"; grid-template-rows: auto 1fr; align-items: start; }
}
.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; }

/* ---- 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-groups { columns: 1; }
  .wi-keys { display: none; }
  .wi-bar { gap: 8px; }
  .wi-cmd { flex-basis: 100%; order: 3; }
  .wi-run { margin-left: auto; }
  .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-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; }
  .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 td.is-derived { text-decoration: underline dotted var(--dim); text-underline-offset: 3px; }
.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; }
/* 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; }
}

/* --- 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 -------------------------------------------------------------- */

/* --- 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 ----------------------------------------------------------------- */