/* ── gex-page (Task 2; R1, R2, D3): the GEX rail screen ───────────────────────
   Every rule for the screen lives here — app.css is not edited (D3). The
   visibility toggle follows the body[data-screen] switch the scanner,
   dashboard and compare screens use. Tokens only (no hex), sharp corners,
   borders not shadows, mono, tabular numbers, no transitions. */
#gex-screen{display:none}
body[data-screen="gexpage"] #gex-screen{display:grid}
body[data-screen="gexpage"] .container{display:none}
body[data-screen="gexpage"]{--filter-w:0px}
body[data-screen="gexpage"] #filterHandle{display:none}

#gex-screen{position:fixed;top:var(--topbar-h,40px);left:var(--rail-w,56px);right:0;bottom:var(--statusbar-h,24px);grid-template-columns:minmax(0,1fr);grid-template-rows:28px minmax(0,1fr);background:var(--bg-1);z-index:1;font-family:var(--font-mono)}

/* toolbar */
.gxp-toolbar{flex-wrap:nowrap;min-width:0}
.gxp-toolbar__name{font-size:.62rem;color:var(--fg-hi);letter-spacing:2px;text-transform:uppercase;white-space:nowrap}
.gxp-ticker{width:96px;font-size:.68rem;padding:2px 6px;color:var(--green);font-weight:700;letter-spacing:1px;text-transform:uppercase;box-sizing:border-box}
.gxp-hint{font-size:.62rem;color:var(--red);white-space:nowrap}
.gxp-status{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-variant-numeric:tabular-nums}
.gxp-stale:empty{display:none}

/* the expiry strip, across the top of the main view */
.gxp-controls{display:flex;align-items:stretch;gap:8px;padding:4px 8px;border-bottom:1px solid var(--border);background:var(--bg-1);min-width:0}
.gxp-strip{display:flex;flex:1 1 auto;min-width:0;overflow-x:auto;gap:0}
.gxp-exp{display:flex;flex-direction:column;align-items:flex-start;gap:1px;padding:2px 8px;min-width:64px;background:var(--bg-2);color:var(--fg-2);border:1px solid var(--border);border-radius:0;font-family:var(--font-mono);font-size:.62rem;cursor:pointer;white-space:nowrap}
.gxp-exp + .gxp-exp{margin-left:-1px}
.gxp-exp:hover{background:var(--bg-4)}
.gxp-exp--on{color:var(--green);border-color:var(--green);background:var(--bg-3);position:relative;z-index:1}
.gxp-exp__date{color:inherit;font-variant-numeric:tabular-nums}
.gxp-exp__meta{display:flex;gap:4px;color:var(--fg-mute);font-size:.56rem;font-variant-numeric:tabular-nums}
.gxp-exp__tag{letter-spacing:1px}
.gxp-exp__tag--monthly{color:var(--cyan)}
.gxp-exp__tag--weekly{color:var(--fg-2)}
.gxp-exp__tag--opt{color:var(--green)}
/* expiry markers (operator request): ◆ highest standalone, the earnings icon */
.gxp-mk{display:inline-flex;align-items:center;margin-left:4px;color:var(--fg-hi);font-size:.6rem;line-height:1}
.gxp-mk svg{width:10px;height:10px}
.gxp-mk-withheld{align-self:center;padding:0 6px;font-size:.6rem}
/* round 2: the strip is narrower beside the blade — a tab never shrinks under
   its text; the strip scrolls instead */
.gxp-exp{flex:0 0 auto}
.gxp-exp--extra{border-style:dashed}
.gxp-seg{display:flex;flex-wrap:wrap}
.gxp-seg .mws-btn{border-radius:0;position:relative}
.gxp-seg .mws-btn + .mws-btn{margin-left:-1px}
.gxp-seg .mws-btn.active{z-index:1}
.gxp-seg .mws-btn:disabled{color:var(--fg-dim);cursor:not-allowed}
.gxp-seg .mws-btn:disabled:hover{background:transparent}
/* presets (2026-10-14): a marker preset whose marker does not resolve is
   aria-disabled (hover still explains why), so it dims like :disabled */
.gxp-seg .mws-btn[aria-disabled="true"]{color:var(--fg-dim);cursor:not-allowed}
.gxp-seg .mws-btn[aria-disabled="true"]:hover{background:transparent}
.gxp-preset__glyph{display:inline-flex;align-items:center;line-height:1}
.gxp-preset__glyph svg{width:11px;height:11px}
.gxp-soon{margin-left:4px;font-size:.5rem;color:var(--fg-dim);letter-spacing:1px}

/* body: config blade · its edge handle · main view · readout (round 2).
   The blade is the range screen's config pattern (range.css): open by
   default, the edge chevron the SOLE toggle, instant show/hide (terminals do
   not ease), the main view reclaims the width. The handle has its OWN 16px
   column on the seam, so it never covers a ladder chip or a strip button. */
.gxp-body{--gxp-config-w:196px;display:grid;grid-template-columns:var(--gxp-config-w) 16px minmax(0,1fr) 300px;grid-template-rows:minmax(0,1fr);min-height:0;min-width:0}
.gxp-body .mws-panel{border:0;border-radius:0;min-width:0;min-height:0;display:flex;flex-direction:column}
.gxp-body > .gxp-config{grid-column:1;grid-row:1;border-right:1px solid var(--border)}
.gxp-config__body{display:flex;flex-direction:column;gap:10px;padding:10px;overflow:auto;min-height:0}
.gxp-field{display:flex;flex-direction:column;gap:3px}
.gxp-field__k{font-size:.62rem;color:var(--fg-mute);letter-spacing:1px}
.gxp-field--off .gxp-field__k{color:var(--fg-dim)}
.gxp-config__note{font-size:.6rem;overflow-wrap:anywhere}
.gxp-config__note:empty{display:none}
.gxp-config-handle{grid-column:2;grid-row:1;align-self:start;margin-top:120px;width:16px;height:64px;display:flex;align-items:center;justify-content:center;background:var(--bg-3);border:1px solid var(--border);border-left:0;color:var(--green);font-family:var(--font-mono);font-size:11px;cursor:pointer;padding:0}
.gxp-config-handle:hover{background:var(--bg-4)}
.gxp-config-handle:focus-visible{box-shadow:var(--glow-focus);outline:0}
#gex-screen[data-config="collapsed"] .gxp-body{--gxp-config-w:0px}
#gex-screen[data-config="collapsed"] .gxp-body > .gxp-config{display:none}
.gxp-main{grid-column:3;grid-row:1;display:flex;flex-direction:column;min-width:0;min-height:0}
.gxp-table-panel{flex:1 1 auto}
.gxp-body > .gxp-side{grid-column:4;grid-row:1;border-left:1px solid var(--border)}
.gxp-scroll{flex:1 1 auto;min-height:0;overflow:auto;padding:0}
.gxp-edge{display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding:2px 8px;font-size:.6rem;min-height:18px;border-bottom:1px solid var(--border-dim)}
.gxp-edge--bottom{border-bottom:0;border-top:1px solid var(--border-dim)}
.gxp-edge__window{margin-left:auto}

/* the ladder */
.gxp-table{table-layout:fixed;font-size:11px}
.gxp-table th{padding:3px 6px;font-size:.58rem}
.gxp-table td{padding:0 6px;height:18px;line-height:18px;border-bottom:1px solid var(--border-dim);white-space:nowrap;overflow:hidden}
.gxp-col-lv{width:120px}
.gxp-col-k{width:88px;color:var(--fg-hi);font-weight:700;text-align:center}
.gxp-table th.gxp-col-k{text-align:center}
.gxp-cell{display:flex;align-items:center;gap:6px;height:18px}
.gxp-track{position:relative;flex:1 1 auto;align-self:stretch;min-width:0}
.gxp-track::before{content:"";position:absolute;left:50%;top:0;bottom:0;width:1px;background:var(--border)}
.gxp-bar{position:absolute;top:4px;bottom:4px;opacity:.55}
.gxp-bar--pos{background:var(--green)}
.gxp-bar--neg{background:var(--red)}
.gxp-val{flex:0 0 64px;text-align:right;font-variant-numeric:tabular-nums;overflow:hidden;text-overflow:ellipsis}
.gxp-val--partial{text-decoration:underline dotted var(--fg-mute)}
.gxp-row--hvl td{background:var(--bg-3)}
/* Dashed level lines (hvl / c1 / p1) across the row: a segment in the levels
   gutter after the chips and one through each bar track, BEHIND the bars
   (the track is its own stacking context, the line sits at z-index -1). The
   value boxes and the strike number are left clear, so a line never strikes
   through a number — it reads as one line broken by its labels. */
.gxp-lv{display:flex;align-items:center;min-width:0;height:18px}
.gxp-lvline{flex:1 1 auto;min-width:8px;border-top:1px dashed var(--gxp-line)}
.gxp-row[data-line] .gxp-track{z-index:0}
.gxp-row[data-line] .gxp-track::after{content:"";position:absolute;left:0;right:0;top:50%;border-top:1px dashed var(--gxp-line);z-index:-1;pointer-events:none}
.gxp-row[data-line="hvl"]{--gxp-line:var(--cyan)}
.gxp-row[data-line="call"]{--gxp-line:var(--green)}
.gxp-row[data-line="put"]{--gxp-line:var(--red)}
.gxp-dexmiss{margin-left:4px;color:var(--fg-mute);font-weight:400;font-size:.6rem}
.gxp-spot-row td,.gxp-closed-row td{height:14px;line-height:14px;padding:0;border-bottom:0;background:transparent;position:relative}
.gxp-spot-row td::before,.gxp-closed-row td::before{content:"";position:absolute;left:0;right:0;top:50%;border-top:1px dashed var(--fg-hi)}
/* round 2b: an extended-session live print reads --ext, as on the dashboards */
.gxp-spot-row--ext .gxp-spot-row__label{color:var(--ext)}
.gxp-spot-row--ext td::before{border-top-color:var(--ext)}
/* round 2e: the CLOSED divider (extended session) — white, like the label */
.gxp-closed-row__label,.gxp-spot-row__label{position:relative;margin-left:50%;transform:translateX(-50%);display:inline-block;padding:0 6px;background:var(--bg-1);color:var(--fg-hi);font-size:.6rem;letter-spacing:1px;font-variant-numeric:tabular-nums}
.gxp-msg{padding:10px 12px;color:var(--fg-mute);font-size:.68rem;letter-spacing:1px}
.gxp-msg--warn{color:var(--amber)}

/* level chips */
.gxp-chip{display:inline-block;margin-right:3px;padding:0 4px;line-height:13px;font-size:.58rem;border:1px solid var(--border);border-radius:2px;letter-spacing:1px;font-variant-numeric:tabular-nums;white-space:nowrap}
.gxp-chip--call{color:var(--green);border-color:var(--green-2)}
.gxp-chip--put{color:var(--red);border-color:var(--red-2)}
.gxp-chip--hvl{color:var(--cyan);border-color:var(--cyan-2)}
.gxp-chip--spot{color:var(--fg-hi);border-color:var(--fg-hi)}

/* sidebar */
.gxp-side__body{padding:8px 10px;font-size:.68rem;overflow:auto}
.gxp-kv{display:flex;justify-content:space-between;align-items:baseline;gap:8px;padding:3px 0;border-bottom:1px solid var(--border-dim)}
.gxp-kv__k{color:var(--fg-mute);white-space:nowrap}
.gxp-kv__v{color:var(--fg-1);text-align:right;font-variant-numeric:tabular-nums;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gxp-kpi{font-size:.9rem;font-weight:700}
.gxp-zone{letter-spacing:1px}
.gxp-zone--bullish{color:var(--green)}
.gxp-zone--bearish{color:var(--red)}
.gxp-zone--transition{color:var(--amber)}
.gxp-zone--squeeze{color:var(--violet)}
.gxp-hvl{color:var(--cyan)}
/* round 2c (operator): a regular-session live spot is WHITE, the dashboards'
   --fg-hi; only an extended print is coloured (--ext) */
.gxp-live{color:var(--fg-hi)}
/* round 2e: the readout's CLOSED row value is white, like its line */
.gxp-closed{color:var(--fg-hi)}
/* the % change after the spot: daily by sign, the extended move in --ext (the
   dashboard AH tile's colour) */
.gxp-chg{font-variant-numeric:tabular-nums}
.gxp-chg--up{color:var(--green)}
.gxp-chg--down{color:var(--red)}
.gxp-chg--flat{color:var(--fg-mute)}
.gxp-chg--ext{color:var(--ext)}
.gxp-ext{color:var(--ext)}
.gxp-sub{margin-top:10px;margin-bottom:2px}
.gxp-levels{display:flex;flex-direction:column}
.gxp-lvl{display:grid;grid-template-columns:64px 1fr 64px;align-items:center;gap:6px;padding:2px 0;font-variant-numeric:tabular-nums}
.gxp-lvl .gxp-chip{justify-self:start}
.gxp-lvl__p{text-align:right;color:var(--fg-1)}
.gxp-lvl__pct{text-align:right}
.gxp-lvl--spot{border-top:1px dashed var(--fg-hi);border-bottom:1px dashed var(--fg-hi);color:var(--fg-hi)}
.gxp-lvl--spot .gxp-lvl__k{letter-spacing:1px}
.gxp-disclose{margin-top:10px;display:flex;flex-direction:column;gap:2px;font-size:.6rem;overflow-wrap:anywhere}

.gxp-mute{color:var(--fg-mute)}
.gxp-warn{color:var(--amber)}
.gxp-bull{color:var(--green)}
.gxp-bear{color:var(--red)}

/* LIVE CHART (Task 4; R3, D4). The view toggle swaps the table body for the
   chart; the strike-window zoom belongs to the table and is DISABLED here
   (round 2: disabled in the blade, never hidden — nothing moves). */
.gxp-chart{display:none;flex:1 1 auto;min-height:0;flex-direction:column}
#gex-screen[data-view="chart"] .gxp-chart{display:flex}
#gex-screen[data-view="chart"] .gxp-scroll{display:none}
.gxp-tfs{display:flex;align-items:center;gap:8px;padding:3px 8px;border-bottom:1px solid var(--border-dim)}
.gxp-chart__legend{font-size:.6rem;letter-spacing:1px}
.gxp-chart__box{position:relative;flex:1 1 auto;min-height:0;overflow:hidden}
.gxp-chart__box canvas{position:absolute;left:0;top:0;display:block;cursor:crosshair}
.gxp-chart__msg{position:absolute;left:12px;top:10px;color:var(--fg-mute);font-size:.68rem;letter-spacing:1px}

/* LIVE MATRIX (Task 5; R4). The matrix does not depend on the expiry strip,
   the mode toggle or the strike window: the strip hides, the blade's mode /
   window / fit are disabled (round 2), and the sidebar hides for width. */
.gxp-matrix{display:none;flex:1 1 auto;min-height:0;flex-direction:column}
#gex-screen[data-view="matrix"] .gxp-matrix{display:flex}
#gex-screen[data-view="matrix"] .gxp-scroll,
#gex-screen[data-view="matrix"] .gxp-chart,
#gex-screen[data-view="matrix"] .gxp-side,
#gex-screen[data-view="matrix"] .gxp-controls,
#gex-screen[data-view="matrix"] .gxp-edge{display:none}
#gex-screen[data-view="matrix"] .gxp-body{grid-template-columns:var(--gxp-config-w) 16px minmax(0,1fr)}
.gxp-kpis{display:flex;gap:0;border-bottom:1px solid var(--border)}
.gxp-kpi-box{flex:1 1 0;min-width:0;padding:6px 10px;border-right:1px solid var(--border-dim)}
.gxp-kpi-box__k{font-size:.58rem;color:var(--fg-mute);letter-spacing:1px;white-space:nowrap}
.gxp-kpi-box__v{font-size:.9rem;font-weight:700;color:var(--fg-hi);font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gxp-kpi-box__v.gxp-live{color:var(--fg-hi)}
.gxp-kpi-box__v .gxp-chg{font-size:.62rem;font-weight:400}
.gxp-kpi-box__v.gxp-ext{color:var(--ext)}
.gxp-kpi-box--partial .gxp-kpi-box__v{text-decoration:underline dotted var(--fg-mute)}
.gxp-mnote{display:flex;align-items:center;gap:8px;padding:4px 10px;font-size:.62rem;border-bottom:1px solid var(--border-dim);min-width:0}
.gxp-mnote__meta{margin-left:auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gxp-mscroll{flex:1 1 auto;min-height:0;overflow:auto;padding:0}
.gxp-mtable{font-size:11px;table-layout:auto}
.gxp-mtable th{padding:3px 4px;font-size:.6rem;white-space:nowrap;text-transform:none;letter-spacing:1px}
.gxp-mtable td{padding:0 4px;height:22px;line-height:22px;white-space:nowrap;border-bottom:1px solid var(--border-dim)}
.gxp-mgroups th{text-align:center;color:var(--fg-2);border-bottom:1px solid var(--border);border-left:1px solid var(--border)}
.gxp-mgroups th:first-child{border-left:0}
.gxp-mexp{text-align:left}
.gxp-mexp__d{color:var(--fg-hi);font-variant-numeric:tabular-nums}
.gxp-mrow--default td{background:var(--bg-3)}
.gxp-mbar{position:relative}
.gxp-mbar__fill{position:absolute;left:0;bottom:3px;height:3px;opacity:.6}
.gxp-mbar__v{position:relative}
.gxp-ivsrc{font-size:.56rem;color:var(--cyan);letter-spacing:1px}
.gxp-partial{margin-left:4px;font-size:.52rem;color:var(--amber);letter-spacing:1px}
.gxp-mzone{text-align:center;width:14px}
.gxp-dot{font-size:.7rem}

@media (max-width:900px){
  .gxp-body{grid-template-columns:var(--gxp-config-w) 16px minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto}
  .gxp-body > .gxp-config{grid-row:1 / 3}
  .gxp-config-handle{grid-row:1}
  .gxp-body > .gxp-side{grid-column:3;grid-row:2;border-left:0;border-top:1px solid var(--border);max-height:40vh}
  .gxp-controls{flex-wrap:wrap}
}
/* At ≤ 768px app.css turns #mws-rail into a bottom tab bar (dashboard-landing,
   2026-10-12): the screen starts at the left edge (--rail-w is 0 there) and
   ends above the bar. */
@media (max-width:768px){
  #gex-screen{left:0;bottom:calc(var(--statusbar-h,24px) + var(--mtab-h,44px))}
}
/* Stacked (range.css's ≤760px answer): config, view, readout one under the
   other, the body scrolls; the config stays OPEN and the handle is hidden — a
   collapsed preference is kept for wider views.
   The config and readout rows are max-content, not auto (gex-phone-overlap,
   2026-10-12): the panels carry min-height:0, so an auto row's minimum was 0
   and the grid squeezed both to fit the screen (87px rows, measured at 500px)
   — the wrapped config controls (overflow:visible) then painted 40px over the
   expiry strip and the readout was cut off. max-content keeps each row as tall
   as its content and lets the body scroll, as this comment always said. */
@media (max-width:760px){
  .gxp-body{--gxp-config-w:0px;grid-template-columns:minmax(0,1fr);grid-template-rows:max-content minmax(360px,auto) max-content;overflow:auto}
  .gxp-body > .gxp-config{grid-column:1;grid-row:1;border-right:0;border-bottom:1px solid var(--border)}
  #gex-screen[data-config="collapsed"] .gxp-body > .gxp-config{display:flex}
  .gxp-config__body{flex-direction:row;flex-wrap:wrap;overflow:visible}
  .gxp-config-handle{display:none}
  .gxp-main{grid-column:1;grid-row:2;min-height:360px}
  .gxp-body > .gxp-side{grid-column:1;grid-row:3;max-height:none}
  #gex-screen[data-view="matrix"] .gxp-body{grid-template-columns:minmax(0,1fr)}
}