/* Stock GEX board (/stock-gex). Dark shell to match Tape Zones and Gamma Migration.
   The BAR colours are the option chain's GEX vocabulary, reused deliberately so a per-strike bar
   means the same thing on both pages: blue grows RIGHT for positive exposure, red grows LEFT for
   negative, on a centre axis. Everything is .sg-scoped — this file can neither reach into
   option-chain.css nor be broken by it. */
:root {
    --sg-bg: #0e1116;
    --sg-panel: #161b22;
    --sg-line: #2a323d;
    --sg-tx: #e6edf3;
    --sg-dim: #8b949e;
    --sg-dim2: #6e7681;
    --sg-pos: #2e9cff;
    --sg-neg: #ff5a68;
    --sg-warn: #d29922;
    --sg-accent: #58a6ff;
}

body {
    margin: 0;
    background: var(--sg-bg);
    color: var(--sg-tx);
    font: 13px/1.55 ui-sans-serif, -apple-system, "Segoe UI", Roboto, sans-serif;
}

.sg-page { max-width: 1080px; margin: 0 auto; padding: 20px 18px 60px; }
.sg-page-head h1 { font-size: 20px; margin: 0 0 4px; font-weight: 650; }
.sg-lede { margin: 0 0 16px; color: var(--sg-dim); font-size: 12.5px; max-width: 70ch; }

/* --- the "not live" rule -------------------------------------------------------------------- */
/* A board in any state other than `live` must LOOK degraded — the badge alone is too easy to miss
   when the numbers underneath look perfectly healthy. It used to be done with opacity .55 +
   grayscale(.55), which degraded the READING as much as the impression (2026-08-13, USER: "remove
   this blur layer"). A hatched amber frame is louder than the fade was AND leaves every figure at
   full strength. */
.sg-page.sg-muted .sg-chart,
.sg-page.sg-muted .sg-table,
.sg-page.sg-muted .sg-header-stats {
    box-shadow: inset 4px 0 0 var(--sg-warn);
    outline: 1px dashed var(--sg-warn);
    outline-offset: 3px;
}

/* --- form ----------------------------------------------------------------------------------- */
.sg-form {
    display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
    background: var(--sg-panel); border: 1px solid var(--sg-line); border-radius: 8px;
    padding: 12px 14px; margin-bottom: 14px;
}
.sg-form-label {
    font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--sg-dim2);
}
.sg-input {
    background: #0b0f14; border: 1px solid var(--sg-line); border-radius: 6px;
    color: var(--sg-tx); font: 600 15px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace;
    letter-spacing: .08em; padding: 8px 10px; width: 130px; text-transform: uppercase;
}
.sg-input:focus { outline: 2px solid var(--sg-accent); outline-offset: 1px; }
.sg-load {
    background: rgba(31, 111, 235, .18); border: 1px solid #1b3a6b; border-radius: 6px;
    color: #cfe6ff; font: 600 13px/1 inherit; padding: 9px 16px; cursor: pointer;
}
.sg-load:hover:not(:disabled) { background: rgba(31, 111, 235, .3); }
.sg-load:disabled { opacity: .5; cursor: default; }
.sg-form-hint { color: var(--sg-warn); font-size: 12px; }

/* --- transport line ------------------------------------------------------------------------- */
.sg-transport {
    font-size: 11.5px; letter-spacing: .04em; color: var(--sg-dim2);
    margin: 0 0 12px; padding-left: 2px;
}
.sg-transport-streaming { color: #3fb950; }
.sg-transport-reconnecting, .sg-transport-polling, .sg-transport-closed { color: var(--sg-warn); }
/* Both halves of the live path are failing, so this line is not a warning like the others — the
   numbers on screen have stopped advancing. It reads as an error, because it is one. */
.sg-transport-polling-stalled { color: var(--sg-neg); font-weight: 600; }
/* The connection is OPEN and delivering nothing. That is the least obvious failure on this page and
   therefore the one that must read the loudest — the same weight as a failed refresh, not the dim
   default that "connecting…" gets. */
.sg-transport-silent { color: var(--sg-neg); font-weight: 600; }

/* --- errors --------------------------------------------------------------------------------- */
/* One panel for every documented failure. It REPLACES the board — there is no state in which an
   error and a grid of strike rows are on screen together. */
.sg-error {
    border: 1px solid var(--sg-line); border-left-width: 4px; border-radius: 8px;
    background: var(--sg-panel); padding: 14px 16px; margin-bottom: 16px;
}
.sg-error-input { border-left-color: var(--sg-warn); }
.sg-error-busy { border-left-color: var(--sg-accent); }
.sg-error-down { border-left-color: var(--sg-neg); }
.sg-error-title { font-size: 15px; font-weight: 650; margin-bottom: 5px; }
.sg-error-msg { color: var(--sg-tx); max-width: 78ch; }
.sg-error-detail {
    margin-top: 7px; color: var(--sg-dim); font: 11.5px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace;
}
.sg-error-code {
    margin-top: 9px; color: var(--sg-dim2); font-size: 11px; letter-spacing: .06em;
    text-transform: uppercase;
}

.sg-idle { padding: 40px 0; text-align: center; color: var(--sg-dim2); }

/* --- header --------------------------------------------------------------------------------- */
.sg-header {
    background: var(--sg-panel); border: 1px solid var(--sg-line); border-radius: 8px;
    padding: 13px 15px; margin-bottom: 14px;
}
.sg-header-main { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.sg-symbol {
    font: 700 19px/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .06em;
}
.sg-state-note { color: var(--sg-dim); font-size: 12px; }

.sg-badge {
    font-size: 11px; font-weight: 700; letter-spacing: .09em;
    padding: 3px 9px; border-radius: 999px; border: 1px solid var(--sg-line); color: var(--sg-dim);
}
/* The ONLY badge painted as healthy. Every other state is warning- or error-coloured, and the
   page body is muted alongside it. */
.sg-badge-live { border-color: #3fb950; color: #3fb950; background: rgba(63, 185, 80, .12); }
.sg-badge-warming { border-color: var(--sg-accent); color: var(--sg-accent); background: rgba(88, 166, 255, .12); }
.sg-badge-stale { border-color: var(--sg-warn); color: var(--sg-warn); background: rgba(210, 153, 34, .12); }
.sg-badge-degraded { border-color: var(--sg-warn); color: var(--sg-warn); background: rgba(210, 153, 34, .12); }
.sg-badge-unavailable { border-color: var(--sg-neg); color: var(--sg-neg); background: rgba(248, 81, 73, .12); }
.sg-badge-unknown { border-color: var(--sg-neg); color: var(--sg-neg); }
/* The frozen closing board. NOT warning-coloured and NOT muted: it is not a degraded live board,
   it is the labelled closing picture of a finished session — the same calm blue the Gamma Lab
   uses for its frozen state (--gl-frozen), so the two pages tell one story after the bell. */
.sg-badge-closed { border-color: #7fb6ff; color: #7fb6ff; background: rgba(127, 182, 255, .12); }

/* --- the frozen-close banner ------------------------------------------------------------------ */
.sg-frozen-banner {
    background: rgba(127, 182, 255, .07); border: 1px solid rgba(127, 182, 255, .35);
    border-radius: 8px; padding: 12px 16px; margin-bottom: 14px;
    color: #a8cdff; font-size: 12.5px; line-height: 1.5; max-width: 78ch;
}

.sg-header-stats {
    display: flex; flex-wrap: wrap; gap: 22px; margin-top: 12px;
    border-top: 1px solid var(--sg-line); padding-top: 11px;
}
.sg-stat { display: flex; flex-direction: column; gap: 2px; min-width: 150px; }
.sg-stat-label {
    font-size: 10.5px; letter-spacing: .07em; text-transform: uppercase; color: var(--sg-dim2);
}
.sg-stat-value { font: 600 17px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace; }
.sg-stat-degraded { color: var(--sg-warn); }
.sg-stat-note { font-size: 11px; color: var(--sg-dim); }

.sg-positive { color: var(--sg-pos); }
.sg-negative { color: var(--sg-neg); }
.sg-neutral { color: var(--sg-dim); }

/* --- warming / empty ------------------------------------------------------------------------ */
.sg-warming, .sg-empty {
    background: var(--sg-panel); border: 1px solid var(--sg-line); border-radius: 8px;
    padding: 18px 16px; margin-bottom: 14px; color: var(--sg-dim); max-width: 78ch;
}
.sg-warming-bar {
    height: 4px; border-radius: 999px; background: rgba(88, 166, 255, .16);
    overflow: hidden; margin-bottom: 11px;
}
.sg-warming-bar span {
    display: block; height: 100%; width: 34%; border-radius: 999px; background: var(--sg-accent);
    animation: sg-warm 1.4s ease-in-out infinite;
}
@keyframes sg-warm {
    0% { transform: translateX(-40%); }
    100% { transform: translateX(300%); }
}
@media (prefers-reduced-motion: reduce) {
    /* No animation, so the bar has to say "indeterminate" some other way. It used to say it with
       opacity .5, i.e. by looking broken; it says it with a hatch now — the same idiom the pace
       tracks use — so a reduced-motion user gets a deliberate pattern, not a faded one. */
    .sg-warming-bar span {
        animation: none;
        width: 100%;
        background-image: repeating-linear-gradient(135deg,
            rgba(255, 255, 255, .32) 0 4px, transparent 4px 9px);
    }
}

/* --- chart (option-chain GEX language) ------------------------------------------------------ */
.sg-chart {
    background: var(--sg-panel); border: 1px solid var(--sg-line); border-radius: 8px;
    padding: 10px 12px; margin-bottom: 16px;
}
.sg-chart-head {
    display: flex; gap: 10px; align-items: center;
    color: var(--sg-dim2); font-size: 10.5px; letter-spacing: .07em; text-transform: uppercase;
    padding-bottom: 6px; border-bottom: 1px solid var(--sg-line); margin-bottom: 4px;
}
.sg-chart-head .sg-chart-cells { display: flex; gap: 8px; }
.sg-chart-col { flex: 1 1 0; text-align: center; }
.sg-chart-strike {
    width: 74px; flex: none; text-align: right;
    font: 600 12.5px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
}
.sg-chart-row {
    display: flex; gap: 10px; align-items: center; padding: 2px 0;
    border-radius: 4px;
}
.sg-chart-row.sg-near-spot { background: rgba(88, 166, 255, .09); }
.sg-chart-cells { flex: 1 1 auto; min-width: 0; display: flex; gap: 8px; }

.sg-bar {
    position: relative; flex: 1 1 0; height: 18px; min-width: 0;
    background: rgba(255, 255, 255, .02); border-radius: 3px; overflow: hidden;
}
/* The centre axis: zero. Both fills grow away from it, so a row's sign is legible without reading
   a single number — the same read the option chain's .gex-strength-axis gives. */
.sg-bar-axis {
    position: absolute; top: 3px; bottom: 3px; left: 50%; width: 1px; z-index: 1;
    background: rgba(255, 255, 255, .34);
}
/* HALF the declared width, because the fill starts at the CENTRE axis and only has half the track
   to grow into. The model emits 0-100% of the board's largest magnitude; laying that on a bar whose
   origin is 50% would send a 60% fill to 110% and a 100% fill to 150%, both clipped by the
   overflow:hidden above — so every magnitude at or over 50% would draw as an identical full
   half-bar. The chart would have silently stopped distinguishing a large wall from a huge one,
   which is the entire thing it is drawn to show. */
.sg-bar-fill {
    position: absolute; top: 0; bottom: 0; z-index: 0; display: block;
    width: calc(var(--sg-fill-width, 0%) / 2); opacity: .92;
    transition: width 220ms ease;
}
.sg-bar-positive .sg-bar-fill {
    left: 50%;
    background: linear-gradient(90deg, rgba(46, 156, 255, .34), rgba(46, 156, 255, .96));
}
.sg-bar-negative .sg-bar-fill {
    right: 50%;
    background: linear-gradient(270deg, rgba(255, 90, 104, .34), rgba(255, 90, 104, .96));
}
.sg-bar-neutral .sg-bar-fill {
    left: 50%; transform: translateX(-50%); background: rgba(160, 172, 184, .42);
}

/* --- transport notice ------------------------------------------------------------------------ */
/* A delivery problem, shown BESIDE the board rather than instead of it. Visually quieter than the
   error panel on purpose: the numbers below are still a real board the service published, and only
   the arrival of the next one has failed. */
.sg-notice {
    display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline;
    border: 1px solid var(--sg-line); border-left-width: 3px; border-radius: 6px;
    background: var(--sg-panel); padding: 9px 12px; margin-bottom: 12px; font-size: 12.5px;
}
.sg-notice-title { font-weight: 650; }
.sg-notice-msg { color: var(--sg-dim); }
.sg-notice-busy { border-left-color: var(--sg-warn); }
.sg-notice-busy .sg-notice-title { color: var(--sg-warn); }
.sg-notice-down { border-left-color: var(--sg-neg); }
.sg-notice-down .sg-notice-title { color: var(--sg-neg); }
.sg-notice-input { border-left-color: var(--sg-accent); }
.sg-notice-input .sg-notice-title { color: var(--sg-accent); }
.sg-bar-arrow {
    position: absolute; top: 1px; left: var(--sg-arrow-left, 50%); z-index: 3;
    transform: translateX(-50%); width: 16px; text-align: center;
    font-size: 11px; line-height: 16px; background: rgba(4, 8, 16, .72); border-radius: 999px;
    transition: left 220ms ease;
}
.sg-arrow-positive { color: #75beff; }
.sg-arrow-negative { color: #ff7b7b; }
.sg-arrow-neutral { color: #d8e4ef; }

/* --- table ---------------------------------------------------------------------------------- */
.sg-table {
    width: 100%; border-collapse: collapse; margin-bottom: 16px;
    background: var(--sg-panel); border: 1px solid var(--sg-line); border-radius: 8px;
    overflow: hidden;
}
.sg-table th, .sg-table td {
    padding: 6px 12px; text-align: right; border-bottom: 1px solid var(--sg-line);
    font: 12.5px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace;
}
.sg-table th {
    color: var(--sg-dim2); font-size: 10.5px; letter-spacing: .07em; text-transform: uppercase;
    font-family: inherit;
}
.sg-table tbody tr:last-child td { border-bottom: 0; }
.sg-table tbody tr.sg-near-spot { background: rgba(88, 166, 255, .09); }

/* --- model panel ---------------------------------------------------------------------------- */
/* Unobtrusive but never hidden: collapsed by default, present on every board. */
.sg-model {
    background: var(--sg-panel); border: 1px solid var(--sg-line); border-radius: 8px;
    padding: 10px 14px; color: var(--sg-dim);
}
.sg-model > summary { cursor: pointer; font-size: 12.5px; color: var(--sg-dim); }
.sg-model-body { padding-top: 10px; }
.sg-coverage { display: flex; flex-wrap: wrap; gap: 16px 26px; margin-bottom: 12px; }
.sg-coverage-item { display: flex; flex-direction: column; }
.sg-coverage-label {
    font-size: 10px; letter-spacing: .07em; text-transform: uppercase; color: var(--sg-dim2);
}
.sg-coverage-value {
    font: 600 14px/1.3 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--sg-tx);
}
.sg-assumptions { margin: 0 0 10px; padding-left: 18px; font-size: 12px; }
.sg-assumptions li { margin-bottom: 3px; }
.sg-model-foot { margin: 0; font-size: 11.5px; color: var(--sg-dim2); max-width: 78ch; }

/* A board whose caveats were never published. Visible, and visibly not a clean bill of health:
   an empty assumptions list would otherwise read as "this board has no limitations". */
.sg-assumptions-missing {
    margin: 8px 0 0; padding: 8px 10px; border-radius: 6px;
    border-left: 3px solid var(--sg-warn); background: rgba(210, 153, 34, .10);
    color: var(--sg-tx); opacity: .9; max-width: 78ch;
}