/* ============================================================================
   STARFALL — STQUANT TERMINAL
   css/stquant.css
   ----------------------------------------------------------------------------
   This is the STQuant tab's own theme, built from scratch. It deliberately
   shares nothing with the desk page (index.html): that page is a glassy,
   gold-accented product page; this one is the engine room.

   The look it is going for:

     · pure black, one pixel borders, no blur, no glow, no rounded cards
     · amber function bar across the top, black text on amber keys
     · a real command line with a GO button and an echo line
     · a scrolling tape, a status bar with LEDs, panel tool buttons
     · everything monospaced, tabular, dense — data before decoration
     · colour only where it means something: amber = chrome, cyan = field,
       green = up / booked, red = down / risk

   It still defines the desk's token names (--accent, --line, --ink, ...)
   so the shared widgets that read them (the chat dock, term-chat.css) land
   in this palette instead of the gold one.
   ========================================================================== */

/* ==========================================================================
   01. TOKENS
   ========================================================================== */
:root {
  /* surfaces: black, then two steps of near-black for panes */
  --bg: #000000;
  --bg-2: #060708;
  --bg-3: #0b0d0f;
  --panel: #08090b;
  --panel-2: #0d0f12;
  --glass: rgba(255, 255, 255, 0.02);

  /* rule lines — visible enough to read as a grid, never as a box */
  --line: #22262a;
  --line-2: #363b40;
  --line-gold: rgba(var(--accent-rgb), 0.42);
  --line-dot: #1d2124;

  /* ink */
  --ink: #e4e6e8;
  --ink-2: #c2c7cc;
  --muted: #8a9197;
  /* 3.34:1 -> 5.75:1 on the black terminal. The palette here is neutral rather
     than blue, so this is the neutral twin of the lift in css/terminal.css
     and stays under --muted (#8a9197, 6.58:1). */
  --faint: #7c8794;

  /* accents — amber chrome, cyan fields, green/red for results */
  --accent: #ff9e1b;
  --accent-2: #ffb600;
  --accent-rgb: 255, 158, 27;
  --up: #12c98a;
  --up-rgb: 18, 201, 138;
  --down: #ff4a4a;
  --down-rgb: 255, 74, 74;
  --cyan: #3ec1ff;
  --violet: #b18cff;

  /* shape: a terminal has corners, not curves */
  --r-sm: 2px;
  --r: 3px;
  --r-lg: 4px;
  --r-xl: 6px;
  --maxw: none;
  --ease: cubic-bezier(0.22, 0.61, 0.24, 1);
  --ease-2: cubic-bezier(0.55, 0.06, 0.32, 1);

  /* type */
  --mono: 'IBM Plex Mono', 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --display: 'IBM Plex Mono', 'JetBrains Mono', ui-monospace, monospace;
  --ui: 'IBM Plex Sans', 'Segoe UI', system-ui, -apple-system, sans-serif;

  /* no soft shadows anywhere: a 1px line does the work */
  --shadow-1: none;
  --shadow-2: none;
  --glow: none;
}

/* ==========================================================================
   02. RESET & BASE
   ========================================================================== */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  background: var(--bg);
  scroll-behavior: smooth;
  /* the sticky header is four bars tall (26 + 38 + 34 + 24), so anchors land
     below it instead of under it */
  scroll-padding-top: 128px;
}

body {
  margin: 0;
  min-height: 100%;
  background: var(--bg);
  color: var(--ink);
  font: 400 13px/1.45 var(--mono);
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

h1, h2, h3, h4, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: var(--cyan); text-decoration: none; }
a:hover { color: var(--accent); }
b, strong { font-weight: 700; }
i, em { font-style: normal; }
img, svg, canvas { display: block; max-width: 100%; }
canvas { width: 100%; height: 100%; }
s { text-decoration: none; }
button { font: inherit; color: inherit; }
table { border-collapse: collapse; }

::selection { background: var(--accent); color: #000; }

/* one keyboard focus ring, amber, everywhere */
:focus-visible {
  outline: 1px solid var(--accent);
  outline-offset: 1px;
}

/* thin terminal scrollbars */
* { scrollbar-width: thin; scrollbar-color: #2b3034 #000; }
*::-webkit-scrollbar { width: 9px; height: 9px; }
*::-webkit-scrollbar-track { background: #000; }
*::-webkit-scrollbar-thumb { background: #2b3034; border: 2px solid #000; }
*::-webkit-scrollbar-thumb:hover { background: #3d4349; }

/* --------------------------------------------------------------------------
   the page backdrop: a printed grid, not a gradient. Two hairline layers at
   48px and 12px read as graph paper under black.
   ------------------------------------------------------------------------ */
.stq::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.026) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.026) 1px, transparent 1px),
    linear-gradient(rgba(255, 255, 255, 0.012) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.012) 1px, transparent 1px);
  background-size: 96px 96px, 96px 96px, 24px 24px, 24px 24px;
  opacity: 0.9;
}

/* every top-level block sits above the grid */
.stq > * { position: relative; z-index: 1; }

/* ==========================================================================
   03. UTILITY
   ========================================================================== */
.up { color: var(--up); }
.down { color: var(--down); }
.flat { color: var(--muted); }
.amber { color: var(--accent); }
.cyan { color: var(--cyan); }

.kbd,
kbd {
  display: inline-block;
  min-width: 18px;
  padding: 1px 5px;
  border: 1px solid #2f3438;
  border-bottom-width: 2px;
  border-radius: 2px;
  background: #111316;
  color: var(--ink-2);
  font: 600 10px/1.5 var(--mono);
  text-align: center;
}

/* ==========================================================================
   04. BUTTONS & INPUTS
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 9px 16px;
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  background: #101215;
  color: var(--ink);
  font: 600 11px/1 var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s var(--ease), border-color 0.15s var(--ease), color 0.15s var(--ease);
}
.btn:hover { border-color: var(--accent); color: var(--accent); background: #16181b; }
.btn:active { transform: translateY(1px); }

.btn--gold {
  border-color: var(--accent);
  background: var(--accent);
  color: #000;
  font-weight: 700;
}
.btn--gold:hover { background: #ffb947; border-color: #ffb947; color: #000; }

.btn--line { background: #0b0d0f; color: var(--ink-2); }
.btn--line:hover { color: var(--accent); border-color: var(--accent); }

.btn--block { width: 100%; }
.btn--sm { padding: 6px 10px; font-size: 10px; }

/* ==========================================================================
   05. TOP CHROME
   ========================================================================== */
.stq-head {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--bg);
  border-bottom: 1px solid var(--line-2);
}

/* ---- 5a. the thin fact strip --------------------------------------------- */
.stq-strip {
  display: flex;
  align-items: center;
  gap: 0;
  height: 26px;
  padding: 0 10px;
  border-bottom: 1px solid var(--line);
  background: #000;
  font: 600 10px/1 var(--mono);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted);
  overflow: hidden;
  white-space: nowrap;
}
.stq-strip__item {
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  padding: 0 12px;
  border-right: 1px solid var(--line);
  height: 100%;
  line-height: 26px;
}
.stq-strip__item:first-child { padding-left: 0; }
.stq-strip__item b { color: var(--accent); }
.stq-strip__item em { color: var(--faint); letter-spacing: 0.06em; }
.stq-strip__item i { color: var(--faint); }
.stq-strip__item--quote b { color: var(--ink); }
.stq-strip__spacer { flex: 1 1 auto; }

.stq-strip__link {
  padding: 0 12px;
  height: 100%;
  line-height: 26px;
  border-left: 1px solid var(--line);
  color: var(--ink-2);
  letter-spacing: 0.12em;
}
.stq-strip__link:hover { background: #14171a; color: var(--accent); }
.stq-strip__link--cta { color: var(--accent); font-weight: 700; }
.stq-strip__link--cta:hover { background: var(--accent); color: #000; }

/* the snapshot chip: amber when the local file answered, red when it did not */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 26px;
  padding: 0 12px;
  border-left: 1px solid var(--line);
  font: 700 10px/26px var(--mono);
  letter-spacing: 0.12em;
  color: var(--muted);
}
.chip i {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 8px currentColor;
}
.chip--live { color: var(--up); }
.chip[data-mode='live'] { color: var(--up); }
.chip[data-mode='live'] i { animation: stqPulse 1.6s steps(2, end) infinite; }
.chip[data-mode='boot'] { color: var(--accent); }
.chip[data-mode='dead'],
.chip--demo { color: var(--down); }
@keyframes stqPulse { 50% { opacity: 0.25; } }

.stq-clk {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0 12px;
  height: 26px;
  border-left: 1px solid var(--line);
  color: var(--ink);
  font: 700 10px/26px var(--mono);
  letter-spacing: 0.1em;
}
.stq-clk i {
  width: 6px; height: 6px;
  background: var(--cyan);
  border-radius: 50%;
  box-shadow: 0 0 8px var(--cyan);
}

/* ---- 5b. the amber function bar ------------------------------------------ */
.stq-bar {
  display: flex;
  align-items: stretch;
  gap: 0;
  min-height: 38px;
  background: linear-gradient(180deg, #ffa826, #ff9e1b 62%, #f08f10);
  color: #000;
  border-bottom: 1px solid #000;
  overflow-x: auto;
  overscroll-behavior-x: contain;
}

.stq-brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 0 14px;
  background: #000;
  color: var(--accent);
  flex: none;
}
.stq-brand:hover { color: #ffc266; }
.stq-brand__mark { width: 17px; height: 17px; }
.stq-brand__mark svg { width: 17px; height: 17px; fill: currentColor; }
.stq-brand__txt { display: flex; align-items: baseline; gap: 6px; font: 700 13px/1 var(--mono); letter-spacing: 0.1em; }
.stq-brand__txt em {
  font-size: 10px;
  letter-spacing: 0.24em;
  color: var(--ink-2);
  padding-left: 6px;
  border-left: 1px solid var(--line-2);
}

.stq-fn { display: flex; align-items: stretch; flex: 1 1 auto; min-width: 0; }
/* the three doors, grouped: the nav's own gap pushes them to the right edge */
.stq-doors { display: flex; align-items: stretch; flex: none; }
.stq-fn button {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 0 13px;
  border: 0;
  border-right: 1px solid rgba(0, 0, 0, 0.22);
  background: transparent;
  color: #000;
  font: 600 10.5px/38px var(--mono);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  cursor: pointer;
  white-space: nowrap;
}
/* the F-key number: black at 60% over the amber gradient computes to #643f0b
   on #fa9c1b, which is 4.39:1 -- just under the bar at 10px. 68% puts it at
   5.18:1 without changing the colour it reads as. */
.stq-fn button b {
  font-weight: 700;
  font-size: 10px;
  color: rgba(0, 0, 0, 0.68);
}
.stq-fn button:hover { background: rgba(0, 0, 0, 0.14); }
.stq-fn button:active { background: rgba(0, 0, 0, 0.26); }
.stq-fn button.is-on { background: #000; color: var(--accent); }
.stq-fn button.is-on b { color: var(--muted); }

/* ---- 5b-bis. cash buttons on the function bar ----------------------------
   DEPOSIT and WITHDRAWAL are the only two items on this bar that leave the
   terminal, so they are the only two drawn in ink instead of amber. The spacer
   between them and F10 pushes them to the right whenever the bar has room, and
   collapses to nothing when it does not, so the function keys never get pushed
   off the left edge on a narrow screen. */
.stq-fn__gap { flex: 1 1 auto; min-width: 0; }
/* DEPOSIT and WITHDRAWAL read as pill-shaped doors rather than as two more
   function keys: money in leans teal, money out leans amber, and each is a
   filled chip so the eye finds them without reading the bar. */
.stq-cash {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex: none;
  margin: 2px 4px;
  padding: 0 15px;
  border: 1px solid rgba(255, 187, 0, 0.3);
  border-radius: 7px;
  /* opaque, dark fills: the chip sits on the amber function bar, and a
     translucent wash under light ink is exactly how a label becomes unreadable
     at 4.5:1. The gradient is two dark stops instead. */
  background: linear-gradient(180deg, #1c1509, #0b0905);
  color: var(--accent);
  font: 700 10.5px/32px var(--mono);
  letter-spacing: 0.12em;
  white-space: nowrap;
  transition: color 0.2s, background 0.2s, transform 0.16s var(--ease), box-shadow 0.2s;
}
.stq-cash svg { width: 13px; height: 13px; flex: none; }
.stq-cash:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 22px -12px rgba(0, 0, 0, 0.9);
}
.stq-cash--in {
  border-color: rgba(34, 211, 165, 0.42);
  background: linear-gradient(180deg, #081713, #040d0a);
  color: #7ee7c5;
}
.stq-cash--in:hover { color: #b6f5e2; border-color: rgba(34, 211, 165, 0.7); }
.stq-cash--out {
  border-color: rgba(255, 187, 0, 0.42);
  background: linear-gradient(180deg, #1c1509, #0b0905);
  color: #ffd08a;
}
.stq-cash--out:hover { color: var(--accent); border-color: rgba(255, 187, 0, 0.72); }

/* the live desk button: the one amber-filled control on the bar, because it is
   the only one that leaves the replay for a real feed */
.stq-go {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: none;
  padding: 0 16px;
  border-left: 1px solid rgba(0, 0, 0, 0.28);
  background: linear-gradient(180deg, #ffc233, #e8a400);
  color: #12100a;
  font: 800 10.5px/38px var(--mono);
  letter-spacing: 0.13em;
  white-space: nowrap;
  box-shadow: 0 0 0 1px rgba(255, 210, 120, 0.35) inset;
  transition: filter 0.2s, background 0.2s;
}
.stq-go svg { width: 13px; height: 13px; flex: none; }
.stq-go i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #7a2b00;
  animation: stqGoPulse 1.5s ease-in-out infinite;
}
.stq-go:hover { filter: brightness(1.12); background: linear-gradient(180deg, #ffd05e, #f0ab00); }
@keyframes stqGoPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.35; transform: scale(0.7); }
}


/* ---- 5c. command line ----------------------------------------------------- */
.stq-cmd {
  display: flex;
  align-items: center;
  gap: 0;
  height: 34px;
  border-bottom: 1px solid var(--line);
  background: #000;
  padding-left: 10px;
  overflow: hidden;
}
.stq-cmd__prompt {
  font: 700 11px/1 var(--mono);
  letter-spacing: 0.14em;
  color: var(--accent);
  white-space: nowrap;
}
.stq-cmd__input {
  flex: 1 1 auto;
  min-width: 60px;
  height: 100%;
  margin-left: 10px;
  border: 0;
  background: transparent;
  color: var(--cyan);
  font: 600 12px/1 var(--mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  caret-color: var(--accent);
}
.stq-cmd__input::placeholder { color: #3c4348; text-transform: none; letter-spacing: 0.02em; }
.stq-cmd__input:focus { outline: none; }
.stq-cmd__go {
  height: 100%;
  padding: 0 16px;
  border: 0;
  border-left: 1px solid var(--line);
  background: var(--accent);
  color: #000;
  font: 700 11px/1 var(--mono);
  letter-spacing: 0.18em;
  cursor: pointer;
}
.stq-cmd__go:hover { background: #ffb947; }
.stq-cmd__msg {
  padding: 0 14px;
  font: 600 11px/1 var(--mono);
  letter-spacing: 0.05em;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 42vw;
}
.stq-cmd__msg.is-ok { color: var(--up); }
.stq-cmd__msg.is-bad { color: var(--down); }
.stq-cmd__keys {
  padding: 0 12px;
  border-left: 1px solid var(--line);
  font: 600 10px/34px var(--mono);
  letter-spacing: 0.06em;
  color: var(--faint);
  white-space: nowrap;
}
.stq-cmd__keys kbd { font-size: 9px; padding: 0 4px; }

/* ---- 5d. the tape ---------------------------------------------------------
   A real ticker: instruments enter from the right edge and travel left, so the
   row reads the way a market tape is read. The scrollbar is removed on purpose
   — the marquee *is* the scroll motion, and a scrollbar under a strip that
   never stops moving is furniture. Hover it and the tape holds still so a price
   can be read; under prefers-reduced-motion it slows to a crawl rather than
   stopping (see §21). */
.stq-tape {
  position: relative;
  height: 24px;
  border-bottom: 1px solid var(--line);
  background: #050607;
  overflow: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.stq-tape::-webkit-scrollbar { width: 0; height: 0; display: none; }
.stq-tape__track {
  display: inline-flex;
  align-items: center;
  height: 100%;
  white-space: nowrap;
  will-change: transform;
  animation: stqTape 46s linear infinite;
  transition: background 0.6s ease, box-shadow 0.6s ease;
}

/* The strip leans green while the tape is net up and red while it is net down,
   so the row is read at a glance before a single symbol is. A tape that is
   split down the middle — or a feed that has not answered yet — stays neutral:
   the tint follows the market, it is never chosen for the look of it. */
.stq-tape__track[data-tone='up'] {
  background: linear-gradient(180deg, rgba(var(--up-rgb), 0.13), rgba(var(--up-rgb), 0.035) 62%, transparent);
  box-shadow: inset 0 1px 0 rgba(var(--up-rgb), 0.22);
}
.stq-tape__track[data-tone='down'] {
  background: linear-gradient(180deg, rgba(var(--down-rgb), 0.13), rgba(var(--down-rgb), 0.035) 62%, transparent);
  box-shadow: inset 0 1px 0 rgba(var(--down-rgb), 0.22);
}
.stq-tape[data-tone='up'] { border-bottom-color: rgba(var(--up-rgb), 0.4); }
.stq-tape[data-tone='down'] { border-bottom-color: rgba(var(--down-rgb), 0.4); }

/* the left edge fades instead of cropping: a price is never half-visible, and
   the strip still reads as one continuous line under the command bar */
.stq-tape::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(90deg, #050607, rgba(5, 6, 7, 0) 38px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), transparent 58%);
}

/* the feed pill: pinned to the right edge, cells slide under it */
.stq-tape__pill {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0 12px 0 30px;
  background: linear-gradient(90deg, transparent, #050607 30%);
  font: 700 9.5px/24px var(--mono);
  letter-spacing: 0.16em;
  color: var(--faint);
}
.stq-tape__pill i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}
.stq-tape__pill[data-mode='live'] { color: var(--up); }
.stq-tape__pill[data-mode='live'] i { animation: tapeBlink 2.4s ease-in-out infinite; }
.stq-tape__pill[data-mode='stale'] { color: var(--accent); }
.stq-tape__pill[data-mode='offline'] { color: var(--down); }
@keyframes tapeBlink {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(34, 211, 165, 0.5); }
  50%      { opacity: 0.5; box-shadow: 0 0 0 4px rgba(34, 211, 165, 0); }
}
.stq-tape:hover .stq-tape__track,
.stq-tape:focus-within .stq-tape__track { animation-play-state: paused; }
@keyframes stqTape { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* Every cell is tinted by the direction it moved in: green when the print is
   above where it opened, red when below. The arrow carries the same fact for a
   reader who never sees the colour. */
.stq-tape__cell {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 18px;
  border-right: 1px solid var(--line-dot);
  font: 600 10.5px/24px var(--mono);
  letter-spacing: 0.06em;
  color: var(--muted);
  white-space: nowrap;
  transition: background 0.3s, color 0.3s;
}
.stq-tape__cell::before {
  content: '';
  width: 0;
  height: 0;
  flex: none;
  opacity: 0.85;
}
.stq-tape__cell b { color: var(--accent); letter-spacing: 0.1em; }
.stq-tape__cell u { text-decoration: none; color: var(--ink); font-weight: 700; }
.stq-tape__cell em { color: var(--faint); font-size: 9.5px; letter-spacing: 0.08em; }

.stq-tape__cell.up {
  background: linear-gradient(180deg, rgba(var(--up-rgb), 0.16), rgba(var(--up-rgb), 0.03) 70%, transparent);
}
.stq-tape__cell.up::before { border-left: 3.5px solid transparent; border-right: 3.5px solid transparent; border-bottom: 5px solid var(--up); }
.stq-tape__cell.up u { color: var(--up); text-shadow: 0 0 10px rgba(var(--up-rgb), 0.45); }
.stq-tape__cell.up b { color: var(--up); }

.stq-tape__cell.down {
  background: linear-gradient(180deg, rgba(var(--down-rgb), 0.16), rgba(var(--down-rgb), 0.03) 70%, transparent);
}
.stq-tape__cell.down::before { border-left: 3.5px solid transparent; border-right: 3.5px solid transparent; border-top: 5px solid var(--down); }
.stq-tape__cell.down u { color: var(--down); text-shadow: 0 0 10px rgba(var(--down-rgb), 0.45); }
.stq-tape__cell.down b { color: var(--down); }

/* the desk's own cells (bars, window, last close) carry no direction of their
   own, so they keep the amber label and take a faint amber wash instead */
.stq-tape__cell:not(.up):not(.down) {
  background: linear-gradient(180deg, rgba(255, 187, 0, 0.06), transparent 70%);
}
.stq-tape__cell:not(.up):not(.down)::before {
  width: 3px;
  height: 3px;
  background: var(--accent);
  opacity: 0.7;
}
.stq-tape:hover .stq-tape__cell.up u { color: #7ff0c4; }
.stq-tape:hover .stq-tape__cell.down u { color: #ff8a8a; }

/* ==========================================================================
   06. PANELS
   ========================================================================== */
.stq-main {
  max-width: var(--maxw);
  padding: 12px 10px 30px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.panel {
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--panel);
  min-width: 0;
}

.panel__head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 8px 0 0;
  min-height: 27px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, #101316, #0a0c0e);
}
.panel__head::before {
  content: '';
  flex: none;
  width: 4px;
  align-self: stretch;
  background: var(--accent);
}
.panel__title {
  padding-left: 9px;
  font: 700 10.5px/1 var(--mono);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--accent);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.panel__title b { color: var(--ink); letter-spacing: 0.08em; }
.panel__hint {
  margin-left: auto;
  padding-left: 12px;
  border-left: 1px dotted var(--line-2);
  font: 600 10px/1 var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--faint);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.panel__note {
  padding: 10px 12px 12px;
  margin: 0;
  border-top: 1px dotted var(--line-dot);
  color: var(--faint);
  font: 400 11.5px/1.7 var(--ui);
}
.panel__body { padding: 12px; }

/* the little window buttons the shell injects into every panel header */
.panel__tools { display: inline-flex; gap: 1px; margin-left: 8px; flex: none; }
.panel__tools button {
  width: 20px;
  height: 19px;
  border: 1px solid var(--line);
  border-radius: 2px;
  background: #0c0e11;
  color: var(--faint);
  font: 700 10px/1 var(--mono);
  cursor: pointer;
}
.panel__tools button:hover { border-color: var(--accent); color: var(--accent); }

/* collapse: the body disappears, the header bar stays as the spine */
.panel.is-collapsed > *:not(.panel__head) { display: none; }
.panel.is-collapsed .panel__head { border-bottom: 0; }

/* maximise: the pane takes the screen, like a maximised Bloomberg window */
.panel.is-max {
  position: fixed;
  inset: 8px;
  z-index: 90;
  background: var(--panel);
  border-color: var(--accent);
  overflow: auto;
  box-shadow: 0 0 0 1px #000, 0 0 60px rgba(0, 0, 0, 0.9);
}
body.has-max { overflow: hidden; }

/* ==========================================================================
   06b. THE SCREEN — a numbered rail plus a 12-column pane mosaic
   --------------------------------------------------------------------------
   A Bloomberg screen is a mosaic of small windows, not a stack of sections:
   the number keys on the left, the panes packed into a fixed grid, and every
   pane carrying its own index in the title bar. Spans are declared with
   .col-N and re-mapped at two breakpoints.
   ========================================================================== */
.stq-screen {
  display: grid;
  grid-template-columns: 170px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
}

.stq-rail {
  position: sticky;
  top: 122px;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--panel);
  overflow: hidden;
}
.stq-rail__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 7px 10px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, #101316, #0a0c0e);
  font: 700 10px/1 var(--mono);
  letter-spacing: 0.16em;
  color: var(--accent);
}
.stq-rail__head em { color: var(--faint); letter-spacing: 0.1em; }
.stq-rail__item {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 6px 10px;
  border-bottom: 1px dotted var(--line-dot);
  color: var(--ink-2);
  font: 600 11px/1.3 var(--mono);
  letter-spacing: 0.07em;
  text-transform: uppercase;
}
.stq-rail__item span { color: var(--faint); font-weight: 700; }
.stq-rail__item em {
  margin-left: auto;
  color: var(--faint);
  font-size: 9.5px;
  letter-spacing: 0.06em;
  text-transform: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 62px;
}
.stq-rail__item:hover { background: rgba(var(--accent-rgb), 0.09); color: var(--accent); }
.stq-rail__item:hover span { color: var(--accent); }
.stq-rail__item.is-on {
  background: var(--accent);
  color: #000;
}
.stq-rail__item.is-on span,
.stq-rail__item.is-on em { color: rgba(0, 0, 0, 0.62); }
.stq-rail__foot {
  padding: 8px 10px;
  border-top: 1px solid var(--line);
  background: #050607;
  color: var(--faint);
  font: 600 9.5px/1.7 var(--mono);
  letter-spacing: 0.05em;
}
.stq-rail__foot kbd { padding: 0 4px; font-size: 9px; }

.stq-board {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 8px;
  align-items: start;
  grid-auto-flow: row dense;
}
.stq-board > * { min-width: 0; }
.col-3 { grid-column: span 3; }
.col-4 { grid-column: span 4; }
.col-5 { grid-column: span 5; }
.col-6 { grid-column: span 6; }
.col-7 { grid-column: span 7; }
.col-8 { grid-column: span 8; }
.col-9 { grid-column: span 9; }
.col-12 { grid-column: span 12; }
.stq-stack { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.stq-board .panel { display: flex; flex-direction: column; }

/* ---- 06b-2. no holes in the mosaic -------------------------------------
   Two panes share a row, one of them is taller, and the shorter one used to
   stop early and leave a rectangle of page showing through the wall of
   windows. So a pane stretches to its row, whatever body it owns grows into
   the space (a chart gets taller, a heat grid gets taller), and the caption
   note is anchored to the floor as a footer line. The frame is then always
   complete, at any width and whatever the replay has closed so far. */
.stq-board > .panel,
.stq-board > .stq-stack { align-self: stretch; }
.stq-stack > .panel { flex: 1 1 auto; }
.stq-board .panel > .chartbox2,
.stq-board .panel > .radar,
.stq-board .panel > .ldr,
.stq-board .panel > .heat,
.stq-board .panel > .bt__table-wrap,
.stq-board .panel > .statlist,
.stq-board .panel > .why,
.stq-board .panel > .sum,
.stq-board .panel > .mx__years { flex: 1 1 auto; }
/* an empty summary is still a lined pane: the waiting line takes the height the
   real lines will take over, and hands it back as soon as they land */
.stq-board .panel > .sum > li.is-waiting { flex: 1 1 auto; display: flex; align-items: center; }
.stq-board .panel > .panel__note:last-child { margin-top: auto; }
/* a list that grows with its pane: every row takes an equal share of the extra
   height and centres itself, so a tall pane is fully lined instead of lined at
   the top and blank at the bottom */
.stq-board .panel > .statlist > div { flex: 1 1 auto; align-items: center; }
.stq-board .panel > .ldr > .ldr__row { flex: 1 1 auto; }
.stq-board .panel > .why > .why__row { flex: 1 1 auto; align-items: center; }
/* and a reason list that has not been scored yet still fills its frame, so the
   pane is lined from the first paint instead of blank until the replay lands */
.stq-board .panel > .why > .why__row.is-waiting { justify-content: center; opacity: 1; }

/* the matrix gets a taller ceiling than the trade log: it is the densest table
   on the screen and the pane under it has room */
.bt__table-wrap--mx { max-height: 420px; }

/* ---- 06c-2. the per-year strip under the matrix -------------------------
   The same cells added up year by year. The bar is diverging around zero, so a
   losing year leans left and a winning year leans right, and the strip takes
   whatever height the pane has left rather than leaving it blank. */
.mx__years {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  padding: 10px 12px;
  border-top: 1px dotted var(--line-dot);
  min-height: 0;
}
.mx__years:empty { display: none; }
.mxyr {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 86px;
  align-items: center;
  gap: 10px;
  font: 600 10px/1 var(--mono);
  color: var(--muted);
  letter-spacing: 0.06em;
}
.mxyr__track {
  position: relative;
  height: 8px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.045);
}
.mxyr__track::after {
  content: '';
  position: absolute;
  top: -2px;
  bottom: -2px;
  left: 50%;
  width: 1px;
  background: rgba(255, 255, 255, 0.18);
}
.mxyr__track i {
  position: absolute;
  top: 0;
  bottom: 0;
  border-radius: 2px;
}
.mxyr__track i.is-up { left: 50%; background: linear-gradient(90deg, rgba(34, 211, 165, 0.55), var(--up)); }
.mxyr__track i.is-down { right: 50%; background: linear-gradient(270deg, rgba(255, 93, 115, 0.55), var(--down)); }
.mxyr__v { text-align: right; color: var(--ink); }
.mxyr__v.up { color: var(--up); }
.mxyr__v.down { color: var(--down); }
.mxyr__n { color: var(--faint); }

/* the pane index in the title bar, matching the rail */
.panel__idx {
  flex: none;
  padding: 0 7px 0 8px;
  border-right: 1px solid var(--line-dot);
  font: 700 10px/1 var(--mono);
  letter-spacing: 0.06em;
  color: var(--faint);
}
.panel__idx + .panel__title { padding-left: 0; }

/* ---- 06c. monthly R matrix (the classic returns grid) ------------------ */
.mx {
  width: 100%;
  font: 600 10.5px/1 var(--mono);
  letter-spacing: 0.02em;
}
.mx th,
.mx td {
  padding: 5px 6px;
  border-right: 1px dotted var(--line-dot);
  border-bottom: 1px dotted var(--line-dot);
  text-align: right;
  white-space: nowrap;
}
.mx th {
  background: #0e1114;
  color: var(--accent);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: right;
}
.mx th:first-child,
.mx td:first-child {
  text-align: left;
  color: var(--ink);
  border-right: 1px solid var(--line);
}
.mx thead th { position: sticky; top: 0; z-index: 2; }
.mx tbody tr:hover td { outline: 1px solid var(--line-2); }
.mx .mx__tot { color: var(--ink); font-weight: 700; border-left: 1px solid var(--line); }
.mx .mx__empty { color: #333a40; }
.mx tfoot td {
  border-top: 1px solid var(--line-2);
  border-bottom: 0;
  color: var(--ink-2);
  font-weight: 700;
}
.mx tfoot td:first-child { color: var(--accent); }

/* ---- 06d. hour-of-day grid -------------------------------------------- */
.hrs {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 4px;
  padding: 10px;
}
.hrs__cell {
  position: relative;
  padding: 5px 6px 7px;
  border: 1px solid var(--line);
  background: #07080a;
  font: 600 10px/1.2 var(--mono);
}
.hrs__cell s { color: var(--faint); letter-spacing: 0.08em; }
.hrs__cell b { display: block; margin-top: 3px; color: var(--ink-2); }
.hrs__cell i {
  /* the width is written inline by stquant-panes.js: it is the share of the
     busiest hour, so the row reads as a bar chart as well as a table */
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
  width: 0;
  background: var(--line-2);
}
.hrs__cell.is-up i { background: var(--up); }
.hrs__cell.is-down i { background: var(--down); }
.hrs__cell.is-up b { color: var(--up); }
.hrs__cell.is-down b { color: var(--down); }
.hrs__cell.is-flat { opacity: 0.55; }

/* ---- 06e. signal web, session heat, quality radar ---------------------- */

/* 18 · the decision graph. Drawn as SVG by js/stquant-panes.js; the frame, the
   column captions, the activation meters under the features and the pulse that
   walks the chosen path are the only things this file owns. */
.web {
  position: relative;
  padding: 8px 8px 6px;
  margin: 8px 10px 2px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  background:
    linear-gradient(rgba(255, 255, 255, 0.022) 1px, transparent 1px) 0 0 / 100% 26px,
    linear-gradient(90deg, rgba(255, 255, 255, 0.022) 1px, transparent 1px) 0 0 / 34px 100%,
    radial-gradient(90% 130% at 8% 0%, rgba(56, 189, 248, 0.13), transparent 62%),
    radial-gradient(90% 130% at 92% 100%, rgba(34, 211, 165, 0.12), transparent 62%),
    #04070d;
}
/* a lit edge along the top and a slow sweep across the frame, so the graph
   reads as a live read rather than a printed diagram */
.web::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(56, 189, 248, 0.6), rgba(34, 211, 165, 0.6), transparent);
}
.web::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -30%;
  width: 24%;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(140, 205, 255, 0.055), transparent);
  animation: webScan 8s linear infinite;
}
@keyframes webScan { to { left: 118%; } }
@media (prefers-reduced-motion: reduce) {
  .web::after { animation: none; opacity: 0; }
}
/* The graph is drawn at 720×320 and the pane it lives in is a sixth of the
   board: on an ultrawide screen that pane is fifteen hundred pixels across, and
   a `width: 100%` SVG answers by scaling the whole graph up until the nodes are
   the size of buttons and the pane is taller than the chart above it. The canvas
   is capped and centred instead — the graph does not get more readable past a
   point, it just takes the page over. */
.web svg {
  position: relative;
  display: block;
  width: 100%;
  max-width: 860px;
  margin: 0 auto;
  height: auto;
  overflow: visible;
}
.web text {
  fill: rgba(255, 255, 255, 0.42);
  font-family: var(--mono);
}
.web text[font-weight="700"] { fill: rgba(255, 255, 255, 0.86); }
.web__col { fill: rgba(255, 187, 0, 0.66); letter-spacing: 0.16em; }
.web__rule { stroke: rgba(255, 255, 255, 0.09); }
.web__meter { fill: rgba(255, 255, 255, 0.08); }
.web__node { transition: r 0.25s var(--ease), filter 0.25s var(--ease); }
.web__node:hover { filter: brightness(1.4); }
.web__node.is-hot { animation: webNode 2.4s ease-in-out infinite; }
@keyframes webNode {
  0%, 100% { stroke-opacity: 1; }
  50% { stroke-opacity: 0.45; }
}
/* ---- the strands ---------------------------------------------------------
   Every edge of the graph is a bundle of fine bowed strands (see paintWeb), and
   this is what moves them. Each one swings from its own left anchor on a delay
   and a duration the pane sets inline, so a gust travels across the picture
   rather than the whole web breathing in unison — which is the difference
   between hair in wind and a diagram being scaled.

   The wind is one direction and one strength: the strands lean the same way,
   they just do not lean together. A flattened, not a spinning, transform, and
   only two pixels of it on a 720-unit canvas, so the graph behind it stays
   readable while it moves. */
.web__hair {
  transform-box: fill-box;
  transform-origin: 0% 50%;
  will-change: transform;
  animation-name: webSway;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}
@keyframes webSway {
  0%, 100% { transform: translateX(0) skewY(0deg) scaleX(1); }
  30% { transform: translateX(1.5px) skewY(0.42deg) scaleX(1.008); }
  62% { transform: translateX(-1.1px) skewY(-0.3deg) scaleX(0.995); }
  84% { transform: translateX(0.6px) skewY(0.14deg) scaleX(1.003); }
}
@media (prefers-reduced-motion: reduce) {
  .web__hair { animation: none; }
}
.web__hot {
  stroke-dasharray: 7 9;
  filter: drop-shadow(0 0 5px rgba(56, 189, 248, 0.75));
  animation: webFlow 1.6s linear infinite;
}
@keyframes webFlow { to { stroke-dashoffset: -32; } }
.web__kb {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  padding: 4px 10px 10px;
  font: 600 9.5px/1.6 var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--faint);
}
.web__kb b { color: var(--ink); }
.web__kb i { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 5px; vertical-align: -1px; }
.web__kb span {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #060a11;
}

/* 19 · the week × hour heat grid. Each cell is one column of ink, coloured by
   sign and faded by how much of the busiest cell it booked. */
.heat {
  display: grid;
  gap: 3px;
  padding: 10px;
  /* a stretched pane gives the grid its extra height instead of letting it
     pool as a hole under the last row; the legend is the last row of all */
  grid-template-rows: auto repeat(5, minmax(16px, 1fr)) auto;
  /* 24 columns across a two-metre pane is a row of bars, not a heatmap, so the
     grid is capped and centred and the cells below are given a ceiling: the
     rows still take the pane's height, the tiles inside them stop growing. */
  max-width: 1180px;
  margin: 0 auto;
}
.heat__hd,
.heat__row {
  display: grid;
  grid-template-columns: 34px repeat(24, minmax(0, 1fr));
  gap: 3px;
  align-items: center;
}
.heat__hd { margin-bottom: 2px; }
.heat__hd b {
  grid-column: span 3;
  font: 600 8.5px/1 var(--mono);
  letter-spacing: 0.08em;
  color: var(--faint);
  text-align: left;
}
.heat__row s {
  font: 700 9px/1 var(--mono);
  letter-spacing: 0.08em;
  text-decoration: none;
  color: var(--muted);
}
.heat__row i {
  display: block;
  height: 100%;
  min-height: 16px;
  max-height: 42px;
  border-radius: 3px;
  background: var(--line-2);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
  transition: opacity 0.3s var(--ease), transform 0.2s var(--ease), box-shadow 0.2s;
}
.heat__row i:hover { transform: scale(1.14); outline: 1px solid var(--line-2); }
.heat__row i.is-up {
  background: var(--up);
  box-shadow: inset 0 0 0 1px rgba(34, 211, 165, 0.35), 0 0 12px -5px rgba(34, 211, 165, 0.9);
}
.heat__row i.is-down {
  background: var(--down);
  box-shadow: inset 0 0 0 1px rgba(255, 93, 115, 0.35), 0 0 12px -5px rgba(255, 93, 115, 0.9);
}
.heat__row i.is-flat { opacity: 0.22; }
/* the busiest cell is ringed, so the one fact the grid exists to deliver does
   not have to be hunted for among one hundred and twenty squares */
.heat__row i.is-best { outline: 1px solid var(--accent); outline-offset: 1px; }
.heat__lg {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 4px 1px 0;
  font: 600 9px/1 var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--faint);
}
.heat__lg-bar {
  flex: 1 1 auto;
  height: 6px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--down), #141a24 47%, #141a24 53%, var(--up));
}
.heat__lg b { color: var(--ink); }

/* 20 · the quality radar, one canvas of six axes */
.radar {
  position: relative;
  height: 232px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: radial-gradient(80% 90% at 50% 40%, rgba(var(--accent-rgb), 0.07), transparent 70%), #05080f;
}
.radar canvas { display: block; width: 100%; height: 100%; }

/* 21 · the pips ribbon: one column of ink per closed trade, green up and red
   down, in the same order as the curve above it. It gives the pane a floor and
   reads the run's own distribution at a glance. */
.flow__strip {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 40px;
  padding: 0 12px 12px;
}
.flow__strip i {
  flex: 1 1 0;
  min-width: 2px;
  border-radius: 1px 1px 0 0;
  background: var(--line-2);
}
.flow__strip i.is-up { background: linear-gradient(180deg, var(--up), rgba(34, 211, 165, 0.28)); }
.flow__strip i.is-down { background: linear-gradient(180deg, var(--down), rgba(255, 93, 115, 0.28)); }
.flow__strip i.is-sweep { box-shadow: 0 0 0 1px var(--accent) inset; }

@media (max-width: 900px) {
  .heat__row i { min-height: 12px; }
  .heat__row s { font-size: 8px; }
}

/* ---- 06f. leaderboard -------------------------------------------------- */
.ldr { display: flex; flex-direction: column; }
.ldr__row {
  display: grid;
  grid-template-columns: 22px 52px minmax(0, 1fr) 46px 56px;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-bottom: 1px dotted var(--line-dot);
  font: 600 11px/1.3 var(--mono);
  color: var(--ink-2);
  cursor: pointer;
}
.ldr__row:hover { background: rgba(var(--accent-rgb), 0.08); }
.ldr__row.is-sel { background: rgba(var(--accent-rgb), 0.16); box-shadow: inset 2px 0 0 var(--accent); }
.ldr__n { color: var(--faint); font-weight: 700; }
.ldr__when { color: var(--muted); }
.ldr__score { color: var(--cyan); text-align: right; }
.ldr__r { font-weight: 700; text-align: right; }
.ldr__r.up { color: var(--up); }
.ldr__r.down { color: var(--down); }
.ldr__sep {
  padding: 5px 10px;
  border-bottom: 1px solid var(--line);
  background: #0b0e11;
  color: var(--faint);
  font: 700 9.5px/1 var(--mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.ldr__empty { padding: 12px 10px; color: var(--faint); font: 600 11px/1.6 var(--mono); }

/* ==========================================================================
   07. HERO
   ========================================================================== */
.stq-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background:
    linear-gradient(180deg, rgba(var(--accent-rgb), 0.05), transparent 55%),
    var(--panel);
  padding: 16px 18px 18px;
}

.stq-eye {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: 700 10px/1 var(--mono);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
}
.stq-eye i {
  width: 18px; height: 2px;
  background: var(--accent);
}

.stq-title {
  margin: 12px 0 0;
  font: 700 clamp(1.5rem, 3.6vw, 2.6rem) / 1.06 var(--mono);
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--ink);
}
.stq-title__thin {
  display: block;
  margin-bottom: 6px;
  font-size: 0.36em;
  letter-spacing: 0.24em;
  color: var(--faint);
}
.stq-title__hl { color: var(--accent); }

.stq-lead {
  margin-top: 14px;
  max-width: 78ch;
  color: var(--ink-2);
  font: 400 13.5px/1.75 var(--ui);
}
.stq-lead b { color: var(--accent); font-family: var(--mono); font-size: 12.5px; }

/* provenance: five key/value tiles, the "where did this number come from"
   panel that sits on every serious terminal page */
.stq-prov {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--line-dot);
  overflow: hidden;
  /* no `align-self: start`: the provenance box has to share the hero's bottom
     edge with the copy beside it, or the taller column leaves a hole inside a
     panel that has a visible border. The cards stretch to absorb the height. */
}
.bt__prov-card {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 11px 12px;
  background: #07080a;
  min-width: 0;
}
.bt__prov-card span {
  font: 600 9.5px/1 var(--mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--faint);
}
.bt__prov-card b {
  font: 700 13px/1.25 var(--mono);
  color: var(--ink);
  word-break: break-word;
}
.bt__prov-card em {
  font: 600 10px/1.4 var(--mono);
  letter-spacing: 0.04em;
  color: var(--muted);
}
.bt__refresh {
  grid-column: 1 / -1;
  border: 0;
  border-radius: 0;
  padding: 10px;
  background: #101316;
  color: var(--accent);
  font-size: 10.5px;
  letter-spacing: 0.18em;
}
.bt__refresh:hover { background: var(--accent); color: #000; }

/* the honesty banner: reads like a terminal warning line, not a hero card */
.bt__notice {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 14px;
  padding: 12px 14px;
  border: 1px solid var(--line-gold);
  border-left: 4px solid var(--accent);
  border-radius: var(--r);
  background: #0a0805;
}
.bt__notice b {
  font: 700 10.5px/1.6 var(--mono);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
}
.bt__notice p {
  color: var(--ink-2);
  font: 400 12.5px/1.7 var(--ui);
}
.bt__notice u {
  text-decoration: none;
  color: var(--accent);
  border-bottom: 1px dotted var(--line-gold);
}

/* ---- the hero's door to the live desk ---------------------------------- */
.stq-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 10px;
  margin: 18px 0 4px;
}
/* The one door on the page that asks the reader to leave the replay for a real
   feed, and it used to be a dark card with a thin amber outline — readable, and
   about as loud as the panes around it. It is still the terminal's palette and
   still no curves the rest of the screen does not have, but it now reads as a
   control: a warm fill that falls off to the lower right, a hairline of light
   along the top edge, a sheen that crosses it slowly, the live dot inside its
   own ring, and an arrow in a disc that fills with amber under the pointer. */
.stq-cta__go {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 15px;
  flex: 1 1 340px;
  min-height: 66px;
  padding: 9px 14px 9px 15px;
  border: 1px solid rgba(var(--accent-rgb), 0.55);
  border-radius: 12px;
  overflow: hidden;
  color: var(--ink);
  background:
    radial-gradient(140% 190% at 0% 0%, rgba(var(--accent-rgb), 0.26), transparent 58%),
    radial-gradient(120% 170% at 100% 130%, rgba(var(--accent-rgb), 0.14), transparent 56%),
    linear-gradient(180deg, #171307, #0a0803);
  box-shadow:
    inset 0 1px 0 rgba(255, 236, 190, 0.16),
    0 20px 40px -30px rgba(var(--accent-rgb), 0.95);
  transition: transform 0.18s var(--ease), border-color 0.18s, box-shadow 0.18s;
}
.stq-cta__go::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 30%, rgba(var(--accent-rgb), 0.18) 50%, transparent 70%);
  transform: translateX(-120%);
  animation: stqSheen 5s ease-in-out infinite;
}
@keyframes stqSheen { 0%, 58% { transform: translateX(-120%); } 100% { transform: translateX(120%); } }
.stq-cta__go:hover {
  transform: translateY(-2px);
  border-color: var(--accent);
  box-shadow:
    inset 0 1px 0 rgba(255, 236, 190, 0.24),
    0 26px 48px -28px rgba(var(--accent-rgb), 1),
    0 0 0 4px rgba(var(--accent-rgb), 0.13);
}
.stq-cta__go:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
/* the arrow sits in a disc of its own, so the card ends in something that looks
   like the button it is rather than in a floating glyph */
.stq-cta__go > svg {
  width: 17px;
  height: 17px;
  padding: 9px;
  box-sizing: content-box;
  margin-left: auto;
  flex: none;
  position: relative;
  border: 1px solid rgba(var(--accent-rgb), 0.42);
  border-radius: 50%;
  background: radial-gradient(120% 120% at 30% 20%, rgba(var(--accent-rgb), 0.26), rgba(var(--accent-rgb), 0.06));
  color: var(--accent);
  box-shadow: inset 0 1px 0 rgba(255, 236, 190, 0.18);
  transition: transform 0.2s var(--ease), background 0.2s, color 0.2s, border-color 0.2s;
}
.stq-cta__go:hover > svg {
  transform: translateX(3px);
  border-color: var(--accent);
  background: var(--accent);
  color: #17130a;
}
.stq-cta__txt { display: flex; flex-direction: column; gap: 4px; min-width: 0; position: relative; }
.stq-cta__txt b {
  font: 800 16px/1 var(--mono);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--accent);
  text-shadow: 0 0 18px rgba(var(--accent-rgb), 0.45);
}
.stq-cta__txt em { font: 500 10.5px/1.35 var(--ui); font-style: normal; color: var(--muted); }
.stq-cta__pulse {
  position: relative;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex: none;
  border: 1px solid rgba(var(--accent-rgb), 0.45);
  border-radius: 50%;
  background: radial-gradient(120% 120% at 30% 25%, rgba(var(--accent-rgb), 0.2), transparent 70%);
  box-shadow: inset 0 1px 0 rgba(255, 236, 190, 0.14);
}
.stq-cta__pulse i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 10px rgba(var(--accent-rgb), 0.9);
}
.stq-cta__pulse::after {
  content: "";
  position: absolute;
  inset: -1px;
  border: 1px solid var(--accent);
  border-radius: 50%;
  animation: stqPulse 2.2s ease-out infinite;
}
@keyframes stqPulse {
  0% { transform: scale(0.85); opacity: 0.9; }
  100% { transform: scale(1.7); opacity: 0; }
}
.stq-cta__alt {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 58px;
  padding: 0 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #07080a;
  color: var(--muted);
  font: 700 10.5px/1 var(--mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transition: color 0.18s, border-color 0.18s, transform 0.18s var(--ease);
}
.stq-cta__alt svg { width: 14px; height: 14px; }
.stq-cta__alt:hover { color: var(--accent); border-color: rgba(255, 187, 0, 0.4); transform: translateY(-2px); }
@media (prefers-reduced-motion: reduce) {
  .stq-cta__go::before,
  .stq-cta__pulse::after { animation: none; }
}

/* ==========================================================================
   08. RUN STRIP
   ========================================================================== */
.bt__run {
  position: relative;
  display: flex;
  align-items: stretch;
  flex-wrap: wrap;
  gap: 0;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: #060708;
  padding-bottom: 3px;
}
.bt__run-live {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  background: var(--accent);
  color: #000;
  font: 700 10.5px/1 var(--mono);
  letter-spacing: 0.18em;
}
.bt__run-live i {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #000;
  animation: stqPulse 1.4s steps(2, end) infinite;
}
.bt__run-live.is-paused { background: #14171a; color: var(--muted); }
.bt__run-live.is-paused i { background: var(--muted); animation: none; }

.bt__run-item {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 9px 14px;
  border-right: 1px solid var(--line);
  min-width: 0;
}
.bt__run-item s {
  font: 600 9.5px/1 var(--mono);
  letter-spacing: 0.16em;
  color: var(--faint);
}
.bt__run-item b { font: 700 12px/1 var(--mono); color: var(--ink); }
.bt__run-item b.up { color: var(--up); }
.bt__run-item b.down { color: var(--down); }

.bt__run-hint {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 auto;
  min-width: 0;
  padding: 9px 14px;
  color: var(--faint);
  font: 600 10px/1.6 var(--mono);
  letter-spacing: 0.04em;
}
.bt__run-hint.is-paused { color: var(--accent); }
.bt__run-hint kbd { padding: 0 5px; font-size: 9.5px; }

.bt__run-prog {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 3px;
  background: #14171a;
  overflow: hidden;
  border-radius: 0 0 var(--r) var(--r);
}
.bt__run-prog i {
  display: block;
  width: 0%;
  height: 100%;
  background: linear-gradient(90deg, #c9760d, var(--accent));
  transition: width 0.25s linear;
}

/* ==========================================================================
   09. QUOTE STRIP (the OHLC line)
   ========================================================================== */
.bt__ohlc {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  border-bottom: 1px solid var(--line);
  background: #050607;
}
.bt__ohlc > span {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 8px 13px;
  border-right: 1px dotted var(--line-dot);
  min-width: 0;
}
.bt__ohlc s {
  font: 600 9.5px/1 var(--mono);
  letter-spacing: 0.16em;
  color: var(--faint);
}
.bt__ohlc b { font: 700 13px/1 var(--mono); color: var(--ink); }
.bt__ohlc b.up { color: var(--up); }
.bt__ohlc b.down { color: var(--down); }
/* the close is the quote: it gets the size. Its colour is left to the up/down
   class the controller writes, so the strip still reads green against the
   previous bar and red against it */
#ohlcC { font-size: 16px; }
.bt__ohlc > span:nth-child(5) { background: rgba(var(--accent-rgb), 0.045); }

/* ==========================================================================
   10. CHART
   ========================================================================== */
.bt__chart-panel { min-width: 0; }
.bt__chart {
  position: relative;
  height: 420px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.012), transparent 40%),
    #030405;
}
.bt__chart canvas { width: 100%; height: 100%; }

.bt__legend {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  padding: 6px 12px;
  border-top: 1px dotted var(--line-dot);
  background: rgba(0, 0, 0, 0.72);
  font: 600 9.5px/1 var(--mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--faint);
}
.bt__legend span { display: inline-flex; align-items: center; gap: 6px; }
/* the four swatches are the four colours the canvas actually draws with (see
   the level lines and the trade overlay in js/term-charts.js) — the exit marker
   is a ring coloured by the R the trade realised, so its swatch is the pair it
   is drawn in rather than a fifth colour of its own. The entry rule is amber,
   the same amber as the terminal's chrome, so --accent and #ffbb00 are one
   colour here. */
.sw { width: 12px; height: 2px; display: inline-block; }
.sw--entry { background: #ffbb00; }
.sw--tp { background: #22d3a5; }
.sw--sl { background: #ff5d73; }
.sw--exit {
  background: linear-gradient(90deg, #22d3a5 0 50%, #ff5d73 50% 100%);
  height: 3px;
}

/* the "reading the snapshot" state: amber scanning bars, no spinner */
.chart-load {
  position: absolute;
  inset: 0;
  display: none;
  place-items: center;
  gap: 14px;
  background: rgba(0, 0, 0, 0.9);
  z-index: 4;
  padding: 20px;
}
.chart-load.is-on { display: grid; }
.chart-load__bars {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 44px;
}
.chart-load__bars i {
  width: 6px;
  height: 14px;
  background: var(--line-2);
  animation: stqBars 0.9s steps(4, end) infinite alternate;
}
.chart-load__bars i:nth-child(2n) { animation-delay: 0.12s; }
.chart-load__bars i:nth-child(3n) { animation-delay: 0.24s; }
.chart-load__bars i:nth-child(4n) { animation-delay: 0.36s; }
@keyframes stqBars { from { height: 8px; background: var(--line-2); } to { height: 44px; background: var(--accent); } }
.chart-load__txt { text-align: center; }
.chart-load__txt b {
  display: block;
  font: 700 11.5px/1 var(--mono);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
}
.chart-load__txt span {
  display: block;
  margin-top: 8px;
  font: 600 10.5px/1.6 var(--mono);
  letter-spacing: 0.06em;
  color: var(--muted);
}
.chart-load.is-err .chart-load__txt b { color: var(--down); }
.chart-load.is-err .chart-load__bars i { background: var(--down); animation: none; }

/* chart boxes used by the smaller canvases */
.chartbox2 { position: relative; padding: 8px 10px 10px; }
.chart-h1 { height: 260px; }
.chart-h2 { height: 190px; }
.chart-h3 { height: 150px; }

/* ==========================================================================
   11. STATS
   ========================================================================== */
.statrow {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--line-dot);
  border-top: 1px solid var(--line-dot);
}
.statrow--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.statrow > div {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 12px;
  background: #07080a;
  min-width: 0;
}
.statrow span {
  font: 600 9.5px/1.3 var(--mono);
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--faint);
}
.statrow b {
  font: 700 15px/1 var(--mono);
  color: var(--ink);
  letter-spacing: -0.01em;
}
.statrow b.up { color: var(--up); }
.statrow b.down { color: var(--down); }

.statlist { display: flex; flex-direction: column; }
.statlist > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 12px;
  border-bottom: 1px dotted var(--line-dot);
  font: 600 11.5px/1.45 var(--mono);
}
.statlist > div:last-child { border-bottom: 0; }
.statlist > div:hover { background: #0d1013; }
.statlist span { color: var(--muted); letter-spacing: 0.05em; }
.statlist b { color: var(--ink); text-align: right; }
.statlist b.up { color: var(--up); }
.statlist b.down { color: var(--down); }
.statlist--tight > div { padding: 6px 12px; font-size: 11px; }

/* ==========================================================================
   12. CHECKLIST STACK
   ========================================================================== */
.stack { display: flex; flex-direction: column; }
.stack__row {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(60px, 1fr) 40px 52px minmax(0, 78px);
  align-items: center;
  gap: 10px;
  padding: 6px 12px;
  border-bottom: 1px dotted var(--line-dot);
  font: 600 11px/1 var(--mono);
  letter-spacing: 0.04em;
}
.stack__row:last-child { border-bottom: 0; }
.stack__row:hover { background: rgba(var(--accent-rgb), 0.05); }
.stack__name {
  color: var(--ink-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.stack__bar {
  height: 8px;
  border: 1px solid var(--line);
  background: #0b0d10;
  overflow: hidden;
}
.stack__bar i {
  display: block;
  width: var(--w, 0%);
  height: 100%;
  background: repeating-linear-gradient(90deg, var(--accent) 0 5px, #7a4a0c 5px 6px);
}
.stack__pct { color: var(--ink); text-align: right; }
.stack__r { font-weight: 700; text-align: right; }
.stack__r.up { color: var(--up); }
.stack__r.down { color: var(--down); }
.stack__hint { color: var(--faint); text-align: right; font-size: 10px; }

/* ==========================================================================
   13. SUMMARY LIST
   ========================================================================== */
.sum { display: flex; flex-direction: column; }
.sum li {
  position: relative;
  padding: 9px 12px 9px 26px;
  border-bottom: 1px dotted var(--line-dot);
  color: var(--ink-2);
  font: 400 11.5px/1.65 var(--mono);
}
.sum li:last-child { border-bottom: 0; }
.sum li::before {
  content: '›';
  position: absolute;
  left: 11px;
  top: 9px;
  color: var(--accent);
  font-weight: 700;
}
.sum b { color: var(--ink); }
.sum b.up { color: var(--up); }
.sum b.down { color: var(--down); }
.sum__keys {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding: 9px 12px;
  border-top: 1px solid var(--line);
  background: #050607;
  font: 600 9.5px/1 var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--faint);
}
.sum__keys span { display: inline-flex; align-items: center; gap: 5px; }

/* ==========================================================================
   14. SELECTED TRADE
   ========================================================================== */
.sel__empty {
  padding: 14px 12px;
  color: var(--faint);
  font: 400 11.5px/1.7 var(--mono);
}
.sel__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--line-dot);
  border-top: 1px solid var(--line-dot);
}
.sel__grid > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 12px;
  background: #07080a;
  min-width: 0;
}
.sel__grid span {
  font: 600 9.5px/1 var(--mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--faint);
}
.sel__grid b { font: 700 12px/1 var(--mono); color: var(--ink); text-align: right; }
.sel__grid b.up { color: var(--up); }
.sel__grid b.down { color: var(--down); }

.sel__exc {
  display: grid;
  gap: 7px;
  padding: 12px;
  border-top: 1px dotted var(--line-dot);
}
.sel__bar {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
}
.sel__bar span {
  font: 600 9.5px/1 var(--mono);
  letter-spacing: 0.1em;
  color: var(--muted);
}
.sel__bar i {
  display: block;
  width: var(--w, 0%);
  height: 10px;
  background: repeating-linear-gradient(90deg, var(--line-2) 0 4px, #14181b 4px 5px);
  transition: width 0.3s var(--ease);
}
.sel__bar--up i { background: repeating-linear-gradient(90deg, var(--up) 0 4px, #0b6a4a 4px 5px); }
.sel__bar--down i { background: repeating-linear-gradient(90deg, var(--down) 0 4px, #7a2222 4px 5px); }

/* ==========================================================================
   15. WHY LIST (the engine's reasons)
   ========================================================================== */
.why { display: flex; flex-direction: column; }
.why__row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 7px 12px;
  border-bottom: 1px dotted var(--line-dot);
  font: 600 11.5px/1.5 var(--mono);
}
.why__row:last-child { border-bottom: 0; }
.why__row > i {
  flex: none;
  width: 14px;
  text-align: center;
  font-weight: 700;
}
.why__row > span { min-width: 0; }
.why__row b { display: block; color: var(--ink); }
.why__row em { display: block; margin-top: 2px; color: var(--faint); font-size: 10.5px; }
.why__row.is-pass > i { color: var(--up); }
.why__row.is-pass b { color: var(--up); }
.why__row.is-miss { opacity: 0.62; }
.why__row.is-miss > i { color: var(--faint); }

.badge {
  display: inline-block;
  padding: 3px 7px;
  border-radius: 2px;
  font: 700 10px/1 var(--mono);
  letter-spacing: 0.12em;
}
.badge--long { background: rgba(var(--up-rgb), 0.14); color: var(--up); border: 1px solid rgba(var(--up-rgb), 0.35); }
.badge--short { background: rgba(var(--down-rgb), 0.14); color: var(--down); border: 1px solid rgba(var(--down-rgb), 0.35); }

/* ==========================================================================
   16. TRADE LOG TABLE
   ========================================================================== */
.bt__table-panel { min-width: 0; }
.bt__table-wrap {
  max-height: 560px;
  overflow: auto;
  overscroll-behavior: contain;
}
.bt__table { width: 100%; font: 600 11.5px/1 var(--mono); }
.bt__table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  padding: 8px 10px;
  border-bottom: 1px solid var(--line-2);
  border-right: 1px dotted var(--line-dot);
  background: #0e1114;
  color: var(--accent);
  font: 700 9.5px/1 var(--mono);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  text-align: left;
  white-space: nowrap;
}
.bt__table tbody td {
  padding: 6px 10px;
  border-bottom: 1px dotted var(--line-dot);
  border-right: 1px dotted var(--line-dot);
  color: var(--ink-2);
  white-space: nowrap;
}
.bt__table tbody td:last-child,
.bt__table thead th:last-child { border-right: 0; }
.bt__table tbody tr:nth-child(even) td { background: rgba(255, 255, 255, 0.014); }
.bt__table tbody tr[data-trade] { cursor: pointer; }
.bt__table tbody tr:hover td { background: rgba(var(--accent-rgb), 0.07); color: var(--ink); }
.bt__table tbody tr.is-loss td { background: rgba(var(--down-rgb), 0.045); }
.bt__table tbody tr.is-sel td {
  background: rgba(var(--accent-rgb), 0.13) !important;
  color: var(--ink);
}
.bt__table tbody tr.is-sel td:first-child { box-shadow: inset 2px 0 0 var(--accent); }
.bt__table .up { color: var(--up); }
.bt__table .down { color: var(--down); }
.bt__table .badge { font-size: 9.5px; padding: 2px 6px; }
.bt__score { color: var(--cyan); }
.bt__clock { color: var(--accent); font-size: 10px; }
.bt__empty {
  padding: 26px 14px;
  text-align: center;
  color: var(--faint);
  font: 600 11px/1.7 var(--mono);
  letter-spacing: 0.06em;
}

/* ==========================================================================
   17. TOASTS
   ========================================================================== */
.toasts {
  position: fixed;
  right: 12px;
  bottom: 46px;
  z-index: 120;
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: min(360px, calc(100vw - 24px));
}
.toast {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--accent);
  border-radius: var(--r);
  background: #0a0c0e;
  color: var(--ink);
  font: 600 11.5px/1.5 var(--mono);
  transform: translateX(12px);
  opacity: 0;
  transition: transform 0.22s var(--ease), opacity 0.22s var(--ease);
}
.toast.is-in { transform: none; opacity: 1; }
.toast > b { color: var(--accent); }
.toast strong { color: var(--accent); letter-spacing: 0.1em; }

/* ==========================================================================
   18. BOOT OVERLAY
   --------------------------------------------------------------------------
   The page paints the terminal chrome first and types the boot log over it.
   The overlay always clears itself: even with scripting blocked or broken the
   animation ends hidden, so nobody is ever trapped on a splash screen.
   ========================================================================== */
.stq-boot {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: 20px;
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 50% -10%, rgba(255, 187, 0, 0.10), transparent 60%),
    radial-gradient(80% 70% at 12% 105%, rgba(34, 211, 165, 0.07), transparent 62%),
    #000;
  animation: stqBootOut 0.5s ease 3.1s forwards;
}
@keyframes stqBootOut {
  to { opacity: 0; visibility: hidden; }
}
.stq-boot.is-done { display: none; }

/* drifting light behind the card, so a refresh reads as the terminal waking
   rather than a black frame */
.stq-boot__aurora { position: absolute; inset: 0; pointer-events: none; }
.stq-boot__aurora i {
  position: absolute;
  display: block;
  border-radius: 50%;
  filter: blur(60px);
  opacity: 0.5;
}
.stq-boot__aurora i:nth-child(1) {
  width: 420px; height: 420px; left: -120px; top: -140px;
  background: rgba(255, 187, 0, 0.22);
  animation: stqBootDrift 9s ease-in-out infinite;
}
.stq-boot__aurora i:nth-child(2) {
  width: 360px; height: 360px; right: -110px; bottom: -130px;
  background: rgba(34, 211, 165, 0.18);
  animation: stqBootDrift 11s ease-in-out infinite reverse;
}
.stq-boot__aurora i:nth-child(3) {
  width: 260px; height: 260px; left: 55%; top: 8%;
  background: rgba(56, 189, 248, 0.14);
  animation: stqBootDrift 13s ease-in-out infinite;
}
@keyframes stqBootDrift {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50%      { transform: translate3d(30px, -26px, 0) scale(1.12); }
}

.stq-boot__grid {
  position: absolute;
  inset: -2px;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.028) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: radial-gradient(60% 60% at 50% 45%, #000 30%, transparent 78%);
  -webkit-mask-image: radial-gradient(60% 60% at 50% 45%, #000 30%, transparent 78%);
}

.stq-boot__scan {
  position: absolute;
  left: 0;
  right: 0;
  top: -20%;
  height: 22%;
  pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(255, 187, 0, 0.055), transparent);
  animation: stqBootScan 2.6s linear infinite;
}
@keyframes stqBootScan {
  0%   { transform: translateY(0); }
  100% { transform: translateY(560%); }
}

.stq-boot__box {
  position: relative;
  width: min(560px, 100%);
  border: 1px solid var(--line-2);
  border-radius: var(--r-lg);
  background: rgba(5, 6, 7, 0.92);
  padding: 18px 20px 16px;
  box-shadow: 0 40px 120px -60px rgba(255, 187, 0, 0.7);
  animation: stqBootIn 0.45s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes stqBootIn {
  from { opacity: 0; transform: translateY(14px) scale(0.985); }
}
.stq-boot__brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}
.stq-boot__mark {
  position: relative;
  display: grid;
  place-items: center;
  width: 34px; height: 34px;
  flex: none;
}
.stq-boot__mark img {
  width: 26px; height: 26px;
  display: block;
  filter: drop-shadow(0 0 12px rgba(255, 187, 0, 0.55));
}
.stq-boot__ring {
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 1px solid rgba(255, 187, 0, 0.5);
  animation: stqBootRing 2.4s ease-out infinite;
}
.stq-boot__ring--2 { animation-delay: 1.2s; }
@keyframes stqBootRing {
  0%   { transform: scale(0.7); opacity: 0.9; }
  80%  { transform: scale(1.6); opacity: 0; }
  100% { opacity: 0; }
}
.stq-boot__brand b { font: 700 15px/1 var(--mono); letter-spacing: 0.16em; color: var(--ink); }
.stq-boot__brand em { font: 700 11px/1 var(--mono); letter-spacing: 0.26em; color: var(--accent); }
.stq-boot__meta {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 0;
  font: 600 10px/1 var(--mono);
  letter-spacing: 0.14em;
  color: var(--faint);
}
.stq-boot__lines {
  min-height: 118px;
  margin: 0;
  padding: 10px 12px;
  border: 1px solid var(--line-dot);
  background: #000;
  font: 600 11px/1.75 var(--mono);
  color: var(--muted);
}
.stq-boot__lines li { display: flex; gap: 8px; }
.stq-boot__lines li b { color: var(--accent); flex: none; }
.stq-boot__lines li span { color: var(--ink-2); }
.stq-boot__lines li.is-ok span { color: var(--up); }
.stq-boot__lines li.is-warn span { color: var(--accent); }
.stq-boot__bar {
  height: 4px;
  margin: 12px 0 0;
  background: #14171a;
  overflow: hidden;
}
.stq-boot__bar i {
  display: block;
  width: 0%;
  height: 100%;
  background: linear-gradient(90deg, #c9760d, var(--accent), #ffe9a8);
  box-shadow: 0 0 14px rgba(255, 187, 0, 0.6);
  transition: width 0.18s linear;
}
.stq-boot__pct {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 8px;
  font: 600 9.5px/1 var(--mono);
  letter-spacing: 0.14em;
  color: var(--faint);
}
.stq-boot__pct span:first-child { color: var(--accent); }
.stq-boot__strip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin: 14px 0 0;
  padding: 10px 0 0;
  border-top: 1px solid var(--line);
  list-style: none;
  font: 600 9.5px/1 var(--mono);
  letter-spacing: 0.12em;
  color: var(--faint);
}
.stq-boot__strip li { display: inline-flex; align-items: center; gap: 7px; }
.stq-boot__strip i {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--accent);
  animation: stqBootBlip 1.6s var(--ease, ease) infinite;
}
.stq-boot__strip li:nth-child(2) i { animation-delay: 0.2s; }
.stq-boot__strip li:nth-child(3) i { animation-delay: 0.4s; }
.stq-boot__strip li:nth-child(4) i { animation-delay: 0.6s; }
@keyframes stqBootBlip {
  0%, 100% { opacity: 0.35; }
  50%      { opacity: 1; }
}
.stq-boot__hint {
  margin-top: 12px;
  font: 600 10px/1.6 var(--mono);
  letter-spacing: 0.09em;
  color: var(--faint);
}
.stq-boot__hint b { color: var(--accent); }

/* ==========================================================================
   19. STATUS BAR / FOOTER
   ========================================================================== */
.stq-foot {
  border-top: 1px solid var(--line-2);
  background: #000;
}
.stq-status {
  display: flex;
  align-items: stretch;
  flex-wrap: wrap;
  gap: 0;
  min-height: 30px;
  font: 600 10px/1 var(--mono);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted);
}
.stq-status > span,
.stq-status > a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0 12px;
  border-right: 1px solid var(--line);
  white-space: nowrap;
}
.stq-status__spacer { flex: 1 1 auto; border-right: 0 !important; }
.stq-status > span b { color: var(--ink); letter-spacing: 0.04em; }
.stq-status__led { color: var(--up); }
.stq-status__led i {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--up);
  animation: stqPulse 2s steps(2, end) infinite;
}
.stq-status > a { color: var(--ink-2); }
.stq-status > a:hover { background: var(--accent); color: #000; }
/* the two cash shortcuts that also live on the function bar, repeated here
   where the status line already reports the balance */
.stq-status__file a {
  margin-left: 8px;
  padding: 0 7px;
  border: 1px solid var(--line-2);
  border-radius: 2px;
  color: var(--accent);
  line-height: 18px;
  transition: background 0.18s, color 0.18s;
}
.stq-status__file a:hover { background: var(--accent); color: #000; }

.stq-foot__legal {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  padding: 10px 12px 14px;
  border-top: 1px solid var(--line);
  color: var(--faint);
  font: 600 10px/1.6 var(--mono);
  letter-spacing: 0.06em;
}
.stq-foot__legal a { color: var(--muted); }
.stq-foot__legal a:hover { color: var(--accent); }

/* ==========================================================================
   19b. HELP OVERLAY (built by js/stquant-shell.js from the command registry)
   ========================================================================== */
.stq-help {
  position: fixed;
  inset: 0;
  z-index: 210;
  display: grid;
  place-items: center;
  padding: 16px;
  background: rgba(0, 0, 0, 0.86);
}
.stq-help[hidden] { display: none; }
.stq-help__box {
  width: min(760px, 100%);
  max-height: min(84vh, 760px);
  display: flex;
  flex-direction: column;
  border: 1px solid var(--accent);
  border-radius: var(--r);
  background: #050607;
}
.stq-help__head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 10px;
  min-height: 32px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, #101316, #0a0c0e);
}
.stq-help__head b {
  font: 700 11px/1 var(--mono);
  letter-spacing: 0.18em;
  color: var(--accent);
}
.stq-help__head em {
  margin-left: auto;
  font: 600 10px/1 var(--mono);
  letter-spacing: 0.12em;
  color: var(--faint);
}
.stq-help__x {
  padding: 4px 9px;
  border: 1px solid var(--line-2);
  border-radius: 2px;
  background: #0c0e11;
  color: var(--ink-2);
  font: 700 9.5px/1 var(--mono);
  letter-spacing: 0.12em;
  cursor: pointer;
}
.stq-help__x:hover { border-color: var(--accent); color: var(--accent); }
.stq-help__body { overflow: auto; }
.stq-help__table { width: 100%; font: 600 11.5px/1.5 var(--mono); }
.stq-help__table th {
  position: sticky;
  top: 0;
  padding: 8px 12px;
  border-bottom: 1px solid var(--line-2);
  background: #0e1114;
  color: var(--accent);
  font: 700 9.5px/1 var(--mono);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  text-align: left;
}
.stq-help__table td {
  padding: 7px 12px;
  border-bottom: 1px dotted var(--line-dot);
  color: var(--ink-2);
  vertical-align: top;
}
.stq-help__table tbody tr:hover td { background: rgba(var(--accent-rgb), 0.06); }
.stq-help__table td:first-child { color: var(--ink); font-weight: 700; }
.stq-help__table td:nth-child(2) { color: var(--cyan); white-space: nowrap; }
.stq-help__table td em {
  display: block;
  margin-top: 2px;
  color: var(--faint);
  font: 600 10px/1.4 var(--mono);
  letter-spacing: 0.03em;
}
.stq-help__foot {
  padding: 10px 12px 12px;
  border-top: 1px solid var(--line);
  color: var(--faint);
  font: 400 11px/1.7 var(--mono);
}
.stq-help__foot b { color: var(--accent); }
/* the fact-strip currency chip */
.stq-strip__link--ccy b { color: var(--accent); }

/* ==========================================================================
   19c. QUICK ORDER — moved to the live desk
   ==========================================================================
   The strip that used to be drawn here lives on `trade.html` now (see 06b of
   css/trade.css and the comment above `.tdk-ord` in that page's markup). It
   carried a side and a size to the desk through the query string, which only
   made sense on this side of the hand-over; the desk's ticket is on that page,
   so the strip is too, pressing that ticket directly.

   Nothing here has to make room for a fixed bar at the foot of the page any
   more either: the footer's own padding, the chat launcher and the toasts all
   go back to the positions they hold on any other page. */

/* ==========================================================================
   20. RESPONSIVE
   ========================================================================== */
@media (max-width: 1400px) {
  .stq-screen { grid-template-columns: 150px minmax(0, 1fr); }
  .stq-rail__item em { display: none; }
}

@media (max-width: 1240px) {
  .stq-hero { grid-template-columns: minmax(0, 1fr); }
  .stq-prov { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* the mosaic falls back to a six-column screen */
  .stq-board { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .col-3,
  .col-4 { grid-column: span 3; }
  .col-5,
  .col-7 { grid-column: span 6; }
  .col-8,
  .col-9,
  .col-6,
  .col-12 { grid-column: span 6; }
}

@media (max-width: 1024px) {
  .stq-strip__item--hide,
  .stq-cmd__keys { display: none; }
  /* the rail turns into a scrolling index strip above the panes */
  .stq-screen { grid-template-columns: minmax(0, 1fr); }
  .stq-rail {
    position: static;
    flex-direction: row;
    overflow-x: auto;
    overscroll-behavior-x: contain;
  }
  .stq-rail__head {
    flex: none;
    border-bottom: 0;
    border-right: 1px solid var(--line);
  }
  .stq-rail__item {
    flex: none;
    border-bottom: 0;
    border-right: 1px dotted var(--line-dot);
    white-space: nowrap;
    line-height: 28px;
  }
  .stq-rail__foot { display: none; }
  /* ---- the bar becomes two rows on a phone ------------------------------
     It used to be one row that scrolled sideways, with DEPOSIT and WITHDRAWAL
     pinned to its right edge so that they were always reachable. Two things
     pinned to the same edge are two things in the same place: the pair sat on
     top of each other, over the keys, and GO TRADING slid underneath both. So
     the bar is a wrapping flex line now, in two lines that each hold together:

       line 1   the brand, then the ten function keys, scrolling inside
                whatever width the brand leaves them
       line 2   DEPOSIT · WITHDRAWAL · GO TRADING, the full width of the
                screen, three whole chips with a finger between them

     Every control is a whole control: nothing overlaps, nothing is clipped, and
     the two money buttons are on screen without a sideways scroll. The row of
     keys scrolls on its own, so a flick over it no longer drags the page. */
  .stq-bar { flex-wrap: wrap; overflow: visible; }
  .stq-brand { order: 1; min-height: 40px; padding: 0 11px; }
  /* `flex-basis: 0` is what puts the keys on the brand's line: a basis of auto
     is the row's own 900px of keys, which does not fit beside the brand, and a
     wrapping line sends the whole row to a line of its own before it ever gets
     the chance to shrink. At 0 the row is sized by the space that is left, and
     the keys scroll inside it. */
  .stq-fn {
    order: 2;
    flex: 1 1 0;
    min-width: 0;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }
  .stq-fn::-webkit-scrollbar { display: none; }
  .stq-fn button { flex: 0 0 auto; padding: 0 11px; font-size: 10px; line-height: 34px; min-height: 34px; }
  .stq-fn__gap { display: none; }
  /* the doors take the whole second line, and the chips stop being pinned
     anywhere: back to static, with the row itself doing the spacing */
  .stq-doors {
    order: 3;
    flex: 1 1 100%;
    justify-content: space-between;
    gap: 3px;
    padding: 3px 5px;
    border-top: 1px solid rgba(0, 0, 0, 0.22);
  }
  .stq-cash { position: static; margin: 0; padding: 0 12px; font-size: 9.5px; box-shadow: none; }
  .stq-cash svg { display: none; }
  /* GO TRADING was the bar's right edge and the seam against the cash chips;
     on its own row it is a chip like the two beside it */
  .stq-go { position: static; padding: 0 12px; line-height: 32px; border-left: 0; border-radius: 7px; }
}

@media (max-width: 860px) {
  /* one pane per row */
  .stq-board { grid-template-columns: minmax(0, 1fr); }
  .col-3,
  .col-4,
  .col-5,
  .col-6,
  .col-7,
  .col-8,
  .col-9,
  .col-12 { grid-column: span 1; }
  .hrs { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .stq-prov { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bt__chart { height: 320px; }
  .statrow,
  .statrow--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sel__grid { grid-template-columns: minmax(0, 1fr); }
  .bt__notice { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .stack__row { grid-template-columns: minmax(0, 1.2fr) 40px 46px; }
  .stack__bar,
  .stack__hint { display: none; }
  .toasts { bottom: 54px; }
}

@media (max-width: 560px) {
  .stq-title { font-size: 1.35rem; }
  /* the door to the live desk still gets the whole width of a phone: the disc
     on the right and the dot on the left come down a step, the two lines of
     text keep every word */
  .stq-cta__go { gap: 12px; min-height: 60px; padding: 8px 11px 8px 12px; }
  .stq-cta__go > svg { width: 15px; height: 15px; padding: 8px; }
  .stq-cta__txt b { font-size: 15px; }
  .stq-cta__pulse { width: 30px; height: 30px; }
  .stq-cmd__msg { display: none; }
  .stq-help__box { max-height: 88vh; }
  .stq-help__table td:first-child em { display: none; }
  .stq-prov { grid-template-columns: minmax(0, 1fr); }
  .bt__chart { height: 260px; }
  .stq-main { padding: 8px 6px 24px; }
  .bt__ohlc > span { padding: 7px 10px; }
  .bt__table { font-size: 10.5px; }
  .bt__table tbody td,
  .bt__table thead th { padding: 5px 7px; }
  .chart-h1 { height: 210px; }
  .chart-h2 { height: 170px; }
}

/* ==========================================================================
   21. MOTION / PRINT
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  /* The tape is the one animation that survives reduced-motion, deliberately:
     the owner asked for a ticker that travels right to left, and a market tape
     that does not move is not a tape. It is slowed to a crawl instead of being
     switched off, it still pauses on hover and focus, and it can be scrolled by
     hand with no scrollbar in the way. */
  .stq-tape__track { animation: stqTape 140s linear infinite !important; transform: none; }
  .stq-tape { overflow-x: auto; }
  .stq-tape__pill i { animation: none; }
  .stq-boot { display: none; }
}

@media print {
  .stq-head,
  .stq-foot,
  .stq-boot,
  .toasts,
  .chart-load { display: none !important; }
  body { background: #fff; color: #000; }
}