/* SPX Context Tape (/context-tape). Dark terminal palette carried over from the chart prototype
   — deliberately single-theme dark: this is a trading surface. Everything is .ct-scoped (plus the
   --ct-* variables) so this file can neither reach into another page's CSS nor be broken by it.
   The canvas code reads the --ct-* variables at draw time, so the palette lives HERE only. */
:root {
    --ct-bg: #0B0F14;
    --ct-panel: #10161F;
    --ct-panel2: #0E141C;
    --ct-grid: #1B2430;
    --ct-edge: #232E3D;
    --ct-ink: #DCE6F2;
    --ct-ink2: #8092A6;
    --ct-ink3: #57677A;
    --ct-up: #1BD3A2;
    --ct-down: #F0546E;
    /* The wall FAMILY token: the Ⓣ wall-touch marker, the WALL TOUCH tooltip row and the warn
       chip — everything that means "a wall" without naming WHICH wall. Both wall PATHS used to be
       stroked in this one colour, which is exactly why the put and the call path were
       indistinguishable on the chart (USER, 2026-08-18). They have their own colours now. */
    --ct-wall: #E2AB3E;
    /* The call wall keeps the incumbent amber — it is the line already read as "the wall" — and
       the put wall takes the coolest hue this palette still has free. CIE76 separation is >=34
       from every other --ct-* colour (nearest neighbour is --ct-ink2, a label grey, never a line)
       and 93 BETWEEN THE TWO PATHS, so the pair cannot be confused at the 1.6px they are stroked
       at. Both distances are asserted in test/js/context-tape-page.test.js. */
    --ct-wall-call: #E2AB3E;
    --ct-wall-put: #00C2D7;
    --ct-gamma: #B295FF;
    /* The γ sign boundary's own colour. The LINE is the point of this chart, so it is drawn
       crisp WHITE + dotted (like the analysis charts) rather than in the violet γ family —
       against the γ field's blue/red wash a violet line reads as more field, not as a level.
       Separate from --ct-gamma on purpose: that violet still means "gamma family" elsewhere. */
    --ct-gboundary: #FFFFFF;
    --ct-gpos: #3E93F0;
    --ct-gneg: #E23A3A;
    --ct-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    --ct-sans: system-ui, -apple-system, "Segoe UI", sans-serif;
}

body {
    background: var(--ct-bg);
    color: var(--ct-ink);
    font-family: var(--ct-sans);
    margin: 0;
    -webkit-font-smoothing: antialiased;
}

/* FULL WIDTH. A tape is read across time: boxing it at 1180px on a wide screen threw away
   half the minutes and squeezed the candles (USER 2026-08-13). The chart takes the whole
   viewport; the prose below stays readable via its own measure (.ct-kicker, .ct-spec). */
.ct-page { max-width: none; margin: 0; padding: 16px 18px 72px; }
.ct-lbl {
    font-family: var(--ct-mono); font-size: 10px; letter-spacing: .14em;
    text-transform: uppercase; color: var(--ct-ink2);
}

/* --- top status bar ------------------------------------------------------------------------- */
.ct-statusbar {
    display: flex; align-items: baseline; gap: 18px; flex-wrap: wrap;
    border: 1px solid var(--ct-edge); background: var(--ct-panel); border-radius: 6px;
    padding: 12px 16px; margin-bottom: 10px;
}
.ct-sym { font-family: var(--ct-mono); font-size: 20px; font-weight: 700; letter-spacing: .04em; }
.ct-px { font-family: var(--ct-mono); font-size: 20px; }
.ct-chip {
    font-family: var(--ct-mono); font-size: 10px; letter-spacing: .1em;
    padding: 3px 8px; border-radius: 3px;
}
.ct-chip-regime { color: var(--ct-gamma); border: 1px solid var(--ct-gamma); }
.ct-chip-live { color: var(--ct-up); border: 1px solid var(--ct-up); }
.ct-chip-warn { color: var(--ct-wall); border: 1px solid var(--ct-wall); }
/* The legend's put-wall swatch carries the same second cue as the path: dashed, so a reader who
   cannot separate amber from cyan can still tell the two walls apart. Matches the canvas [7,3]. */
.ct-sw-dash-put {
    background: repeating-linear-gradient(to right,
      var(--ct-wall-put) 0 7px, transparent 7px 10px);
    border-radius: 0;
}
/* The fail-loud chip: a hidden layer, a closed/stale session, a failing poll — all GREY, named. */
.ct-chip-grey { color: var(--ct-ink2); border: 1px solid var(--ct-ink3); margin-left: 6px; }
.ct-statusbar .ct-spacer { flex: 1; }
.ct-kv { display: flex; flex-direction: column; gap: 2px; }
.ct-kv b { font-family: var(--ct-mono); font-size: 13px; font-weight: 600; color: var(--ct-ink); }

/* --- toolbar -------------------------------------------------------------------------------- */
.ct-toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 8px; }
.ct-tf { display: flex; gap: 2px; border: 1px solid var(--ct-edge); border-radius: 4px; overflow: hidden; }
.ct-tf button {
    font-family: var(--ct-mono); font-size: 11px; background: var(--ct-panel);
    color: var(--ct-ink2); border: 0; padding: 5px 12px; cursor: pointer;
}
.ct-tf button[aria-pressed="true"] { background: var(--ct-edge); color: var(--ct-ink); }
.ct-tf button:focus-visible,
.ct-layers label:focus-within { outline: 1px solid var(--ct-gamma); outline-offset: 1px; }
.ct-layers { display: flex; gap: 4px; flex-wrap: wrap; margin-left: auto; }
.ct-layers label {
    font-family: var(--ct-mono); font-size: 10px; letter-spacing: .08em; color: var(--ct-ink2);
    border: 1px solid var(--ct-edge); border-radius: 4px; padding: 5px 9px; cursor: pointer;
    display: flex; gap: 6px; align-items: center; user-select: none;
}
.ct-layers input { accent-color: var(--ct-gamma); margin: 0; width: 11px; height: 11px; }
.ct-layers label:has(input:checked) { color: var(--ct-ink); background: var(--ct-panel); }

/* --- chart frame ---------------------------------------------------------------------------- */
.ct-chartbox {
    border: 1px solid var(--ct-edge); border-radius: 6px; background: var(--ct-panel2);
    position: relative; overflow: hidden; cursor: crosshair; touch-action: none;
}
.ct-chartbox canvas { display: block; width: 100%; }
/* Height follows the viewport too — a full-width tape in a 460px letterbox is still a window.
   Bounded so it never collapses on a laptop nor eats a 4K screen whole. */
#ct-price { height: clamp(420px, 58vh, 900px); }
/* The MAX-γ pulse overlay — absolutely stacked on the price pane so the animation pass never
   re-renders the scene, and out of flow so it cannot push the volume pane down. */
#ct-pulse {
    position: absolute; top: 0; left: 0; height: 460px;
    pointer-events: none; z-index: 2;
}
#ct-vol { height: clamp(110px, 15vh, 220px); border-top: 1px solid var(--ct-grid); }
/* z-index 3: BELOW the freeze shroud (4), above the pulse overlay (2) — a stale tooltip must
   never float undimmed above the "this chart is dead" shroud. */
#ct-tip {
    position: absolute; pointer-events: none; display: none; z-index: 3;
    background: #0D1219F2; border: 1px solid var(--ct-edge); border-radius: 5px;
    padding: 7px 9px; font-family: var(--ct-mono); font-size: 10.5px; line-height: 1.5;
    /* HARD width bound: a bucket can carry ~30 sign boundaries, and an unbounded row made the
       tooltip wide enough to bury the chart it annotates (user, live prod). */
    min-width: 176px; max-width: 236px; box-shadow: 0 6px 24px #0009;
}
#ct-tip td.ct-t-wrap { white-space: normal; word-break: break-word; }
#ct-tip .ct-t-hd { color: var(--ct-ink2); letter-spacing: .08em; font-size: 10px; margin-bottom: 2px; }
#ct-tip table { border-collapse: collapse; }
#ct-tip td { padding: 0 0 0 12px; text-align: right; font-variant-numeric: tabular-nums; }
#ct-tip td:first-child { padding: 0 10px 0 0; text-align: left; color: var(--ct-ink2);
    white-space: nowrap; }
/* The centered warming note — "BACKFILLING SESSION…" — sits over the empty canvas. */
.ct-note {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    font-family: var(--ct-mono); font-size: 12px; letter-spacing: .18em; color: var(--ct-ink2);
    pointer-events: none;
}
.ct-note[hidden] { display: none; }
/* The poll-failure cover: OPAQUE — a stale chart is WITHHELD, not dimmed. A translucent shroud
   left every stale value readable underneath, which is a frozen chart wearing a veil. */
.ct-freeze {
    position: absolute; inset: 0; z-index: 4; pointer-events: none;
    background: var(--ct-bg);
    display: flex; align-items: center; justify-content: center;
    font-family: var(--ct-mono); font-size: 12px; letter-spacing: .14em; color: var(--ct-ink2);
}
.ct-freeze[hidden] { display: none; }
/* U16: the CVD SPX levels footer — one line under the chart, visible-state text or the
   hidden-with-reason text. Muted so it reads as provenance, not as an alert. */
.ct-levelsfoot {
    font-family: var(--ct-mono); font-size: 10px; letter-spacing: .06em; color: var(--ct-ink2);
    padding: 6px 14px 0; min-height: 14px;
}
.ct-levelsfoot.ct-levels-hidden { color: var(--ct-ink3); }
.ct-legendstrip {
    display: flex; gap: 16px; flex-wrap: wrap; padding: 10px 14px;
    border: 1px solid var(--ct-edge); border-top: 0; border-radius: 0 0 6px 6px;
    background: var(--ct-panel);
}
.ct-legendstrip span {
    font-family: var(--ct-mono); font-size: 10px; letter-spacing: .06em; color: var(--ct-ink2);
    display: flex; align-items: center; gap: 6px;
}
.ct-sw { width: 10px; height: 10px; border-radius: 2px; flex: none; }
/* Dotted swatch — the boundary is a DOTTED line, so a solid block would misdescribe it. */
.ct-sw-dot { background: repeating-linear-gradient(90deg,
    var(--ct-gboundary) 0 3px, transparent 3px 7px); border-radius: 0; }
/* Legend swatch for the MAX-γ pulse — animates only where motion is welcome. */
.ct-pulse-sw { background: var(--ct-gpos); animation: ct-pulse 1.6s ease-in-out infinite; }
@keyframes ct-pulse {
    0%, 100% { opacity: .45; }
    50% { opacity: .95; }
}
.ct-gradbar {
    width: 64px; height: 10px; border-radius: 2px; flex: none;
    background: linear-gradient(90deg, #E23A3ACC, #E23A3A22, #0E141C, #3E93F022, #3E93F0CC);
}
.ct-hintchip {
    color: var(--ct-ink) !important; border: 1px solid var(--ct-edge); border-radius: 3px;
    padding: 2px 7px;
}

/* --- anatomy + spec sections ---------------------------------------------------------------- */
.ct-h2 {
    font-family: var(--ct-mono); font-size: 13px; letter-spacing: .16em; text-transform: uppercase;
    color: var(--ct-ink); margin: 56px 0 6px; display: flex; align-items: center; gap: 12px;
}
.ct-h2::after { content: ""; flex: 1; height: 1px; background: var(--ct-grid); }
.ct-kicker { color: var(--ct-ink2); font-size: 14px; line-height: 1.65; max-width: 72ch; margin: 0 0 22px; }
.ct-kicker b { color: var(--ct-ink); }
.ct-anatomy {
    border: 1px solid var(--ct-edge); border-radius: 6px; background: var(--ct-panel2); padding: 8px;
}
.ct-anatomy svg { width: 100%; height: auto; display: block; }
.ct-tblwrap {
    overflow-x: auto; border: 1px solid var(--ct-edge); border-radius: 6px;
    background: var(--ct-panel2);
}
table.ct-spec { width: 100%; border-collapse: collapse; font-size: 12.5px; }
table.ct-spec th {
    font-family: var(--ct-mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
    color: var(--ct-ink3); text-align: left; padding: 8px 14px; border-bottom: 1px solid var(--ct-edge);
}
table.ct-spec td {
    padding: 10px 14px; border-bottom: 1px solid var(--ct-grid); vertical-align: top;
    line-height: 1.55;
}
table.ct-spec td:first-child { white-space: nowrap; font-weight: 600; }
table.ct-spec code {
    font-family: var(--ct-mono); font-size: 11px; color: var(--ct-ink); background: var(--ct-panel);
    border: 1px solid var(--ct-edge); border-radius: 3px; padding: 1px 5px; white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
    .ct-page * { transition: none !important; animation: none !important; }
    .ct-pulse-sw { opacity: .95; }
}