/* Private Jet Signal: a case study set as an operations screen.
   A dark console with a radar scope and flight strips: a trading desk and a
   tower cab, without borrowing any one product's look. Panels on a grid,
   monospace for anything that is a record (times, codes, figures), a plain
   sans for prose. Colour has jobs and only those:
     phosphor green  the aircraft and the scope (flight data)
     amber           the console's own chrome, and press reports
     crimson         the Omaha legs and day, the thing the page is about
     six series      tickers, validated for colour-blind separation on this
                     surface (dataviz validate_palette.js, dark, #0B1117:
                     worst adjacent CVD ΔE 8.4, normal-vision 19.3, all ≥ 3:1)
   Text never wears a series colour; a swatch beside it carries identity. */

:root {
  color-scheme: dark;
  --bg: #0E2A44;
  --bg-deep: #081C30;
  --panel: rgba(56, 160, 255, 0.08);
  --panel-2: rgba(56, 160, 255, 0.15);
  --glass: rgba(4, 22, 40, 0.38);
  --line: rgba(110, 200, 255, 0.16);
  --line-2: rgba(110, 200, 255, 0.34);
  --ink: #EAF6FF;
  --ink-2: #B9D6EC;
  --muted: #8AAECB;
  --cyan: #5FD4FF;
  --amber: #F2B84B;
  --green: #5FD4FF;       /* flight data and the scope: the HUD's own cyan */
  --green-dim: rgba(95, 212, 255, 0.35);
  --omaha: #FF6B72;
  --blue: #7EE0A4;        /* market data, kept apart from the cyan */
  --link: #8FDCFF;
  --s0: #3987e5; --s1: #d95926; --s2: #199e70; --s3: #c98500; --s4: #d55181; --s5: #9085e9;
  --mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  --sans: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}
* { box-sizing: border-box; }
html { background: var(--bg); }
body.sg {
  margin: 0; color: var(--ink); font: 16px/1.5 var(--sans); -webkit-font-smoothing: antialiased;
  background-color: var(--bg);
  background-image:
    radial-gradient(ellipse 80% 60% at 50% -10%, rgba(95, 212, 255, 0.28), transparent 70%),
    radial-gradient(ellipse 60% 50% at 100% 100%, rgba(56, 120, 255, 0.18), transparent 70%),
    linear-gradient(rgba(110, 200, 255, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(110, 200, 255, 0.07) 1px, transparent 1px),
    linear-gradient(180deg, #13395C 0%, var(--bg) 45%, var(--bg-deep) 100%);
  background-size: auto, auto, 40px 40px, 40px 40px, auto;
  background-attachment: fixed;
}
a { color: var(--link); text-underline-offset: 3px; text-decoration-thickness: 1px; }
:where(a, button, select, [tabindex]):focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- the status bar and the tape ---------- */
.sg .top {
  position: sticky; top: 0; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px;
  padding: 10px 16px; background: #070B10; border-bottom: 1px solid var(--line-2);
  font: 600 12px/1.2 var(--mono); letter-spacing: 0.1em; text-transform: uppercase;
}
.sg-brand { color: var(--ink); text-decoration: none; letter-spacing: 0.18em; }
.sg-slash { color: var(--muted); margin: 0 -6px; }
.sg-prog { color: var(--amber); }
.sg-case { color: var(--ink-2); }
.sg .top .icon { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; color: var(--ink-2); border: 1px solid var(--line-2); border-radius: 2px; }
.sg .top .icon:hover { color: var(--amber); border-color: var(--amber); }
.sg-clock { margin-left: auto; color: var(--green); font-variant-numeric: tabular-nums; }
.sg-clock::before { content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--green); margin-right: 8px; vertical-align: 1px; box-shadow: 0 0 8px var(--green); animation: sg-blink 2s steps(1) infinite; }
@keyframes sg-blink { 50% { opacity: 0.25; } }
.sg-tape {
  display: flex; gap: 22px; overflow-x: auto; white-space: nowrap; padding: 8px 16px; background: #080D13; border-bottom: 1px solid var(--line);
  font: 500 13px/1.3 var(--mono); font-variant-numeric: tabular-nums; color: var(--ink-2); scrollbar-width: thin;
}
.sg-tk b { color: var(--ink); font-weight: 600; margin-right: 4px; }
.sg-tk i { font-style: normal; margin-left: 4px; }
.sg-tk i.up { color: var(--green); } .sg-tk i.dn { color: var(--omaha); }
.sg-tk em { font-style: normal; color: var(--muted); margin-left: 6px; font-size: 11px; }
.sg-tk::before { content: ''; display: inline-block; width: 8px; height: 2px; margin-right: 7px; vertical-align: 4px; background: var(--line-2); }
.sg-tk.s0::before { background: var(--s0); } .sg-tk.s1::before { background: var(--s1); } .sg-tk.s2::before { background: var(--s2); }
.sg-tk.s3::before { background: var(--s3); } .sg-tk.s4::before { background: var(--s4); } .sg-tk.s5::before { background: var(--s5); }
.sg-tk-note { color: var(--muted); }

/* ---------- the grid of panels ---------- */
.sg-grid { max-width: 1440px; margin: 0 auto; padding: 14px 16px 24px; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 12px; }
.sg-panel { background: var(--panel); border: 1px solid var(--line-2); border-radius: 3px; padding: 0 14px 14px; min-width: 0; }
.sg-brief { grid-column: span 5; } .sg-radar { grid-column: span 7; }
.sg-tl { grid-column: 1 / -1; }
.sg-strips { grid-column: span 5; } .sg-log { grid-column: span 7; }
.sg-terms { grid-column: span 5; } .sg-px { grid-column: span 7; }
.sg-learn, .sg-letters, .sg-sources { grid-column: 1 / -1; }
.sg-ph {
  display: flex; justify-content: space-between; gap: 12px; margin: 0 -14px 12px; padding: 8px 14px; border-bottom: 1px solid var(--line-2); background: var(--panel-2);
  font: 600 11px/1.3 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--amber);
}
.sg-ph-r { color: var(--muted); text-align: right; }
.sg-cap { font-size: 13px; color: var(--ink-2); margin: 10px 0 0; }

/* ---------- the brief ---------- */
.sg-brief h1 { font: 600 30px/1.15 var(--sans); letter-spacing: -0.01em; margin: 4px 0 10px; }
.sg-lead { font-size: 17px; color: var(--ink); margin: 0 0 14px; }
.sg-kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--line-2); border: 1px solid var(--line-2); margin: 0 0 14px; }
.sg-kpis > div { background: var(--panel); padding: 10px 12px; }
.sg-k { display: block; font: 600 10.5px/1.3 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.sg-v { display: block; font: 600 22px/1.25 var(--mono); font-variant-numeric: tabular-nums; margin-top: 3px; }
.sg-v-hot { color: var(--omaha); font-size: 30px; }
.sg-note { font-size: 14px; color: var(--ink-2); margin: 0 0 10px; }
.sg-key { list-style: none; padding: 0; margin: 0; display: grid; gap: 4px; font-size: 13px; color: var(--ink-2); }
.sg-key .srcl { display: inline-block; min-width: 96px; }

/* Source labels: words, each in its own ink. */
.srcl { font: 600 10.5px/1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; }
.srcl[data-src="Filing"] { color: var(--ink); }
.srcl[data-src="Flight data"] { color: var(--green); }
.srcl[data-src="Reported"] { color: var(--amber); }
.srcl[data-src="Market data"] { color: var(--blue); }
.srcl[data-src="Letter"] { color: #C3B4FF; }

/* ---------- the scope ---------- */
.sg-scope { background: radial-gradient(ellipse at 55% 45%, #0E2219 0%, #08130F 70%); border: 1px solid var(--green-dim); border-radius: 3px; color: var(--green); }
.rd-scope { display: block; width: 100%; height: auto; }
.rd-grid { stroke: #123325; stroke-width: 1; }
.rd-glab, .rd-rlab { font: 500 9px var(--mono); fill: #2E7D5A; letter-spacing: 0.05em; }
.rd-ring { fill: none; stroke: #1B5A40; stroke-width: 1; stroke-dasharray: 2 4; }
.rd-sweep path { fill: var(--green); opacity: 0.12; }
.rd-sweep { animation: rd-turn 6s linear infinite; }
@keyframes rd-turn { to { transform: rotate(-360deg); } }
.rd-track { stroke: #3A9C74; stroke-width: 1.5; opacity: 0.8; stroke-linecap: round; }
.rd-track.is-sel { stroke: var(--green); stroke-width: 2.5; opacity: 1; filter: drop-shadow(0 0 3px var(--green)); }
.rd-track.is-omaha { stroke: var(--omaha); opacity: 0.95; stroke-width: 2; }
.rd-track.is-omaha.is-sel { stroke-width: 3; filter: drop-shadow(0 0 4px var(--omaha)); }
.rd-blip circle { fill: var(--green); stroke: #08130F; stroke-width: 2; }
.rd-blip.is-omaha circle { fill: var(--omaha); }
.rd-blip text, .rd-edge { font: 600 10px var(--mono); fill: #9CEBC7; letter-spacing: 0.05em; paint-order: stroke; stroke: #08130F; stroke-width: 3px; }
.rd-blip.is-omaha text { fill: #FFB3B6; }
@media (prefers-reduced-motion: reduce) { .rd-sweep, .sg-clock::before { animation: none; } }

/* ---------- tables: flight strips, price moves ---------- */
.sg-scroll { overflow-x: auto; max-height: 470px; overflow-y: auto; scrollbar-width: thin; }
.sg-table, .case-trade { width: 100%; border-collapse: collapse; font: 500 12.5px/1.35 var(--mono); font-variant-numeric: tabular-nums; }
.sg-table th, .case-trade th { position: sticky; top: 0; background: var(--panel-2); color: var(--muted); font-weight: 600; font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; text-align: left; padding: 7px 8px; border-bottom: 1px solid var(--line-2); }
.sg-table td, .case-trade td { padding: 6px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
.sg-table tr.is-omaha td { color: var(--omaha); }
.sg-table tr.is-sel td { background: #10261C; }
.sg-table tr.is-omaha.is-sel td { background: #2A1417; }
.sg-st { color: var(--green); }
tr.is-omaha .sg-st { color: var(--omaha); font-weight: 700; }
.sg-daybtn { font: inherit; color: inherit; background: none; border: 0; padding: 2px 0; cursor: pointer; text-decoration: underline dotted var(--line-2); text-underline-offset: 3px; min-height: 28px; }
.case-trade th, .case-trade td { text-align: right; }
.case-trade th:first-child, .case-trade td:first-child { text-align: left; }
.case-trade .meta { color: var(--muted); font-size: 11px; }
.sg-px .meta, .sg-px .case-lead-2 .meta { color: var(--muted); }
.case-lead-2 { font-size: 15px; margin: 0 0 10px; }
.sg-px .pending { font: 600 11px var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--amber); margin-right: 6px; }
.sg-px p.meta { font: 500 11px/1.4 var(--mono); letter-spacing: 0.04em; margin: 8px 0 0; }

/* ---------- the timeline, on the dark console ---------- */
.sg-controls { display: flex; flex-wrap: wrap; gap: 8px 22px; align-items: center; margin-bottom: 6px; }
.sg-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.sg-row .sg-k { margin-right: 4px; }
.sg-chip, .sg-seg, #tl-vol {
  font: 600 12px/1 var(--mono); letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-2); background: var(--bg); border: 1px solid var(--line-2);
  border-radius: 2px; padding: 8px 10px; min-height: 34px; cursor: pointer;
}
.sg-chip[aria-pressed="true"] { color: var(--ink); border-color: var(--ink-2); box-shadow: inset 0 -3px 0 var(--ink-2); }
.sg-chip.s0 { box-shadow: inset 0 -3px 0 var(--s0); } .sg-chip.s1 { box-shadow: inset 0 -3px 0 var(--s1); } .sg-chip.s2 { box-shadow: inset 0 -3px 0 var(--s2); }
.sg-chip.s3 { box-shadow: inset 0 -3px 0 var(--s3); } .sg-chip.s4 { box-shadow: inset 0 -3px 0 var(--s4); } .sg-chip.s5 { box-shadow: inset 0 -3px 0 var(--s5); }
.sg-chip:disabled { opacity: 0.4; cursor: not-allowed; }
.sg-seg:hover, .sg-chip:hover:not(:disabled) { border-color: var(--amber); color: var(--ink); }
.sg-live { font: 500 12px var(--mono); color: var(--amber); min-height: 18px; margin: 0; }
.tl-plot { position: relative; background: var(--bg); border: 1px solid var(--line); border-radius: 2px; padding: 6px 4px 0; }
.chart { display: block; width: 100%; height: auto; overflow: visible; }
.tl-chart text { font-family: var(--mono); }
.tl-chart .tick { font-size: 10px; fill: var(--muted); }
.tl-chart .tl-wkend { fill: #0E151D; }
.tl-chart .tl-lab { font: 600 12px var(--mono); fill: var(--ink); letter-spacing: 0.04em; }
.tl-chart .tl-src, .tl-chart .tl-co, .tl-chart .tl-ylab, .tl-chart .tl-base-lab, .tl-chart .tl-dlab, .tl-chart .tl-note, .tl-chart .tl-pending { font-size: 10px; letter-spacing: 0.05em; fill: var(--ink-2); }
.tl-chart .tl-src { text-transform: uppercase; fill: var(--muted); font-size: 9px; }
.tl-chart .tl-co { fill: var(--ink-2); }
.tl-chart .tl-note { text-transform: uppercase; font-weight: 700; fill: var(--green); }
.tl-chart .tl-note.is-omaha { fill: var(--omaha); }
.tl-chart .tl-pending { font-size: 12px; text-transform: uppercase; fill: var(--amber); }
.tl-chart .tl-dkey { font-weight: 700; }
.tl-chart .tl-base, .tl-chart .tl-row { stroke: var(--line-2); stroke-width: 1; }
.tl-chart .tl-grid { stroke: var(--line-2); stroke-width: 1; stroke-dasharray: 1 3; }
.tl-chart .tl-zero { stroke: var(--muted); stroke-width: 1; }
.tl-chart .tl-flight { stroke: #2E7D5A; stroke-width: 6; stroke-linecap: round; }
.tl-chart .tl-flight.is-key { stroke: var(--green); }
.tl-chart .tl-flight.is-omaha { stroke: var(--omaha); }
.tl-chart .tl-tick { stroke: var(--muted); stroke-width: 1.5; }
.tl-chart .tl-key circle { fill: var(--ink); stroke: var(--bg); stroke-width: 1.5; }
.tl-chart .tl-key text { font-size: 9.5px; font-weight: 700; fill: var(--bg); }
.tl-chart .tl-press rect { fill: var(--amber); stroke: var(--bg); stroke-width: 1.5; }
.tl-chart .tl-press text { font-size: 9.5px; font-weight: 700; fill: var(--bg); }
.tl-chart .tl-vol { fill: #3A4A5A; }
.tl-chart .tl-omaha { stroke: var(--omaha); stroke-width: 1; stroke-dasharray: 3 3; opacity: 0.8; pointer-events: none; }
.tl-line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.tl-line.s0 { stroke: var(--s0); } .tl-line.s1 { stroke: var(--s1); } .tl-line.s2 { stroke: var(--s2); } .tl-line.s3 { stroke: var(--s3); } .tl-line.s4 { stroke: var(--s4); } .tl-line.s5 { stroke: var(--s5); }
.tl-end { stroke: var(--bg); stroke-width: 2; }
.tl-end.s0 { fill: var(--s0); } .tl-end.s1 { fill: var(--s1); } .tl-end.s2 { fill: var(--s2); } .tl-end.s3 { fill: var(--s3); } .tl-end.s4 { fill: var(--s4); } .tl-end.s5 { fill: var(--s5); }
.tl-chart .tl-dkey.s0 { fill: var(--s0); } .tl-chart .tl-dkey.s1 { fill: var(--s1); } .tl-chart .tl-dkey.s2 { fill: var(--s2); } .tl-chart .tl-dkey.s3 { fill: var(--s3); } .tl-chart .tl-dkey.s4 { fill: var(--s4); } .tl-chart .tl-dkey.s5 { fill: var(--s5); }
.tl-xh { stroke: var(--amber); stroke-width: 1; stroke-dasharray: 2 3; pointer-events: none; }
.tl-readout { min-height: 92px; border-top: 1px solid var(--line-2); margin-top: 10px; padding-top: 10px; font-size: 14px; }
.tl-readout ul { list-style: none; padding: 0; margin: 6px 0 0; display: grid; gap: 3px; }
.tl-readout .srcl { display: inline-block; min-width: 96px; }
.tl-day { font: 700 12px var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--amber); margin: 0; }
.tl-hint { color: var(--muted); margin: 0; font: 500 12px var(--mono); }
.sg-actions { margin: 6px 0 0; }
.tl-share { font: 600 11px var(--mono); letter-spacing: 0.08em; text-transform: uppercase; background: none; border: 0; padding: 8px 0; min-height: 34px; color: var(--blue); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }

/* ---------- the event log ---------- */
.sg-loglist { list-style: none; margin: 0; padding: 0; font-size: 14px; max-height: 470px; overflow-y: auto; scrollbar-width: thin; }
.sg-loglist li { display: grid; grid-template-columns: 94px 96px 1fr; gap: 0 10px; align-items: baseline; padding: 7px 0; border-bottom: 1px solid var(--line); }
.sg-loglist li.is-omaha { background: linear-gradient(90deg, #2A1417, transparent 70%); }
.sg-loglist .sg-daybtn { font: 600 12px var(--mono); color: var(--ink-2); text-align: left; }
.sg-loglist li.is-omaha .sg-daybtn { color: var(--omaha); }
.sg-logt strong { font-weight: 600; }
.sg-logt q, .sg-terms q { color: var(--ink-2); font-style: italic; }
.sg-logt .src, .sg-cap .src { font: 600 10.5px var(--mono); letter-spacing: 0.06em; text-transform: uppercase; margin-left: 4px; }
.sg-logt .meta { font: 500 11px var(--mono); color: var(--muted); }

/* ---------- terms, debrief, letters ---------- */
.sg-terms, .sg-learnlist { margin: 0; padding-left: 18px; }
.sg-terms li, .sg-learnlist li { margin: 0 0 10px; font-size: 14.5px; }
.sg-terms li::marker, .sg-learnlist li::marker { color: var(--amber); }
.sg-learnlist { columns: 2; column-gap: 32px; }
.sg-learnlist li { break-inside: avoid; }
.sg-learnlist strong { color: var(--ink); }
.sg-lettercols { columns: 3; column-gap: 28px; }
.sg-lettercols h3 { break-after: avoid; font: 600 10.5px/1.3 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin: 4px 0 6px; }
.sg-lettercols ol { list-style: none; margin: 0 0 12px; padding: 0; }
.passage { break-inside: avoid; padding: 0 0 12px; margin: 0 0 12px; border-bottom: 1px solid var(--line); }
.passage-meta { margin: 0 0 4px; font: 600 10.5px var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.passage-meta .year { color: #C3B4FF; margin-right: 8px; }
.passage blockquote { margin: 0; }
.passage blockquote p { margin: 0; font-size: 15px; font-style: italic; color: var(--ink); }
.passage .cite { margin: 4px 0 0; font: 600 10.5px var(--mono); letter-spacing: 0.06em; text-transform: uppercase; }
.sg-sources { padding-top: 10px; font-size: 13px; color: var(--ink-2); }
.sg-sources summary { cursor: pointer; font: 600 11px var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--amber); min-height: 30px; }
.sg-sources ul { columns: 2; column-gap: 28px; padding-left: 16px; }
.sg-sources li { break-inside: avoid; margin-bottom: 4px; }
.sg-foot { max-width: 1440px; margin: 0 auto; padding: 8px 16px 32px; font: 500 11px/1.6 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.sg-foot a { color: var(--ink-2); }

/* ---------- narrower screens ---------- */
@media (max-width: 1080px) {
  .sg-brief, .sg-radar, .sg-strips, .sg-log, .sg-terms, .sg-px { grid-column: 1 / -1; }
  .sg-lettercols { columns: 2; }
}
@media (max-width: 640px) {
  .sg-grid { padding: 10px 10px 20px; gap: 10px; }
  .sg-panel { padding: 0 12px 12px; }
  .sg-ph { margin: 0 -12px 10px; padding: 8px 12px; }
  .sg-case { display: none; }
  .sg-clock { margin-left: 0; width: 100%; }
  .sg-brief h1 { font-size: 25px; }
  .sg-learnlist, .sg-lettercols, .sg-sources ul { columns: 1; }
  .sg-loglist li { grid-template-columns: 84px 1fr; }
  .sg-loglist li .sg-logt { grid-column: 1 / -1; }
  .tl-chart.is-narrow .tl-lab { font-size: 18px; }
  .tl-chart.is-narrow .tl-src { font-size: 12px; }
  .tl-chart.is-narrow .tl-co { font-size: 14px; paint-order: stroke; stroke: var(--bg); stroke-width: 4px; }
  .tl-chart.is-narrow .tl-dlab, .tl-chart.is-narrow .tl-ylab, .tl-chart.is-narrow .tl-note, .tl-chart.is-narrow .tl-base-lab { font-size: 14px; }
  .tl-chart.is-narrow .tick { font-size: 16px; }
  .tl-chart.is-narrow .tl-line { stroke-width: 3; }
  .rd-blip text, .rd-edge { font-size: 13px; }
  .rd-glab, .rd-rlab { font-size: 11px; }
}
.tl-chart:focus { outline: none; }
.tl-chart:focus-visible { outline: 1px solid var(--amber); outline-offset: 2px; }
.cmp-scroll { overflow-x: auto; max-width: 100%; scrollbar-width: thin; }

/* ---------- what each side got ---------- */
.sg-sides { grid-column: 1 / -1; }
.sg-sidegrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--line-2); border: 1px solid var(--line-2); }
.sg-side { background: var(--panel); padding: 12px 14px 14px; }
.sg-side .sg-k { margin: 0; }
.sg-side-big { font: 700 26px/1.2 var(--mono); font-variant-numeric: tabular-nums; margin: 6px 0 6px; color: var(--ink); }
.sg-side-big.is-hot { color: var(--omaha); }
.sg-side-line { font-size: 14px; color: var(--ink-2); margin: 0; }
.sg-side-more { font-size: 13px; color: var(--muted); margin: 8px 0 0; padding-top: 8px; border-top: 1px dashed var(--line-2); }
@media (max-width: 1080px) { .sg-sidegrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .sg-sidegrid { grid-template-columns: 1fr; } .sg-side-big { font-size: 22px; } }

/* ---------- afterwards ---------- */
.sg-after { grid-column: 1 / -1; }
.af-plot { padding: 10px 6px 4px; }
.af-chart text { font-family: var(--mono); }
.af-chart .af-lab { font-size: 11px; font-weight: 600; letter-spacing: 0.06em; fill: var(--ink-2); text-transform: uppercase; }
.af-chart .af-ylab { font-size: 10px; fill: var(--muted); }
.af-chart .tick { font-size: 10px; fill: var(--muted); }
.af-chart .af-grid { stroke: var(--line-2); stroke-width: 1; stroke-dasharray: 1 3; }
.af-chart .af-line { fill: none; stroke: var(--s0); stroke-width: 2; stroke-linejoin: round; }
.af-chart .af-base { stroke: var(--omaha); stroke-width: 1; stroke-dasharray: 4 4; opacity: 0.8; }
.af-chart .af-baselab { font-size: 10px; fill: var(--omaha); }
.af-chart .af-mark line { stroke: var(--amber); stroke-width: 1; opacity: 0.35; }
.af-chart .af-mark circle { fill: var(--amber); stroke: var(--bg); stroke-width: 2; }
.af-chart .af-mark text { font-size: 10px; font-weight: 700; fill: var(--bg); }
.af-chart .af-bar { fill: #4A5D70; }
.sg-afterlist { list-style: none; padding: 0; margin: 12px 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 28px; }
.sg-afterlist li { padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.sg-afterlist time { font: 600 11px var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-2); margin-right: 4px; }
.sg-afterlist q { color: var(--ink-2); font-style: italic; }
.sg-afterlist .src { font: 600 10.5px var(--mono); letter-spacing: 0.06em; text-transform: uppercase; }
.sg-an { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; min-height: 20px; border-radius: 50%; background: var(--amber); color: var(--bg); font: 700 10px var(--mono); text-decoration: none; margin-right: 6px; cursor: default; }
@media (max-width: 900px) { .sg-afterlist { grid-template-columns: 1fr; } }

/* ---------- the story, in four steps ---------- */
.sg-arc { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 6px; }
.sg-arc a { display: block; padding: 8px 10px; border: 1px solid var(--line-2); border-radius: 2px; color: var(--ink); text-decoration: none; font-size: 14px; background: var(--bg); }
.sg-arc a:hover { border-color: var(--amber); }
.sg-arc .sg-k { color: var(--amber); margin-bottom: 2px; }

/* ---------- HUD: glass panels on the blue ----------
   Panels are translucent over the backdrop, edged in cyan with bracket
   corners, the console's chrome in cyan; amber stays for the press and the
   afterwards markers, crimson for Omaha. */
.sg .top { background: rgba(6, 26, 46, 0.72); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-bottom-color: var(--line-2); box-shadow: 0 1px 16px rgba(95, 212, 255, 0.12); }
.sg-prog { color: var(--cyan); text-shadow: 0 0 10px rgba(95, 212, 255, 0.55); }
.sg-tape { background: rgba(6, 26, 46, 0.5); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.sg-panel {
  position: relative; background: var(--panel); border-color: var(--line-2); border-radius: 4px;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  box-shadow: inset 0 0 28px rgba(95, 212, 255, 0.06), 0 0 18px rgba(20, 90, 160, 0.18);
}
.sg-panel::before {
  content: ''; position: absolute; inset: -1px; pointer-events: none; border-radius: 4px;
  background:
    linear-gradient(var(--cyan), var(--cyan)) top left / 16px 2px no-repeat,
    linear-gradient(var(--cyan), var(--cyan)) top left / 2px 16px no-repeat,
    linear-gradient(var(--cyan), var(--cyan)) top right / 16px 2px no-repeat,
    linear-gradient(var(--cyan), var(--cyan)) top right / 2px 16px no-repeat,
    linear-gradient(var(--cyan), var(--cyan)) bottom left / 16px 2px no-repeat,
    linear-gradient(var(--cyan), var(--cyan)) bottom left / 2px 16px no-repeat,
    linear-gradient(var(--cyan), var(--cyan)) bottom right / 16px 2px no-repeat,
    linear-gradient(var(--cyan), var(--cyan)) bottom right / 2px 16px no-repeat;
  opacity: 0.85;
}
.sg-ph { background: var(--panel-2); color: var(--cyan); border-bottom-color: var(--line-2); text-shadow: 0 0 8px rgba(95, 212, 255, 0.35); }
.sg-kpis, .sg-sidegrid { background: var(--line-2); }
.sg-kpis > div, .sg-side { background: rgba(8, 30, 52, 0.55); }
.sg-v-hot, .sg-side-big.is-hot { text-shadow: 0 0 12px rgba(255, 107, 114, 0.45); }
.sg-arc a, .sg-chip, .sg-seg, #tl-vol { background: var(--glass); }
.sg-arc .sg-k { color: var(--cyan); }
.sg-arc a:hover, .sg-seg:hover, .sg-chip:hover:not(:disabled) { border-color: var(--cyan); box-shadow: 0 0 10px rgba(95, 212, 255, 0.3); }
.sg-live, .tl-day { color: var(--cyan); }
.tl-plot, .af-plot { background: var(--glass); border-color: var(--line); }
.tl-chart .tl-wkend { fill: rgba(95, 212, 255, 0.05); }
.tl-chart .tl-flight { stroke: rgba(95, 212, 255, 0.45); }
.tl-chart .tl-key text, .tl-chart .tl-press text, .af-chart .af-mark text { fill: #06182B; }
.tl-chart .tl-key circle, .tl-end, .af-chart .af-mark circle { stroke: #0B2640; }
.tl-chart .tl-vol, .af-chart .af-bar { fill: rgba(150, 200, 235, 0.45); }
.tl-xh { stroke: var(--cyan); }
.sg-scope { background: radial-gradient(ellipse at 55% 45%, rgba(95, 212, 255, 0.16) 0%, rgba(4, 22, 40, 0.55) 72%); border-color: var(--green-dim); }
.rd-grid { stroke: rgba(95, 212, 255, 0.14); }
.rd-ring { stroke: rgba(95, 212, 255, 0.4); }
.rd-glab, .rd-rlab { fill: rgba(143, 220, 255, 0.7); }
.rd-track { stroke: rgba(95, 212, 255, 0.6); }
.rd-blip circle { stroke: #06182B; }
.rd-blip text, .rd-edge { fill: #CFF1FF; stroke: #06182B; }
.sg-table th, .case-trade th { background: rgba(8, 34, 58, 0.92); }
.sg-table tr.is-sel td { background: rgba(95, 212, 255, 0.14); }
.sg-table tr.is-omaha.is-sel td { background: rgba(255, 107, 114, 0.18); }
.sg-loglist li.is-omaha { background: linear-gradient(90deg, rgba(255, 107, 114, 0.18), transparent 70%); }
.sg-sources summary { color: var(--cyan); }
.sg-lettercols h3, .passage-meta { color: var(--muted); }
.sg-foot a { color: var(--ink-2); }
.af-chart .af-line { stroke: #D6EEFF; filter: drop-shadow(0 0 3px rgba(95, 212, 255, 0.45)); }
@media (max-width: 640px) { .sg .top { padding-right: 56px; } .sg .top .icon { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); } }

/* ---------- lighter: the page and panels up a step, the charts in wells ----------
   The backdrop and glass are lighter; every chart, the scope and the price
   table keep a deeper well (#12324F-ish), the surface the six series colours
   are validated on. Text tokens re-stepped for the lighter glass (all ≥ 4.5:1
   on the panel, #2F5C89). */
:root {
  --bg: #1F5080;
  --bg-deep: #173F66;
  --panel: rgba(255, 255, 255, 0.07);
  --panel-2: rgba(255, 255, 255, 0.12);
  --glass: rgba(255, 255, 255, 0.07);
  --well: rgba(12, 40, 68, 0.9);
  --line: rgba(190, 230, 255, 0.2);
  --line-2: rgba(190, 230, 255, 0.4);
  --ink: #F4FBFF;
  --ink-2: #DDEFFB;
  --muted: #C2DDF1;
  --cyan: #8FE6FF;
  --amber: #FFD27A;
  --green: #8FE6FF;
  --green-dim: rgba(143, 230, 255, 0.45);
  --omaha: #FFC7CA;
  --omaha-mark: #FF6B72;
  --blue: #A6F0C2;
  --link: #BDEFFF;
}
body.sg {
  background-image:
    radial-gradient(ellipse 80% 60% at 50% -10%, rgba(170, 235, 255, 0.35), transparent 70%),
    radial-gradient(ellipse 60% 50% at 100% 100%, rgba(120, 180, 255, 0.22), transparent 70%),
    linear-gradient(rgba(200, 235, 255, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(200, 235, 255, 0.08) 1px, transparent 1px),
    linear-gradient(180deg, #2B6598 0%, var(--bg) 45%, var(--bg-deep) 100%);
}
.sg .top { background: rgba(22, 64, 104, 0.78); }
.sg-tape { background: rgba(22, 64, 104, 0.55); }
.sg-kpis > div, .sg-side { background: rgba(255, 255, 255, 0.05); }
.sg-table th, .case-trade th { background: #2E5E8C; }
.srcl[data-src="Letter"], .passage-meta .year { color: #E2D9FF; }
/* The wells: charts keep their deep, validated surface. */
.tl-plot, .af-plot { background: var(--well); border-color: var(--line-2); }
.sg-scope { background: radial-gradient(ellipse at 55% 45%, rgba(95, 212, 255, 0.18) 0%, rgba(10, 34, 58, 0.92) 72%); }
.tl-chart .tl-flight.is-omaha, .rd-track.is-omaha { stroke: var(--omaha-mark); }
.rd-blip.is-omaha circle { fill: var(--omaha-mark); }
.tl-chart .tl-omaha, .af-chart .af-base { stroke: var(--omaha-mark); }
.tl-chart .tl-note.is-omaha, .af-chart .af-baselab { fill: #FF9CA1; }
.sg-v-hot, .sg-side-big.is-hot { text-shadow: 0 0 12px rgba(255, 107, 114, 0.35); }

/* ---------- light: a pale sky page, white glass, dark ink ----------
   The page and panels go light and the ink goes dark (every text colour
   ≥ 4.5:1 on the page, #D6ECFA, and on the panel, #F3F9FD). The charts,
   the scope and the afterwards keep their deep screens and their own light
   ink, scoped to the screen, so the series colours stay on the surface
   they are validated on. */
:root {
  color-scheme: light;
  --bg: #D6ECFA;
  --bg-deep: #BFDFF5;
  --panel: rgba(255, 255, 255, 0.72);
  --panel-2: rgba(255, 255, 255, 0.9);
  --glass: rgba(255, 255, 255, 0.8);
  --line: rgba(20, 90, 150, 0.16);
  --line-2: rgba(20, 90, 150, 0.32);
  --ink: #0B2540;
  --ink-2: #27496A;
  --muted: #46677F;
  --cyan: #00679E;
  --amber: #8A5A00;
  --green: #00679E;
  --green-dim: rgba(0, 103, 158, 0.35);
  --omaha: #B3262E;
  --blue: #1A6B3F;
  --lav: #5B45B0;
  --link: #005F99;
}
body.sg {
  background-image:
    radial-gradient(ellipse 80% 60% at 50% -10%, rgba(255, 255, 255, 0.85), transparent 70%),
    radial-gradient(ellipse 60% 50% at 100% 100%, rgba(120, 190, 240, 0.35), transparent 70%),
    linear-gradient(rgba(20, 90, 150, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(20, 90, 150, 0.06) 1px, transparent 1px),
    linear-gradient(180deg, #EAF6FE 0%, var(--bg) 45%, var(--bg-deep) 100%);
}
.sg .top { background: rgba(255, 255, 255, 0.82); box-shadow: 0 1px 14px rgba(20, 90, 150, 0.12); }
.sg-prog, .sg-ph, .sg-v-hot, .sg-side-big.is-hot { text-shadow: none; }
.sg-tape { background: rgba(255, 255, 255, 0.6); }
.sg-tk i.up { color: var(--blue); } .sg-tk i.dn { color: var(--omaha); }
.sg-panel { box-shadow: 0 4px 22px rgba(20, 90, 150, 0.12), inset 0 0 0 1px rgba(255, 255, 255, 0.6); }
.sg-ph { background: rgba(230, 244, 253, 0.95); }
.sg-kpis > div, .sg-side { background: rgba(255, 255, 255, 0.75); }
.sg-table th, .case-trade th { background: #E6F3FC; }
.sg-table tr.is-sel td { background: rgba(0, 103, 158, 0.1); }
.sg-table tr.is-omaha.is-sel td { background: rgba(179, 38, 46, 0.1); }
.sg-loglist li.is-omaha { background: linear-gradient(90deg, rgba(179, 38, 46, 0.1), transparent 70%); }
.sg-arc a:hover, .sg-seg:hover, .sg-chip:hover:not(:disabled) { box-shadow: 0 0 0 1px var(--cyan); }
.srcl[data-src="Letter"], .passage-meta .year { color: var(--lav); }
.sg-an { background: #F2B84B; color: #06182B; }
/* The screens: deep surface, light ink, their own accents. */
.tl-plot, .af-plot, .sg-scope {
  --ink: #EAF6FF; --ink-2: #B9D6EC; --muted: #8AAECB; --cyan: #5FD4FF; --green: #5FD4FF;
  --amber: #F2B84B; --omaha: #FF8A90; --bg: #0E2A44; --line: rgba(110, 200, 255, 0.16); --line-2: rgba(110, 200, 255, 0.34);
  background: #12324F; border-color: rgba(20, 90, 150, 0.45);
}
.sg-scope { background: radial-gradient(ellipse at 55% 45%, #1C4A70 0%, #102C47 72%); }

/* ---------- white: a white page, white panels, white charts ----------
   The page is white; panels are white with a hairline and a cyan bracket;
   the charts sit on white too, so the six series take the light-mode
   palette (dataviz validate_palette.js, light, #FFFFFF: worst adjacent CVD
   ΔE 9.1, normal 19.6; three slots under 3:1, relieved by the direct labels
   at each line's end and the table of closes). Ink as on the sky page. */
:root {
  color-scheme: light;
  --bg: #FFFFFF;
  --bg-deep: #FFFFFF;
  --panel: #FFFFFF;
  --panel-2: #F4F8FB;
  --glass: #FFFFFF;
  --line: #E3EAF0;
  --line-2: #C9D6E2;
  --s0: #2a78d6; --s1: #eb6834; --s2: #1baf7a; --s3: #eda100; --s4: #e87ba4; --s5: #4a3aa7;
}
body.sg { background: #FFFFFF; background-image: none; }
.sg .top { background: rgba(255, 255, 255, 0.92); box-shadow: 0 1px 0 var(--line-2); }
.sg-tape { background: #F7FAFC; }
.sg-panel { background: #FFFFFF; backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: 0 1px 3px rgba(11, 37, 64, 0.06); }
.sg-panel::before { opacity: 0.7; }
.sg-ph { background: #F4F8FB; }
.sg-kpis > div, .sg-side { background: #FFFFFF; }
.sg-table th, .case-trade th { background: #F4F8FB; }
/* The charts: white screens, dark ink, light-mode marks. */
.tl-plot, .af-plot, .sg-scope {
  --ink: #0B2540; --ink-2: #27496A; --muted: #5A7892; --cyan: #00679E; --green: #00679E;
  --amber: #B87800; --omaha: #C8303A; --bg: #FFFFFF; --line: #E3EAF0; --line-2: #C9D6E2;
  background: #FFFFFF; border-color: var(--line-2);
}
.sg-scope { background: radial-gradient(ellipse at 55% 45%, #EAF5FC 0%, #FFFFFF 72%); color: #00679E; }
.tl-chart .tl-wkend { fill: #F3F6F9; }
.tl-chart .tl-flight { stroke: #9CC3DA; }
.tl-chart .tl-flight.is-key { stroke: #00679E; }
.tl-chart .tl-flight.is-omaha, .rd-track.is-omaha { stroke: #C8303A; }
.tl-chart .tl-note.is-omaha, .af-chart .af-baselab { fill: #C8303A; }
.tl-chart .tl-key circle { fill: #0B2540; stroke: #FFFFFF; }
.tl-chart .tl-key text { fill: #FFFFFF; }
.tl-chart .tl-press rect, .af-chart .af-mark circle { fill: #F2B84B; stroke: #FFFFFF; }
.tl-chart .tl-press text, .af-chart .af-mark text { fill: #1A1200; }
.tl-end, .af-chart .af-mark circle { stroke: #FFFFFF; }
.tl-chart .tl-vol, .af-chart .af-bar { fill: #C9D6E2; }
.tl-chart .tl-omaha, .af-chart .af-base { stroke: #C8303A; }
.tl-xh { stroke: #0B2540; }
.af-chart .af-line { stroke: #0B2540; filter: none; }
.af-chart .af-mark line { stroke: #B87800; opacity: 0.35; }
.rd-grid { stroke: #E3EAF0; }
.rd-ring { stroke: rgba(0, 103, 158, 0.35); }
.rd-glab, .rd-rlab { fill: #5A7892; }
.rd-track { stroke: rgba(0, 103, 158, 0.55); }
.rd-track.is-sel { stroke: #00679E; filter: none; }
.rd-blip circle { fill: #00679E; stroke: #FFFFFF; }
.rd-blip.is-omaha circle { fill: #C8303A; }
.rd-blip text, .rd-edge { fill: #0B2540; stroke: #FFFFFF; }
.rd-blip.is-omaha text { fill: #C8303A; }
.rd-sweep path { opacity: 0.08; }
.rd-track.is-omaha.is-sel { filter: none; stroke-width: 3; }