/* QuantDesk Terminal — minimalist monochrome. Colour carries meaning only:
   muted green = up, muted red = down. Every colour is a token below.
   Self-hosted font, no external assets (CSP self-only). */
@font-face { font-family: "JetBrains Mono"; font-weight: 400; font-style: normal; font-display: swap;
  src: url("/static/fonts/jetbrains-mono-latin-400-normal.woff2?v=14425ba9c695") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-weight: 500; font-style: normal; font-display: swap;
  src: url("/static/fonts/jetbrains-mono-latin-500-normal.woff2?v=cb182feeed4d") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-weight: 700; font-style: normal; font-display: swap;
  src: url("/static/fonts/jetbrains-mono-latin-700-normal.woff2?v=d0d4e818808f") format("woff2"); }

:root {
  /* surfaces */
  --bg: #000000; --panel: #050505; --head: #0d0d0d; --bar: #070707; --input: #000000;
  /* grey scale: borders, rules, grid */
  --border: #2a2a2a; --rule: #171717; --grid: #121212; --scroll: #333333;
  /* text */
  --fg: #d6d6d6; --fg-hi: #ffffff; --fg-dim: #8c8c8c; --fg-faint: #555555; --on-hi: #000000;
  /* meaning */
  --up: #5fa77c; --down: #c0605c;
  --up-a: rgba(95, 167, 124, .35); --down-a: rgba(192, 96, 92, .35);
  --up-flash: rgba(95, 167, 124, .45); --down-flash: rgba(192, 96, 92, .45);
  /* status, not price: --ok (fresh / healthy / met) and --err (failed, stale bot, errors,
     warnings). Same hues as up / down here; in mono they stay apart (see below) */
  --ok: #5fa77c; --err: #c0605c;
  /* the single optional highlight: selection / focus */
  --sel: #1b1b1b; --hover: #101010; --focus: #ffffff;
  /* chart */
  --chart-text: #8c8c8c; --chart-grid: #121212; --chart-border: #2a2a2a; --chart-cross: #555555;
  --chart-vol: #333333; --level-above: #9a9a9a; --level-below: #d6d6d6;
  --ind-1: #ffffff; --ind-2: #a6a6a6; --ind-3: #6b6b6b; --ind-4: #c8c8c8; --ind-5: #868686; --ind-6: #4f4f4f;
  /* indicator fills and drawings: grey alpha only (Ichimoku cloud A ≥ B lighter, B > A darker) */
  --ind-cloud-up: rgba(255, 255, 255, .10); --ind-cloud-dn: rgba(255, 255, 255, .04);
  --ind-vp: rgba(255, 255, 255, .07); --ind-vp-va: rgba(255, 255, 255, .16);
  --draw: #c8c8c8; --draw-sel: #ffffff; --draw-fill: rgba(255, 255, 255, .06);
  --legend-bg: rgba(0, 0, 0, .72);   /* indicator legend backing: readable over level lines */
  /* reactive intro / login background, crown sheen, heatmap ceiling */
  --fx-line: #ffffff; --sheen-base: #bdbdbd; --sheen-hi: #ffffff; --heat-max: .9;
  /* BOOK heatmap: grey ramp lo → hi; empty bucket; not covered / gap; mid line + its edge; gap mark */
  --book-lo: #1c1c1c; --book-hi: #d8d8d8; --book-zero: #0b0b0b; --book-na: #000000; --book-mid: #ffffff;
  --book-mid-edge: #000000; --book-gap: #6b6b6b;
  --font: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  /* LOOK & LAYOUT (SET): font scale and density; compact = the original spacing */
  --fs: 1; --lh: 1.35; --td-py: 1px; --td-px: 3px; --th-py: 2px; --hd-py: 2px; --body-p: 2px 4px; --gap: 3px;
  --kv-gap: 1px; --news-py: 3px; --watch-w: calc(468px * var(--fs)); --side-w: calc(350px * var(--fs));
}
/* LOOK & LAYOUT alternatives: still monochrome tokens (high contrast = greys pushed toward white) */
:root[data-font="s"] { --fs: .9; }
:root[data-font="l"] { --fs: 1.15; }
:root[data-density="comfortable"] { --lh: 1.45; --td-py: 4px; --td-px: 5px; --th-py: 4px; --hd-py: 4px; --body-p: 5px 8px;
  --gap: 6px; --kv-gap: 4px; --news-py: 6px; }
:root[data-contrast="high"] {
  --head: #151515; --bar: #0b0b0b;
  --border: #5c5c5c; --rule: #2f2f2f; --grid: #1d1d1d; --scroll: #5c5c5c;
  --fg: #f2f2f2; --fg-hi: #ffffff; --fg-dim: #c6c6c6; --fg-faint: #9c9c9c;
  --up: #7fd6a0; --down: #f08a85; --ok: #7fd6a0; --err: #f08a85;
  --up-a: rgba(127, 214, 160, .42); --down-a: rgba(240, 138, 133, .42);
  --up-flash: rgba(127, 214, 160, .5); --down-flash: rgba(240, 138, 133, .5);
  --sel: #282828; --hover: #191919;
  --chart-text: #c6c6c6; --chart-grid: #1d1d1d; --chart-border: #5c5c5c; --chart-cross: #9c9c9c;
  --chart-vol: #4c4c4c; --level-above: #cacaca; --level-below: #f2f2f2;
  --ind-2: #d0d0d0; --ind-3: #9c9c9c; --ind-4: #e6e6e6; --sheen-base: #d6d6d6;
  --book-lo: #2c2c2c; --book-hi: #f2f2f2; --book-zero: #141414; --book-gap: #9c9c9c;
}
:root[data-updown="mono"] {
  --up: #ffffff; --down: #8c8c8c;
  --ok: #8c8c8c; --err: #ffffff;          /* mono: an alarm is the brightest thing, never greyed out */
  --up-a: rgba(255, 255, 255, .26); --down-a: rgba(140, 140, 140, .3);
  --up-flash: rgba(255, 255, 255, .3); --down-flash: rgba(140, 140, 140, .36); --heat-max: .5;
  --book-hi: #ffffff;                     /* BOOK is greys anyway: the ramp only tops out at white */
}
:root[data-contrast="high"][data-updown="mono"] { --down: #b4b4b4; --ok: #b4b4b4; --down-a: rgba(180, 180, 180, .3);
  --down-flash: rgba(180, 180, 180, .36); }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--fg); }
body { font: calc(11px * var(--fs))/var(--lh) var(--font); font-variant-numeric: tabular-nums; display: flex;
  flex-direction: column; overflow: hidden; -webkit-font-smoothing: antialiased; }
a { color: var(--fg); text-decoration: none; }
a:hover { color: var(--fg-hi); text-decoration: underline; }
button, select { font: inherit; color: var(--fg); background: var(--head); border: 1px solid var(--border);
  padding: 1px 6px; cursor: pointer; text-transform: uppercase; }
select { text-transform: none; padding: 0 2px; }
input[type=number], input[type=text], input[type=search] { font: inherit; color: var(--fg-hi); background: var(--input);
  border: 1px solid var(--border); padding: 1px 4px; outline: 0; }
input:focus, select:focus { border-color: var(--focus); }
button:hover { border-color: var(--fg-dim); color: var(--fg-hi); }
button.on { background: var(--fg-hi); color: var(--on-hi); border-color: var(--fg-hi); }
:focus-visible { outline: 1px solid var(--focus); outline-offset: -1px; }
.hidden { display: none !important; }
.dim { color: var(--fg-dim); }
.faint { color: var(--fg-faint); }
.up { color: var(--up); }
.down { color: var(--down); }
/* status classes (not price direction): healthy / met, and failure / warning */
.okc { color: var(--ok); }
.err:not(.cmd), .warn { color: var(--err); }   /* .cmd.err is the command bar's border only */
:root[data-updown="mono"] :is(.err:not(.cmd):not(.dot), .warn, .cmdmsg, .setmsg.bad, .login .msg) { font-weight: 700; text-decoration: underline;
  text-underline-offset: 2px; }
:root[data-updown="mono"] .dot.err::before { border-radius: 0; }   /* a failed feed: a white square, not a dot */
.hi { color: var(--fg-hi); font-weight: 700; }
.na { color: var(--fg-faint); cursor: help; border-bottom: 1px dotted var(--fg-faint); }
.unavail { color: var(--fg-hi); font-weight: 700; letter-spacing: .04em; padding: 6px 2px; }
.unavail .why { display: block; color: var(--fg-dim); font-weight: 400; letter-spacing: 0; margin-top: 2px; }
.stale-badge { border: 1px solid var(--fg-hi); color: var(--fg-hi); font-weight: 700; padding: 0 3px; margin-left: 4px;
  font-size: calc(9.5px * var(--fs)); letter-spacing: .06em; }

/* demo banner: inverted, impossible to miss */
.demo-banner { background: var(--fg-hi); color: var(--on-hi); font-weight: 700; text-align: center;
  letter-spacing: .12em; padding: 2px 0; flex: none; border-bottom: 2px solid var(--bg); }

/* top bar */
.topbar { display: flex; align-items: center; gap: 10px; padding: 3px 6px; border-bottom: 1px solid var(--border);
  background: var(--bar); flex: none; min-height: 32px; position: relative; z-index: 30; }
.brand { font-weight: 700; letter-spacing: .14em; white-space: nowrap; color: var(--fg-hi); }
.cmd { display: flex; align-items: center; flex: 0 1 460px; min-width: 200px; border: 1px solid var(--border);
  background: var(--input); position: relative; }
.cmd:focus-within { border-color: var(--focus); }
.cmd .prompt { padding: 0 4px 0 6px; color: var(--fg-hi); }
.cmd input { flex: 1; min-width: 0; background: transparent; border: 0; outline: 0; color: var(--fg-hi);
  font: inherit; font-size: calc(12px * var(--fs)); text-transform: uppercase; padding: 4px 2px; }
.cmd input::placeholder { color: var(--fg-faint); text-transform: none; }
.cmd .go { border: 0; border-left: 1px solid var(--border); background: var(--fg-hi); color: var(--on-hi); font-weight: 700; }
.cmd.err { border-color: var(--err); }
.cmdmsg { color: var(--err); white-space: nowrap; }
.macro { display: flex; gap: 14px; flex: 1; overflow: hidden; white-space: nowrap; justify-content: flex-end; }
.macro .m { display: inline-flex; gap: 5px; align-items: baseline; }
.macro .k { color: var(--fg-dim); }
.fkeys { display: flex; gap: 3px; flex: none; }

/* autocomplete */
.ac { position: absolute; left: -1px; right: -1px; top: 100%; background: var(--bg); border: 1px solid var(--focus);
  z-index: 60; max-height: 60vh; overflow: auto; }
.ac .opt { display: grid; grid-template-columns: 88px 1fr auto; gap: 8px; padding: 2px 6px; cursor: pointer;
  border-bottom: 1px solid var(--rule); white-space: nowrap; }
.ac .opt .code { color: var(--fg-hi); font-weight: 700; }
.ac .opt .desc { color: var(--fg-dim); overflow: hidden; text-overflow: ellipsis; }
.ac .opt .cat { color: var(--fg-faint); font-size: calc(10px * var(--fs)); }
.ac .opt.on { background: var(--sel); }
.ac .opt.on .desc { color: var(--fg); }

/* grid + layouts */
.grid { flex: 1; min-height: 0; display: grid; gap: var(--gap); padding: var(--gap);
  grid-template-columns: var(--watch-w) minmax(0, 1fr) minmax(0, 1fr) var(--side-w);
  grid-template-rows: 1.25fr 1fr 1fr .95fr;
  grid-template-areas: "watch chart chart derivs" "watch chart chart levels"
                       "watch desk record news" "watch alts cal news"; }
#p-watch { grid-area: watch; } #p-chart { grid-area: chart; } #p-derivs { grid-area: derivs; }
#p-levels { grid-area: levels; } #p-desk { grid-area: desk; } #p-record { grid-area: record; }
#p-alts { grid-area: alts; } #p-news { grid-area: news; } #p-cal { grid-area: cal; }
/* F1 custom slots (SET → LOOK & LAYOUT): a panel takes the grid area named in data-area */
body.layout-1 #grid > [data-area="chart"] { grid-area: chart; } body.layout-1 #grid > [data-area="derivs"] { grid-area: derivs; }
body.layout-1 #grid > [data-area="levels"] { grid-area: levels; } body.layout-1 #grid > [data-area="desk"] { grid-area: desk; }
body.layout-1 #grid > [data-area="record"] { grid-area: record; } body.layout-1 #grid > [data-area="alts"] { grid-area: alts; }
body.layout-1 #grid > [data-area="news"] { grid-area: news; } body.layout-1 #grid > [data-area="cal"] { grid-area: cal; }

body.layout-2 .grid { grid-template-rows: 1fr 1fr; grid-template-columns: var(--watch-w) minmax(0, 1fr) calc(380px * var(--fs));
  grid-template-areas: "watch chart derivs" "watch chart levels"; }
body.layout-2 :is(#p-desk, #p-record, #p-alts, #p-news, #p-cal) { display: none; }
body.layout-3 .grid { grid-template-rows: 1fr; grid-template-columns: var(--watch-w) minmax(0, 1.4fr) minmax(0, 1fr);
  grid-template-areas: "watch news cal"; }
body.layout-3 :is(#p-chart, #p-derivs, #p-levels, #p-desk, #p-record, #p-alts) { display: none; }
body.layout-4 .grid { grid-template-rows: 1fr 1fr; grid-template-columns: var(--watch-w) minmax(0, 1.3fr) minmax(0, 1fr);
  grid-template-areas: "watch desk record" "watch alts levels"; }
body.layout-4 :is(#p-chart, #p-derivs, #p-news, #p-cal) { display: none; }
body.fn-open .grid, body.layout-5 .grid { display: none; }

/* panels */
.panel { display: flex; flex-direction: column; min-height: 0; min-width: 0; border: 1px solid var(--border);
  background: var(--panel); }
.panel > header { display: flex; align-items: center; gap: 8px; background: var(--head); padding: var(--hd-py) 6px;
  border-bottom: 1px solid var(--border); flex: none; min-height: 20px; }
.panel > header h2 { margin: 0; font-size: calc(11px * var(--fs)); font-weight: 700; letter-spacing: .1em; color: var(--fg-hi);
  white-space: nowrap; }
.panel > header .fk { color: var(--on-hi); background: var(--fg-dim); padding: 0 3px; font-weight: 700; font-size: calc(10px * var(--fs)); }
.panel > header .meta { margin-left: auto; color: var(--fg-dim); white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; font-size: calc(10px * var(--fs)); max-width: 60%; }
.panel > header .tools { display: flex; gap: 2px; flex-wrap: wrap; }
/* views: meta truncates, PIN / × never wrap */
#fnwrap header .tools, #slots header .tools { flex: none; flex-wrap: nowrap; }
#fnwrap header .meta, #slots header .meta { min-width: 0; }
.panel .body { flex: 1; min-height: 0; overflow: auto; padding: var(--body-p); }
.panel .body::-webkit-scrollbar, .fnbody::-webkit-scrollbar { width: 6px; height: 6px; }
.panel .body::-webkit-scrollbar-thumb, .fnbody::-webkit-scrollbar-thumb { background: var(--scroll); }
.panel > footer { flex: none; border-top: 1px solid var(--rule); padding: 1px 6px; color: var(--fg-faint);
  font-size: calc(10px * var(--fs)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.panel.pulse { animation: pulse .8s ease-out 2; }
@keyframes pulse { 50% { border-color: var(--focus); } }
.paper-tag { color: var(--on-hi); background: var(--fg-dim); font-weight: 700; padding: 0 4px; font-size: calc(10px * var(--fs));
  white-space: nowrap; }

/* tables */
table.tbl { width: 100%; border-collapse: collapse; }
.tbl th { position: sticky; top: 0; z-index: 1; background: var(--panel); color: var(--fg-dim); font-weight: 500;
  text-align: right; padding: var(--th-py) var(--td-px); border-bottom: 1px solid var(--border); white-space: nowrap;
  cursor: default; user-select: none; text-transform: uppercase; }
.tbl th.l, .tbl td.l { text-align: left; }
.tbl th.c, .tbl td.c { text-align: center; }
.tbl th.sortable { cursor: pointer; }
.tbl th.sorted { color: var(--fg-hi); }
.tbl td { padding: var(--td-py) var(--td-px); text-align: right; white-space: nowrap; border-bottom: 1px solid var(--rule); }
.tbl tr.row { cursor: pointer; }
.tbl tr.row:hover td { background: var(--hover); }
.tbl tr.row:has(+ tr.tps) td { border-bottom: 0; }
.tbl tr.tps td { font-size: calc(10px * var(--fs)); padding-top: 0; }
.tbl tr.sel td { background: var(--sel); color: var(--fg-hi); }
.tbl tr.sel td:first-child { box-shadow: inset 2px 0 0 var(--focus); }
.tbl tr.group td { color: var(--fg-faint); font-size: calc(10px * var(--fs)); letter-spacing: .1em; padding-top: 4px; cursor: default; }
.tbl tr.mark td { color: var(--on-hi); background: var(--fg-hi); font-weight: 700; }
.tbl td.atm { border-top: 1px solid var(--fg-dim); }
.tbl td.k { color: var(--fg-hi); font-weight: 700; background: var(--head); text-align: center; }
/* price flash: an opacity fade on a tint layer under the text — runs on the compositor,
   no per-frame style recalc (matters on phones). -b = same flash, new name, so a repeat restarts */
td.flash-up, td.flash-down, td.flash-up-b, td.flash-down-b { position: relative; z-index: 0; }
td.flash-up::before, td.flash-down::before, td.flash-up-b::before, td.flash-down-b::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0;
  animation: flash 1s ease-out; }
td.flash-up-b::before, td.flash-down-b::before { animation-name: flash-b; }
td.flash-up::before, td.flash-up-b::before { background: var(--up-flash); }
td.flash-down::before, td.flash-down-b::before { background: var(--down-flash); }
@keyframes flash { 0% { opacity: 1; } 100% { opacity: 0; } }
@keyframes flash-b { 0% { opacity: 1; } 100% { opacity: 0; } }
.bias-LONG { color: var(--up); } .bias-SHORT { color: var(--down); } .bias-MIXED { color: var(--fg-hi); }
/* ▲ ▼ markers next to up / down numbers (SET; always on in mono): shape, not only colour */
:root[data-arrows="on"] td.up:not(.l)::before, :root[data-arrows="on"] .kv .v.up::before,
:root[data-arrows="on"] .ticker .ti.up .tx::before { content: "\25B2\00A0"; font-size: .78em; }
:root[data-arrows="on"] td.down:not(.l)::before, :root[data-arrows="on"] .kv .v.down::before,
:root[data-arrows="on"] .ticker .ti.down .tx::before { content: "\25BC\00A0"; font-size: .78em; }
:root[data-updown="mono"] td.up, :root[data-updown="mono"] .kv .v.up, :root[data-updown="mono"] .ticker .ti.up .tx,
:root[data-updown="mono"] .bias-LONG { font-weight: 700; }

/* key/value lists */
.kv { display: grid; grid-template-columns: max-content 1fr; gap: var(--kv-gap) 10px; padding: 2px 0; }
.kv .k { color: var(--fg-dim); white-space: nowrap; }
.kv .v { text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sub { color: var(--fg-dim); font-size: calc(10px * var(--fs)); letter-spacing: .1em; margin: 5px 0 1px;
  border-bottom: 1px solid var(--rule); display: flex; justify-content: space-between; gap: 6px;
  text-transform: uppercase; }
.sub > span:first-child { white-space: nowrap; flex: none; }
.sub .src { color: var(--fg-faint); letter-spacing: 0; overflow: hidden; text-overflow: ellipsis; text-transform: none;
  white-space: nowrap; min-width: 0; flex: 1; text-align: right; }
canvas.spark { width: 100%; height: 34px; display: block; }

/* chart */
#p-chart .body { padding: 0; position: relative; }
#chart { position: absolute; inset: 0; }
.chart-label { position: absolute; left: 6px; top: 4px; z-index: 5; pointer-events: none; display: flex;
  flex-direction: column; gap: 1px; }
.chart-label .big { font-size: calc(13px * var(--fs)); font-weight: 700; color: var(--fg-hi); }
.chart-label .band { color: var(--on-hi); background: var(--fg-hi); padding: 0 4px; align-self: flex-start; font-weight: 700; }
.chart-msg { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; z-index: 6;
  pointer-events: none; text-align: center; }
.tfbtn.on { background: var(--fg-hi); color: var(--on-hi); }

/* chart extras: indicator legend / menu, drawing toolbar (indui.js, draw.js) */
.xbtn { margin-left: 4px; }
.chart-hint { position: absolute; left: 50%; bottom: 34px; transform: translateX(-50%); z-index: 9; background: var(--bg);
  border: 1px solid var(--border); color: var(--fg-hi); padding: 2px 8px; pointer-events: none; white-space: nowrap; max-width: 92%;
  overflow: hidden; text-overflow: ellipsis; }
.ind-legend { position: absolute; left: 6px; top: 54px; z-index: 7; display: flex; flex-direction: column; gap: 0; max-width: 70%;
  pointer-events: none; font-size: calc(10px * var(--fs)); }
.ind-legend.ind-pane { top: 0; }
.ind-row { display: flex; gap: 6px; align-items: center; white-space: nowrap; pointer-events: auto; background: var(--legend-bg);
  padding: 0 3px; align-self: flex-start; max-width: 100%; }
.ind-row.off { opacity: .45; }
.ind-row .ind-nm { border: 0; background: transparent; padding: 0; color: var(--fg-dim); font-size: calc(10px * var(--fs)); text-transform: none; }
.ind-row .ind-nm:hover { color: var(--fg-hi); }
.ind-row .ind-val { color: var(--fg); overflow: hidden; text-overflow: ellipsis; }
.ind-row .ind-b { border: 0; background: transparent; padding: 0 2px; color: var(--fg-faint); font-size: calc(10px * var(--fs)); visibility: hidden; }
.ind-row:hover .ind-b, .ind-row .ind-b:focus-visible { visibility: visible; }
.ind-menu { position: absolute; right: 60px; top: 4px; z-index: 20; width: 430px; max-width: calc(100% - 8px); max-height: calc(100% - 30px);
  overflow: auto; background: var(--bg); border: 1px solid var(--focus); padding: 4px 6px; }
.ind-mh { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--border); padding-bottom: 3px; }
.ind-mr { display: flex; flex-wrap: wrap; gap: 3px 6px; align-items: center; padding: 3px 0; }
.ind-it { border-bottom: 1px solid var(--rule); padding: 2px 0; }
.ind-it.focus { background: var(--sel); }
.ind-err { color: var(--err); min-height: 0; font-size: calc(10px * var(--fs)); }
.ind-err:empty { display: none; }
input.ind-num { width: 58px; } input.ind-name { width: 110px; text-transform: uppercase; }
input.bad { border-color: var(--down); }
.ind-picking, .draw-armed { cursor: crosshair; }
.draw-hover { cursor: pointer; }
.draw-bar { position: absolute; top: 2px; right: 64px; z-index: 8; display: flex; flex-wrap: wrap; gap: 2px; max-width: calc(100% - 140px);
  justify-content: flex-end; background: var(--bg); border: 1px solid var(--border); padding: 2px; }
.draw-bar button { padding: 0 4px; font-size: calc(10px * var(--fs)); }
.draw-bar .sep { width: 1px; background: var(--border); margin: 0 2px; }
.draw-count { align-self: center; font-size: calc(10px * var(--fs)); padding: 0 2px; }
.draw-pop { position: absolute; z-index: 21; background: var(--bg); border: 1px solid var(--focus); padding: 4px 6px; display: flex;
  flex-wrap: wrap; gap: 4px; align-items: center; max-width: 260px; }
.draw-pop.wide { max-width: 340px; }

/* gate */
.gate { margin: 3px 0; }
.bar { height: 7px; border: 1px solid var(--fg-dim); position: relative; margin: 2px 0 4px; }
.bar > i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--fg-hi); }
.met { color: var(--ok); } .unmet { color: var(--fg-dim); }

/* news / calendar */
.news-item { padding: var(--news-py) 0; border-bottom: 1px solid var(--rule); }
.news-item .row1 { display: flex; gap: 6px; color: var(--fg-dim); font-size: calc(10px * var(--fs)); flex-wrap: wrap; }
.news-item .t1 { color: var(--on-hi); background: var(--fg-hi); padding: 0 3px; font-weight: 700; }
.news-item a { display: block; color: var(--fg); }
.tag { color: var(--fg-hi); border: 1px solid var(--fg-faint); padding: 0 3px; font-size: calc(10px * var(--fs)); }
.countdown { font-size: calc(20px * var(--fs)); font-weight: 700; color: var(--fg-hi); letter-spacing: .04em; }
.next { padding: 4px 0 6px; border-bottom: 1px solid var(--border); margin-bottom: 3px; }
.imp-high { color: var(--on-hi); background: var(--fg-hi); padding: 0 3px; font-weight: 700; }
.imp-medium { color: var(--fg-dim); border: 1px solid var(--fg-faint); padding: 0 3px; }
.imp-low { color: var(--fg-faint); }

/* status bar */
.statusbar { flex: none; display: flex; align-items: center; gap: 14px; padding: 2px 6px; border-top: 1px solid var(--border);
  background: var(--bar); white-space: nowrap; overflow: hidden; font-size: calc(10.5px * var(--fs)); min-height: 20px; }
.statusbar .clk { color: var(--fg-hi); }
.dots { display: flex; gap: 8px; overflow: hidden; }
.dot { display: inline-flex; align-items: center; gap: 3px; color: var(--fg-dim); cursor: help; }
.dot::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--fg-faint); }
.dot.ok::before { background: var(--ok); }
.dot.stale::before { background: transparent; border: 1px solid var(--fg-hi); width: 5px; height: 5px; }
.dot.err::before { background: var(--err); }
.statusbar .right { margin-left: auto; display: flex; gap: 12px; }

/* help overlay (legacy) */
.help { position: fixed; left: 50%; top: 60px; transform: translateX(-50%); z-index: 50; background: var(--bg);
  border: 1px solid var(--focus); padding: 10px 14px; min-width: 420px; max-width: 92vw; }
.help h3 { margin: 0 0 6px; font-size: calc(12px * var(--fs)); letter-spacing: .1em; }
.help td { padding: 1px 10px 1px 0; vertical-align: top; }

/* ── function views ─────────────────────────────────────────────────────── */
.fnwrap { flex: 1; min-height: 0; display: flex; padding: 3px; }
.fnwrap > .panel { flex: 1; }
.slots { flex: 1; min-height: 0; display: grid; gap: 3px; padding: 3px;
  grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); }
.slots.n6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.slot-empty { display: flex; align-items: center; justify-content: center; color: var(--fg-faint);
  border: 1px dashed var(--border); text-align: center; padding: 8px; }
.fnbody { flex: 1; min-height: 0; overflow: auto; padding: 3px 6px; position: relative; }
.fnbody.chartbody { padding: 0; display: flex; flex-direction: column; overflow: hidden; }
.chartbox { position: relative; flex: 1; min-height: 120px; }
.fnbar { display: flex; flex-wrap: wrap; gap: 3px 8px; align-items: center; padding: 3px 6px;
  border-bottom: 1px solid var(--rule); flex: none; }
.fnbar label { color: var(--fg-dim); display: inline-flex; gap: 3px; align-items: center; white-space: nowrap; }
.fnbar .grp { display: inline-flex; gap: 2px; align-items: center; }
.fntools:empty { display: none; }
.fntools { background: var(--panel); }
.tbl.wrap td { white-space: normal; vertical-align: top; }
.wrapkv .kv .v { white-space: normal; text-align: left; }
.cols.wide { grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); }
/* HELP: the last block clears the footer note; column headers do not pile up at the top when scrolled */
.fnbody.helpbody { padding-bottom: calc(24px * var(--fs)); }
.helpbody .tbl th { position: static; }
.fnfoot { flex: none; border-top: 1px solid var(--rule); padding: 1px 6px; color: var(--fg-faint); font-size: calc(10px * var(--fs));
  white-space: normal; }
.cols { display: grid; gap: 4px 12px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); align-items: start; }
.big-num { font-size: calc(18px * var(--fs)); font-weight: 700; color: var(--fg-hi); }
.note { color: var(--fg-faint); font-size: calc(10px * var(--fs)); margin: 3px 0; }
.attrib { color: var(--fg-faint); font-size: calc(10px * var(--fs)); }
.pill { border: 1px solid var(--border); padding: 0 4px; color: var(--fg-dim); white-space: nowrap; }

/* v3: estimate badge (inverted outline, monochrome), inline magnitude bars */
.est-badge { display: inline-block; border: 1px solid var(--fg-hi); color: var(--fg-hi); font-weight: 700; letter-spacing: .08em;
  font-size: calc(10px * var(--fs)); padding: 1px 6px; margin: 3px 0; }
.mbar { display: inline-block; height: 7px; margin-right: 4px; vertical-align: middle; }
.up-bg { background: var(--up-a); } .down-bg { background: var(--down-a); }

/* WEI: the stacked meta line only shows on a phone */
.tbl.wei .m { display: none; }

/* heatmap: the one place colour intensity is allowed */
.heat { display: flex; flex-wrap: wrap; gap: 2px; align-content: flex-start; }
.tile { display: flex; flex-direction: column; justify-content: center; align-items: center; overflow: hidden;
  color: var(--fg-hi); border: 1px solid var(--bg); cursor: pointer; min-width: 54px; min-height: 40px; text-align: center; }
.tile .s { font-weight: 700; letter-spacing: .04em; }
.tile .p { font-size: calc(10px * var(--fs)); }
.tile.na-tile { background: var(--head); color: var(--fg-faint); }

/* correlation matrix */
.corr td { min-width: 44px; text-align: center; }
.corr td.lab, .corr th { color: var(--fg-dim); }

/* toasts */
.toasts { position: fixed; right: 10px; bottom: 28px; z-index: 80; display: flex; flex-direction: column; gap: 4px; }
.toast { background: var(--bg); border: 1px solid var(--fg-hi); color: var(--fg-hi); padding: 6px 10px; min-width: 240px;
  max-width: 380px; box-shadow: 0 0 0 1px var(--bg); }
.toast .t { font-weight: 700; letter-spacing: .06em; }

/* US stocks: NY session badge (monochrome; OPEN inverted) */
.sess { font-size: calc(9px * var(--fs)); letter-spacing: .06em; padding: 0 3px; border: 1px solid var(--fg-faint); color: var(--fg-dim);
  font-weight: 400; }
.sess-OPEN { background: var(--fg-hi); color: var(--on-hi); border-color: var(--fg-hi); }
.sess-PRE, .sess-POST { color: var(--fg); border-color: var(--fg-dim); }

/* headline ticker: one transform animation (compositor only), pauses on hover */
.ticker { flex: none; overflow: hidden; white-space: nowrap; height: 18px; line-height: 17px; font-size: calc(10.5px * var(--fs));
  border-bottom: 1px solid var(--border); background: var(--bg); color: var(--fg-dim); position: relative; z-index: 20; }
.ticker .track { display: inline-flex; will-change: transform; animation: tick 60s linear infinite; }
.ticker .copy, .ticker .dup { display: inline-flex; flex: none; }
.ticker:hover .track, .ticker.paused .track, .ticker.idle .track { animation-play-state: paused; }
.ticker.idle .track { animation: none; }
.ticker .ti { padding: 0 16px 0 0; display: inline-flex; gap: 5px; }
.ticker .ti::after { content: "·"; color: var(--fg-faint); margin-left: 11px; }
.ticker .tg { color: var(--fg-hi); font-weight: 700; letter-spacing: .06em; }
.ticker .tx { color: var(--fg); }
.ticker .ti.up .tx { color: var(--up); } .ticker .ti.down .tx { color: var(--down); }
.ticker .ti.idle { color: var(--fg-faint); padding-left: 6px; }
.ticker .ti.idle::after { content: none; }
@keyframes tick { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .ticker { overflow-x: auto; scrollbar-width: none; }
  .ticker .track { animation: none; transform: none; }
  .ticker .dup { display: none; }
}

/* spoken-brief caption */
.briefcap { position: fixed; left: 50%; bottom: 30px; transform: translateX(-50%); z-index: 70; width: min(760px, 94vw);
  max-height: 42vh; display: flex; flex-direction: column; background: var(--bg); border: 1px solid var(--border); }
.briefcap .bc-head { display: flex; gap: 8px; align-items: center; padding: 2px 6px; background: var(--head);
  border-bottom: 1px solid var(--border); }
.briefcap .bc-title { font-weight: 700; letter-spacing: .12em; color: var(--fg-hi); }
.briefcap .bc-meta { flex: 1; min-width: 0; color: var(--fg-faint); font-size: calc(10px * var(--fs)); white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; }
.briefcap .bc-lines { overflow: auto; padding: 5px 10px 7px; font-size: calc(12.5px * var(--fs)); line-height: 1.5; }
.briefcap .bc-line { color: var(--fg-faint); transition: color .2s; }
.briefcap .bc-line.done { color: var(--fg-dim); }
.briefcap .bc-line.on { color: var(--fg-hi); }
.briefcap.textonly .bc-line { color: var(--fg); }
/* text only (speech failed / unavailable): compact, scrolls inside, collapses to one line after the reading time */
.briefcap.textonly { max-height: 40vh; }
.briefcap .bc-lines { min-height: 0; }
.briefcap.collapsed .bc-lines { display: none; }
.briefcap.collapsed .bc-head { border-bottom: 0; cursor: pointer; }
.briefcap.collapsed .bc-meta { color: var(--fg-dim); }
.briefcap .bc-line.na { font-style: italic; }
/* phone, speaking: one row */
.briefcap.mini { flex-direction: row; align-items: center; cursor: pointer; }
.briefcap.mini .bc-head { display: contents; }
.briefcap.mini .bc-title { padding-left: 6px; }
.briefcap.mini .bc-meta, .briefcap.mini .bc-line { display: none; }
.briefcap.mini .bc-lines { order: 1; flex: 1; min-width: 0; white-space: nowrap; overflow: auto hidden; padding: 3px 8px; }
.briefcap.mini .bc-lines::before { content: "tap to expand · "; color: var(--fg-faint); }
.briefcap.mini .bc-line.on { display: inline; }
.briefcap.mini .bc-stop { order: 2; margin-right: 4px; }
.briefbtn.on { background: var(--fg-hi); color: var(--on-hi); }
.sndbtn { border: 0; background: transparent; padding: 0; color: var(--fg-dim); font-size: inherit; }
.sndbtn.off { color: var(--fg-faint); text-decoration: line-through; }

/* SET view */
.setsec { margin-bottom: 8px; max-width: 760px; }
.setrow { display: grid; grid-template-columns: 220px 1fr; gap: 10px; padding: 2px 0; align-items: center;
  border-bottom: 1px solid var(--rule); }
.setrow .k { color: var(--fg-dim); }
.setrow select { max-width: 100%; }
.setrow .grp { display: inline-flex; gap: 2px; flex-wrap: wrap; }
.setbar { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; margin: 4px 0 2px; }
.weditor-box .tbl.weditor { width: auto; min-width: 300px; }
.weditor-box > .tbl { display: block; max-height: 320px; overflow: auto; border-bottom: 1px solid var(--rule); }
.tbl.weditor td button { padding: 0 5px; }
.tbl.weditor tr.group td { padding-top: 6px; }
.slotpick { display: grid; grid-template-columns: 1fr; gap: 3px; max-width: 480px; }
.slotpick label { display: flex; justify-content: space-between; align-items: center; gap: 10px; color: var(--fg-dim); white-space: nowrap; }
.slotpick select { width: 220px; flex: none; }
.setjson { display: block; width: 100%; max-width: 560px; font: inherit; font-size: calc(10px * var(--fs)); color: var(--fg);
  background: var(--input); border: 1px solid var(--border); padding: 3px 4px; margin: 3px 0; resize: vertical; }
.setjson:focus { border-color: var(--focus); outline: 0; }
.setmsg { color: var(--fg-dim); min-height: 1.2em; } .setmsg.bad { color: var(--err); }
input[type=file] { font: inherit; color: var(--fg-dim); max-width: 250px; }
input[type=checkbox], input[type=range] { accent-color: var(--fg-hi); }
input[type=range] { width: 160px; vertical-align: middle; }

/* intro / loading screen (opacity + transform only; a failsafe fades it if the script never runs) */
.intro { position: fixed; inset: 0; z-index: 100; background: var(--bg); display: flex; align-items: center;
  justify-content: center; padding: 20px; transition: opacity .45s ease; }
.intro:not(.live) { animation: intro-failsafe .4s ease 10s forwards; }
.intro.leaving { opacity: 0; pointer-events: none; }
.intro.entered { pointer-events: none; }
.intro.granted .intro-prompt { opacity: 1; transform: none; }
.intro.granted .intro-prompt .p1, .intro.ready.granted .intro-prompt .p1 { animation: none; letter-spacing: .42em; font-weight: 700; }
.intro.granted .intro-list { opacity: .35; }
.intro-on body > :not(#intro) { visibility: hidden; }
.intro.gone { display: none; }
.intro-in { display: flex; flex-direction: column; align-items: center; gap: 16px; opacity: 0; position: relative; z-index: 1;
  transform: translateY(8px); animation: intro-rise .7s ease .05s forwards; }
.intro-mark { width: 88px; height: 88px; color: var(--fg-hi); transform-origin: 50% 56%; }
/* reactive background (fx.js): decorative canvas under a soft veil that keeps the text crisp */
.intro-fx { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; }
.intro-fx.fx-lens, .login-fx.fx-lens { inset: auto; left: 0; top: 0; will-change: transform; }
.intro.fx .intro-in::before { content: ""; position: absolute; inset: -70px -150px; z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side, var(--bg) 48%, transparent); }
.intro.fx .intro-in { will-change: transform; }   /* its own layer: the moving lens under it never repaints it */
.intro-markwrap { width: 88px; height: 88px; transform-origin: 50% 56%; }
.intro.fx .intro-markwrap { will-change: transform; transition: transform .1s linear; }
.intro.fx .intro-mark .crown, .intro.fx .intro-mark .band { stroke: url(#qd-sheen); }
.intro.fx .intro-mark .gem, .intro.fx .intro-mark .qd { fill: url(#qd-sheen); }
.intro-mark .s0 { stop-color: var(--sheen-base); } .intro-mark .s1 { stop-color: var(--sheen-hi); }
/* rich intro (fx-intro.js): depth layers, the price readout, hold-to-enter ring, typed ticks */
.intro-fx.fx-pl { will-change: transform; }
.fx-px { position: absolute; left: 0; top: 0; z-index: 1; pointer-events: none; display: flex; flex-direction: column; gap: 1px;
  font-size: calc(10px * var(--fs)); letter-spacing: .08em; color: var(--fg-dim); white-space: nowrap; opacity: 0; transition: opacity .5s ease; }
.fx-px.on { opacity: 1; } .intro.leaving .fx-px { opacity: 0; }
.fx-px .fx-v { color: var(--fg-hi); font-weight: 500; font-size: calc(12px * var(--fs)); } .fx-px .na { color: var(--fg-faint); }
.intro.fx .intro-markwrap { position: relative; cursor: pointer; touch-action: none; user-select: none; -webkit-user-select: none;
  -webkit-touch-callout: none; }
.intro-ring { position: absolute; left: -16px; top: -16px; width: calc(100% + 32px); height: calc(100% + 32px); pointer-events: none; }
.intro-ring circle { fill: none; stroke-width: 1; }
.intro-ring .trk { stroke: var(--fg-faint); opacity: 0; transition: opacity .2s ease; }
.intro-ring .arc { stroke: var(--fg-hi); stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .2s ease-out; }
.intro.hold .intro-ring .trk { opacity: .5; }
.intro.hold .intro-ring .arc { stroke-dashoffset: 0; transition: stroke-dashoffset .6s linear; }
.intro-list .lbl i { font-style: normal; color: var(--fg-hi); }
.intro-mark .crown, .intro-mark .band { fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linejoin: miter; }
.intro-mark .gem { fill: currentColor; }
.intro-mark .qd { fill: currentColor; font-family: var(--font); font-weight: 700; letter-spacing: .1em;
  text-anchor: middle; }
.intro-title { color: var(--fg-hi); font-weight: 700; font-size: calc(13px * var(--fs)); letter-spacing: .34em; text-align: center; }
.intro-title span { color: var(--fg-dim); }
.intro-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center;
  gap: 4px 18px; max-width: 560px; font-size: calc(10.5px * var(--fs)); letter-spacing: .12em; color: var(--fg-dim); }
.intro-list li { display: inline-flex; gap: 6px; }
.intro-list .st { color: var(--fg-faint); min-width: 3ch; }
.intro-list .st.ok { color: var(--fg-hi); }
.intro-list .st.na { color: var(--fg-faint); }
.intro.short .intro-list { display: none; }
.intro-prompt { text-align: center; opacity: 0; transform: translateY(4px); transition: opacity .4s ease, transform .4s ease;
  min-height: 34px; }
.intro.ready .intro-prompt { opacity: 1; transform: none; }
.intro-prompt .p1 { display: block; color: var(--fg-hi); font-size: calc(12px * var(--fs)); letter-spacing: .26em; }
.intro-prompt .p2 { display: block; color: var(--fg-faint); font-size: calc(10px * var(--fs)); letter-spacing: .14em; margin-top: 5px; }
.intro.ready .intro-prompt .p1 { animation: intro-breathe 2.6s ease-in-out infinite; }
@keyframes intro-rise { to { opacity: 1; transform: none; } }
@keyframes intro-breathe { 50% { opacity: .55; } }
@keyframes intro-failsafe { to { opacity: 0; visibility: hidden; } }
@media (prefers-reduced-motion: reduce) {
  .intro, .intro-prompt { transition: none; }
  .intro-in { animation: none; opacity: 1; transform: none; }
  .intro.ready .intro-prompt .p1 { animation: none; }
}

/* login */
.login-wrap { flex: 1; display: flex; align-items: center; justify-content: center; position: relative; z-index: 1; }
.login-fx { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; opacity: 0;
  transition: opacity 1.2s ease; }
.login-fx.on { opacity: 1; }
.login-page .login { box-shadow: 0 0 0 1px var(--bg), 0 0 70px 36px var(--bg); }
.login { border: 1px solid var(--border); background: var(--panel); width: 340px; max-width: 92vw; }
.login header { background: var(--head); padding: 4px 8px; border-bottom: 1px solid var(--border); font-weight: 700;
  letter-spacing: .12em; color: var(--fg-hi); }
.login form { padding: 14px 12px; display: flex; flex-direction: column; gap: 8px; }
.login input { background: var(--input); border: 1px solid var(--border); color: var(--fg-hi); font: inherit; font-size: calc(13px * var(--fs));
  padding: 6px; outline: 0; }
.login input:focus { border-color: var(--focus); }
.login button { padding: 5px; background: var(--fg-hi); color: var(--on-hi); font-weight: 700; border-color: var(--fg-hi); }
.login .msg { color: var(--err); min-height: 14px; }
.login header { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.login .loginsnd { font-size: calc(9.5px * var(--fs)); letter-spacing: .08em; padding: 0 5px; color: var(--fg-dim); background: transparent; }
.login .loginsnd[aria-pressed="false"] { color: var(--fg-faint); text-decoration: line-through; }
.login .fine { color: var(--fg-faint); font-size: calc(10px * var(--fs)); padding: 0 12px 10px; }
/* installable app: offline page + "new version" toast (pwa.js) */
.offline-msg { color: var(--fg-hi); padding: 14px 12px 8px; margin: 0; }
.offline-page .fine a { color: var(--fg-dim); }
.pwa-toast { position: fixed; left: 10px; bottom: 28px; z-index: 90; display: flex;
  background: var(--bg); border: 1px solid var(--fg-hi); }
.pwa-toast button { font-size: calc(11px * var(--fs)); letter-spacing: .06em; padding: 5px 10px; border: 0; }
.pwa-toast .pwa-go { background: var(--fg-hi); color: var(--on-hi); font-weight: 700; }
.pwa-toast .pwa-x { background: var(--bg); color: var(--fg-dim); }

/* phone / narrow: stack the panels, page scrolls, each panel scrolls inside */
@media (max-width: 900px) {
  body { overflow: auto; height: auto; min-height: 100%; }
  .topbar { flex-wrap: wrap; }
  .cmd { flex: 1 1 100%; order: 3; }
  .macro { order: 4; flex: 1 1 100%; justify-content: flex-start; overflow-x: auto; gap: 10px; }
  .fkeys { order: 2; margin-left: auto; }
  .fkeys button[data-layout] { display: none; }
  .grid, body[class] .grid { display: flex; flex-direction: column; overflow: visible; }
  body.fn-open .grid, body.layout-5 .grid { display: none; }
  .panel, body[class] .grid .panel { display: flex !important; height: auto; max-height: 440px; flex: none; }
  #p-watch { max-height: 560px; } #p-chart { height: 360px; max-height: none; }
  .fnwrap { min-height: calc(100vh - 110px); }
  .fnwrap > .panel { max-height: none; }
  .slots, .slots.n6 { display: flex; flex-direction: column; }
  .slots > .panel { height: 420px; flex: none; }
  .statusbar { flex-wrap: wrap; white-space: normal; position: sticky; bottom: 0; }
  .statusbar .right { margin-left: 0; }
  .panel > header .meta { max-width: 50%; }
  .help { min-width: 0; }
  .ac .opt { grid-template-columns: 70px 1fr; } .ac .opt .cat { display: none; }
  .setrow { grid-template-columns: 1fr; gap: 2px; }
  .intro-mark, .intro-markwrap { width: 72px; height: 72px; }
  .intro-title { font-size: calc(12px * var(--fs)); letter-spacing: .26em; }
  .intro-prompt .p1 { font-size: calc(11px * var(--fs)); letter-spacing: .18em; }
  .briefcap { bottom: 44px; }
  /* F1 custom slots on a phone: the stack follows the slot order */
  body.layout-1 #grid > [data-area="chart"] { order: 1; } body.layout-1 #grid > [data-area="derivs"] { order: 2; }
  body.layout-1 #grid > [data-area="levels"] { order: 3; } body.layout-1 #grid > [data-area="desk"] { order: 4; }
  body.layout-1 #grid > [data-area="record"] { order: 5; } body.layout-1 #grid > [data-area="alts"] { order: 6; }
  body.layout-1 #grid > [data-area="news"] { order: 7; } body.layout-1 #grid > [data-area="cal"] { order: 8; }
  .slotpick { grid-template-columns: 1fr; }
  .tbl.weditor { min-width: 0; }
  .ind-menu { left: 2px; right: 2px; width: auto; max-width: none; }
  .draw-bar { left: 2px; right: 2px; max-width: none; justify-content: flex-start; }
  .draw-bar button { padding: 3px 7px; font-size: calc(11px * var(--fs)); }
  .ind-legend { max-width: 92%; }
}
@media (max-width: 600px) {
  /* phone: drop the two widest watchlist columns (24h volume, absolute OI) */
  .briefcap.textonly { max-height: 35vh; }
  .slotpick label { flex-direction: column; align-items: stretch; gap: 1px; white-space: normal; }
  .slotpick select { width: 100%; }
  #watch-tbl th:nth-child(4), #watch-tbl td:nth-child(4),
  #watch-tbl th:nth-child(6), #watch-tbl td:nth-child(6) { display: none; }
  /* WEI: AS OF / AGE / SOURCE stack under the name instead of scrolling sideways */
  .tbl.wei th:nth-child(n+4), .tbl.wei td:nth-child(n+4) { display: none; }
  .tbl.wei td.l { white-space: normal; }
  .tbl.wei .m { display: block; white-space: normal; color: var(--fg-faint); font-size: calc(10px * var(--fs)); font-weight: 400;
    overflow-wrap: anywhere; }
  /* v3 wide tables on a phone: drop secondary columns (still in the desktop view) */
  .tbl.gex-exp th:nth-child(2), .tbl.gex-exp td:nth-child(2), .tbl.gex-exp th:nth-child(3), .tbl.gex-exp td:nth-child(3),
  .tbl.gex-exp th:nth-child(6), .tbl.gex-exp td:nth-child(6), .tbl.gex-exp th:nth-child(8), .tbl.gex-exp td:nth-child(8),
  .tbl.hlp th:nth-child(4), .tbl.hlp td:nth-child(4), .tbl.hlp th:nth-child(6), .tbl.hlp td:nth-child(6),
  .tbl.hlp th:nth-child(8), .tbl.hlp td:nth-child(8) { display: none; }
  /* v3 wide tables: wrap long text cells on a phone */
  .tbl.wrap-phone td.l { white-space: normal; overflow-wrap: anywhere; }
}

/* MTF matrix (mtf.js, loaded on open): dense, monochrome; colour only on the trend arrows */
.mtf-wrap { outline: none; }
.mtf-wrap:focus-visible { box-shadow: inset 0 0 0 1px var(--focus); }
.tbl.mtf td, .tbl.mtf th { padding-left: calc(2px * var(--fs)); padding-right: calc(2px * var(--fs)); }
.tbl.mtf .mtf-s0, .tbl.mtf .mtf-tf { border-left: 1px solid var(--border); }
.tbl.mtf tr.mtf-g th { top: auto; position: static; color: var(--fg-hi); letter-spacing: .06em; }
.tbl.mtf td.ar-up { color: var(--up); } .tbl.mtf td.ar-dn { color: var(--down); }
:root[data-updown="mono"] .tbl.mtf td.ar-up { font-weight: 700; }
.tbl.mtf td.al { color: var(--fg-dim); } .tbl.mtf td.al.hi { color: var(--fg-hi); font-weight: 700; }
.tbl.mtf td.mtf-cur { box-shadow: inset 0 -2px 0 var(--focus); }
.tbl.mtf td.mtf-stale { text-decoration: underline dotted; opacity: .7; }
.tbl.mtf .mtf-b { padding-left: calc(6px * var(--fs)); color: var(--fg-dim); }
.tbl.mtf tr > :first-child { position: sticky; left: 0; z-index: 1; background: var(--panel); }
.tbl.mtf thead tr:last-child > :first-child { z-index: 2; }
.tbl.mtf tr.sel > :first-child { background: var(--sel); }
@media (max-width: 600px) { .tbl.mtf td, .tbl.mtf th { font-size: calc(10px * var(--fs)); } .tbl.mtf .mtf-b { display: none; } }

/* THE COUNCIL (council.js, loaded on open): five cards, monochrome; stance is a label, never a colour */
.cn-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 8px; }
.cn-card { border: 1px solid var(--border); background: var(--panel); padding: 8px; display: flex; flex-direction: column; gap: 6px; }
.cn-card.cn-caution { border-color: var(--fg-dim); }
.cn-hd { display: flex; align-items: center; gap: 8px; }
.cn-emb { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.4; color: var(--fg-hi); }
.cn-title { color: var(--fg-hi); font-weight: 700; letter-spacing: .08em; flex: 1; }
.cn-stance { border: 1px solid var(--border); padding: 0 4px; color: var(--fg-dim); white-space: nowrap; }
.cn-caution .cn-stance { background: var(--fg-hi); color: var(--on-hi); border-color: var(--fg-hi); }
.cn-head { color: var(--fg-hi); }
.cn-mark { border: 1px solid var(--fg-faint); padding: 0 3px; color: var(--fg-dim); font-size: calc(10px * var(--fs)); }
.cn-detail, .cn-na { color: var(--fg-dim); }
.cn-say { color: var(--fg); }
.cn-quiet .cn-say { color: var(--fg-dim); }
.cn-ev summary { cursor: pointer; color: var(--fg-faint); }
.cn-ev[open] summary { color: var(--fg-dim); }
.cn-evrow { padding-left: 10px; }
.cn-principle { margin-top: auto; border-top: 1px solid var(--rule); padding-top: 4px; color: var(--fg-dim); font-style: italic; }
@media (max-width: 600px) { .cn-grid { grid-template-columns: 1fr; } }

@media (prefers-reduced-motion: reduce) {
  /* reactive background: fx.js draws one still frame and never tilts; nothing fades */
  .login-fx { transition: none; }
  .intro.fx .intro-markwrap { will-change: auto; transition: none; }
}
/* BOOK (book.js, loaded on open): heatmap canvas + side panel; greys only, up / down for the imbalance sign */
.bk { display: grid; grid-template-columns: minmax(0, 1fr) calc(270px * var(--fs)); gap: 6px; }
.bk-plot { position: relative; height: 62vh; min-height: 320px; cursor: crosshair; outline: 0; }
.bk-plot:focus-visible { box-shadow: 0 0 0 1px var(--focus); }
.bk-c, .bk-o { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
.bk-o { pointer-events: none; }
.bk-tip { position: absolute; pointer-events: none; white-space: pre; background: var(--legend-bg); color: var(--fg-hi);
  border: 1px solid var(--border); padding: 2px 5px; font-size: calc(10px * var(--fs)); }
.bk-side { overflow: auto; max-height: 62vh; min-width: 0; }
.bk-note { color: var(--fg-dim); margin-bottom: 3px; }
.bk-gauge { position: relative; height: 8px; border: 1px solid var(--border); margin: 4px 0 2px; }
.bk-gmid { position: absolute; left: 50%; top: 0; bottom: 0; border-left: 1px solid var(--fg-faint); }
.bk-gmark { position: absolute; top: -3px; bottom: -3px; width: 3px; margin-left: -1px; background: var(--fg-hi); }
@media (max-width: 900px) { .bk { grid-template-columns: 1fr; } .bk-plot { height: 52vh; min-height: 260px; }
  .bk-side { max-height: none; } }