/* ═══════════════════════════════════════════════════════════════════════
   Signals desk — pages/signals.js + candles.js

   A workspace, not a page. Top to bottom: the standard page header (with
   the Desk / Scanner switch in its actions), one pill per in-house
   strategy, the selected strategy's context strip, the sticky rail, then
   the view. The Desk is watchlist · chart · inspector; the Scanner is the
   whole universe with the engine's reasons. Research left for the
   Performance page, so nothing here runs a replay across a universe.

   Everything reads the tokens in styles.css. The rail lives in
   signals-rail.css, the chart card and its tool strip in signals-chart.css,
   the blotter and ticket in signals-desk.css, the Scanner's diagnosis
   panels in signals-board.css.
   ═══════════════════════════════════════════════════════════════════════ */
.sg-page { max-width: none; }

/* The page accent follows the SELECTED STRATEGY's execution_mode, not the
   global Live/Paper switch -- "signals" is deliberately out of core.js
   MODE_AWARE, because a strategy can be paper while the shell is live. It is
   scoped to #page-signals so it can never bleed into the rest of the app. */
#page-signals[data-sgmode="paper"] { --accent: var(--paper); --accent-d: var(--paper-d); }

/* ── strategy pills ────────────────────────────────────────────────── */
.sg-strats { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; margin-bottom: 8px; }
.sg-strats::-webkit-scrollbar { display: none; }
.sg-tab {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px; height: 32px; max-width: 320px; padding: 0 12px 0 10px;
  border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--surface); color: var(--text-2);
  font-size: 12.5px; font-weight: 500; cursor: pointer; text-align: left; white-space: nowrap;
  transition: background var(--dur) var(--spring), border-color var(--dur), color var(--dur);
}
.sg-tab:hover { border-color: var(--border-2); color: var(--text); background: var(--surface-hover); }
.sg-tab:active { background: var(--surface-3); }
.sg-tab.selected { background: var(--accent-bg); border-color: var(--accent-bd); color: var(--accent-d); font-weight: 600; }
.sg-tab.selected:hover, .sg-tab.selected:active { background: color-mix(in srgb, var(--accent) 12%, var(--surface)); border-color: var(--accent-bd); }
.sg-tab:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-ring); }
.sg-tab .dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; background: var(--border-2); }
.sg-tab .dot.on { background: var(--pos); box-shadow: 0 0 0 3px color-mix(in srgb, var(--pos) 18%, transparent); }
.sg-tab .dot.warn { background: var(--warn); }
.sg-tab .t-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.sg-tab .t-sub { font: 500 11px var(--mono); color: var(--faint); }
.sg-tab.selected .t-sub { color: color-mix(in srgb, var(--accent-d) 70%, var(--muted)); }
.sg-tab .t-n { font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; padding: 1px 6px; border-radius: 99px; background: var(--surface-3); color: var(--text-2); }
.sg-tab.selected .t-n { background: var(--surface); }
.sg-tab.add { border-style: dashed; background: transparent; color: var(--muted); }
.sg-tab.add:hover { color: var(--text); border-color: var(--border-2); background: var(--surface-hover); }
.sg-tab.add .plus { font-size: 15px; line-height: 1; }

/* ── selected strategy: the context strip ───────────────────────────── */
.sg-summary { display: flex; align-items: center; gap: 8px 22px; flex-wrap: wrap; padding: 12px 16px; margin-bottom: 16px; }
.sg-sum-id { min-width: 0; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.sg-sum-name { font-size: 14px; font-weight: 600; letter-spacing: -0.01em; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sg-sum-sub { font-size: 12px; color: var(--muted); }
.sg-facts { display: flex; gap: 6px 18px; flex-wrap: wrap; flex: 1; min-width: 0; }
.sg-fact { display: inline-flex; align-items: baseline; gap: 6px; font-size: 12px; color: var(--muted); white-space: nowrap; }
.sg-fact b { font-size: 12.5px; font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
.sg-fact b .hint { font-size: 11.5px; font-weight: 400; }
/* A fact that opens something is a button: it gets a wash on hover so the
   affordance is the same as every other pill on the desk, with negative
   margins so the strip's rhythm does not move when it appears. */
.sg-fact button {
  display: inline-flex; align-items: baseline; gap: 6px; border: none; background: none; margin: -3px -6px; padding: 3px 6px; border-radius: var(--r-xs);
  font: inherit; color: inherit; cursor: pointer; text-align: left;
  transition: background var(--dur) var(--spring), border-color var(--dur), color var(--dur);
}
.sg-fact button:hover { background: var(--surface-hover); color: var(--text-2); }
.sg-fact button:hover b { color: var(--accent-d); }
.sg-fact button:active { background: var(--surface-3); }
.sg-fact button:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-ring); }
.sg-sum-actions { display: flex; gap: 6px; align-items: center; margin-left: auto; position: relative; }
.sg-sum-warn { flex-basis: 100%; font-size: 12px; color: var(--warn); display: flex; gap: 8px; align-items: center; }
.sg-sum-warn::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--warn); flex: none; }
.sg-menu-wrap { position: relative; }
.sg-menu-wrap .popover { width: 230px; }

/* ── workspace ─────────────────────────────────────────────────────── */
/* Watchlist · grip · chart (row 1) + bottom panel (row 2) · grip · inspector.
   The grips are 4px columns panes.js lets you drag; the widths persist in
   --sg-watch-w / --sg-side-w on #page-signals. */
.sg-work {
  display: grid; grid-template-columns: var(--sg-watch-w, 256px) 4px minmax(0, 1fr) 4px var(--sg-side-w, 328px);
  grid-template-rows: auto auto; column-gap: 4px; row-gap: var(--gap); align-items: start;
}
.sg-work > * { margin-top: 0; }
.sg-watch { grid-column: 1; grid-row: 1 / 3; }
.sg-grip-watch { grid-column: 2; grid-row: 1 / 3; }
.sg-center { grid-column: 3; grid-row: 1; display: flex; flex-direction: column; gap: var(--gap); min-width: 0; }
.sg-center > * { margin-top: 0; }
.sg-bottom { grid-column: 3; grid-row: 2; min-width: 0; }
.sg-grip-side { grid-column: 4; grid-row: 1 / 3; }
.sg-inspector { grid-column: 5; grid-row: 1 / 3; }
body.sg-nopanels .sg-work { grid-template-columns: minmax(0, 1fr); }
body.sg-nopanels .sg-watch, body.sg-nopanels .sg-inspector, body.sg-nopanels .sg-grip { display: none; }
body.sg-nopanels .sg-center, body.sg-nopanels .sg-bottom { grid-column: 1; }
.sg-mobtabs { display: none; }

/* watchlist */
.sg-watch { display: flex; flex-direction: column; position: sticky; top: calc(var(--stick) + var(--rail-h, 46px) + var(--gap)); height: calc(100vh - var(--stick) - var(--rail-h, 46px) - 28px); min-height: 420px; overflow: hidden; }
.sg-watch-head { padding: 8px 10px; display: flex; gap: 6px; }
.sg-watch-head input { flex: 1; min-width: 0; height: 30px; font-size: 12.5px; background: var(--surface-2); border-color: var(--border); text-transform: uppercase; }
.sg-watch-head input::placeholder { text-transform: none; }
.sg-watch-head select { flex: 0 0 auto; width: 84px; height: 30px; }
.sg-watch-tools { display: flex; align-items: center; gap: 8px; padding: 0 10px 8px; border-bottom: 1px solid var(--border); }
/* Five filters do not fit at 256px, so they scroll rather than each
   truncating to an unreadable stub ("Ga…" for Gated). */
.sg-watch-tools .chips { width: 100%; min-width: 0; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; }
.sg-watch-tools .chips::-webkit-scrollbar { display: none; }
.sg-watch-tools .chip { flex: 0 0 auto; padding: 0 8px; font-size: 11.5px; height: 24px; }
.sg-watch-body { flex: 1; overflow-y: auto; }
.sg-watch-meta { padding: 8px 12px; font-size: 11.5px; color: var(--faint); border-top: 1px solid var(--border); display: flex; justify-content: space-between; gap: 8px; align-items: center; }
.sg-watch-meta span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sg-watch-meta button { white-space: nowrap; border: none; background: none; font: inherit; font-weight: 550; color: var(--accent-d); cursor: pointer; padding: 0 3px; margin: 0 -3px; border-radius: var(--r-xs); }
.sg-watch-meta button:hover { text-decoration: underline; text-underline-offset: 3px; }
.sg-watch-meta button:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-ring); }
.wl-group { position: sticky; top: 0; z-index: 1; padding: 6px 12px 4px; font-size: 10.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--faint); background: var(--surface-2); border-bottom: 1px solid var(--border); }
/* Today's Inspector list for the picked strategy: mode, three group
   counts that double as filters, and the watchlist grouped under them. */
.sg-insp { padding: 8px 10px; border-bottom: 1px solid var(--border); display: grid; gap: 6px; font-size: 11.5px; }
.sg-insp-top { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-width: 0; }
.sg-insp-top .faint { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sg-insp-mode { font-weight: 600; color: var(--muted); white-space: nowrap; }
.sg-insp-mode.ok { color: var(--pos); } .sg-insp-mode.warn { color: var(--warn); }
.sg-insp-acts { margin-left: auto; display: flex; gap: 8px; align-items: center; white-space: nowrap; }
.sg-insp-acts a, .sg-insp-tog { font: inherit; font-weight: 550; color: var(--accent-d); background: none; border: none; padding: 0 3px; margin: 0 -3px; cursor: pointer; border-radius: var(--r-xs); text-decoration: none; }
.sg-insp-tog:not(.on) { color: var(--muted); }
.sg-insp-acts a:hover, .sg-insp-tog:hover { text-decoration: underline; text-underline-offset: 3px; }
.sg-insp-acts a:focus-visible, .sg-insp-tog:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-ring); }
.sg-insp-seg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
.sg-insp-seg button {
  display: flex; flex-direction: column; align-items: flex-start; gap: 1px; min-width: 0; padding: 5px 8px; border-radius: var(--r-xs);
  border: 1px solid var(--border-2); background: var(--surface-2); color: var(--muted); font: inherit; font-size: 10.5px; cursor: pointer; text-align: left;
  box-shadow: inset 0 2px 0 var(--tone, var(--border-2));
  transition: background var(--dur) var(--spring), border-color var(--dur), color var(--dur);
}
.sg-insp-seg button span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sg-insp-seg button b { font-size: 15px; font-weight: 650; color: var(--text); font-variant-numeric: tabular-nums; }
.sg-insp-seg .trading { --tone: var(--pos); } .sg-insp-seg .skipped { --tone: var(--neg); } .sg-insp-seg .learning { --tone: var(--border-2); }
.sg-insp-seg button:hover { background: var(--surface-hover); }
.sg-insp-seg button.active { border-color: var(--tone); background: color-mix(in srgb, var(--tone) 12%, var(--surface)); color: var(--text-2); }
.sg-insp-seg button.learning.active { border-color: var(--muted); }
.sg-insp-seg button:focus-visible { outline: none; box-shadow: inset 0 2px 0 var(--tone), 0 0 0 3px var(--accent-ring); }
.sg-insp-warn { padding: 6px 8px; border-radius: var(--r-xs); background: var(--warn-bg); color: var(--warn); line-height: 1.35; }
.wl-group.insp { display: flex; justify-content: space-between; align-items: baseline; box-shadow: inset 2px 0 0 var(--tone, transparent); }
.wl-group.insp b { font-weight: 650; font-variant-numeric: tabular-nums; }
.wl-group.insp.trading { --tone: var(--pos); color: var(--pos); } .wl-group.insp.skipped { --tone: var(--neg); color: var(--neg); }
.wl-row.insp-skip .wl-sym b, .wl-row.insp-skip .wl-num b { color: var(--muted); }
.wl-row.insp-skip.real { opacity: .62; }
.wl-row.insp-skip.real:hover, .wl-row.insp-skip.real.selected { opacity: 1; }
.wl-row {
  position: relative; display: grid; grid-template-columns: 8px minmax(0, 1fr) auto; gap: 2px 9px; align-items: center;
  width: 100%; padding: 8px 12px; border: none; border-bottom: 1px solid var(--border); background: transparent;
  text-align: left; cursor: pointer; font-size: 12.5px;
  transition: background var(--dur) var(--spring), border-color var(--dur), color var(--dur);
}
.wl-row:hover { background: var(--surface-hover); }
.wl-row:active { background: var(--surface-3); }
.wl-row:focus-visible { outline: none; box-shadow: inset 0 0 0 3px var(--accent-ring); }
.wl-row.selected { background: var(--accent-bg); box-shadow: inset 2px 0 0 var(--accent); }
.wl-row.selected:hover, .wl-row.selected:active { background: color-mix(in srgb, var(--accent) 12%, var(--surface)); }
.wl-row.selected:focus-visible { box-shadow: inset 2px 0 0 var(--accent), inset 0 0 0 3px var(--accent-ring); }
.wl-row.staged-remove .wl-sym b { text-decoration: line-through; color: var(--faint); }
.wl-row.outside { background: color-mix(in srgb, var(--accent) 3%, transparent); }
.wl-dot { width: 7px; height: 7px; border-radius: 50%; background: transparent; box-shadow: inset 0 0 0 1.5px var(--border-2); }
.wl-dot.armed { background: var(--border-2); box-shadow: none; }
.wl-dot.pending { background: var(--warn); box-shadow: 0 0 0 3px color-mix(in srgb, var(--warn) 18%, transparent); }
.wl-dot.blocked { box-shadow: inset 0 0 0 1.5px var(--warn); }
.wl-dot.long { background: var(--pos); box-shadow: 0 0 0 3px color-mix(in srgb, var(--pos) 18%, transparent); }
.wl-dot.short { background: var(--neg); box-shadow: 0 0 0 3px color-mix(in srgb, var(--neg) 18%, transparent); }
.wl-sym { min-width: 0; }
.wl-sym b { font-weight: 600; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wl-sym span { display: block; font-size: 11px; color: var(--faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 1px; }
.wl-sym span.st { color: var(--muted); }
.wl-sym span.st.pos { color: var(--pos); } .wl-sym span.st.neg { color: var(--neg); } .wl-sym span.st.warn { color: var(--warn); }
.wl-num { text-align: right; font-variant-numeric: tabular-nums; }
.wl-num b { display: block; font-weight: 550; }
.wl-num span { display: block; font-size: 11px; margin-top: 1px; color: var(--muted); }
.wl-act {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%); width: 24px; height: 24px; border-radius: var(--r-xs); display: none; place-items: center;
  border: 1px solid var(--border-2); background: var(--surface); color: var(--text-2); font-size: 15px; line-height: 1; cursor: pointer;
  transition: background var(--dur) var(--spring), border-color var(--dur), color var(--dur);
}
.wl-row:hover .wl-act, .wl-row:focus-within .wl-act, .wl-row:focus-visible .wl-act { display: grid; }
.wl-act:hover { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.wl-act:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-ring); }
.wl-row:hover .wl-num.hideable { visibility: hidden; }
.sg-stage { display: flex; align-items: center; gap: 6px; white-space: nowrap; padding: 8px 10px; border-top: 1px solid var(--border); background: var(--accent-bg); font-size: 12px; color: var(--text-2); }
.sg-stage b { font-weight: 650; }
.sg-stage .btn { margin-left: auto; }

/* ── watchlist row, second line ───────────────────────────────────────
   Three readings the operator would otherwise have to open each symbol to
   get: where price sits in today's range, how much this symbol actually
   moves (ATR as a percent of price, so a 262 ETF and a 12,480 stock are
   comparable), and how far it is from session VWAP on the engine's own last
   evaluated bar. The fourth mark is feed quality -- a symbol with no ticks
   has not decided against trading, it has not been asked, and those two
   states must never look alike. */
.wl-meta { grid-column: 2 / -1; display: flex; align-items: center; gap: 8px; font-size: 10.5px; color: var(--faint); font-variant-numeric: tabular-nums; min-width: 0; }
.wl-range { position: relative; flex: 0 0 34px; height: 3px; border-radius: 2px; background: var(--border); overflow: visible; }
.wl-range i { position: absolute; top: -1.5px; width: 2px; height: 6px; border-radius: 1px; background: var(--text-2); transform: translateX(-1px); }
.wl-stat { white-space: nowrap; }
.wl-stat.pos { color: color-mix(in srgb, var(--pos) 80%, var(--faint)); }
.wl-stat.neg { color: color-mix(in srgb, var(--neg) 80%, var(--faint)); }
.wl-stat.near { color: var(--warn); font-weight: 600; }
.wl-q { margin-left: auto; flex: 0 0 auto; width: 5px; height: 5px; border-radius: 50%; background: var(--border-2); }
.wl-q.ok { background: color-mix(in srgb, var(--pos) 55%, var(--border-2)); }
.wl-q.warn { background: var(--warn); }
.wl-q.bad { background: var(--neg); }
.wl-q.off, .wl-q.unknown { background: transparent; box-shadow: inset 0 0 0 1px var(--border-2); }
.wl-row:hover .wl-meta { color: var(--muted); }

/* A hard gate (T2T / ASM / GSM / ex-date) blocks ENTRIES only. The badge sits
   on the symbol, never on the position, so it can never be read as "you
   cannot get out of this". */
.wl-gate { display: inline-block; margin-left: 5px; padding: 0 4px; border-radius: 3px; font-size: 9.5px; font-weight: 700; letter-spacing: .02em; vertical-align: 1px;
  color: var(--warn); background: color-mix(in srgb, var(--warn) 14%, transparent); }

/* ── chart card ────────────────────────────────────────────────────── */
.sg-chart-card { display: flex; flex-direction: column; overflow: visible; }
/* Three deliberate lines rather than a wrap that lands wherever it lands:
   symbol · last · change with Compare, Replay and the four view icons on
   the right; the day's sector / OHLC / volume as one quiet line under it;
   then the timeframe strip and the three menus. Both wrappers chartctl.js
   emits (.sg-symbol, .sg-tools) are display: contents, so every span and
   button is the toolbar's own flex item and `order` places it; the meta
   line is full-width and truncates, so nothing ever breaks mid-figure. */
.sg-toolbar { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 8px 16px 10px; border-bottom: 1px solid var(--border); }
.sg-symbol, .sg-tools { display: contents; }
#sgChartBar .sg-sym, #sgChartBar .sg-ltp, #sgChartBar .sg-chg { order: -3; align-self: baseline; min-width: 0; }
#sgChartBar .sg-ltp { margin-left: 4px; }
#sgChartBar .sg-chg { margin-left: 2px; }
#sgChartBar #sgCompareBtn, #sgChartBar #sgReplayBtn, #sgChartBar .sg-icons { order: -2; }
#sgChartBar #sgCompareBtn { margin-left: auto; }
#sgChartBar .sg-meta { order: -1; flex: 1 1 100%; margin-top: -2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#sgChartBar .sg-meta:empty { display: none; }
.sg-sym { font-size: 17px; font-weight: 650; letter-spacing: -0.02em; }
.sg-ltp { font-size: 17px; font-weight: 550; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.sg-chg { font-size: 12.5px; font-weight: 600; font-variant-numeric: tabular-nums; }
.sg-meta { font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.sg-tools { display: contents; }
/* Chips are 24px inside the 30px strip, .btn.sm beside them is 26px and the
   icon buttons 26px, so the control row reads as one line. */
.sg-tools .chip { height: 24px; padding: 0 8px; font-size: 12px; }
.sg-icons { display: flex; gap: 2px; margin-left: 4px; }
.sg-icons .icon-btn { width: 26px; height: 26px; border-radius: var(--r-xs); transition: background var(--dur) var(--spring), border-color var(--dur), color var(--dur); }
.sg-icons .icon-btn:hover { background: var(--surface-hover); }
.sg-icons .icon-btn:active { background: var(--surface-3); }
.sg-ind { width: 250px !important; padding: 8px; }
.sg-ind label { flex-direction: row; align-items: center; gap: 10px; padding: 7px 8px; border-radius: var(--r-sm); font-size: 12.5px; font-weight: 500; cursor: pointer; color: var(--text-2); transition: background var(--dur) var(--spring), color var(--dur); }
.sg-ind label:hover { background: var(--surface-hover); color: var(--text); }
.sg-ind label i { width: 12px; height: 2px; border-radius: 2px; flex-shrink: 0; }
.sg-ind label input { width: 15px; height: 15px; accent-color: var(--accent); margin-left: auto; }
.sg-ind label .hint { font-size: 11px; margin-left: 2px; }
.sg-chart { position: relative; height: clamp(380px, calc(100vh - 440px), 720px); width: 100%; min-width: 0; outline: none; user-select: none; -webkit-user-select: none; touch-action: none; }
.sg-chart:focus-visible { box-shadow: inset 0 0 0 2px var(--accent-ring); }
.sg-chart-foot { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 8px 16px; border-top: 1px solid var(--border); font-size: 11.5px; color: var(--muted); min-height: 32px; }
.sg-chart-foot #sgCountdown { color: var(--text-2); font-variant-numeric: tabular-nums; }
.sg-help { margin-left: auto; }
body.sg-full .sg-chart-card { position: fixed; inset: 0; z-index: 66; border-radius: 0; border: none; }
body.sg-full .sg-chart { height: auto; flex: 1; }
body.sg-full { overflow: hidden; }
.sg-chart-row { display: flex; align-items: stretch; min-width: 0; }
.sg-tools-rail:empty { display: none; }
.sg-chart-row > .sg-chart { flex: 1; min-width: 0; }
body.sg-full .sg-chart-row { flex: 1; min-height: 0; }
body.sg-full .sg-chart-row > .sg-chart { height: auto; }

/* A timeframe the engine never evaluates is a VIEW of the same prices, not of
   the same decisions. The chip says so rather than letting the operator read
   replay on a 1m chart as something the strategy would have traded. */
.sg-tools .chip.view-only { color: var(--faint); }
.sg-tools .chip.view-only.active { color: var(--text); }
.sg-tools .chip .tf-dot { display: inline-block; width: 4px; height: 4px; border-radius: 50%; background: var(--pos); margin-left: 3px; vertical-align: middle; }

/* Replay holds the chart still, so it gets a bar of its own under the canvas
   rather than a floating control that would cover price. */
.sg-replay-bar { display: flex; align-items: center; gap: 10px; padding: 8px 14px; border-top: 1px solid var(--border); background: var(--surface-2); font-size: 12.5px; }
.sg-replay-bar[hidden] { display: none; }

/* canvas chart internals (candles.js) */
.cc .cc-canvas { display: block; cursor: crosshair; }
.cc .cc-legend, .cc .cc-legend2 {
  position: absolute; left: 14px; top: 10px; z-index: 2; pointer-events: none;
  display: flex; align-items: center; gap: 4px 11px; flex-wrap: wrap; font-size: 11.5px; color: var(--muted);
  font-variant-numeric: tabular-nums; max-width: calc(100% - 96px);
  /* A tight halo, not a glow: a few 1-2px layers of the surface colour keep
     the type legible over candles without the smear a 10px blur leaves in
     dark mode. */
  text-shadow: 0 0 1px var(--surface), 0 0 2px var(--surface), 0 1px 2px var(--surface), 0 -1px 2px var(--surface);
  -webkit-font-smoothing: antialiased;
}
.cc .cc-legend b { color: var(--text); font-weight: 600; }
.cc .cc-legend b.pos, .cc .cc-legend .cc-chg.pos { color: var(--pos); }
.cc .cc-legend b.neg, .cc .cc-legend .cc-chg.neg { color: var(--neg); }
.cc .cc-sym { font-weight: 650; font-size: 12.5px; color: var(--text); letter-spacing: -0.01em; }
.cc .cc-tf { font-weight: 550; color: var(--muted); }
.cc .cc-live { color: var(--pos); font-weight: 650; font-size: 11px; }
.cc .cc-live::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--pos); margin-right: 5px; vertical-align: 1px; animation: pulse 2.2s ease-in-out infinite; }
.cc .cc-when { color: var(--text-2); }
.cc .cc-ov { display: inline-flex; align-items: center; gap: 5px; }
.cc .cc-ov i { display: inline-block; width: 10px; height: 2px; border-radius: 2px; }
.cc .cc-legend2 { top: 46px; display: block; color: var(--text-2); font-size: 11.5px; line-height: 1.5; }
.cc .cc-legend2 .pos { color: var(--pos); font-weight: 650; } .cc .cc-legend2 .neg { color: var(--neg); font-weight: 650; } .cc .cc-legend2 .warn { color: var(--warn); font-weight: 650; }
.cc .cc-empty { position: absolute; inset: 0; display: grid; place-items: center; font-size: 12.5px; color: var(--muted); pointer-events: none; padding: 20px; text-align: center; }
/* Floats over the canvas, so it may carry the small lift; the hover is the
   desk's tint-and-border, not a solid fill. */
.cc .cc-latest {
  position: absolute; right: 78px; bottom: 38px; z-index: 3; width: 30px; height: 30px; border-radius: 50%;
  border: 1px solid var(--border-2); background: var(--surface); color: var(--text-2); box-shadow: var(--shadow-sm); cursor: pointer; font-size: 13px;
  display: grid; place-items: center; line-height: 1; padding: 0;
  transition: background var(--dur) var(--spring), border-color var(--dur), color var(--dur), transform var(--dur) var(--spring), box-shadow var(--dur);
}
.cc .cc-latest:hover { background: var(--accent-bg); color: var(--accent-d); border-color: var(--accent-bd); }
.cc .cc-latest:active { transform: scale(.94); }
.cc .cc-latest:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-ring); }

/* ── bottom panel ──────────────────────────────────────────────────── */
.sg-bottom { overflow: hidden; }
.sg-bottom-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 0 16px; border-bottom: 1px solid var(--border); }
.sg-bottom-head .subtabs { margin: 0; border: none; }
.sg-bottom-head .subtab { padding: 10px 10px 12px; }
.sg-stats { display: flex; gap: 16px; flex-wrap: wrap; font-size: 12px; color: var(--muted); padding: 8px 0; align-items: center; }
.sg-stats b { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; margin-left: 4px; }
.sg-stats b.pos { color: var(--pos); } .sg-stats b.neg { color: var(--neg); }
.sg-stats .chart-box { width: 90px; }
.sg-bottom .tbl-scroll { max-height: 320px; overflow-y: auto; }
.sg-bottom tr.hot td { background: var(--accent-bg); }
/* Clickable rows everywhere on the desk -- replay, positions, orders, the
   scanner, the board -- share one wash, one press and one inset ring for the
   keyboard. Rows that do nothing keep the table default. */
#page-signals .tbl tr.clickable td { transition: background var(--dur) var(--spring); }
#page-signals .tbl tr.clickable:hover td { background: var(--surface-hover); }
#page-signals .tbl tr.clickable:active td { background: var(--surface-3); }
#page-signals .tbl tr.clickable:focus-visible { outline: none; }
#page-signals .tbl tr.clickable:focus-visible td { background: var(--accent-bg); }
#page-signals .tbl tr.hot td, #page-signals .tbl tr.hot:hover td { background: var(--accent-bg); }

/* ── inspector ─────────────────────────────────────────────────────── */
.sg-inspector { position: sticky; top: calc(var(--stick) + var(--rail-h, 46px) + var(--gap)); max-height: calc(100vh - var(--stick) - var(--rail-h, 46px) - 28px); display: flex; flex-direction: column; overflow: hidden; }
/* Six tabs in 328px: no gap, tight padding, and the strip scrolls before a
   label truncates. */
.sg-inspector > .subtabs { margin: 0; padding: 0 6px; gap: 0; flex-shrink: 0; }
.sg-inspector > .subtabs .subtab { padding: 10px 7px 12px; font-size: 12px; }
.dirty-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--warn); margin-left: 4px; vertical-align: 2px; }
.sg-side-body { padding: 16px; overflow-y: auto; display: flex; flex-direction: column; gap: 16px; }
.sg-block h4 { font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.sg-block h4 .hint { font-weight: 400; font-size: 11.5px; text-transform: none; letter-spacing: 0; }
.sg-pos { border: 1px solid var(--border); border-radius: var(--r); padding: 14px; }
.sg-pos.long { border-color: var(--pos-bd); background: var(--pos-bg); } .sg-pos.short { border-color: var(--neg-bd); background: var(--neg-bg); } .sg-pos.pending { border-color: var(--warn-bd); background: var(--warn-bg); }
.sg-pos .p-state { font-size: 20px; font-weight: 620; letter-spacing: -0.02em; }
.sg-pos .p-sub { font-size: 12px; color: var(--muted); margin-top: 3px; word-break: break-all; }
.sg-meter { position: relative; height: 6px; margin: 16px 0 22px; border-radius: 99px; background: linear-gradient(to right, color-mix(in srgb, var(--neg) 30%, var(--surface)), color-mix(in srgb, var(--pos) 30%, var(--surface))); }
.sg-meter.flip { background: linear-gradient(to left, color-mix(in srgb, var(--neg) 30%, var(--surface)), color-mix(in srgb, var(--pos) 30%, var(--surface))); }
.sg-meter i { position: absolute; top: -4px; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; background: var(--text); border: 3px solid var(--surface); box-shadow: 0 0 0 1px var(--border-2); }
.sg-meter .e { position: absolute; top: -3px; bottom: -3px; width: 1.5px; background: var(--text-2); opacity: .5; }
.sg-meter b { position: absolute; top: 13px; font-size: 11px; font-weight: 550; font-variant-numeric: tabular-nums; }
.sg-meter b.l { left: 0; } .sg-meter b.r { right: 0; }
.chk { display: flex; flex-direction: column; }
.chk-row { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; gap: 8px; align-items: baseline; padding: 7px 0; border-bottom: 1px solid var(--border); font-size: 12.5px; }
.chk-row:last-child { border-bottom: none; }
.chk-row .ic { font-size: 11px; font-weight: 700; text-align: center; color: var(--faint); }
.chk-row.ok .ic { color: var(--pos); } .chk-row.no .ic { color: var(--neg); } .chk-row.na .ic { color: var(--faint); }
.chk-row .v { font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; text-align: right; }
.chk-row.no .lbl { color: var(--text); font-weight: 550; }
.sg-callout { border-radius: var(--r); padding: 10px 12px; font-size: 12.5px; line-height: 1.5; border: 1px solid var(--warn-bd); background: var(--warn-bg); color: var(--text-2); }
.sg-callout.ok { border-color: var(--pos-bd); background: var(--pos-bg); }
.sg-callout ul { padding-left: 16px; list-style: disc; margin-top: 2px; }
.sg-desc { font-size: 12.5px; color: var(--text-2); line-height: 1.55; }
details.sg-about > summary { cursor: pointer; font-size: 12px; font-weight: 600; color: var(--muted); list-style: none; display: flex; justify-content: space-between; }
details.sg-about > summary::after { content: "+"; font-weight: 500; }
details.sg-about[open] > summary::after { content: "−"; }
details.sg-about > summary::-webkit-details-marker { display: none; }
details.sg-about .sg-desc { margin-top: 10px; }

/* ticket */
.tk-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.tk-btn { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 12px; border-radius: var(--r); border: 1px solid var(--border-2); background: var(--surface); cursor: pointer; text-align: left; min-width: 0; transition: background var(--dur) var(--spring), border-color var(--dur), color var(--dur), transform var(--dur) var(--spring); }
.tk-btn:active:not(:disabled) { transform: scale(.98); }
.tk-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-ring); }
.tk-btn .s { font-size: 13.5px; font-weight: 650; }
.tk-btn .lv { font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; line-height: 1.5; }
.tk-btn.buy .s { color: var(--pos); } .tk-btn.sell .s { color: var(--neg); }
.tk-btn.buy:hover:not(:disabled) { border-color: var(--pos); background: var(--pos-bg); }
.tk-btn.sell:hover:not(:disabled) { border-color: var(--neg); background: var(--neg-bg); }
.tk-btn:disabled { opacity: .45; cursor: not-allowed; }
.tk-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--r); font-size: 12px; }
.tk-row + .tk-row { margin-top: 6px; }
.tk-row b { font-size: 11.5px; font-weight: 500; word-break: break-all; font-family: var(--mono); }
.tk-result { padding: 12px; border-radius: var(--r); border: 1px solid var(--border); font-size: 12px; line-height: 1.55; }
.tk-result.ok { border-color: var(--pos-bd); background: var(--pos-bg); }
.tk-result.bad { border-color: var(--neg-bd); background: var(--neg-bg); }
.tk-result ul { margin-top: 6px; display: flex; flex-direction: column; gap: 4px; }
.tk-mode { font-size: 12.5px; color: var(--text-2); line-height: 1.5; }
.tk-links { display: flex; gap: 6px; flex-wrap: wrap; }

/* tune */
.sg-param { display: grid; grid-template-columns: minmax(0, 1fr) 78px; gap: 4px 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--border); }
.sg-param:last-child { border-bottom: none; }
.sg-param .pl { font-size: 12.5px; font-weight: 500; color: var(--text-2); display: flex; gap: 6px; align-items: baseline; }
.sg-param .pl .was { font-size: 11px; color: var(--warn); font-weight: 500; }
.sg-param input[type="number"] { height: 28px; padding: 2px 8px; font-size: 12.5px; text-align: right; width: 100%; }
.sg-param input[type="range"] { grid-column: 1 / -1; width: 100%; height: 16px; accent-color: var(--accent); padding: 0; border: none; background: none; box-shadow: none; }
.sg-param.bool { grid-template-columns: minmax(0, 1fr) auto; }
.switch { position: relative; width: 32px; height: 18px; flex-shrink: 0; }
.switch input { position: absolute; inset: 0; opacity: 0; cursor: pointer; margin: 0; width: 100%; height: 100%; }
.switch span { position: absolute; inset: 0; border-radius: 99px; background: var(--border-2); transition: background .15s; pointer-events: none; }
.switch span::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: var(--surface); box-shadow: 0 1px 2px rgba(0,0,0,.2); transition: transform .15s var(--ease); }
.switch input:checked + span { background: var(--pos); }
.switch input:checked + span::after { transform: translateX(14px); }
.switch input:focus-visible + span { box-shadow: 0 0 0 3px var(--accent-ring); }
.sg-cmp { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--border); border-radius: var(--r); overflow: hidden; }
.sg-cmp div { padding: 10px 12px; border-right: 1px solid var(--border); margin-right: -1px; font-size: 11.5px; color: var(--muted); }
.sg-cmp b { display: block; font-size: 14px; font-weight: 600; color: var(--text); margin-top: 3px; font-variant-numeric: tabular-nums; }
.sg-cmp b.pos { color: var(--pos); } .sg-cmp b.neg { color: var(--neg); }
.sg-cmp small { display: block; font-size: 11px; color: var(--faint); margin-top: 1px; font-variant-numeric: tabular-nums; }
.sg-param-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; }
/* Guards (Signals/SignalGuards.py): every algorithm's shared entry
   protections, folded under their own disclosure in Tune and in the New
   strategy dialog because they all start off. */
.sg-guards > summary { cursor: pointer; list-style: none; }
.sg-guards > summary::-webkit-details-marker { display: none; }
.sg-guards > summary h4 { margin-bottom: 6px; }
.sg-guards > summary h4::before { content: "▸"; font-size: 10px; margin-right: 6px; color: var(--faint); }
.sg-guards[open] > summary h4::before { content: "▾"; }
.sg-param.guard .pl .hint { font-size: 11px; }
.ih-guards > summary { cursor: pointer; padding: 4px 0; }
.ih-guards-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; margin-top: 10px; }
@media (max-width: 640px) { .ih-guards-grid { grid-template-columns: 1fr; } }
.sg-param-grid label { font-size: 11.5px; }
.sg-param-grid label.check { font-size: 12.5px; }
.sg-param-grid input[type="number"] { height: 30px; font-size: 12.5px; }
.sg-badges { display: flex; gap: 6px; flex-wrap: wrap; }

/* ── Scanner ───────────────────────────────────────────────────────── */
/* One column of blocks with one gap; the panels inside carry no margins. */
.sg-board { display: flex; flex-direction: column; gap: var(--gap); min-width: 0; }
.sg-board > * { margin-top: 0; }
.sg-scan-tiles { grid-template-columns: repeat(7, minmax(0, 1fr)); }
.sg-scan-tiles .kpi { cursor: pointer; transition: background var(--dur) var(--spring), border-color var(--dur), color var(--dur), box-shadow var(--dur); border: none; border-right: 1px solid var(--border); background: none; text-align: left; font: inherit; color: inherit; padding: 12px 14px 13px; }
.sg-scan-tiles .kpi:last-child { border-right: none; }
.sg-scan-tiles .kpi:hover { background: var(--surface-hover); }
.sg-scan-tiles .kpi:active { background: var(--surface-3); }
.sg-scan-tiles .kpi:focus-visible { outline: none; box-shadow: inset 0 0 0 3px var(--accent-ring); }
.sg-scan-tiles .kpi.active { background: var(--accent-bg); box-shadow: inset 0 -2px 0 var(--accent); }
.sg-scan-tiles .kpi.active:hover { background: color-mix(in srgb, var(--accent) 12%, var(--surface)); }
.sg-scan-tiles .kpi.active:focus-visible { box-shadow: inset 0 -2px 0 var(--accent), inset 0 0 0 3px var(--accent-ring); }
.sg-scan-tiles .kpi.active .kpi-label { color: var(--accent-d); }
.sg-scan-tiles .kpi-value { font-size: 20px; }
.sg-scan-tiles .kpi-sub { font-size: 11.5px; }
.sg-scan-grid { display: grid; grid-template-columns: minmax(0, 2.2fr) minmax(280px, 1fr); gap: var(--gap); align-items: start; }
.sg-scan-grid > * { margin-top: 0; }
.sg-scan-card { overflow: hidden; }
.sg-scan-card .card-head { flex-wrap: wrap; }
.sg-scan-card .card-head .row { flex-wrap: nowrap; }
.sg-scan-search { width: 160px; }
.sg-scan-scroll { max-height: calc(100vh - 300px); min-height: 420px; overflow-y: auto; border-top: 1px solid var(--border); }
.sg-scan-scroll td { white-space: nowrap; }
.sg-scan-scroll td .sub { max-width: 170px; overflow: hidden; text-overflow: ellipsis; }
.sg-scan-scroll th[data-sort] { cursor: pointer; user-select: none; transition: color var(--dur); }
.sg-scan-scroll th[data-sort]:hover { color: var(--text); }
.sg-scan-scroll th.sorted { color: var(--accent-d); font-weight: 600; }
.sg-scan-scroll td.why { min-width: 220px; max-width: 360px; font-size: 12px; color: var(--muted); white-space: normal; line-height: 1.4; }
.sg-events-card { overflow: hidden; }
.vw { display: inline-flex; align-items: center; gap: 8px; justify-content: flex-end; }
.vw-track { position: relative; width: 44px; height: 8px; }
.vw-track::before { content: ""; position: absolute; left: 50%; top: -2px; bottom: -2px; width: 1px; background: var(--border-2); }
.vw-track i { position: absolute; top: 1px; bottom: 1px; min-width: 2px; }
.vw-track i.up { left: 50%; background: var(--pos); border-radius: 0 3px 3px 0; } .vw-track i.dn { right: 50%; background: var(--neg); border-radius: 3px 0 0 3px; }
.blk-row { display: grid; grid-template-columns: minmax(0, 1fr) 34px; gap: 4px 10px; align-items: center; margin: 0 -8px; padding: 7px 8px; border-radius: var(--r-xs); font-size: 12.5px; cursor: pointer; transition: background var(--dur) var(--spring), color var(--dur); }
.blk-row:hover { background: var(--surface-hover); }
.blk-row:active { background: var(--surface-3); }
.blk-row:focus-visible { outline: none; box-shadow: inset 0 0 0 3px var(--accent-ring); }
.blk-row .bar { grid-column: 1 / -1; height: 4px; }
.blk-row .bar > i { background: var(--warn); }
.blk-row .bar:has(> i) { background: color-mix(in srgb, var(--warn) 14%, var(--surface)); }
.blk-row span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-2); }
.blk-row b { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.blk-row:hover span:first-child { color: var(--text); }

/* ── add-strategy + universe dialogs ────────────────────────────────── */
.ih-step { font-size: 12px; font-weight: 600; color: var(--text-2); margin-bottom: 10px; display: flex; align-items: center; gap: 8px; }
.ih-step > span { width: 18px; height: 18px; border-radius: 50%; display: inline-grid; place-items: center; background: var(--accent-bg); color: var(--accent-d); font-size: 10.5px; font-weight: 650; }
.ih-algos { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 8px; }
.ih-algo { position: relative; display: flex; flex-direction: column; gap: 5px; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--r); cursor: pointer; font-weight: 400; transition: border-color .12s, box-shadow .12s; }
.ih-algo.selected { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); background: var(--accent-bg); }
.ih-algo input { position: absolute; opacity: 0; pointer-events: none; }
.ih-algo:focus-within { box-shadow: 0 0 0 3px var(--accent-ring); }
.ih-algo-name { font-size: 13px; font-weight: 650; display: flex; align-items: center; gap: 6px; color: var(--text); flex-wrap: wrap; }
.ih-algo-desc { font-size: 12px; color: var(--muted); line-height: 1.5; }
.ih-params summary { cursor: pointer; display: flex; gap: 10px; align-items: center; list-style: none; }
.ih-params summary::-webkit-details-marker { display: none; }
.uni-source { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.uni-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.uni-col { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.uni-col.off { opacity: .45; pointer-events: none; }
.uni-col-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 30px; }
.uni-col-head b { font-size: 12.5px; font-weight: 650; white-space: nowrap; }
.uni-col-head input { height: 28px; font-size: 12px; width: 130px; text-transform: uppercase; }
.uni-col-head input::placeholder, #mUniSearch::placeholder { text-transform: none; }
#mUniSearch { height: 32px; font-size: 12.5px; text-transform: uppercase; }
.uni-list { border: 1px solid var(--border); border-radius: var(--r); height: 300px; overflow-y: auto; }
.uni-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 10px; align-items: center; padding: 6px 8px 6px 12px; border-bottom: 1px solid var(--border); font-size: 12.5px; }
.uni-row:last-child { border-bottom: none; }
.uni-row b { font-weight: 600; }
.uni-row .sec { font-size: 11px; color: var(--faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 130px; text-align: right; }
.uni-row.new { background: var(--pos-bg); } .uni-row.gone { background: var(--neg-bg); } .uni-row.gone b { text-decoration: line-through; }
.uni-row button { width: 24px; height: 24px; border-radius: var(--r-xs); border: 1px solid var(--border-2); background: var(--surface); color: var(--text-2); cursor: pointer; font-size: 14px; line-height: 1; display: grid; place-items: center; transition: background var(--dur) var(--spring), border-color var(--dur), color var(--dur); }
.uni-row button:hover:not(:disabled) { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.uni-row button:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-ring); }
.uni-row button:disabled { opacity: .35; cursor: not-allowed; }
.uni-list .list-empty { padding: 40px 14px; }
.uni-list .uni-more { padding: 8px 12px; font-size: 11.5px; color: var(--faint); display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.uni-paste summary { cursor: pointer; font-size: 12px; font-weight: 550; color: var(--muted); }
.uni-paste textarea { width: 100%; margin-top: 8px; font-size: 12.5px; text-transform: uppercase; }

/* ── Research (rendered on the Performance page) ──────────────────────
   The research modules write into #sgResBody; the Performance page owns
   the tab strip and the strategy picker above it. */
.sg-research { min-width: 0; }
.sg-res-body { min-height: 320px; display: flex; flex-direction: column; gap: var(--gap); }
.sg-res-body > * { margin-top: 0; }

/* ── breakpoints ───────────────────────────────────────────────────── */
@media (max-width: 1500px) { .sg-page { --sg-watch-w: 236px; --sg-side-w: 312px; } }
@media (max-width: 1280px) {
  .sg-work { grid-template-columns: var(--sg-watch-w, 236px) 4px minmax(0, 1fr); }
  .sg-grip-side { display: none; }
  .sg-inspector { grid-column: 1 / -1; grid-row: 3; position: static; max-height: none; }
  .sg-scan-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .sg-scan-tiles .kpi { border-bottom: 1px solid var(--border); }
  .sg-scan-tiles .kpi:nth-child(4n) { border-right: none; }
}
@media (max-width: 1180px) { .sg-scan-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 900px) {
  .sg-work { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
  .sg-work > * { grid-column: auto; grid-row: auto; }
  .sg-grip { display: none; }
  .sg-watch { position: static; height: auto; max-height: 420px; min-height: 0; }
  .sg-inspector { position: static; max-height: none; }
  .sg-chart { height: 360px; } .sg-help { display: none; }
  .uni-cols { grid-template-columns: minmax(0, 1fr); } .uni-list { height: 200px; }
  /* The context strip stacks: identity, then facts two-up, then actions. */
  .sg-summary { flex-direction: column; align-items: stretch; gap: 10px; }
  .sg-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 12px; }
  .sg-fact { white-space: normal; }
  .sg-sum-actions { margin-left: 0; flex-wrap: wrap; }
  /* Eight rail cells scroll sideways rather than squeezing into a phone. */
  .sg-rail { overflow-x: auto; overflow-y: hidden; }
  .sg-rail .rail-cells { grid-template-columns: repeat(8, minmax(150px, 1fr)); }
  .sg-scan-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sg-scan-tiles .kpi:nth-child(4n) { border-right: 1px solid var(--border); }
  .sg-scan-tiles .kpi:nth-child(2n) { border-right: none; }
  .sg-scan-search { width: 120px; }
}
@media (max-width: 640px) {
  /* A phone has no room beside the symbol, so the toolbar stacks in four
     plain lines: identity, the meta line, the timeframe strip, then the
     menus with Compare, Replay and the icons wrapping after them. */
  #sgChartBar #sgCompareBtn, #sgChartBar #sgReplayBtn, #sgChartBar .sg-icons { order: 0; }
  #sgChartBar #sgCompareBtn { margin-left: 0; }
  #sgChartBar .sg-icons { margin-left: auto; }
  #sgChartBar .sg-chg { flex: 1 1 auto; }
}