/* ── spx_live.css — SPX Live page (/spx-live) layout ──────────────────────
   Extracted from the inline <style> block in templates/spx_live.html when
   that template reached 243 of its 250-line hard limit. Page-scoped styles
   only — global reset/navbar live in base.css, chart containers in charts.css. */

.spx-grid {
  display: grid;
  /* Row 1: ΔVol scatter | Dynamic GEX | VOL | OI. The scatter gives up width
     (was 70fr) to make room for the GEX panel; the three narrow bar panels
     stay equal so their strike rows read at the same scale. VOL and OI hide
     their Y-axis labels (the scatter and GEX panels carry them), which is what
     lets a 4th panel fit without squeezing the plot areas. */
  grid-template-columns: 58fr 14fr 14fr 14fr;
  grid-template-rows: auto minmax(140px, auto);
  gap: 8px;
  align-items: start;
  /* Height of all four row-1 charts — see the note above #spx-chart-scatter. */
  --spx-row1-h: 380px;
}
.spx-panel {
  background: #1a1d27;
  border: 1px solid #2a2d3e;
  border-radius: 8px;
  padding: 10px 12px;
}
.spx-panel h3 {
  margin: 0 0 8px 0;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #888;
  text-align: center;
}
/* ── Row-1 chart height ──────────────────────────────────────────────────
   ONE variable for all four row-1 panels, because they share a single synced
   strike Y-axis (chart_sync.js mirrors the domain across scatter / GEX / EOD /
   OI). Equal heights are not cosmetic there: with different heights the same
   strike lands on a different pixel row in each panel, so reading across them —
   the whole point of the row — silently stops working. Four independent
   declarations made that an invariant someone had to remember; this makes it
   structural.

   Reducing this only rescales the pixels. The Y-axis domain comes from
   _spxStrikeRange in JS (and from _spxOnBarZoom when the user scrolls), never
   from the container, so min/max are unaffected — the chart compresses, it does
   not re-range. Same reasoning as --spx-row3-h below. */
#spx-chart-scatter { width: 100%; height: var(--spx-row1-h); }
#spx-chart-bar     { width: 100%; height: var(--spx-row1-h); }
#spx-chart-oi      { width: 100%; height: var(--spx-row1-h); }
#spx-chart-gex     { width: 100%; height: var(--spx-row1-h); }
#spx-chart-agg     { width: 100%; height: 120px; }

/* Alerts list — right of the aggregate bar, in the grid's otherwise
   empty bottom-right area. New alerts prepend to the top (see alerts.js). */
.spx-alert-list {
  height: 120px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.spx-alert-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 6px;
  border-radius: 4px;
  background: #1e2130;
  border-left: 3px solid #3a3d4e;
  font-size: 10px;
  color: #ccc;
  flex-shrink: 0;
}
.spx-alert-item--ceiling { border-left-color: #4ade80; }
.spx-alert-item--floor   { border-left-color: #ef5350; }
.spx-alert-item--bullish { border-left-color: #4ade80; border-left-style: dashed; }
.spx-alert-item--bearish { border-left-color: #ef5350; border-left-style: dashed; }
/* Facts that make no directional claim — volume burst, and tier-1 confluence.
   Amber matches the ◆ glyph those rows already render, and dotted distinguishes
   "magnitude only" from the dashed directional-flow rows above. The class was
   already being applied by _spxRenderVolumeBurstItem with no rule to match, so
   those rows silently inherited the default border. */
.spx-alert-item--neutral { border-left-color: #fbbf24; border-left-style: dotted; }
.spx-alert-time  { color: #888; font-family: 'SF Mono', Consolas, monospace; flex-shrink: 0; }
.spx-alert-empty { color: #666; font-size: 10px; text-align: center; padding: 12px 0; }

/* Feature-gated panels are hidden with a CLASS, never an inline
   style="display:none". An inline display has to be cleared with a literal to
   reveal the element, and any literal (e.g. 'block') then overrides the
   display type the stylesheet assigned — which silently broke the flex/grid
   row-3 panels and rendered empty boxes with no charts in them. With a class,
   revealing is classList.remove() and CSS keeps sole ownership of display. */
.spx-hidden { display: none !important; }

/* ── Level 2 (order-book) section — hidden unless enable_l2_stream is on ── */
#spx-l2-section { margin-top: 8px; }
.spx-l2-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  align-items: start;
}

/* ── Row 3: Premium time series (col 1) | Order Flow + Resting Book (cols 2-5) ──
   All three panels are exactly the same height, and each panel's chart(s) flex to
   fill whatever is left after its heading(s). Done with flexbox rather than
   per-chart pixel heights because the premium panel holds TWO charts while the
   other two hold one: any hardcoded set of heights has to be re-derived by hand
   whenever a heading, margin or padding changes, and drifts silently when it
   isn't. Change --spx-row3-h and all three stay equal by construction. */
:root {
  --spx-row3-h: 600px;
  --spx-row3-cols: 1fr;       /* Resting Book alone — Order Flow moved to the strike row */
}

.spx-row3-panel {
  height: var(--spx-row3-h);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}
.spx-row3-panel > h3 { flex: 0 0 auto; }

/* min-height:0 is required: a flex item defaults to min-height:auto and so
   refuses to shrink below its content height, which would push the panels past
   their fixed height instead of fitting inside it. */
.spx-chart-fill { flex: 1 1 0; min-height: 0; width: 100%; }

/* Order Flow and Resting Book sit side by side across the outer grid's columns
   2-5. Nested grid rather than two direct children of .spx-grid so the split is
   a free ratio, not locked to the outer 14fr column edges. */
.spx-row3-split {
  grid-column: 2 / 5;
  display: grid;
  grid-template-columns: var(--spx-row3-cols);
  gap: 8px;
  align-items: start;
}

.spx-l2-headline {
  display: flex; flex-wrap: wrap; gap: 14px;
  padding: 6px 2px 10px; font-size: 11px; color: #ccc;
}
.spx-l2-fact { display: inline-flex; gap: 6px; align-items: baseline; }
.spx-l2-fact-k { color: #888; text-transform: uppercase; letter-spacing: 0.04em; font-size: 9px; }
.spx-l2-fact-v { color: #e0e0e0; font-family: 'SF Mono', Consolas, monospace; }

/* ── Strike row: Order Flow | Position | DEX | GEX | VEX | VOL | OI ──────────
   Full grid width, one synced strike axis (chart_sync.js:_spxStrikeBarCharts).
   Equal heights for the same reason as row 1: a strike must land on the same
   pixel row in every panel. Order Flow and Position get extra width — they
   carry four and two bars per strike respectively. minmax(0, …) lets a column
   shrink below its content's min-width instead of overflowing the row. */
:root { --spx-strike-row-h: 620px; }
.spx-position-signals {
  grid-column: 1 / 5;
  display: grid;
  grid-template-columns: 1fr;
  gap: 5px;
  padding: 7px 10px;
  border: 1px solid #2a2d3e;
  border-radius: 8px;
  background: #111721;
  font: 10px/1.35 'SF Mono', Consolas, monospace;
}
.spx-position-signal-line {
  display: flex; align-items: center; flex-wrap: wrap; gap: 5px;
}
.spx-position-signal-label {
  flex: 0 0 78px; font-weight: 700; letter-spacing: .04em;
}
.spx-position-signal-label--adding { color: #69d9aa; }
.spx-position-signal-label--off { color: #e5b85c; }
.spx-position-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 7px; border-radius: 999px;
  white-space: nowrap; color: #d7e4e0; border: 1px solid #285d4e;
  background: rgba(35, 110, 82, .13);
}
.spx-position-chip--off {
  color: #f0d39b; border-color: #80602e; background: rgba(128, 96, 46, .13);
}
.spx-strike-row {
  grid-column: 1 / 5;
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1.4fr) repeat(5, minmax(0, 1fr));
  gap: 8px;
  align-items: start;
}
.spx-strike-panel {
  height: var(--spx-strike-row-h);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}
/* Every strike-row header is ONE fixed-height line. The shared strike axis only
   lines up if every panel's plot area is the same height, so nothing may make one
   header taller: a title that wraps at a narrow column width, or a control added
   to one panel, would shift every strike in that panel off its neighbours' rows.
   Overlong titles truncate (full text in the title attribute) instead of wrapping. */
.spx-strike-panel > h3 {
  flex: 0 0 auto;
  height: 18px; line-height: 18px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.spx-h3-select {
  font-size: 9px; height: 16px; padding: 0 2px; margin-left: 4px;
  vertical-align: top; text-transform: none;
}
/* Position panel: chart fills the host exactly like .spx-chart-fill elsewhere;
   the stats line floats over the chart's top edge instead of taking layout space. */
.spx-chart-overlay-host { position: relative; }
.spx-chart-abs { position: absolute; inset: 0; }
.spx-pos-meta {
  position: absolute; top: 0; left: 0; right: 0; z-index: 2;
  pointer-events: none;
  font-size: 9px; color: #999; text-align: center; line-height: 1.35;
  background: rgba(26, 29, 39, 0.72);
}
.spx-chart-notice {
  position: absolute; top: 0; left: 0; right: 0; z-index: 2;
  pointer-events: none; background: rgba(26, 29, 39, 0.85);
}