/* ═══════════════════════════════════════════════════════════════════════════
   The Equalizer — style.css
   Responsive 12-col grid adapted from Simple Grid (Zach Cole 2016).
   EKG machine dark theme with full light-mode override via .light-theme.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── CSS Variables — dark theme (default) ───────────────────────────────── */
:root {
    --bg-base:    #080e1c;
    --bg-panel:   #0b1525;
    --bg-card:    #0e1d31;
    --bg-hover:   #132440;

    --ekg:        #00dfa2;
    --ekg-dim:    rgba(0,223,162,0.10);
    --ekg-border: rgba(0,223,162,0.20);
    --ekg-hi:     rgba(0,223,162,0.40);

    --pos:  #10b981;
    --neg:  #ef4444;
    --warn: #f59e0b;
    --info: #3b82f6;

    --txt:     #c8d8ec;
    --txt-mid: #5a7a9a;
    --txt-dim: #2a4060;

    --border:    rgba(0,223,162,0.14);
    --border-hi: rgba(0,223,162,0.35);
    --radius:    6px;
    --shadow:    0 0 60px rgba(0,223,162,0.04), 0 24px 48px rgba(0,0,0,0.6);

    --chart-bg:     #0a1325;
    --chart-grid:   rgba(0,223,162,0.06);
    --chart-tick:   #4a6080;
    --band-rgb:     0,223,162;
    --tooltip-bg:   rgba(6,12,26,0.97);
    --tooltip-bdr:  rgba(0,223,162,0.30);
    --tooltip-head: #e0eeff;
    --tooltip-body: #5a7a9a;
}

/* ── Light theme overrides ──────────────────────────────────────────────── */
body.light-theme {
    --bg-base:    #f1f5f9;
    --bg-panel:   #ffffff;
    --bg-card:    #f8fafc;
    --bg-hover:   #e2e8f0;

    --ekg:        #0ea5e9;
    --ekg-dim:    rgba(14,165,233,0.08);
    --ekg-border: rgba(14,165,233,0.20);
    --ekg-hi:     rgba(14,165,233,0.35);

    --txt:     #1e293b;
    --txt-mid: #475569;
    --txt-dim: #94a3b8;

    --border:    rgba(14,165,233,0.15);
    --border-hi: rgba(14,165,233,0.35);
    --shadow:    0 0 40px rgba(14,165,233,0.06), 0 16px 32px rgba(0,0,0,0.08);

    --chart-bg:     #f0f6ff;
    --chart-grid:   rgba(30,41,59,0.07);
    --chart-tick:   #64748b;
    --band-rgb:     14,165,233;
    --tooltip-bg:   rgba(248,250,252,0.97);
    --tooltip-bdr:  rgba(14,165,233,0.30);
    --tooltip-head: #1e293b;
    --tooltip-body: #475569;
}

/* ── Reset & Base ───────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html, body {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
}

body {
    font-family: -apple-system, 'Segoe UI', system-ui, sans-serif;
    background: var(--bg-base);
    color: var(--txt);
    line-height: 1.5;
    font-size: 14px;
    -webkit-font-smoothing: antialiased;
    transition: background 0.25s, color 0.25s;
    padding: 14px;
}

/* ── 12-column responsive grid (adapted from Simple Grid) ───────────────── */
/* Use .eq-row and .eq-col-N to avoid conflicting with .container */
.eq-row { position: relative; width: 100%; }
.eq-row::after { content: ''; display: table; clear: both; }
.eq-row [class^="eq-col"] { float: left; margin: 0 1%; }
.eq-col-1  { width: 6.33%;  }
.eq-col-2  { width: 14.66%; }
.eq-col-3  { width: 23%;    }
.eq-col-4  { width: 31.33%; }
.eq-col-5  { width: 39.66%; }
.eq-col-6  { width: 48%;    }
.eq-col-7  { width: 56.33%; }
.eq-col-8  { width: 64.66%; }
.eq-col-9  { width: 73%;    }
.eq-col-10 { width: 81.33%; }
.eq-col-11 { width: 89.66%; }
.eq-col-12 { width: 98%;    }
@media (max-width: 720px) {
    .eq-row [class^="eq-col"] { width: 98%; }
}

/* ── App Shell ──────────────────────────────────────────────────────────── */
.app-shell {
    max-width: 1680px;
    margin: 0 auto;
    background: var(--bg-panel);
    border-radius: 10px;
    border: 1px solid var(--border);
    overflow: hidden;
    box-shadow: var(--shadow);
    transition: background 0.25s, border-color 0.25s;
}

/* ── Header ─────────────────────────────────────────────────────────────── */
.app-header {
    background: var(--bg-base);
    border-bottom: 1px solid var(--border);
    padding: 13px 22px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    flex-wrap: wrap;
    transition: background 0.25s;
}
.header-left  { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
/* margin-left: auto pushes header-right to the true right edge when the
   flex row wraps on narrow screens (fixes mobile right-alignment). */
.header-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 5px;
    flex-shrink: 0;
    margin-left: auto;
}


.header-brand {
    display: flex;
    align-items: center;
    gap: 7px;
    overflow: visible;   /* allow floating logo to extend above/below header */
    padding-right: 7px;
}
.header-icon  { font-size: 1.25rem; line-height: 1; }
/* Legacy header-title kept for backward compatibility; hidden when logo present */
.header-title {
    font-size: 1.18rem;
    font-weight: 700;
    color: var(--txt);
    letter-spacing: -0.02em;
}

/* ── CSS floating logo ────────────────────────────────────────────────────────
 * Floating wrapper: eq-float animation 4s ease-in-out ±14px
 * "THE":        Exo 2 bold, proportionally sized (0.96rem = 2.6rem × 0.37 ≈ original 4/10)
 *               Positioned top:2px left:10px — slight overlap with EQUALIZER, matching original
 * "EQUALIZER":  MetaVar variable font, 2.6rem (bumped from 2.4rem), margin-left:-2px (closer to abacus)
 *
 * No padding-top on wrapper — EQUALIZER sits at natural top of flex row, "THE"
 * overlaps its top-left corner, matching the visual of the original demo.
 * ─────────────────────────────────────────────────────────────────────────── */
@font-face {
    src: url("https://www.axis-praxis.org/fonts/webfonts/MetaVariableDemo-Set.woff2") format("woff2");
    font-family: "MetaVar";
    font-style: normal;
    font-weight: normal;
}
.eq-logo-wrap {
    position: relative;
    display: inline-block;
    transform: skew(0, -5deg);
    animation: eq-float 4s ease-in-out infinite;
    line-height: 1;
}
/* Shared — "The Great" label (top-left) and "9000" label (bottom-right) */
.eq-logo-the,
.eq-logo-9000 {
    position: absolute;
    z-index: 10;
    font-family: "Exo 2", "Exo2", sans-serif;
    color: #fde9ff;
    font-weight: 900;
    text-transform: uppercase;
    /* 0.96rem ≈ original 4rem/10rem ratio applied to our 2.6rem EQUALIZER */
    font-size: 0.96rem;
    line-height: 0.75em;
    text-align: center;
    text-shadow:
        1px 0.5px 0.5px #4af7ff,
        1px 1px 0.5px  #165bfb,
        2px 1px 0.5px  #4af7ff,
        1.5px 1.5px 0.5px #165bfb;
}
/* "The Great" — top-left, overlaps top of EQUALIZER; moved up 4px to -6px */
.eq-logo-the  { top: -6px; left: 10px; }
/* "9000"      — bottom-right, mirrors "The Great" overlap on opposite corner */
.eq-logo-9000 { bottom: -2px; right: 8px; }
/* Span display — stacks each word as a block line; applies to both label types */
.eq-logo-the span,
.eq-logo-9000 span {
    display: block;
    position: relative;
}
/* Chromatic shadow layer — offset glitch effect on both label types */
.eq-logo-the span::before,
.eq-logo-9000 span::before {
    content: attr(data-text);
    position: absolute;
    text-shadow: 1px 1px 0.5px #e94aa1, -0.5px -0.5px 0.5px #c736f9;
    z-index: 1;
    top: 0; left: 0;
}
.eq-logo-text {
    font-family: "MetaVar", "Exo 2", sans-serif;
    margin: 0;
    /* margin-left: -1px nudges EQUALIZER 1px further right vs previous -2px */
    margin-left: -1px;
    font-variation-settings: "wght" 900, "ital" 1;
    /* 2.725rem — 2px larger than previous 2.6rem (at 16px base: 2.6×16=41.6 → 43.6px ≈ 2.725rem) */
    font-size: 2.725rem;
    color: transparent;
    -webkit-text-stroke: 1.5px #d6f4f4;
    text-shadow:
        3px  3px 0 #07bccc,
        5px  5px 0 #e601c8,
        7px  7px 0 #e9019a;
    position: relative;
    z-index: 5;
    animation: eq-color-wave 5s linear infinite;
    white-space: nowrap;
}
@keyframes eq-float {
    0%,  100% { transform: skew(0, -5deg) translateY(0); }
    50%       { transform: skew(0, -5deg) translateY(-14px); }
}
@keyframes eq-color-wave {
    0%   { filter: hue-rotate(0deg); }
    100% { filter: hue-rotate(360deg); }
}
/* Light mode: dark grey stroke — visible on white but not as harsh as full black */
body.light-theme .eq-logo-text {
    -webkit-text-stroke: 1.5px #444;
}

.header-sub {
    font-size: 0.70rem;
    color: var(--ekg);
    opacity: 0.85;
    overflow-wrap: break-word;
}
.header-sub-eq { margin-right: 3px; }
.header-meta {
    font-size: 0.62rem;
    color: var(--txt-mid);
    font-variant-numeric: tabular-nums;
}
.header-tagline {
    font-size: 0.80rem;
    font-weight: 700;
    color: var(--ekg);
    letter-spacing: 0.03em;
}
.header-tagline-sub {
    font-size: 0.62rem;
    color: var(--txt-mid);
    font-style: italic;
}

/* ── EKG Pulse SVG ──────────────────────────────────────────────────────── */
.ekg-pulse { width: 86px; height: 16px; flex-shrink: 0; overflow: visible; }
.ekg-trace {
    stroke-dasharray: 220;
    stroke-dashoffset: 220;
    animation: ekg-draw 2.8s ease-in-out infinite;
    opacity: 0;
}
@keyframes ekg-draw {
    0%   { stroke-dashoffset: 220; opacity: 0; }
    10%  { opacity: 1; }
    72%  { stroke-dashoffset: 0; opacity: 1; }
    88%  { opacity: 0; }
    100% { stroke-dashoffset: 0; opacity: 0; }
}

/* ── Theme toggle switch ────────────────────────────────────────────────── */
.theme-toggle { display: flex; align-items: center; gap: 6px; }
.theme-icon-label { font-size: 0.86rem; line-height: 1; }
.theme-switch {
    position: relative;
    display: inline-block;
    width: 36px; height: 20px;
    flex-shrink: 0; cursor: pointer;
}
.theme-switch input { opacity: 0; width: 0; height: 0; }
.theme-slider {
    position: absolute; inset: 0;
    background: var(--bg-hover);
    border: 1px solid var(--ekg-border);
    border-radius: 20px;
    transition: background 0.25s, border-color 0.25s;
}
.theme-slider::before {
    content: '';
    position: absolute;
    height: 14px; width: 14px;
    left: 2px; top: 2px;
    background: var(--ekg);
    border-radius: 50%;
    transition: transform 0.25s, background 0.25s;
}
.theme-switch input:checked + .theme-slider { background: var(--ekg-dim); }
.theme-switch input:checked + .theme-slider::before { transform: translateX(16px); }

/* ── 3-column main layout ───────────────────────────────────────────────── */
.main-layout {
    display: flex;
    min-height: 560px;
    align-items: stretch;
}

/* ── Column 1: Controls sidebar ─────────────────────────────────────────── */
.controls-sidebar {
    width: 220px;
    flex-shrink: 0;
    background: var(--bg-panel);
    border-right: 1px solid var(--border);
    padding: 16px 13px;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    transition: background 0.25s;
}
.sidebar-controls { flex: 1; }
.control-section  { margin-bottom: 20px; }

/* ── Fuel gauge — data source capacity indicator ─────────────────────────────
 * Static HTML; only #gaugeIndicator's margin-left is driven by JS.
 * The CSS transition animates the needle on every add/remove.
 * ─────────────────────────────────────────────────────────────────────────── */
.fuel-gauge-section { margin-bottom: 16px; }
.gauge-wrap {
    width: 100%;
    box-shadow: 0 0 6px 1px rgba(0,0,0,0.4), inset 0 0 10px 3px rgba(0,0,0,0.5);
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 3px;
}
body.light-theme .gauge-wrap { background: #e8edf3; }
.gauge-inner {
    box-shadow: inset 0 0 40px 8px rgba(0,0,0,0.45);
    background: #101010;
    width: calc(100% - 4px);
    height: 58px;
    display: flex;
    align-items: stretch;
    justify-content: center;
}
.gauge-ticks-shell {
    box-shadow: inset 0 0 14px 6px rgba(0,0,0,0.70),
                inset 0 14px 16px -16px rgba(220,220,220,0.35);
    background: #080808;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 4px 14px 2px;
    position: relative;
    width: 100%;
}
.gauge-ticks-bg {
    position: absolute;
    inset: 0;
    background: rgba(255,255,255,0.04);
    pointer-events: none;
}
.gauge-ticks-row {
    display: flex;
    justify-content: space-between;
    width: 100%;
}
/* Individual ticks — scoped to #gaugeTicks to avoid class name collisions */
#gaugeTicks .tick {
    color: #fff;
    width: 8px;
    text-align: center;
    font-size: 9px;
    font-weight: 700;
    flex-shrink: 0;
}
#gaugeTicks .tick::after {
    content: '';
    display: block;
    margin: 0 auto;
    margin-top: 10px;
    width: 2px;
    height: 7px;
    background: #8b8b8b;
}
#gaugeTicks .tick-big { font-size: 9px; font-weight: 700; }
#gaugeTicks .tick-big::after { height: 11px; margin-top: 2px; }
#gaugeTicks .tick-e   { color: #cb3a3a; }
#gaugeTicks .tick-f   { color: #03c703; }
/* tick-mid: overflow:visible so the ⛽ emoji (wider than 8px) centers correctly;
   transform:translateX(-50%)+left:50% centers the emoji over the tick mark     */
#gaugeTicks .tick-mid {
    color: #aaa;
    font-size: 11px;
    overflow: visible;
    position: relative;
}
/* Labels row: 0 and 10 at each end */
.gauge-nums-row {
    display: flex;
    justify-content: space-between;
    margin-top: 1px;
}
.gauge-num-e,
.gauge-num-f {
    font-size: 7px;
    color: #666;
    font-family: 'Courier New', Consolas, monospace;
    font-weight: 700;
}
/* The animated indicator — JS sets left; CSS transition animates it.
   left: 0 anchors to the shell's padding edge, matching getBoundingClientRect coords. */
.gauge-indicator {
    width: 8px;
    display: block;
    position: absolute;
    top: 0;
    bottom: 20px;           /* leaves room for nums row */
    left: 0;
    background: rgba(250,22,22,0.45);
    transition: left 1.8s ease;
    pointer-events: none;
}
body.light-theme .gauge-inner   { background: #1a1a2e; }
body.light-theme .gauge-ticks-shell { background: #0d0d1a; }

/* ── Data Usage Meter (dmu-*) ────────────────────────────────────────────────
 * 8 odometer tickers in three groups (items, sources, credits).
 * .dmu-wrap: outer flex column containing all tickers and dividers.
 * .dmu-ticker: per-row wrapper — odometer above, label below.
 * .dmu-odometer.odometer: class+class specificity (0,2,0) overrides the
 *   CDN car theme's class-only rules without needing ID specificity.
 * .dmu-divider: thin separator between each ticker group.
 * ─────────────────────────────────────────────────────────────────────────── */
.dmu-wrap {
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.dmu-ticker {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
/* Shared odometer sizing — applies to all 8 tickers via .dmu-odometer class */
.dmu-odometer.odometer {
    font-size: 1.55rem;
    display: block;
    width: 100%;
    box-sizing: border-box;
    border-radius: var(--radius);
    line-height: 1;
    text-align: right;
}
.dmu-label {
    display: block;
    font-family: 'Courier New', Consolas, monospace;
    font-size: 0.52rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color: var(--txt-mid);
    opacity: 0.72;
}
/* Group separator */
.dmu-divider {
    border: none;
    border-top: 1px solid var(--border);
    margin: 2px 0;
}

/* ── Data Usage Meter dropdown (native <details>) ────────────────────────────
 * Matches the .isb-section accordion pattern from the insights sidebar.
 * Triangle indicator rotates 90° when open; spacing collapses when closed.
 * ─────────────────────────────────────────────────────────────────────────── */
.dmu-details {
    /* Fits inside .control-section; no extra borders or backgrounds needed */
}
.dmu-details > summary.dmu-summary {
    list-style: none;
    cursor: pointer;
    user-select: none;
    display: flex;
    align-items: center;
    gap: 5px;
    /* Override section-label margin when closed so no gap below */
    margin-bottom: 0;
    padding: 2px 0;
    border-radius: var(--radius);
    transition: opacity 0.12s;
}
/* Hide native browser disclosure triangle */
.dmu-details > summary.dmu-summary::-webkit-details-marker { display: none; }
/* Custom triangle — matches .isb-section style */
.dmu-details > summary.dmu-summary::before {
    content: '▶';
    font-size: 0.55rem;
    transition: transform 0.2s;
    color: var(--ekg);
    opacity: 0.60;
    flex-shrink: 0;
}
.dmu-details[open] > summary.dmu-summary::before { transform: rotate(90deg); }
/* Restore gap between summary and content when open */
.dmu-details[open] > summary.dmu-summary { margin-bottom: 6px; }
.dmu-details > summary.dmu-summary:hover { opacity: 0.85; }



.section-header {
    display: flex; align-items: center;
    justify-content: space-between;
    margin-bottom: 7px;
}
.section-label {
    display: block;
    font-size: 0.58rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.11em;
    color: var(--ekg);
    opacity: 0.72;
    margin-bottom: 8px;
}
.section-header .section-label { margin-bottom: 0; }

.add-data-btn {
    padding: 2px 7px;
    background: var(--ekg-dim);
    color: var(--ekg);
    border: 1px solid var(--ekg-border);
    border-radius: 4px;
    font-size: 0.65rem; font-weight: 700;
    cursor: pointer;
    transition: background 0.15s;
}
.add-data-btn:hover { background: var(--ekg-hi); }

.upload-panel {
    display: none;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden; margin-bottom: 8px;
}
.upload-panel.open { display: block; }

.upload-action-btn {
    display: flex; align-items: center; gap: 8px;
    width: 100%; padding: 7px 10px;
    background: none; border: none;
    border-bottom: 1px solid var(--border);
    cursor: pointer; text-align: left;
    color: var(--txt);
    transition: background 0.12s;
}
.upload-action-btn:last-of-type { border-bottom: none; }
.upload-action-btn:hover { background: var(--bg-hover); }
.upload-action-btn strong { display: block; font-size: 0.76rem; }
.upload-action-btn small  { display: block; font-size: 0.64rem; color: var(--txt-mid); }
.upload-icon { font-size: 0.90rem; flex-shrink: 0; }

/* metric-row now contains: .sw toggle + .dot + .metric-name + .metric-badges + .btn-remove */
.metric-row { display: flex; align-items: center; gap: 5px; margin-bottom: 6px; }
.metric-label {
    display: flex; align-items: center; gap: 5px;
    flex: 1; cursor: pointer;
    font-size: 0.74rem; min-width: 0; color: var(--txt);
}
.dot { flex-shrink: 0; font-size: 0.80rem; }
/* metric-name: flex:1 + min-width:0 allows text to truncate when long;
   badges live in .metric-badges OUTSIDE this span so they are never clipped */
.metric-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--txt-mid);
}
/* metric-badges: last flex item in .metric-row so its right edge aligns with
   the Add button right edge. flex-shrink:0 keeps badges always fully visible. */
.metric-badges {
    display: flex;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
}
.src-tag {
    display: inline-block;
    background: var(--ekg-dim); color: var(--ekg);
    border: 1px solid var(--ekg-border);
    padding: 0 3px; border-radius: 3px;
    font-style: normal; font-size: 0.53rem;
    font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.04em; vertical-align: middle;
}
/* DEMO variant: amber + italic — clearly synthetic, distinct from real CSV/API data */
.src-tag--demo {
    background: rgba(245,158,11,0.08);
    color: rgba(245,158,11,0.75);
    border-color: rgba(245,158,11,0.25);
    font-style: italic;
}
.btn-remove {
    background: none; border: none; cursor: pointer;
    padding: 2px 4px; opacity: 0.30;
    font-size: 0.68rem; border-radius: 3px;
    /* EKG green in dark mode, sky-blue in light mode — visible but not alarming when dimmed.
       Red on hover signals destructive intent clearly at the moment of action. */
    flex-shrink: 0; color: var(--ekg); line-height: 1;
    transition: opacity 0.15s, background 0.15s, color 0.15s;
}
.btn-remove:hover { opacity: 1; color: var(--neg); background: rgba(239,68,68,0.12); }

/* ── Toggle grid ────────────────────────────────────────────────────────── */
/* 2-column grid shared by both interval and data-mode controls */
.toggle-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
}

/*
 * ── Base toggle button — layout & transitions only ──────────────────────
 * All visual properties (colors, borders, shadows) live in the variant
 * classes below so each group can look distinct without specificity fights.
 */
.toggle-btn {
    display: block;
    width: 100%;
    padding: 0;            /* variants set padding */
    border-radius: 3px;
    cursor: pointer;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color 0.14s, background 0.14s, border-color 0.14s,
                box-shadow 0.14s, text-shadow 0.14s;
    position: relative;
    /* Prevent default button focus outline from clashing with glow */
    outline: none;
}
.toggle-btn:focus-visible { outline: 2px solid var(--ekg); outline-offset: 2px; }

/*
 * ═══════════════════════════════════════════════════════════════════════
 * INSTRUMENT PANEL BUTTONS  (--iv  and  --data)
 * ═══════════════════════════════════════════════════════════════════════
 * Design reference: vintage EKG machine / oscilloscope front panel.
 *
 * Inactive  → very dark faceplate, dim legend text, barely visible bezel.
 *             The button "doesn't exist" until needed — like an unlit key.
 *
 * Hover     → legend brightens slightly so user can read it without
 *             activating anything.
 *
 * Active    → button appears PRESSED IN (inset shadow) and the legend
 *             blooms with phosphor-green light. A 2 px LED indicator strip
 *             glows at the top of the face (border-top changes color).
 *             The surrounding panel picks up a faint outer glow.
 *
 * Font      → monospace all-caps — silkscreened label aesthetic.
 * ═══════════════════════════════════════════════════════════════════════
 */

/* ── Shared base for both instrument button groups ──────────────────── */
.toggle-btn--iv,
.toggle-btn--data {
    padding: 7px 4px 6px;
    font-family: 'Courier New', Consolas, monospace;
    font-size: 0.60rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;

    /* Dark faceplate — almost black with a very subtle gradient */
    background: linear-gradient(to bottom, #0b1828 0%, #050c16 100%);
    color: #1c3050;                        /* dim — unlit legend */
    border: 1px solid #0c1a28;
    border-top: 2px solid #0c1a28;        /* top thickens to become LED strip */

    /* Raised panel look: faint drop-shadow below */
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.025),   /* top highlight */
        0 2px 4px rgba(0,0,0,0.55);
}

/* ── Hover: legend becomes readable, still "off" ──────────────────── */
.toggle-btn--iv:hover,
.toggle-btn--data:hover {
    background: linear-gradient(to bottom, #0f2040 0%, #08111e 100%);
    color: #304e6a;
    border-color: #162e46;
    border-top-color: #162e46;
}

/* ── Active: LED strip glows, legend blooms, button pressed in ───── */
.toggle-btn--iv.active,
.toggle-btn--data.active {
    /* Dark green-black face — like the display cavity of an LED instrument */
    background: linear-gradient(to bottom, #030b08 0%, #020608 100%);
    color: var(--ekg);                     /* full phosphor green */
    border: 1px solid rgba(0,223,162,0.28);
    border-top: 2px solid var(--ekg);      /* ← LED indicator strip lights up */

    /* Pressed-in appearance + outer panel glow */
    box-shadow:
        inset 0 2px 6px rgba(0,0,0,0.90),          /* depressed face */
        inset 0 0 10px rgba(0,0,0,0.70),
        0 0 14px rgba(0,223,162,0.22),               /* panel glow */
        0 0 4px  rgba(0,223,162,0.10);

    /* Phosphor bloom on text — multiple layers: tight core + wide halo */
    text-shadow:
        0 0 6px  rgba(0,223,162,1.00),
        0 0 14px rgba(0,223,162,0.65),
        0 0 28px rgba(0,223,162,0.30);
}

/*
 * ═══════════════════════════════════════════════════════════════════════
 * ABOUT BUTTON  (--about)
 * ═══════════════════════════════════════════════════════════════════════
 * This is a secondary/reference control — like a softkey or info button
 * on equipment. Different look from the instrument panel buttons:
 *   • Full width (spans both columns in the 2-col grid)
 *   • Sans-serif, sentence-case — not a "data" button
 *   • Dim slate-blue accent instead of phosphor green
 *   • Bottom-edge indicator instead of top — visually distinct group
 *   • No strong glow — it's passive/informational
 * ═══════════════════════════════════════════════════════════════════════
 */
.toggle-btn--about {
    grid-column: 1 / -1;               /* spans both grid columns */
    margin-top: 6px;
    padding: 7px 8px;
    font-family: -apple-system, 'Segoe UI', system-ui, sans-serif;
    font-size: 0.68rem;
    font-weight: 500;
    letter-spacing: 0.03em;
    text-transform: none;              /* sentence case — softer */
    border-radius: 4px;

    /* Softkey face: slightly lighter than instrument buttons */
    background: #06101a;
    color: #274060;
    border: 1px solid #0f1e30;
    border-bottom: 2px solid #0f1e30;  /* indicator at bottom, not top */
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.02), 0 1px 3px rgba(0,0,0,0.4);
}
.toggle-btn--about:hover {
    background: #091520;
    color: #3a5a7a;
    border-color: #162a40;
    border-bottom-color: rgba(80,140,190,0.40);
}
.toggle-btn--about.active {
    background: #060f1c;
    color: #6aaedd;                     /* dim sky-blue — distinctly not green */
    border: 1px solid rgba(80,160,220,0.25);
    border-bottom: 2px solid rgba(100,174,221,0.65);  /* bottom LED indicator */
    box-shadow:
        inset 0 2px 5px rgba(0,0,0,0.80),
        0 0 10px rgba(80,160,220,0.12);
    text-shadow: 0 0 8px rgba(100,174,221,0.55), 0 0 18px rgba(100,174,221,0.25);
}

/*
 * ── Light theme overrides ──────────────────────────────────────────
 * In light mode the dark faceplate look is replaced with a clean
 * flat-button style that reads on the light background. The active
 * indicator (top/bottom border + text color) is preserved.
 */
body.light-theme .toggle-btn--iv,
body.light-theme .toggle-btn--data {
    background: #e8eef6;
    color: #9ab0c8;
    border: 1px solid #c8d8e8;
    border-top: 2px solid #c8d8e8;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.08);
    text-shadow: none;
}
body.light-theme .toggle-btn--iv:hover,
body.light-theme .toggle-btn--data:hover {
    background: #dce6f0;
    color: #5a7a9a;
    border-top-color: #a8c0d8;
}
body.light-theme .toggle-btn--iv.active,
body.light-theme .toggle-btn--data.active {
    background: rgba(14,165,233,0.08);
    color: #0284c7;
    border: 1px solid rgba(14,165,233,0.30);
    border-top: 2px solid #0ea5e9;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.10), 0 0 6px rgba(14,165,233,0.18);
    text-shadow: 0 0 6px rgba(14,165,233,0.45);
}
body.light-theme .toggle-btn--about {
    background: #f0f4f8;
    color: #7a9ab8;
    border: 1px solid #c8d8e8;
    border-bottom: 2px solid #c8d8e8;
    box-shadow: 0 1px 2px rgba(0,0,0,0.06);
    text-shadow: none;
}
body.light-theme .toggle-btn--about:hover {
    background: #e4eef8;
    color: #4a7aaa;
    border-bottom-color: rgba(14,100,190,0.40);
}
body.light-theme .toggle-btn--about.active {
    background: rgba(14,100,190,0.06);
    color: #0369a1;
    border: 1px solid rgba(14,100,190,0.25);
    border-bottom: 2px solid #0369a1;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.08), 0 0 6px rgba(14,100,190,0.12);
    text-shadow: 0 0 6px rgba(3,105,161,0.40);
}


/* ── Data mode lever toggle (RAW ↔ INDEX) — jkantner/eYOyBMV adapted ────────
 *
 * This is the FUNCTIONAL toggle that controls the data mode.
 * unchecked = RAW (default)  |  checked = INDEX
 *
 * Structure:
 *   .data-mode-toggle-wrap  — centers the toggle in the control section
 *   label.eq-toggle         — the metallic knob face (wraps the lever input)
 *   ::before                — "RAW" side-tab (left, green)
 *   ::after                 — "IDX" side-tab (right, green)
 *   .eq-toggle__lever       — the 3D rotating handle (checkbox input)
 *
 * State classes on .data-mode-toggle-wrap (set by _syncUIToView):
 *   .state-raw   → RAW tab glows green
 *   .state-index → IDX tab glows green
 *
 * Glow transition: 0.35s ease on color + text-shadow — same timing as the
 * hazard toggle's dm-light transition so both feel consistent.
 * ─────────────────────────────────────────────────────────────────────────── */
.data-mode-toggle-wrap {
    display: flex;
    justify-content: center;
    padding: 6px 0 8px;
    /* 24px base: knob = 2.5em = 60px; lever = 2em = 48px.
       Tab translate/dims scaled proportionally from 20px original. */
    font-size: 24px;
}

.eq-toggle,
.eq-toggle:before,
.eq-toggle:after,
.eq-toggle__lever,
.eq-toggle__lever:before {
    cursor: pointer;
    display: block;
}

/* Knob face — metallic sphere via multi-layer gradients */
.eq-toggle {
    background:
        radial-gradient(0.3em 0.5em at center,hsl(0,0%,80%) 10%,hsl(0,0%,40%) 49%,hsla(0,0%,40%,0) 50%),
        radial-gradient(0.2em 0.2em at 46% 47%,hsl(0,0%,100%),hsla(0,0%,100%,0) 50%),
        radial-gradient(0.2em 0.2em at 46% 53%,hsl(0,0%,100%),hsla(0,0%,100%,0) 50%),
        radial-gradient(0.2em 0.3em at 55% 49%,hsl(0,0%,100%) 25%,hsla(0,0%,100%,0) 50%),
        radial-gradient(0.6em 0.6em at center,hsl(0,0%,80%) 30%,hsl(0,0%,40%) 40%,hsl(0,0%,10%) 49%,hsla(0,0%,10%,0) 50%),
        radial-gradient(0.7em 0.7em at center,hsl(0,0%,90%) 49%,hsla(0,0%,90%,0) 50%),
        radial-gradient(1.3em 1.3em at center,hsl(0,0%,80%) 49%,hsla(0,0%,80%,0) 50%),
        radial-gradient(1.4em 1.4em at center,hsl(0,0%,90%) 49%,hsla(0,0%,90%,0) 50%),
        radial-gradient(1.5em 1.5em at center,hsl(0,0%,60%) 49%,hsla(0,0%,60%,0) 50%),
        linear-gradient(hsl(0,0%,60%) 12.5%,hsla(0,0%,60%,0) 13% 87%,hsl(0,0%,60%) 87.5%),
        linear-gradient(-60deg,hsl(0,0%,60%) 22.5%,hsla(0,0%,60%,0) 23% 77%,hsl(0,0%,60%) 77.5%),
        linear-gradient(60deg,hsl(0,0%,60%) 22.5%,hsla(0,0%,60%,0) 23% 77%,hsl(0,0%,60%) 77.5%),
        linear-gradient(hsl(0,0%,50%) 15.5%,hsla(0,0%,50%,0) 16% 84%,hsl(0,0%,50%) 84.5%),
        linear-gradient(-60deg,hsl(0,0%,50%) 24.5%,hsla(0,0%,50%,0) 25% 75%,hsl(0,0%,50%) 75.5%),
        linear-gradient(60deg,hsl(0,0%,50%) 24.5%,hsla(0,0%,50%,0) 25% 75%,hsl(0,0%,50%) 75.5%),
        linear-gradient(45deg,hsl(0,0%,60%) 10%,hsl(0,0%,95%) 90%);
    border-radius: 50% 50% / 0.65em 0.65em;
    box-shadow: 0 0 0 0.08em hsl(0,0%,70%) inset;
    margin: 0 1.25em;
    perspective: 100px;
    position: relative;
    width: 2.5em;
    height: 2.5em;
    -webkit-tap-highlight-color: transparent;
}

.eq-toggle:before,
.eq-toggle:after,
.eq-toggle__lever,
.eq-toggle__lever:before {
    position: absolute;
    top: 50%;
}

/* Side-label tabs — scaled from 20px original: 27→32px wide, 35→42px tall.
   Translate scaled: 1.25em = 30px at 24px base (was 25px at 20px). */
.eq-toggle:before,
.eq-toggle:after {
    display: flex;
    align-items: center;
    justify-content: center;
    color: hsl(0,0%,100%);
    writing-mode: vertical-lr;
    -webkit-writing-mode: vertical-lr;
    width: 32px;
    height: 42px;
    font-family: 'Courier New', Consolas, monospace;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    /* Glow transitions — same duration as dm-light for visual consistency */
    transition: background 0.35s ease, box-shadow 0.35s ease, text-shadow 0.35s ease;
}

.eq-toggle:before {
    background: linear-gradient(90deg, hsl(163,85%,15%), hsl(163,85%,18%));
    border-radius: 5px 0 0 5px / 50% 0 0 50%;
    box-shadow:
        2px  0   0 hsl(0,0%,70%) inset,
        0    2px 0 hsl(0,0%,70%) inset,
        0   -2px 0 hsl(0,0%,70%) inset,
        0    0   0 4px hsl(0,0%,60%) inset,
        4px  0   0 hsl(0,0%,60%) inset,
        0 0 10px rgba(0,223,162,0.40);
    content: "RAW";
    left: 0;
    transform: translate(-30px, -50%);
    z-index: 1;
}

.eq-toggle:after {
    background: linear-gradient(90deg, hsl(163,85%,15%), hsl(163,85%,18%));
    border-radius: 0 5px 5px 0 / 0 50% 50% 0;
    box-shadow:
        -2px 0   0 hsl(0,0%,70%) inset,
        0    2px 0 hsl(0,0%,70%) inset,
        0   -2px 0 hsl(0,0%,70%) inset,
        0    0   0 4px hsl(0,0%,60%) inset,
        -4px 0   0 hsl(0,0%,60%) inset,
        0 0 10px rgba(0,223,162,0.40);
    content: "IDX";
    right: 0;
    transform: translate(30px, -50%);
    z-index: 2;
}

/* RAW selected — left tab lit */
.data-mode-toggle-wrap.state-raw .eq-toggle:before {
    background: linear-gradient(90deg, hsl(163,85%,20%), hsl(163,85%,27%));
    box-shadow:
        2px  0   0 hsl(0,0%,70%) inset,
        0    2px 0 hsl(0,0%,70%) inset,
        0   -2px 0 hsl(0,0%,70%) inset,
        0    0   0 4px hsl(0,0%,60%) inset,
        4px  0   0 hsl(0,0%,60%) inset,
        0 0 18px rgba(0,223,162,0.85),
        0 0  7px rgba(0,223,162,0.55);
    text-shadow:
        0 0 6px  rgba(0,223,162,1.00),
        0 0 14px rgba(0,223,162,0.65),
        0 0 28px rgba(0,223,162,0.30);
}

/* INDEX selected — right tab lit */
.data-mode-toggle-wrap.state-index .eq-toggle:after {
    background: linear-gradient(90deg, hsl(163,85%,20%), hsl(163,85%,27%));
    box-shadow:
        -2px 0   0 hsl(0,0%,70%) inset,
        0    2px 0 hsl(0,0%,70%) inset,
        0   -2px 0 hsl(0,0%,70%) inset,
        0    0   0 4px hsl(0,0%,60%) inset,
        -4px 0   0 hsl(0,0%,60%) inset,
        0 0 18px rgba(0,223,162,0.85),
        0 0  7px rgba(0,223,162,0.55);
    text-shadow:
        0 0 6px  rgba(0,223,162,1.00),
        0 0 14px rgba(0,223,162,0.65),
        0 0 28px rgba(0,223,162,0.30);
}

/* ── Light theme overrides — tabs use blue instead of green ─────────────────
 * Unlit tab background uses a blue hue; active tab glows blue.
 * This applies to BOTH the RAW and IDX tabs in light mode.                   */
body.light-theme .eq-toggle:before,
body.light-theme .eq-toggle:after {
    background: linear-gradient(90deg, hsl(210,80%,35%), hsl(210,80%,40%));
    color: hsl(0,0%,96%);
}
/* RAW tab lit in light mode — blue bloom */
body.light-theme .data-mode-toggle-wrap.state-raw .eq-toggle:before {
    background: linear-gradient(90deg, hsl(210,90%,45%), hsl(210,90%,52%));
    box-shadow:
        2px  0   0 hsl(0,0%,70%) inset,
        0    2px 0 hsl(0,0%,70%) inset,
        0   -2px 0 hsl(0,0%,70%) inset,
        0    0   0 4px hsl(0,0%,60%) inset,
        4px  0   0 hsl(0,0%,60%) inset,
        0 0 16px rgba(14,165,233,0.80),
        0 0  6px rgba(14,165,233,0.50);
    text-shadow:
        0 0 6px  rgba(14,165,233,1.00),
        0 0 14px rgba(14,165,233,0.65);
}
/* IDX tab lit in light mode — blue bloom */
body.light-theme .data-mode-toggle-wrap.state-index .eq-toggle:after {
    background: linear-gradient(90deg, hsl(210,90%,45%), hsl(210,90%,52%));
    box-shadow:
        -2px 0   0 hsl(0,0%,70%) inset,
        0    2px 0 hsl(0,0%,70%) inset,
        0   -2px 0 hsl(0,0%,70%) inset,
        0    0   0 4px hsl(0,0%,60%) inset,
        -4px 0   0 hsl(0,0%,60%) inset,
        0 0 16px rgba(14,165,233,0.80),
        0 0  6px rgba(14,165,233,0.50);
    text-shadow:
        0 0 6px  rgba(14,165,233,1.00),
        0 0 14px rgba(14,165,233,0.65);
}

/* Lever shaft — 3D rotating rod (checkbox) */
.eq-toggle__lever,
.eq-toggle__lever:before {
    transform-style: preserve-3d;
    transition: transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
    will-change: transform;
}

.eq-toggle__lever {
    background: linear-gradient(0deg,hsl(0,0%,40%),hsl(0,0%,80%) 40% 60%,hsl(0,0%,40%));
    right: 50%;
    width: 2em;
    height: 0.5em;
    transform: translate(0,-50%) rotateY(70deg);  /* unchecked = RAW (left) */
    transform-origin: 100% 50%;
    z-index: 3;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    margin: 0; padding: 0; border: 0; outline: none;
    box-sizing: border-box;
}

.eq-toggle__lever:checked {
    transform: translate(0,-50%) rotateY(110deg);  /* checked = INDEX (right) */
}

.eq-toggle__lever:focus { outline: transparent; }

/* Spherical knob at lever tip */
.eq-toggle__lever:before {
    background-image:
        radial-gradient(100% 100% at 90% 25%,hsl(0,0%,100%) 20%,hsla(0,0%,100%,0) 35%),
        radial-gradient(100% 100% at 63% 25%,hsl(0,0%,100%) 10%,hsla(0,0%,100%,0) 15%),
        radial-gradient(100% 100% at 70% 40%,hsl(0,0%,100%) 18%,hsla(0,0%,100%,0) 23%),
        radial-gradient(100% 100% at center,hsla(0,0%,50%,0),hsl(0,0%,50%)),
        linear-gradient(20deg,hsla(0,0%,80%,0) 50%,hsl(0,0%,90%) 60% 70%,hsla(0,0%,90%,0) 80%),
        linear-gradient(-20deg,hsla(0,0%,80%,0) 20%,hsl(0,0%,90%) 30% 40%,hsla(0,0%,90%,0) 50%),
        radial-gradient(100% 100% at center,hsl(0,0%,70%),hsl(0,0%,90%) 20% 25%,hsl(0,0%,55%) 35%,hsl(0,0%,90%) 40% 45%,hsl(0,0%,50%) 50%);
    border-radius: 50%;
    content: "";
    box-shadow:
        0  0.2em 0.1em hsla(0,0%,0%,0.2),
        0  0.4em 0.1em hsla(0,0%,0%,0.2),
        0  0     0.1em hsla(0,0%,0%,0.3);
    transform: translate(-50%,-50%) rotateY(-70deg);
    width: 0.6em;
    height: 0.6em;
    z-index: 3;
}

.eq-toggle__lever:checked:before {
    transform: translate(-50%,-50%) rotateY(-110deg);
}

/* ── Get Started section — credits + coin + slot + checkout ─────────────────
 *
 * Credits: custom odometer styled with --ekg glow; CSS vars auto-switch with
 *   the theme (dark: #00dfa2, light: #0ea5e9). JS in initCsSection() drives
 *   the digit animation; "Credits" sub-label matches .section-label style.
 * Coin: em-based 3D CSS coin (font-size:6px → 10em = 60px).
 *   - All classes scoped under .cs-* to prevent collisions.
 *   - hover/active brightness effects matching .cs-slot-img behaviour.
 *   - draggable="true"; spin pauses via .cs-spin-paused on drag.
 * Slot: dimmed by default; hover/active/drag-over/blink effects.
 * Checkout: safe checkout badge below the coin+slot row.
 * ─────────────────────────────────────────────────────────────────────────── */

/* Layout — 37/63 fixed-percentage columns keep proportions at all sidebar widths.
   max-width: 220px matches the desktop sidebar width — caps the row at responsive
   viewports where the sidebar expands to full viewport width. margin: 0 auto
   centres the capped row within the wider section. No effect at desktop where
   the container is already ~194px (sidebar 220px − 26px padding). */
.cs-row {
    display: flex;
    gap: 6px;
    align-items: center;
    justify-content: center;
    max-width: 220px;
    margin: 0 auto;
}
/* Slot column (left) — 63% of cs-row width */
.cs-col {
    flex: 0 0 63%;
    display: flex;
    justify-content: center;
    align-items: center;
}
/* Credits column (credits + coin) — 37% of cs-row width; stacks children vertically */
.cs-col--credits {
    flex: 0 0 37%;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}
/* Tighter gap under section heading — credits display follows immediately */
.cs-section .section-label { margin-bottom: 4px; }

/* Credits display — number glows with --ekg; sub-label matches .section-label */
.cs-credits-label {
    text-align: center;
    line-height: 1;
}
.cs-credits-amount {
    display: flex;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--ekg);
    text-shadow: 0 0 8px var(--ekg), 0 0 20px var(--ekg-hi);
    font-variant-numeric: tabular-nums;
    line-height: 1;
}
.cs-odometer-digit {
    overflow: hidden;
    height: 1em;
    line-height: 1em;
}
.cs-digit-strip {
    display: flex;
    flex-direction: column;
    will-change: transform;
}
.cs-digit-num {
    height: 1em;
    line-height: 1em;
    text-align: center;
    width: 0.65em;
}
.cs-credits-text {
    font-size: 0.52rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.11em;
    color: var(--ekg);
    opacity: 0.72;
    margin-top: 3px;
}

/* Credit adjustment buttons — + and − below credits display */
.cs-credit-btns {
    display: flex;
    gap: 6px;
    align-items: center;
    justify-content: center;
}
.cs-credit-btn {
    background: transparent;
    border: 1px solid var(--ekg);
    color: var(--ekg);
    border-radius: 50%;
    width: 20px;
    height: 20px;
    font-size: 0.9rem;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0.72;
    transition: opacity 0.15s ease, background 0.15s ease;
    padding: 0;
    flex-shrink: 0;
}
.cs-credit-btn:hover  { opacity: 1; background: var(--ekg-dim); }
.cs-credit-btn:active { transform: scale(0.92); }

/* Coin container — sets em scale; hover/active effects mirror .cs-slot-img */
.cs-coin-container {
    font-size: 5.4px;
    width: 10em;
    height: 10em;
    position: relative;
    perspective: 140px;
    transform: translateZ(-0.4em);
    filter: drop-shadow(0 4px 6px rgba(0,0,0,0.35)) brightness(0.78);
    cursor: pointer;
    transition: filter 0.18s ease, transform 0.10s ease;
}
.cs-coin-container:hover {
    filter: drop-shadow(0 4px 6px rgba(0,0,0,0.35)) brightness(1.0);
}
.cs-coin-container:active {
    filter: drop-shadow(0 4px 6px rgba(0,0,0,0.35)) brightness(1.0);
    transform: scale(0.94) translateZ(-0.4em);
}

/* Coin — 3D preserve-3d wrapper */
.cs-coin {
    width: 100%;
    height: 100%;
    position: absolute;
    transform-style: preserve-3d;
    /* Shiny gold palette — radial gradient face matches standalone page */
    --cs-face:   radial-gradient(circle at 30% 30%, #fff9e6 0%, #f7d459 50%, #d4af37 100%);
    --cs-sign:   #8a6d3b;
    --cs-circle: #d4af37;
    --cs-side:   #dbb765;
    --cs-slide:  #c49a44;
    animation: cs-spin 24s -7s linear infinite;
}

/* Pause coin spin while dragging — toggled by initCsSection() in equalizer.js */
.cs-coin.cs-spin-paused { animation-play-state: paused; }

/* Maintain full opacity on drag — !important overrides browser's native drag-source fade */
.cs-coin-container.cs-dragging { opacity: 1 !important; }

/* Coin faces (front & back) */
.cs-face {
    border-radius: 5em;
    position: absolute;
    left: 0; top: 0;
    width: 100%; height: 100%;
    backface-visibility: hidden;
    background: var(--cs-face);
}
.cs-front { transform: translate3d(0, 0, 0.4em) rotateY(0deg); }
.cs-back  { transform: rotateY(180deg) translate3d(0, 0, 0.4em); }

/* Symbol centered on each face */
.cs-symbol {
    position: absolute;
    color: var(--cs-sign);
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    font-size: 5em;
    line-height: 1;
}

/* Dashed ring border on each face */
.cs-circle {
    border-radius: 5em;
    border: 0.35em dashed var(--cs-circle);
    width: 8em; height: 8em;
    position: absolute;
    left: 50%; top: 50%;
    transform: translate(-50%, -50%);
}

/* Edge facets — 20 total; transforms set via inline styles in HTML */
.cs-side {
    width: 0.8em;
    height: 1.61em;
    background: var(--cs-side);
    position: absolute;
    left: 50%; top: 50%;
    backface-visibility: hidden;
    border-top: 0.2em solid var(--cs-slide);
    border-bottom: 0.2em solid var(--cs-slide);
    margin: 0; padding: 0;   /* reset browser figure defaults */
    display: block;
}

/* Slot image — fills 63% column width; height scales proportionally from aspect ratio.
   max-height:220px caps growth when sidebar widens at responsive breakpoints.      */
.cs-slot-img {
    width: 100%;
    height: auto;
    max-height: 220px;
    object-fit: contain;
    display: block;
    cursor: pointer;
    filter: brightness(0.78);
    transition: filter 0.18s ease, transform 0.10s ease;
}
.cs-slot-img:hover  { filter: brightness(1.00); }
.cs-slot-img:active { filter: brightness(1.00); transform: scale(0.94); }

/* Drag-over: brightness + scale while coin is dragged over slot.
   Specificity 0,2,0 — equal to :hover/:active; placed after both so it wins. */
.cs-slot-img.cs-slot-drag-over {
    filter: brightness(1.00);
    transform: scale(0.94);
}

/* 3-flash blink — used by both coin drop (+3) and hold interaction (−1) */
@keyframes cs-slot-blink {
    0%     { filter: brightness(0.78); }
    16.67% { filter: brightness(1.00); }
    33.33% { filter: brightness(0.78); }
    50%    { filter: brightness(1.00); }
    66.67% { filter: brightness(0.78); }
    83.33% { filter: brightness(1.00); }
    100%   { filter: brightness(0.78); }
}
.cs-slot-img.cs-slot-blink {
    animation: cs-slot-blink 0.9s ease-in-out;
}
/* Override :active scale during blink so slot returns to default size visually */
.cs-slot-img.cs-slot-blink:active { transform: none; }
/* After hold-blink commits — prevents :active from re-engaging until pointer is released.
   cs-slot-used is added at the 1.5s mark and removed on pointerup / pointerleave. */
.cs-slot-img.cs-slot-used:active {
    transform: none;
    filter: brightness(0.78);
}

/* Spin animation — namespaced to cs-* */
@keyframes cs-spin {
    0%   { transform: rotateX(0deg)  rotateY(0deg)      rotateZ(0deg);   }
    50%  { transform: rotateX(45deg) rotateY(-1800deg)  rotateZ(180deg); }
    100% { transform: rotateX(0deg)  rotateY(-3600deg)  rotateZ(0deg);   }
}

/* Safe checkout badge below the coin+slot row */
.cs-checkout-row {
    margin-top: 5px;
    display: flex;
    justify-content: center;
}
.cs-checkout-row img {
    width: 100%;
    max-width: 130px;
    height: auto;
    object-fit: contain;
    opacity: 0.7;
}


/* ── Play Mode toggle (Demo ↔ Live) ──────────────────────────────────────────
 *
 * Reuses the full .eq-toggle lever structure from Data Mode toggle.
 * Only the tab labels and state class names differ:
 *   .data-mode-toggle-wrap  → .play-mode-toggle-wrap
 *   .state-raw  / .state-index  → .state-demo / .state-live
 *   content: "RAW" / "IDX"     → content: "Demo" / "Live"
 *
 * Default: Demo (left, unchecked). Live snaps back to Demo after 600ms.
 * Glow values mirror .state-raw / .state-index exactly for visual consistency.
 * ─────────────────────────────────────────────────────────────────────────── */
.play-mode-toggle-wrap {
    display: flex;
    justify-content: center;
    padding: 6px 0 8px;
    font-size: 24px;
}

/* Override tab label text for play mode */
.play-mode-toggle-wrap .eq-toggle:before { content: "Demo"; }
.play-mode-toggle-wrap .eq-toggle:after  { content: "Live"; }

/* Demo selected (default) — left tab lit */
.play-mode-toggle-wrap.state-demo .eq-toggle:before {
    background: linear-gradient(90deg, hsl(163,85%,20%), hsl(163,85%,27%));
    box-shadow:
        2px  0   0 hsl(0,0%,70%) inset,
        0    2px 0 hsl(0,0%,70%) inset,
        0   -2px 0 hsl(0,0%,70%) inset,
        0    0   0 4px hsl(0,0%,60%) inset,
        4px  0   0 hsl(0,0%,60%) inset,
        0 0 18px rgba(0,223,162,0.85),
        0 0  7px rgba(0,223,162,0.55);
    text-shadow:
        0 0 6px  rgba(0,223,162,1.00),
        0 0 14px rgba(0,223,162,0.65),
        0 0 28px rgba(0,223,162,0.30);
}

/* Live selected — right tab lit */
.play-mode-toggle-wrap.state-live .eq-toggle:after {
    background: linear-gradient(90deg, hsl(163,85%,20%), hsl(163,85%,27%));
    box-shadow:
        -2px 0   0 hsl(0,0%,70%) inset,
        0    2px 0 hsl(0,0%,70%) inset,
        0   -2px 0 hsl(0,0%,70%) inset,
        0    0   0 4px hsl(0,0%,60%) inset,
        -4px 0   0 hsl(0,0%,60%) inset,
        0 0 18px rgba(0,223,162,0.85),
        0 0  7px rgba(0,223,162,0.55);
    text-shadow:
        0 0 6px  rgba(0,223,162,1.00),
        0 0 14px rgba(0,223,162,0.65),
        0 0 28px rgba(0,223,162,0.30);
}

/* ── Light theme overrides — play mode tabs use blue instead of green ────────
 * Mirrors the light-theme rules for .data-mode-toggle-wrap exactly.           */
body.light-theme .play-mode-toggle-wrap .eq-toggle:before,
body.light-theme .play-mode-toggle-wrap .eq-toggle:after {
    background: linear-gradient(90deg, hsl(210,80%,35%), hsl(210,80%,40%));
    color: hsl(0,0%,96%);
}
/* Demo tab lit in light mode — blue bloom */
body.light-theme .play-mode-toggle-wrap.state-demo .eq-toggle:before {
    background: linear-gradient(90deg, hsl(210,90%,45%), hsl(210,90%,52%));
    box-shadow:
        2px  0   0 hsl(0,0%,70%) inset,
        0    2px 0 hsl(0,0%,70%) inset,
        0   -2px 0 hsl(0,0%,70%) inset,
        0    0   0 4px hsl(0,0%,60%) inset,
        4px  0   0 hsl(0,0%,60%) inset,
        0 0 16px rgba(14,165,233,0.80),
        0 0  6px rgba(14,165,233,0.50);
    text-shadow:
        0 0 6px  rgba(14,165,233,1.00),
        0 0 14px rgba(14,165,233,0.65);
}
/* Live tab lit in light mode — blue bloom */
body.light-theme .play-mode-toggle-wrap.state-live .eq-toggle:after {
    background: linear-gradient(90deg, hsl(210,90%,45%), hsl(210,90%,52%));
    box-shadow:
        -2px 0   0 hsl(0,0%,70%) inset,
        0    2px 0 hsl(0,0%,70%) inset,
        0   -2px 0 hsl(0,0%,70%) inset,
        0    0   0 4px hsl(0,0%,60%) inset,
        -4px 0   0 hsl(0,0%,60%) inset,
        0 0 16px rgba(14,165,233,0.80),
        0 0  6px rgba(14,165,233,0.50);
    text-shadow:
        0 0 6px  rgba(14,165,233,1.00),
        0 0 14px rgba(14,165,233,0.65);
}

/* ── ID Display — 7-segment SVG system identifier ───────────────────────────
 *
 * Pure inline SVG — no external fonts or scripts required.
 * .id-screen:       dark window; overflow:hidden clips scroll animation.
 * .id-digits:       flex row of SVG digit cells.
 * .id-digit:        each SVG; flex:1 + aspect-ratio fills row proportionally.
 * .id-digit path:   off-segment ghost tint.
 * .id-digit .id-on: on-segment — full ekg color + drop-shadow glow.
 *
 * Scroll animation (applied by JS only when value.length > 9):
 *   .id-digits--scroll: triggers id-scroll keyframes; --id-scroll-dist and
 *   --id-scroll-dur are set by initIdDisplay(). Digits switch to fixed width
 *   (--id-digit-w) so they don't shrink below readable size on overflow.
 * ─────────────────────────────────────────────────────────────────────────── */
.id-display-wrap { margin-bottom: 2px; }

.id-screen {
    background: #000;
    border: 1px solid var(--ekg-border);
    border-radius: 4px;
    padding: 5px 4px;
    overflow: hidden;
}

.id-digits {
    display: flex;
    width: 100%;
    gap: 1px;
}

/* Digit cell: grows to fill row; aspect-ratio preserves 50:80 viewBox shape */
.id-digit {
    flex: 1;
    min-width: 0;
    aspect-ratio: 50 / 80;
    overflow: visible;   /* allow drop-shadow glow to bleed outside SVG bounds */
    display: block;
}

/* Off segments — ghost tint; 0.18 matches apparent weight of reference examples at sidebar scale */
.id-digit path   { fill: rgba(0, 223, 162, 0.18); }

/* On segments — full ekg color + glow */
.id-digit .id-on {
    fill: var(--ekg);
    filter: drop-shadow(0 0 2px rgba(0, 223, 162, 0.65));
}

/* Light theme: screen stays dark; adjust ghost tint and glow to light ekg.
   fill:var(--ekg) on .id-on is required — without it, the higher-specificity
   path rule (body.light-theme .id-digit path, specificity 0,2,1) would
   override the base .id-digit .id-on fill (0,2,0), making on-segments
   nearly invisible. Adding fill here at specificity (0,3,0) wins cleanly. */
body.light-theme .id-digit path  { fill: rgba(14, 165, 233, 0.20); }
body.light-theme .id-digit .id-on {
    fill: var(--ekg);
    filter: drop-shadow(0 0 2px rgba(14, 165, 233, 0.70));
}

/* ── Scroll animation — active only when JS adds .id-digits--scroll ──────── */
/* Phases (linear timing, pauses via stable keyframe stops):                  */
/*   0–22% : pause at left start                                              */
/*   22–63%: scroll left to reveal overflow content                           */
/*   63–80%: pause at right end                                               */
/*   80–81%: near-instant snap back                                           */
/*   81–100%: pause before next cycle                                         */
.id-digits--scroll {
    animation: id-scroll var(--id-scroll-dur, 7s) linear infinite;
    will-change: transform;
}

/* Fixed digit width when scrolling — set by JS to match 9-char display size */
.id-digits--scroll .id-digit {
    flex: none;
    width: var(--id-digit-w, 20px);
}

@keyframes id-scroll {
    0%,   22%  { transform: translateX(0); }
    63%,  80%  { transform: translateX(var(--id-scroll-dist, 0px)); }
    81%,  100% { transform: translateX(0); }
}

/* ── Data mode toggle (RAW ↔ INDEX) — jamesdelaneyie/PoLPaZy adapted ────────
 *
 * Industrial safety-switch design. Two-step interaction:
 *   1. Click the red guard (input.dm-guard) to fold it up — rotateX(70deg)
 *   2. Click the hexagonal switch (input#dm-dummy) — DECORATIVE, snaps back
 *
 * Scaling: full original dimensions (1.0×).
 *   guard height: 100px |  guard-sides tabs: 8×40px
 *   switch height: 50px |  knob: 12×25px
 *   light height: 20px  |  light bottom: −40px
 *
 * Knob orientation (swapped from codepen default):
 *   RAW   (unchecked) = knob in DOWN position, rotateX(0deg)
 *   INDEX (checked)   = knob in UP  position, rotateX(-175deg)
 *
 * Animation: guard + knob transitions use the spring cubic-bezier from the
 * old lever toggle so the animation feel stays consistent across the UI.
 *
 * Hazard border: yellow diagonal stripe wrapper (original .toggle-switch-wrapper).
 *
 * "⚠️ EQUALIZE ⚠️" label: always visible — dim when RAW, glowing when INDEX.
 *
 * Colors:
 *   Guard:      original red (safety cover)
 *   Light ON:   var(--ekg) green in dark mode, #0ea5e9 blue in light mode
 *   Light OFF:  grey (#606060)
 * ─────────────────────────────────────────────────────────────────────────── */

/* ── Outer wrapper — flex column: label → hazard-wrap ────────────────────── */
.dm-toggle-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 6px 0 0;
    position: relative;
    /* dm-light is absolute-positioned (bottom:-40px) so it visually overflows
       the card without adding height. No bottom padding needed here.
       The About page override (.about-hazard-row .dm-toggle-wrap) adds its
       own padding-bottom:44px to clear the guard toggle beside it.        */
}

/* "⚠️ EQUALIZE ⚠️" label — always visible; glows in INDEX state.
 * In RAW state: dim neutral colour, no glow.
 * In INDEX state (.state-index): bright EKG green with bloom shadow.         */
.dm-toggle-wrap::before {
    content: "⚠️ EQUALIZE ⚠️";
    display: block;
    font-family: 'Courier New', Consolas, monospace;
    font-size: 0.52rem;
    font-weight: 700;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    white-space: nowrap;
    /* Inactive: dim neutral — clearly present but not calling attention */
    color: var(--txt-mid);
    text-shadow: none;
    transition: color 0.35s ease, text-shadow 0.35s ease;
    margin-bottom: 6px;
    pointer-events: none;
    text-align: center;
}
/* INDEX active — bright EKG green bloom */
.dm-toggle-wrap.state-index::before {
    color: var(--ekg);
    text-shadow:
        0 0 6px  rgba(0,223,162,1.00),
        0 0 14px rgba(0,223,162,0.65),
        0 0 28px rgba(0,223,162,0.30);
}
/* Light mode inactive */
body.light-theme .dm-toggle-wrap::before {
    color: var(--txt-mid);
    text-shadow: none;
}
/* Light mode INDEX active — blue bloom */
body.light-theme .dm-toggle-wrap.state-index::before {
    color: #0ea5e9;
    text-shadow:
        0 0 6px  rgba(14,165,233,0.90),
        0 0 14px rgba(14,165,233,0.55);
}

/* ── Hazard border wrapper — yellow diagonal stripe (original design) ────── */
.dm-hazard-wrap {
    position: relative;
    padding: 10px;
    border: 1px solid #202020;
    border-radius: 10px;
    outline: 3px solid #a1a1a1;
    background: repeating-linear-gradient(
        -45deg,
        #f5dd00,
        #f5dd00  12px,
        #101010  10px,
        #101010  23px
    );
}

/* ── Panel — the main switch housing ─────────────────────────────────────── */
.dm-switch-panel {
    position: relative;
    border-radius: 5px;
    border: 2px solid #202020;
    outline: 2px solid #a1a1a1;
    outline-offset: 0px;
    background: #404040;
    padding: 3px;
    margin: 0;
    perspective: 300px;
    box-shadow:
        0 0 1px #050506,
        inset 0 0 0 2px #050506,
        inset 0 3px 1px #66646c;
    /* No explicit width — panel auto-sizes to its content (50px guard + padding + border).
       Setting an explicit width with box-sizing:border-box shrinks the content area
       and causes the guard to overflow and appear offset. */
}

/* Side trim lines on the panel */
.dm-switch-panel::before {
    content: "";
    position: absolute;
    right: 1px; top: 10px;
    height: 20px; width: 2px;
    border-top-right-radius: 3px;
    background-color: #a3a3a3;
    z-index: 1;
}
.dm-switch-panel::after {
    content: "";
    position: absolute;
    left: 1px; top: 10px;
    height: 20px; width: 2px;
    border-top-left-radius: 3px;
    background-color: #a3a3a3;
}

/* ── Guard — red safety cover (full original: 50×100px) ─────────────────── */
.dm-guard {
    position: relative;
    margin: 0; padding: 0;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    display: block;
    width: 50px;
    height: 100px;
    border-radius: 7px;
    background: linear-gradient(0deg,
        rgba(166,46,41,1)  0%,
        rgba(210,47,41,1)  6%,
        rgba(237,71,65,1)  16%,
        rgba(237,71,65,1)  27%,
        rgba(210,47,41,1)  68%,
        rgba(210,47,41,1)  100%);
    box-shadow:
        inset -2px -2px 3px rgba(0,0,0,0.3),
        inset  2px  2px 3px rgba(255,255,255,0.5);
    cursor: grab;
    transform-origin: 50% 0%;
    /* Spring overshoot — same cubic-bezier as the old lever toggle */
    transition: transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
    /* Guard's own perspective context for the fold animation */
    perspective: 500px;
    filter: drop-shadow(0px 0px 0px rgba(0,0,0,1));
    border: 1px solid black;
    z-index: 3;
}
/* Guard inner face gradient */
.dm-guard::after {
    content: "";
    display: block;
    width: 100%;
    height: calc(100% - 20px);
    position: absolute;
    top: 20px;
    opacity: 0.6;
    background: linear-gradient(0deg,
        rgba(110,29,25,1)  0%,
        rgba(173,46,41,1)  4%,
        rgba(210,47,41,1)  11%,
        rgba(237,71,65,1)  21%,
        rgba(242,107,102,1) 32%,
        rgba(237,71,65,1)  41%,
        rgba(210,47,41,1)  63%,
        rgba(210,47,41,1)  100%);
    border-radius: 7px;
}
/* Guard hinge tab at top */
.dm-guard::before {
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 50%;
    height: 10px;
    background-color: #303030;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    border: 3px ridge #656565;
    top: -2px;
}
/* Guard lifted — folds back to reveal the switch */
.dm-guard:checked {
    transform: rotateX(70deg);
    background: linear-gradient(180deg,
        rgba(166,46,41,1)  4%,
        rgba(210,47,41,1)  38%,
        rgba(237,71,65,1)  59%,
        rgba(242,113,108,1) 71%,
        rgba(242,113,108,1) 94%,
        rgba(210,47,41,1)  100%);
}
/* Guard side tabs slide down when guard is lifted */
.dm-guard:checked + .dm-guard-sides {
    transform: translateY(0px);
}

/* ── Guard side tabs (full original: translateY 45px; tabs 8×40px at top 15px) */
.dm-guard-sides {
    position: absolute;
    left: 0; top: 0;
    width: 100%;
    height: 100px;
    display: block;
    transform: translateY(45px);
    transition: all 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
    pointer-events: none;
}
.dm-guard-sides::before,
.dm-guard-sides::after {
    content: "";
    display: block;
    position: absolute;
    top: 15px;
    width: 8px;
    height: 40px;
    background: linear-gradient(0deg,
        rgba(166,46,41,1)  0%,
        rgba(210,47,41,1)  6%,
        rgba(237,71,65,1)  16%,
        rgba(237,71,65,1)  27%,
        rgba(210,47,41,1)  68%,
        rgba(210,47,41,1)  100%);
    box-shadow:
        inset -2px -2px 3px rgba(0,0,0,0.3),
        inset  2px  2px 1px rgba(255,255,255,0.2),
        0px 3px 3px rgba(0,0,0,0.4);
}
.dm-guard-sides::before { left:  2px; }
.dm-guard-sides::after  { right: 2px; }

/* ── Hexagonal switch (full original: 52×50px) ───────────────────────────── */
.dm-switch {
    position: absolute;
    margin: 0; padding: 0;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    display: block;
    background: linear-gradient(to left,
        #a1a1a1 0%, #a1a1a1 1%, #c0c0c0 26%,
        #b1b1b1 48%, #909090 75%, #a1a1a1 100%);
    top: 70%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%) rotate(-90deg);
    width: 52px;
    height: 50px;
    clip-path: polygon(25% 5%, 75% 5%, 100% 50%, 75% 95%, 25% 95%, 0% 50%);
    z-index: 0;
    cursor: pointer;
    filter: drop-shadow(1px 1px 3px rgba(255,255,255,1));
}
.dm-switch::before {
    content: "\2B22";
    display: block;
    font-size: 50px;
    position: absolute;
    transform: rotate(90deg);
    color: transparent;
    text-shadow:
        -1px  1px 1px rgba(255,255,255,0.3),
         1px  1px 0.5px rgba(0,0,0,0.4),
        -1px -1px 1px rgba(255,255,255,1),
        -2px  0px 0px rgba(0,0,0,1),
        -2px -2px 0px rgba(0,0,0,1),
         1px -1px 0px rgba(0,0,0,1);
    box-shadow:
        inset 1px  1px 1px rgba(255,255,255,1),
        inset -1px -1px 1px rgba(0,0,0,0.5);
    top: -12px; left: 5px;
}
.dm-switch::after {
    content: "";
    position: absolute;
    top: 50%; left: 50%;
    transform: translateX(-50%) translateY(-50%);
    background: #000;
    border-radius: 100%;
    width: 15px; height: 15px;
    font-size: 18px;
    text-indent: -0.22em;
    line-height: 0.7em;
    opacity: 0.8;
    border: 4px double #726e6e;
    box-shadow:
        2px  2px 2px rgba(255,255,255,0.5),
        -2px -2px 2px rgba(255,255,255,0.5);
}

/* ── Knob (full original: 12×25px)
 *
 * ORIENTATION: down = activate (INDEX), up = deactivate (RAW).
 *   RAW   (unchecked, default) = knob UP,   translateY(-14px) rotateX(-175deg), bottom: 15px
 *   INDEX (checked, activated) = knob DOWN, rotateX(0deg),                      bottom: 13px
 * ─────────────────────────────────────────────────────────────────────────── */
.dm-knob {
    position: absolute;
    display: block;
    width: 12px;
    height: 25px;
    /* Default = UP position (RAW / deactivated) */
    bottom: 15px;
    left: 50%;
    pointer-events: none;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    transform: translateX(-50%) translateY(-14px) rotateX(-175deg);
    background: linear-gradient(to left,
        lightgrey 0%, lightgrey 1%, #e0e0e0 26%,
        #efefef 48%, #d9d9d9 75%, #bcbcbc 100%);
    border: 1px solid #000;
    z-index: 2;
    transition: all 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow:
        inset 0px -3px 3px rgba(0,0,0,1),
        inset 0px  3px 3px rgba(0,0,0,0.7);
}
.dm-knob::after {
    content: "";
    position: absolute;
    bottom: -10px; left: -2px;
    width: 12px; height: 15px;
    border-radius: 6px;
    border: 1px solid black;
    border-top: 0;
    background: -webkit-radial-gradient(50% -70%,
        rgba(38,38,38,0.5),
        #e6e6e6 25%, #ffffff 38%, #a1a1a1 63%, #e6e6e6 87%,
        rgba(38,38,38,1));
}
/* Knob pushes DOWN when switch is checked (INDEX / activated) */
.dm-switch:checked + .dm-knob {
    transform: translateX(-50%) rotateX(0deg);
    bottom: 13px;
}
.dm-switch:checked + .dm-knob::after {
    background: -webkit-radial-gradient(50% -40%,
        rgba(38,38,38,0.5),
        #e6e6e6 25%, #ffffff 38%, #a1a1a1 63%, #e6e6e6 87%,
        rgba(38,38,38,1));
    height: 15px;
    bottom: -10px;
}

/* ── Light indicator (full original: 50×20px, border-radius 7px) ─────────── */
.dm-light {
    position: absolute;
    bottom: -40px;
    display: block;
    width: 50px;
    height: 20px;
    left: 50%;
    padding: 2px;
    transform: translateX(-50%);
    background-color: #606060;
    border-radius: 7px;
    border: 2px ridge black;
    z-index: 0;
    transition: all 0.4s ease;
}
.dm-light::before {
    opacity: 0;
    content: "";
    display: block;
    position: absolute;
    width: 100%; height: 100%;
    left: 0; top: 0;
    mix-blend-mode: overlay;
    background: radial-gradient(at center, var(--ekg), var(--ekg));
    transition: all 0.6s ease;
}
.dm-light::after {
    content: "";
    display: block;
    width: 100%; height: 100%;
    left: 0; top: 0;
    position: absolute;
    opacity: 0.2;
    background-image: radial-gradient(#ffffff50 2px, transparent 0);
    background-size: 5px 5px;
    background-position: -18px -15px;
    z-index: 1;
    border-radius: 5px;
    outline: 2px solid #a1a1a1;
    border: 1px solid #00000050;
    transition: all 1s ease;
}
/* Light ON — switch checked → EKG green glow */
.dm-switch:checked ~ .dm-light {
    background: var(--ekg);
    box-shadow: 0 0 10px rgba(0,223,162,0.90);
}
.dm-switch:checked ~ .dm-light::before { opacity: 0.3; }
.dm-switch:checked ~ .dm-light::after  { opacity: 0.3; box-shadow: 0 0 16px rgba(0,223,162,0.80); }

/* Light mode — light ON uses blue */
body.light-theme .dm-switch:checked ~ .dm-light {
    background: #0ea5e9;
    box-shadow: 0 0 10px rgba(14,165,233,0.90);
}
body.light-theme .dm-switch:checked ~ .dm-light::after {
    box-shadow: 0 0 16px rgba(14,165,233,0.80);
}

/* ── dm-toggles-row — side-by-side flex row for EQUALIZE + AI Insights ────── */
.dm-toggles-row {
    display: flex;
    gap: 12px;
    justify-content: center;
    align-items: flex-start;
}

/* ── AI Insights toggle ──────────────────────────────────────────────────────
 * CSS-1 (rounded) style from test-ai-toggle.html, adapted for the app.
 * Key differences from the hazard (dm-) toggle:
 *   • Panel:       border-radius 18px vs 5px
 *   • Guard:       border-radius 20px + hue-rotate filters vs 7px / no filter
 *   • Guard-sides: top:20px / height:10px / translateY(35px) vs 0/100px/45px;
 *                  hue-rotate(20deg) on ::before/after vs none; box-shadow on
 *                  guard:checked + sides vs none (hazard removes it)
 *   • Switch:      circular 46×46px vs hexagonal 52×50px
 *   • Knob:        gradient focal-point: default -40% / checked -70%
 *                  (dm-knob is the inverse: default -70% / checked -40%)
 *   • Light:       60px wide vs 50px; CSS-1 hue-rotate filter on inactive
 * Shared with hazard: spring cubic-bezier, EKG light colors.               */

/* ── AI toggle outer wrapper — matches dm-toggle-wrap structure ────────────── */
.ai-toggle-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 6px 0 0;
    position: relative;
}

/* "✨ AI INSIGHTS 🤖" label — same font as EQUALIZE; glows on :has() check.
 * :has() triggers for the ~600ms snapback window while the switch is ON.   */
.ai-toggle-wrap::before {
    content: "✨ AI INSIGHT 🤖";
    display: block;
    font-family: 'Courier New', Consolas, monospace;
    font-size: 0.52rem;
    font-weight: 700;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--txt-mid);
    text-shadow: none;
    transition: color 0.35s ease, text-shadow 0.35s ease;
    margin-bottom: 6px;
    pointer-events: none;
    text-align: center;
}
/* Active glow — fires while #ai-toggle is checked (during snapback window) */
.ai-toggle-wrap:has(#ai-toggle:checked)::before {
    color: var(--ekg);
    text-shadow:
        0 0 6px  rgba(0,223,162,1.00),
        0 0 14px rgba(0,223,162,0.65),
        0 0 28px rgba(0,223,162,0.30);
}
body.light-theme .ai-toggle-wrap::before {
    color: var(--txt-mid);
    text-shadow: none;
}
body.light-theme .ai-toggle-wrap:has(#ai-toggle:checked)::before {
    color: #0ea5e9;
    text-shadow:
        0 0 6px  rgba(14,165,233,0.90),
        0 0 14px rgba(14,165,233,0.55);
}

/* ── AI Insights border — red / white / blue diagonal stripe ───────────────── */
.ai-hazard-wrap {
    position: relative;
    padding: 10px;
    border: 1px solid #202020;
    border-radius: 10px;
    outline: 3px solid #a1a1a1;
    background: repeating-linear-gradient(
        -45deg,
        #cc1111  0px,  #cc1111  8px,
        #ffffff  8px,  #ffffff 16px,
        #1133cc 16px,  #1133cc 24px,
        #ffffff 24px,  #ffffff 32px
    );
}

/* ── AI switch panel — CSS-1 rounded (border-radius:18px vs hazard's 5px) ─── */
.ai-switch-panel {
    position: relative;
    border-radius: 18px;
    border: 2px solid #202020;
    outline: 2px solid #a1a1a1;
    outline-offset: 0px;
    background: #404040;
    padding: 3px;
    margin: 0;
    perspective: 300px;
    box-shadow:
        0 0 1px #050506,
        inset 0 0 0 2px #050506,
        inset 0 3px 1px #66646c;
}
/* Side trim lines — top:20px matches CSS-1 base (hazard uses top:10px) */
.ai-switch-panel::before {
    content: "";
    position: absolute;
    right: 1px; top: 20px;
    height: 20px; width: 2px;
    border-top-right-radius: 3px;
    background-color: #a3a3a3;
    z-index: 1;
}
.ai-switch-panel::after {
    content: "";
    position: absolute;
    left: 1px; top: 20px;
    height: 20px; width: 2px;
    border-top-left-radius: 3px;
    background-color: #a3a3a3;
}

/* ── AI guard — CSS-1 rounded (border-radius:20px + hue-rotate filters) ────── */
.ai-guard {
    position: relative;
    margin: 0; padding: 0;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    display: block;
    width: 50px;
    height: 100px;
    border-radius: 20px;
    background: linear-gradient(0deg,
        rgba(166,46,41,1)  0%,
        rgba(210,47,41,1)  6%,
        rgba(237,71,65,1)  16%,
        rgba(237,71,65,1)  27%,
        rgba(210,47,41,1)  68%,
        rgba(210,47,41,1)  100%);
    box-shadow:
        inset -2px -2px 3px rgba(0,0,0,0.3),
        inset  2px  2px 3px rgba(255,255,255,0.5);
    cursor: grab;
    transform-origin: 50% 0%;
    transition: transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
    perspective: 500px;
    border: 1px solid black;
    z-index: 3;
    filter: hue-rotate(10deg);      /* CSS-1: present (hazard sets filter:none) */
}
/* Inner face gradient — border-radius:14px + hue-rotate (CSS-1) */
.ai-guard::after {
    content: "";
    display: block;
    width: 100%;
    height: calc(100% - 20px);
    position: absolute;
    top: 20px;
    opacity: 0.6;
    background: linear-gradient(0deg,
        rgba(110,29,25,1)   0%,
        rgba(173,46,41,1)   4%,
        rgba(210,47,41,1)   11%,
        rgba(237,71,65,1)   21%,
        rgba(242,107,102,1) 32%,
        rgba(237,71,65,1)   41%,
        rgba(210,47,41,1)   63%,
        rgba(210,47,41,1)   100%);
    border-radius: 14px;            /* CSS-1: 14px (hazard: 7px) */
    filter: hue-rotate(20deg);      /* CSS-1: present (hazard sets filter:none) */
}
/* Hinge tab — CSS-1: groove border, all-sides rounded, top:0px */
.ai-guard::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 0px;                       /* CSS-1: 0px (hazard: -2px) */
    transform: translateX(-50%);
    width: 50%;
    height: 10px;
    background-color: #303030;
    border-top-left-radius: 5px;    /* CSS-1: all sides rounded */
    border-top-right-radius: 5px;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    border: 3px groove #656565;     /* CSS-1: groove (hazard: ridge) */
}
/* Guard lifted — rotates back to reveal switch */
.ai-guard:checked {
    transform: rotateX(70deg);
    background: linear-gradient(180deg,
        rgba(166,46,41,1)   4%,
        rgba(210,47,41,1)   38%,
        rgba(237,71,65,1)   59%,
        rgba(242,113,108,1) 71%,
        rgba(242,113,108,1) 94%,
        rgba(210,47,41,1)   100%);
}
/* CSS-1: box-shadow present on sides when guard is up (hazard removes this) */
.ai-guard:checked + .ai-guard-sides {
    transform: translateY(0px);
    box-shadow: 0px 0px 20px rgba(0,0,0,1);
}

/* ── AI guard sides — CSS-1 geometry: top:20px / height:10px / translateY(35px) */
.ai-guard-sides {
    position: absolute;
    left: 0;
    top: 20px;                      /* CSS-1: 20px (hazard: 0) */
    width: 100%;
    height: 10px;                   /* CSS-1: 10px (hazard: 100px) */
    pointer-events: none;
    display: block;
    transform: translateY(35px);    /* CSS-1: 35px (hazard: 45px) */
    transition: all 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
    z-index: 2;
}
/* CSS-1: tab top at 0px + hue-rotate(20deg) (hazard: top:15px, filter:none) */
.ai-guard-sides::before,
.ai-guard-sides::after {
    content: "";
    display: block;
    position: absolute;
    top: 0px;                       /* CSS-1: 0px (hazard: 15px) */
    width: 8px;
    height: 40px;
    background: linear-gradient(0deg,
        rgba(166,46,41,1)  0%,
        rgba(210,47,41,1)  6%,
        rgba(237,71,65,1)  16%,
        rgba(237,71,65,1)  27%,
        rgba(210,47,41,1)  68%,
        rgba(210,47,41,1)  100%);
    box-shadow:
        inset -2px -2px 3px rgba(0,0,0,0.3),
        inset  2px  2px 1px rgba(255,255,255,0.2),
        0px 3px 3px rgba(0,0,0,0.4);
    filter: hue-rotate(20deg);      /* CSS-1: present (hazard: filter:none) */
}
.ai-guard-sides::before { left:  2px; }
.ai-guard-sides::after  { right: 2px; }

/* ── AI switch — CSS-1 circular (46×46px, no clip-path, no rotate) ─────────── */
.ai-switch {
    position: absolute;
    margin: 0; padding: 0;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    display: block;
    user-select: none;
    -webkit-user-select: none;
    background: linear-gradient(to left,
        #a1a1a1 0%, #a1a1a1 1%, #c0c0c0 26%,
        #b1b1b1 48%, #909090 75%, #a1a1a1 100%);
    top: 70%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%); /* CSS-1: no rotate (hazard: rotate(-90deg)) */
    width: 46px;                    /* CSS-1: 46px (hazard: 52px) */
    height: 46px;                   /* CSS-1: 46px (hazard: 50px) */
    outline: 1px solid #00000050;   /* CSS-1: outline present (hazard: none) */
    outline-offset: -4px;
    border-radius: 100%;            /* CSS-1: circular (hazard: hexagonal clip-path) */
    z-index: 0;
    cursor: pointer;
    /* CSS-1: no filter (hazard: drop-shadow) */
}
/* CSS-1: star glyph (\2BC3) with opacity:0 — purely structural placeholder */
.ai-switch::before {
    content: "\2BC3";
    display: block;
    font-size: 70px;
    position: absolute;
    transform: rotate(90deg);
    color: transparent;
    text-shadow:
        -1px  1px 1px rgba(255,255,255,0.3),
         1px  1px 0.5px rgba(0,0,0,0.4),
        -1px -1px 1px rgba(255,255,255,1),
        -2px  0px 0px rgba(0,0,0,1),
        -2px -2px 0px rgba(0,0,0,1),
         1px -1px 0px rgba(0,0,0,1);
    top: -12px; left: 5px;
    opacity: 0;                     /* CSS-1: hidden (hazard: opacity:1) */
}
.ai-switch::after {
    content: "";
    position: absolute;
    top: 50%; left: 50%;
    transform: translateX(-50%) translateY(-50%);
    background: #000;
    border-radius: 100%;
    width: 15px; height: 15px;
    opacity: 0.8;
    border: 4px double #726e6e;
    box-shadow:
         2px  2px 2px rgba(255,255,255,0.5),
        -2px -2px 2px rgba(255,255,255,0.5);
}

/* ── AI knob — CSS-1 gradients (focal-point swap: default -40%, checked -70%) ─
 * dm-knob is the inverse: default -70%, checked -40%.
 * Spring transition matches hazard toggle (overrides CSS-1 linear 0.2s ease). */
.ai-knob {
    position: absolute;
    display: block;
    width: 12px;
    height: 25px;
    bottom: 15px;
    left: 50%;
    pointer-events: none;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    transform: translateX(-50%) translateY(-14px) rotateX(-175deg);
    background: linear-gradient(to left,
        lightgrey 0%, lightgrey 1%, #e0e0e0 26%,
        #efefef 48%, #d9d9d9 75%, #bcbcbc 100%);
    border: 1px solid #000;
    z-index: 2;
    transition: all 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow:
        inset 0px -3px 3px rgba(0,0,0,1),
        inset 0px  3px 3px rgba(0,0,0,0.7);
}
/* CSS-1 DEFAULT: -40% focal point (dm-knob default uses -70%) */
.ai-knob::after {
    content: "";
    position: absolute;
    bottom: -10px; left: -2px;
    width: 12px; height: 15px;
    border-radius: 6px;
    border: 1px solid black;
    border-top: 0;
    background: -webkit-radial-gradient(50% -40%,
        rgba(38,38,38,0.5),
        #e6e6e6 25%, #ffffff 38%, #a1a1a1 63%, #e6e6e6 87%,
        rgba(38,38,38,1));
}
.ai-switch:checked + .ai-knob {
    transform: translateX(-50%) rotateX(0deg);
    bottom: 13px;
}
/* CSS-1 CHECKED: swaps to -70% focal point (dm-knob checked uses -40%) */
.ai-switch:checked + .ai-knob::after {
    background: -webkit-radial-gradient(50% -70%,
        rgba(38,38,38,0.5),
        #e6e6e6 25%, #ffffff 38%, #a1a1a1 63%, #e6e6e6 87%,
        rgba(38,38,38,1));
    height: 15px;
    bottom: -10px;
}

/* ── AI light — CSS-1: 60px wide, hue-rotate filter on inactive state ─────────
 * Active state clears filter so EKG colors render correctly.
 * Active colors are identical to dm-light for dashboard consistency.        */
.ai-light {
    position: absolute;
    bottom: -40px;                  /* -30px CSS-1 base + 10px wrapper padding */
    display: block;
    width: 60px;                    /* CSS-1: 60px (dm-light: 50px) */
    height: 20px;
    left: 50%;
    padding: 2px;
    transform: translateX(-50%);
    background-color: #4a4a4a;    /* #4a4a4a × brightness(1.3) ≈ #606060 = dm-light off color */
    border-radius: 7px;
    border: 2px ridge black;
    z-index: 0;
    overflow: hidden;               /* clips ::before rainbow gradient to border-radius */
    transition: background-color 0.4s ease 0.4s, box-shadow 0.4s ease 0.4s, filter 0.4s ease 0.4s;
    filter: hue-rotate(80deg) brightness(1.3); /* CSS-1 character: warm tint off */
}
.ai-light::before {
    content: "";
    display: block;
    position: absolute;
    width: 100%; height: 100%;
    left: 0; top: 0;
    background: linear-gradient(90deg,
        #00ffd5, #0ea5e9, #7a00ff, #ff00c8, #002bff, #00ffd5);
    background-size: 300% 100%;
    opacity: 0;
    animation: ai-light-glow 6s ease-in-out infinite; /* runs continuously; opacity controls visibility */
    transition: opacity 0.4s ease;
}
/* @keyframes adjacent to ::before where background-position is animated */
@keyframes ai-light-glow {
    0%   { background-position: 0%   0; }
    50%  { background-position: 300% 0; }
    100% { background-position: 0%   0; }
}
/* Activation reset — JS adds/removes this class to restart animation from position 0 on each toggle */
.ai-light--reset::before { animation-name: none; }
.ai-light::after {
    content: "";
    display: block;
    width: 100%; height: 100%;
    left: 0; top: 0;
    position: absolute;
    opacity: 0.2;
    background-image: radial-gradient(#ffffff50 2px, transparent 0);
    background-size: 5px 5px;
    background-position: -18px -15px;
    z-index: 1;
    border-radius: 7px;
    outline: 2px solid #a1a1a1;
    border: 1px solid #00000050;
    transition: all 1s ease;
    filter: hue-rotate(80deg);      /* CSS-1: present (dm-light::after: none) */
}
/* Cycling AI rainbow — ::before opacity sequences after the base light:
   fade-in:  base (0–0.4s) then rainbow (0.4s–1.0s, 0.6s duration via :checked rule overrides).
   fade-out: rainbow first (0–0.4s, base rule no delay) then base (0.4s–0.8s, base rule 0.4s delay).
   Light-theme active color overridden below. Label glow is independent —
   driven by .ai-toggle-wrap:has(#ai-toggle:checked)::before.               */
.ai-switch:checked ~ .ai-light {
    background-color: var(--ekg);
    box-shadow: 0 0 10px rgba(0,223,162,0.90);
    filter: none;
    transition: background-color 0.4s ease, box-shadow 0.4s ease, filter 0.4s ease;
}
.ai-switch:checked ~ .ai-light::before {
    opacity: 1;
    transition-delay: 0.4s;
    transition-duration: 0.6s;
}
.ai-switch:checked ~ .ai-light::after {
    opacity: 0.3;
    box-shadow: 0 0 16px rgba(255,255,255,0.40);
    filter: none;
}
/* Light mode — active AI light uses blue, matching dm-light light-theme behavior */
body.light-theme .ai-switch:checked ~ .ai-light {
    background-color: #0ea5e9;
    box-shadow: 0 0 10px rgba(14,165,233,0.90);
}

/* ── Column 2: Main content area ────────────────────────────────────────── */
.content-area {
    flex: 1;
    min-width: 0;
    padding: 18px 20px;
    display: flex;
    flex-direction: column;
    gap: 11px;
}

/* ── Analysis Settings — Interval + Comparison Periods + Data Mode ────────────
 * Three-column flex row above the chart. Shown in chart modes only (JS-driven).
 * Proportions: Interval/Comparison stack (flex:3) | Data Mode (flex:none) | Party (flex:1)
 * Data Mode uses flex:none so it auto-sizes to exactly hold both toggles;
 * Interval/Comparison and Party Mode fill the remaining space (3:1 ratio).
 * Each column is its own card (background, border, padding).
 * At ≤860px: stacks to a single column so each card takes full width.
 * ─────────────────────────────────────────────────────────────────────────── */
.analysis-settings {
    display: flex;
    gap: 10px;
    align-items: stretch;
}
/* Each column is a standalone card */
.analysis-col {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 2;
    min-width: 0;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 10px 14px;
    transition: background 0.25s, border-color 0.25s;
}
/* Data Mode column — sizes to content via flex:none (= flex:0 0 auto).
   Width is determined by the two toggle-wraps + gap + card padding; no
   hard-coded pixel value is needed because the toggles are fixed-size and
   the labels carry white-space:nowrap so they never constrain the width.
   flex:none: does not grow or shrink; other cards fill remaining space.
   At ≤860px (column layout) the card auto-sizes to content height and
   stretches to full width via align-items:stretch — no override needed.
   padding: 10px 22px 36px — sides widened from 14px base to 22px so the
   toggle content has the same visual breathing room from card edges as
   other cards; bottom 36px clears the lights at bottom:-40px.             */
.analysis-col--mode {
    flex: none;
    padding: 10px 22px 36px;
}
/* Stacks Interval and Comparison Periods vertically at all breakpoints.
   flex:3 — Data Mode uses flex:none (auto-sized), so the remaining space
   is split 3:1 between this stack and Party Mode.
   gap:10px matches .analysis-settings gap for visual consistency.          */
.analysis-cols-stack {
    display: flex;
    flex-direction: column;
    flex: 3;
    min-width: 0;
    gap: 10px;
}
/* Natural height per card — flex:none prevents column from distributing
   available height across both cards; each card sizes to its content.      */
.analysis-cols-stack > .analysis-col {
    flex: none;
}
/* Interval buttons: wrap naturally across two rows for 5 buttons */
.analysis-settings .toggle-grid {
    grid-template-columns: repeat(3, 1fr);
}

/* Interval buttons: wrap naturally across two rows for 5 buttons */
.analysis-settings .toggle-grid {
    grid-template-columns: repeat(3, 1fr);
}

/* ── LED Strip Row ────────────────────────────────────────────────────────────
 *
 * Flex row: LED arcade (flex:4, ~80%) + lightbox wrapper (flex:1, ~20%).
 * align-items:stretch keeps both panels identical height — the lightbox
 * .about-radio-back uses position:absolute;inset:0 so it fills naturally.
 * overflow:hidden lives on led-scroll-clip (inner wrapper) so the arcade
 * wrap's padding remains visible on all four sides at every viewport width.
 * This preserves the right inside border edge when the LED grid overflows.
 *
 * At ≤540px the lightbox circles shrink (46px→36px) so the LED still wins
 * the majority of the row. flex-direction:row is NEVER overridden — the
 * two elements always sit side by side.
 * ─────────────────────────────────────────────────────────────────────────── */
.led-strip-row {
    display: flex;
    flex-direction: row;
    gap: 10px;
    align-items: stretch;
}

/* LED arcade container — dark panel matching the original source aesthetic */
.led-arcade-wrap {
    flex: 4;
    min-width: 0;
    background: linear-gradient(145deg, #2a2a2a, #0a0a0a);
    border: 2px solid #333;
    border-radius: var(--radius);
    padding: 14px 16px;
    display: flex;
    align-items: center;
}

/* Inner clip wrapper — owns overflow:hidden so the arcade wrap's padding
   stays visible on all sides. flex:1 + min-width:0 let it shrink with the
   arcade wrap; height:49px matches the fixed LED grid height exactly.     */
.led-scroll-clip {
    overflow: hidden;
    flex: 1;
    min-width: 0;
    height: 49px;
}

/* LED dot grid — 90 cols × 7 rows at 7px cells = 630px × 49px content */
#led-wrapper {
    display: grid;
    grid-template-columns: repeat(90, 7px);
    grid-template-rows: repeat(7, 7px);
    background: #000;
    width: 630px;
    height: 49px;
    flex-shrink: 0;   /* grid must not shrink — led-scroll-clip clips instead */
}

/* Individual LED dot */
.led-light {
    width: 5px;
    height: 5px;
    margin: 1px;
    border-radius: 50%;
    background-color: #1a0202;
}

/* Active (lit) LED dot */
.led-light.led-on {
    background-color: #ff0505;
    box-shadow: 0 0 8px #ff0505, 0 0 2px #fff;
}

/* Lightbox wrapper — flex:1, stretches to LED arcade height via parent align-items:stretch.
   flex-shrink:0 prevents the lightbox from being crushed by the LED panel
   at narrow viewports — led-scroll-clip's overflow:hidden clips instead.  */
.led-lightbox-wrap {
    flex: 1;
    display: flex;
    align-items: stretch;
    justify-content: center;
    flex-shrink: 0;
}
/* Force about-radio-wrap to fill the full lightbox height at every breakpoint
   so about-radio-back (position:absolute;inset:0) always matches the arcade panel. */
.led-lightbox-wrap .about-radio-wrap {
    display: flex;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

/* Scoped lightbox circle sizing for the LED strip row.
   59px circles + 3px margin each side + 8px wrap padding top/bottom
   = 8 + 3 + 59 + 3 + 8 = 81px natural height — exactly matches the
   LED arcade panel (2px border + 14px pad + 49px grid + 14px pad + 2px border).
   Responsive: per-element dot + switch sizing at breakpoints reduces both
   LED dot size and lightbox layout footprint proportionally. */
.led-lightbox-wrap .rdo-switch { width: 59px; height: 59px; margin: 3px; }
.led-lightbox-wrap .rdo-button { width: 44px; height: 44px; }

/* ── Comparable periods control ──────────────────────────────────────────────
 * Slider column (left, flex:1) + value readout column (right, 25%).
 * Heading lives inside cmp-slider-wrap so it spans the slider only.
 * align-items:flex-end bottom-aligns both columns.
 * cmp-value padding-bottom:14px lifts "prds cmp avg" up from the row bottom
 * by the height of the stops row (~8px) + gap + margin so it sits level
 * with the slider track rather than the stop numbers below it.
 * ─────────────────────────────────────────────────────────────────────────── */
/* Row layout: slider on left, value readout on right; bottom-aligned */
.cmp-row {
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    gap: 10px;
}
/* Slider + heading + stop-labels — grows to fill remaining width */
.cmp-slider-wrap {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
    min-width: 0;
}
/* Stop labels: 1 2 3 4 5 — spaced to align with thumb center positions.
   padding: 0 7px offsets for the half-thumb-width (14px / 2) on each side. */
.cmp-stops {
    display: flex;
    justify-content: space-between;
    width: 100%;
    padding: 0 7px;
    box-sizing: border-box;
}
.cmp-stops span {
    font-family: 'Courier New', Consolas, monospace;
    font-size: 0.52rem;
    color: var(--txt-mid);
    width: 12px;
    text-align: center;
    flex-shrink: 0;
}
/* Range input — custom instrument-panel styling, full width of section */
.cmp-range {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 4px;
    border-radius: 2px;
    outline: none;
    cursor: pointer;
    /* Filled portion uses --cmp-pct set by JS; unfilled uses dim bg */
    background: linear-gradient(
        to right,
        var(--ekg) 0%,
        var(--ekg) var(--cmp-pct, 50%),
        var(--bg-hover) var(--cmp-pct, 50%),
        var(--bg-hover) 100%
    );
    border: 1px solid var(--ekg-border);
    transition: background 0.15s;
}
.cmp-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--ekg);
    cursor: pointer;
    border: 2px solid var(--bg-card);
    box-shadow: 0 0 4px rgba(0,223,162,0.55);
    transition: box-shadow 0.15s;
}
.cmp-range::-webkit-slider-thumb:hover {
    box-shadow: 0 0 8px rgba(0,223,162,0.80);
}
.cmp-range::-moz-range-thumb {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--ekg);
    cursor: pointer;
    border: 2px solid var(--bg-card);
    box-shadow: 0 0 4px rgba(0,223,162,0.55);
    transition: box-shadow 0.15s;
}
.cmp-range::-moz-range-thumb:hover {
    box-shadow: 0 0 8px rgba(0,223,162,0.80);
}
/* Light mode — thumb glow uses blue */
body.light-theme .cmp-range::-webkit-slider-thumb {
    box-shadow: 0 0 4px rgba(14,165,233,0.55);
}
body.light-theme .cmp-range::-webkit-slider-thumb:hover {
    box-shadow: 0 0 8px rgba(14,165,233,0.80);
}
body.light-theme .cmp-range::-moz-range-thumb {
    box-shadow: 0 0 4px rgba(14,165,233,0.55);
}
body.light-theme .cmp-range::-moz-range-thumb:hover {
    box-shadow: 0 0 8px rgba(14,165,233,0.80);
}
/* Value readout — right column of cmp-row; 25% of cmp-row width so
   "prds cmp avg" fits on one line without overlapping the slider.
   padding-bottom lifts the column off the row baseline so "prds cmp avg"
   sits level with the slider track rather than the stop numbers below it. */
.cmp-value {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    flex: 0 0 25%;
    padding-bottom: 14px;
    color: var(--txt-mid);
    font-variant-numeric: tabular-nums;
}
/* "X" — large number in ekg accent color */
.cmp-value strong {
    display: block;
    font-size: 1.4rem;
    line-height: 1;
    color: var(--ekg);
}
/* "prds cmp avg" — small monospace label below the number */
.cmp-value span {
    display: block;
    font-family: 'Courier New', Consolas, monospace;
    font-size: 0.48rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--txt-mid);
    opacity: 0.85;
    margin-top: 2px;
}

/* ── As-of navigator ────────────────────────────────────────────────────── */
.asof-nav {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 6px 13px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 0.74rem;
    transition: background 0.25s;
    flex-wrap: wrap;
}
.nav-btn {
    background: var(--bg-hover);
    border: 1px solid var(--ekg-border);
    color: var(--ekg);
    border-radius: 4px;
    padding: 3px 10px;
    cursor: pointer;
    font-size: 0.76rem; font-weight: 700;
    transition: background 0.12s;
    font-family: 'Courier New', monospace;
}
.nav-btn:hover:not([disabled]) { background: var(--ekg-dim); }
.nav-btn[disabled] { opacity: 0.22; cursor: not-allowed; }
.nav-label { display: flex; align-items: center; gap: 0; }
.nav-range { color: var(--txt); font-weight: 600; font-variant-numeric: tabular-nums; }
.nav-badge { font-size: 0.63rem; padding: 1px 6px; border-radius: 3px; margin-left: 8px; }
.nav-current { color: var(--ekg);  background: var(--ekg-dim); }
.nav-offset  { color: var(--warn); background: rgba(245,158,11,0.12); }
.nav-spacer  { flex: 1; }
/* nav-mode: data mode indicator — muted, sits to the left of ref: */
.nav-mode         { font-size: 0.63rem; color: var(--txt-mid); margin-right: 10px; }
.nav-mode strong  { color: var(--txt); }
/* nav-scope: analysis breadth indicator — 16-Year span + current interval */
.nav-scope        { font-size: 0.63rem; color: var(--txt-mid); margin-right: 10px; }
.nav-complete { font-size: 0.63rem; color: var(--txt-mid); }
.nav-complete strong { color: var(--ekg); }

/* ── Chart wrapper ──────────────────────────────────────────────────────── */
.chart-wrapper {
    height: 370px;
    width: 100%;
    position: relative;
    border-radius: var(--radius);
    overflow: hidden;
    border: 1px solid var(--border);
}
.blip-canvas {
    position: absolute; top: 0; left: 0;
    pointer-events: none; z-index: 3;
}
/* ── Chart scan — clipped to plot area so it never sweeps over Y-axis labels.
 * .chart-scan-clip: container whose left edge JS sets to chartArea.left after render.
 *   overflow:hidden clips the beam automatically at the right edge.
 * .chart-scan: the 2px beam, animates 0%→100% within the clip container.          */
.chart-scan-clip {
    position: absolute; top: 0; left: 0; right: 0; bottom: 0;
    pointer-events: none; z-index: 4;
    overflow: hidden;
}
.chart-scan {
    position: absolute; top: 0; left: 0;
    width: 2px; height: 100%;
    background: linear-gradient(
        to bottom,
        transparent 0%, var(--ekg-dim) 15%,
        var(--ekg-hi) 50%, var(--ekg-dim) 85%, transparent 100%
    );
    animation: chart-sweep 8s linear infinite;
    pointer-events: none;
}
@keyframes chart-sweep {
    0%   { left: 0%;   opacity: 0; }
    2%   { opacity: 1; }
    98%  { opacity: 1; }
    100% { left: 100%; opacity: 0; }
}

/* ── Signals strip ──────────────────────────────────────────────────────── */
.signals-strip {
    display: flex; align-items: center; gap: 6px;
    padding: 6px 13px;
    background: var(--bg-card);
    border: 1px solid var(--ekg-border);
    border-radius: var(--radius);
    flex-wrap: wrap; min-height: 32px;
    transition: background 0.25s;
}
.strip-label {
    font-size: 0.58rem; font-weight: 800;
    text-transform: uppercase; letter-spacing: 0.11em;
    color: var(--ekg); opacity: 0.80; flex-shrink: 0;
}
.strip-chip {
    font-size: 0.67rem; padding: 2px 8px;
    border-radius: 3px; border: 1px solid var(--border);
    background: var(--bg-hover); color: var(--txt-mid);
}
.strip-chip--pos  { color: var(--pos);  border-color: rgba(16,185,129,0.30);  background: rgba(16,185,129,0.07); }
.strip-chip--neg  { color: var(--neg);  border-color: rgba(239,68,68,0.30);   background: rgba(239,68,68,0.07); }
.strip-chip--warn { color: var(--warn); border-color: rgba(245,158,11,0.30);  background: rgba(245,158,11,0.07); }
.strip-chip--info { color: var(--info); border-color: rgba(59,130,246,0.30);  background: rgba(59,130,246,0.07); }

/* ── Table ──────────────────────────────────────────────────────────────── */
.table-container { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); }
table            { width: 100%; border-collapse: collapse; font-size: 0.74rem; }
/* Reduced padding (was 7px 11px) to keep all columns visible at desktop widths */
th, td           { padding: 4px 8px; border-bottom: 1px solid rgba(0,223,162,0.07); text-align: right; font-variant-numeric: tabular-nums; }
body.light-theme th, body.light-theme td { border-bottom-color: rgba(14,165,233,0.07); }
th:first-child, td:first-child { text-align: left; font-weight: 600; }
th               { color: var(--txt-mid); background: var(--bg-card); font-size: 0.60rem; text-transform: uppercase; letter-spacing: 0.05em; white-space: nowrap; }
td               { color: var(--txt); }
tr:last-child td { border-bottom: none; }
tr:hover td      { background: rgba(0,223,162,0.03); }
body.light-theme tr:hover td { background: rgba(14,165,233,0.03); }
/* Last completed period column */
.lc-cell         { color: var(--ekg) !important; font-weight: 600; }
/* In-progress period — amber with dim text */
.ip-header       { color: var(--warn) !important; opacity: 0.80; font-style: italic; }
.ip-cell         { color: var(--txt-mid) !important; font-style: italic; background: rgba(245,158,11,0.04); }
/* Comparable data region */
.comparable-header { color: rgba(59,130,246,0.70) !important; font-style: italic; }
.comparable-cell   { color: rgba(59,130,246,0.75) !important; background: rgba(59,130,246,0.04); font-style: italic; }
/* Badge column — right-aligned; allows badges to stack vertically when multiple
   are present (e.g. CSV + DEMO). white-space:normal overrides the global th
   white-space:nowrap so the flex column can wrap to multiple lines.           */
.badge-col-header { width: 1px; padding: 0 4px; }
.badge-col {
    text-align: right;
    padding: 4px 6px;
    vertical-align: middle;
}
/* Inner container: stack multiple badges vertically, right-aligned */
.badge-col .badge-stack {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
}
/* ── Alt panel (Insights full view / About) ─────────────────────────────── */
.alt-panel { display: none; }

/* ── Column 3: Insights sidebar (always visible in chart modes) ─────────── */
.insights-sidebar {
    width: 274px;
    flex-shrink: 0;
    border-left: 1px solid var(--border);
    background: var(--bg-panel);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    transition: background 0.25s;
}
.isb-header {
    padding: 11px 14px 8px;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
}
.isb-title {
    font-size: 0.73rem;
    font-weight: 700;
    color: var(--txt);
}
.isb-period {
    font-size: 0.60rem;
    color: var(--ekg);
    font-variant-numeric: tabular-nums;
    text-align: right;
}
.isb-body {
    padding: 8px 10px;
    flex: 1;
    overflow-y: auto;
}

/* ── Insights sidebar accordion sections (native <details>) ─────────────── */
.isb-section {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    margin-bottom: 6px;
    overflow: hidden;
    background: var(--bg-card);
    transition: background 0.25s;
}
.isb-section summary {
    display: flex;
    align-items: center;
    padding: 7px 10px;
    cursor: pointer;
    user-select: none;
    list-style: none;
    font-size: 0.67rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ekg);
    opacity: 0.88;
    border-bottom: 1px solid transparent;
    transition: background 0.12s, border-color 0.12s;
}
.isb-section summary::-webkit-details-marker { display: none; }
.isb-section summary::before {
    content: '▶';
    font-size: 0.55rem;
    margin-right: 5px;
    transition: transform 0.2s;
    color: var(--ekg);
    opacity: 0.60;
    flex-shrink: 0;
}
.isb-section[open] summary::before { transform: rotate(90deg); }
.isb-section[open] summary { border-bottom-color: var(--border); }
.isb-section summary:hover { background: var(--bg-hover); }
.isb-section-body { padding: 7px 9px; }

/* Compact insight items in the sidebar */
.isb-item {
    padding: 5px 7px 5px 8px;
    border-left: 2px solid var(--border);
    margin-bottom: 5px;
    font-size: 0.71rem;
    color: var(--txt-mid);
    line-height: 1.50;
    border-radius: 0 2px 2px 0;
    background: rgba(255,255,255,0.01);
}
.isb-item:last-child { margin-bottom: 0; }
.isb-item--pos  { border-left-color: var(--pos);  color: #b8e8d4; background: rgba(16,185,129,0.04); }
.isb-item--neg  { border-left-color: var(--neg);  color: #f0c8c8; background: rgba(239,68,68,0.04); }
.isb-item--warn { border-left-color: var(--warn); color: #f0e0b0; background: rgba(245,158,11,0.04); }
.isb-item--info { border-left-color: var(--info); color: #b8ccf0; background: rgba(59,130,246,0.04); }
body.light-theme .isb-item--pos  { color: #065f46; background: rgba(16,185,129,0.06); }
body.light-theme .isb-item--neg  { color: #7f1d1d; background: rgba(239,68,68,0.06); }
body.light-theme .isb-item--warn { color: #78350f; background: rgba(245,158,11,0.06); }
body.light-theme .isb-item--info { color: #1e3a5f; background: rgba(59,130,246,0.06); }
.isb-item strong { font-weight: 700; color: inherit; }

/* ── Insights sidebar color key ──────────────────────────────────────────
 * Sits between isb-header and isb-body (flex-shrink:0 = never scrolls away).
 * Explains that box border/background colors = signal type, NOT metric color.
 * Each swatch mirrors the isb-item left-border style so the connection
 * between the key and the items is visually immediate.
 * ─────────────────────────────────────────────────────────────────────── */
.isb-legend {
    padding: 7px 12px 8px;
    border-bottom: 1px solid var(--border);
    background: var(--bg-base);   /* slightly darker than panel — visual separator */
    flex-shrink: 0;
    transition: background 0.25s;
}
.isb-legend-title {
    font-size: 0.57rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color: var(--txt-mid);
    margin-bottom: 5px;
    line-height: 1.4;
}
.isb-legend-note {
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    color: var(--txt-dim);
    font-style: italic;
    font-size: 0.57rem;
}
.isb-legend-swatches {
    display: flex;
    flex-wrap: wrap;
    gap: 3px 7px;
}
/* Each swatch: colored left border + matching text — a miniature isb-item */
.isb-swatch {
    font-size: 0.62rem;
    font-weight: 600;
    padding: 1px 5px 1px 6px;
    border-left: 2px solid transparent;
    border-radius: 0 2px 2px 0;
    white-space: nowrap;
}
.isb-swatch--pos  { border-left-color: var(--pos);  color: var(--pos);  background: rgba(16,185,129,0.07); }
.isb-swatch--neg  { border-left-color: var(--neg);  color: var(--neg);  background: rgba(239,68,68,0.07); }
.isb-swatch--warn { border-left-color: var(--warn); color: var(--warn); background: rgba(245,158,11,0.07); }
.isb-swatch--info { border-left-color: var(--info); color: var(--info); background: rgba(59,130,246,0.07); }
/* Light theme: readable against white/light-grey background */
body.light-theme .isb-legend { background: #eef3f8; }
body.light-theme .isb-swatch--pos  { color: #065f46; background: rgba(16,185,129,0.08); }
body.light-theme .isb-swatch--neg  { color: #7f1d1d; background: rgba(239,68,68,0.08); }
body.light-theme .isb-swatch--warn { color: #78350f; background: rgba(245,158,11,0.08); }
body.light-theme .isb-swatch--info { color: #1e3a5f; background: rgba(59,130,246,0.08); }


.isb-metric-row {
    display: flex; align-items: center; gap: 4px;
    padding: 4px 0; font-size: 0.71rem;
    border-bottom: 1px solid rgba(0,223,162,0.05);
}
.isb-metric-row:last-child { border-bottom: none; }
.isb-m-dot  { flex-shrink: 0; font-size: 0.80rem; }
.isb-m-name { flex: 1; color: var(--txt); font-weight: 500; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.69rem; }
.isb-m-idx  { font-size: 0.65rem; color: var(--txt-mid); white-space: nowrap; font-variant-numeric: tabular-nums; }
.isb-m-chg  { font-size: 0.67rem; font-weight: 700; white-space: nowrap; margin-left: 3px; font-variant-numeric: tabular-nums; }

/* ── Insights color legend ──────────────────────────────────────────────── */
.insight-legend {
    display: flex; align-items: center; gap: 10px;
    flex-wrap: wrap;
    padding: 5px 0 8px;
    margin-bottom: 10px;
    border-bottom: 1px solid var(--border);
    font-size: 0.63rem;
    color: var(--txt-mid);
}
.insight-legend-label { font-weight: 700; color: var(--txt-mid); margin-right: 2px; opacity: 0.70; text-transform: uppercase; letter-spacing: 0.08em; }
.legend-pos  { color: var(--pos); }
.legend-neg  { color: var(--neg); }
.legend-warn { color: var(--warn); }
.legend-info { color: var(--info); }

/* ── Full insights panel (Insights mode) ────────────────────────────────── */
.insights-header {
    display: flex; align-items: baseline;
    justify-content: space-between;
    margin-bottom: 13px; padding-bottom: 10px;
    border-bottom: 1px solid var(--border);
}
.insights-title { font-size: 0.96rem; font-weight: 700; color: var(--txt); }
.insights-meta  { font-size: 0.68rem; color: var(--txt-mid); }
.insights-meta strong { color: var(--ekg); }

.insights-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

.insight-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 12px 14px;
    transition: background 0.25s;
}
.insight-card--cross   { border-color: var(--ekg-border); }
.insight-card--actions { border-color: rgba(59,130,246,0.22); }

.insight-card-title {
    font-size: 0.60rem; font-weight: 800;
    text-transform: uppercase; letter-spacing: 0.09em;
    color: var(--ekg); opacity: 0.88; margin: 0 0 8px;
}
.card-sub {
    font-weight: 400; text-transform: none; letter-spacing: 0;
    color: var(--txt-mid); opacity: 1; font-size: 0.62rem;
}

.insight-list { margin: 0; padding: 0; list-style: none; }
.insight-item {
    padding: 5px 8px 5px 9px;
    border-left: 3px solid var(--border);
    margin-bottom: 5px; font-size: 0.75rem;
    color: var(--txt-mid); line-height: 1.52;
    border-radius: 0 3px 3px 0;
    background: rgba(255,255,255,0.012);
}
.insight-item:last-child { margin-bottom: 0; }
.insight-item--pos  { border-left-color: var(--pos);  color: #b8e8d4; background: rgba(16,185,129,0.04); }
.insight-item--neg  { border-left-color: var(--neg);  color: #f0c8c8; background: rgba(239,68,68,0.04); }
.insight-item--warn { border-left-color: var(--warn); color: #f0e0b0; background: rgba(245,158,11,0.04); }
.insight-item--info { border-left-color: var(--info); color: #b8ccf0; background: rgba(59,130,246,0.04); }
body.light-theme .insight-item--pos  { color: #065f46; background: rgba(16,185,129,0.06); }
body.light-theme .insight-item--neg  { color: #7f1d1d; background: rgba(239,68,68,0.06); }
body.light-theme .insight-item--warn { color: #78350f; background: rgba(245,158,11,0.06); }
body.light-theme .insight-item--info { color: #1e3a5f; background: rgba(59,130,246,0.06); }
.insight-item strong { font-weight: 700; color: inherit; }

.sig-pos  { color: var(--pos);  font-size: 0.66rem; margin-right: 3px; }
.sig-neg  { color: var(--neg);  font-size: 0.66rem; margin-right: 3px; }
.sig-warn { color: var(--warn); font-size: 0.66rem; margin-right: 3px; }
.sig-act  { margin-right: 3px; }
.sig-link { margin-right: 3px; }

/* Metric trend rows in full insights panel */
.insight-metric-row {
    display: flex; align-items: center; gap: 5px;
    padding: 5px 0;
    border-bottom: 1px solid rgba(0,223,162,0.06);
    font-size: 0.74rem;
}
body.light-theme .insight-metric-row { border-bottom-color: rgba(14,165,233,0.08); }
.insight-metric-row:last-child { border-bottom: none; }
.insight-dot         { flex-shrink: 0; font-size: 0.84rem; }
.insight-metric-name { flex: 1; color: var(--txt); font-weight: 500; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.insight-idx         { font-size: 0.68rem; color: var(--txt-mid); white-space: nowrap; font-variant-numeric: tabular-nums; }
.insight-change      { font-size: 0.70rem; font-weight: 700; white-space: nowrap; margin-left: 3px; font-variant-numeric: tabular-nums; }
.yoy-badge           { font-size: 0.57rem; padding: 1px 4px; border-radius: 3px; white-space: nowrap; }

.trend-up   { color: var(--pos); }
.trend-down { color: var(--neg); }
.trend-flat { color: var(--txt-mid); }
/* Cost metric direction colors are INVERTED — ↑ cost = warn, ↓ cost = pos */
.trend-cost-up   { color: var(--warn); }
.trend-cost-down { color: var(--pos); }
.yoy-badge.trend-up   { background: rgba(16,185,129,0.14); }
.yoy-badge.trend-down { background: rgba(239,68,68,0.14); }
.yoy-badge.trend-flat { background: var(--bg-hover); }
.insight-empty { font-size: 0.74rem; color: var(--txt-mid); font-style: italic; }

/* ── About panel ────────────────────────────────────────────────────────── */
.about-panel { display: flex; flex-direction: column; gap: 16px; }
.about-hero {
    text-align: center; padding: 26px;
    background: var(--bg-card);
    border: 1px solid var(--ekg-border);
    border-radius: var(--radius);
    position: relative; overflow: hidden;
    transition: background 0.25s;
}
.about-hero::before {
    content: ''; position: absolute; inset: 0;
    background: radial-gradient(ellipse at 50% 0%, rgba(0,223,162,0.07) 0%, transparent 70%);
    pointer-events: none;
}
body.light-theme .about-hero::before {
    background: radial-gradient(ellipse at 50% 0%, rgba(14,165,233,0.07) 0%, transparent 70%);
}
/* About hero title is a flex row so the EKG blip SVG sits inline after the text */
.about-hero-title {
    font-size: 1.50rem;
    color: var(--txt);
    margin-bottom: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex-wrap: nowrap;
    position: relative;   /* anchor for the absolute close button */
}
/* Matches header .ekg-pulse dimensions (86×16) — logo unit aligned to header scale */
.ekg-pulse--about {
    width: 86px;
    height: 16px;
    flex-shrink: 0;
    overflow: visible;
}
/* Logo unit — mirrors .header-brand exactly: same flex structure, gap, and overflow.
   Wraps abacus + EQUALIZER + EKG as a single unit so they scale together. */
.about-logo-unit {
    display: flex;
    align-items: center;
    gap: 7px;
    overflow: visible;
    padding-right: 7px;
}
/* Close × button — top-right of the hero title row */
.about-close-btn {
    position: absolute;
    top: 0;
    right: 0;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 0.80rem;
    color: var(--txt-mid);
    padding: 4px 6px;
    border-radius: 3px;
    line-height: 1;
    transition: color 0.12s, background 0.12s;
    flex-shrink: 0;
}
.about-close-btn:hover { color: var(--neg); background: rgba(239,68,68,0.12); }
.about-tagline    { font-size: 0.92rem; color: var(--ekg); font-weight: 600; margin-bottom: 4px; }
.about-sub        { font-size: 0.75rem; color: var(--txt-mid); margin-bottom: 6px; }
.about-great-equalizer {
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--ekg);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-top: 4px;
    margin-bottom: 2px;
    opacity: 0.90;
    text-shadow: 0 0 18px rgba(0,223,162,0.35);
}
body.light-theme .about-great-equalizer {
    text-shadow: 0 0 12px rgba(14,165,233,0.30);
}
/* Methodology tags — concise technical description of the index formula */
.about-method {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 5px;
    margin-top: 4px;
}
.about-method-tag {
    font-size: 0.62rem;
    font-family: 'Courier New', Consolas, monospace;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ekg);
    background: var(--ekg-dim);
    border: 1px solid var(--ekg-border);
    border-radius: 3px;
    padding: 2px 6px;
    opacity: 0.85;
}

.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.about-card {
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 15px 17px;
    transition: background 0.25s;
}
.about-card-icon { font-size: 1.30rem; margin-bottom: 7px; }
.about-card h3   { font-size: 0.80rem; font-weight: 700; color: var(--txt); margin: 0 0 8px; }
.about-card p    { font-size: 0.73rem; color: var(--txt-mid); line-height: 1.58; margin: 0 0 7px; }
.about-card p:last-child { margin-bottom: 0; }
.about-card ul   { padding-left: 14px; margin: 7px 0; }
.about-card ul li { font-size: 0.73rem; color: var(--txt-mid); line-height: 1.58; margin-bottom: 3px; }
.about-highlight {
    font-size: 0.84rem !important; color: var(--ekg) !important;
    font-weight: 600 !important;
    border-left: 3px solid var(--ekg);
    padding: 6px 10px !important; background: var(--ekg-dim);
    border-radius: 0 var(--radius) var(--radius) 0;
    margin: 6px 0 !important;
}
.about-note {
    font-size: 0.67rem !important; color: var(--ekg) !important;
    opacity: 0.76; font-style: italic;
    border-top: 1px solid var(--border);
    padding-top: 6px !important; margin-top: 6px !important;
}
.chain-diagram {
    display: flex; align-items: center; gap: 5px;
    margin: 8px 0; flex-wrap: wrap;
}
.chain-node {
    background: var(--bg-hover); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 4px 8px;
    font-size: 0.67rem; color: var(--txt); font-weight: 500;
}
.chain-node--ctrl    { border-color: rgba(59,130,246,0.4); color: #b8ccf0; }
.chain-node--outcome { border-color: rgba(16,185,129,0.4); color: #b8e8d4; }
body.light-theme .chain-node--ctrl    { color: #1e3a5f; }
body.light-theme .chain-node--outcome { color: #065f46; }
.chain-arrow { color: var(--ekg); font-weight: 700; font-size: 0.78rem; }
/* ── About page — SYSTEM switches section ───────────────────────────────────
 *
 * Row 1: hazard industrial toggle + red rocker + ekg rocker (side by side)
 * Row 2: metal bolt buttons (green, blue, red) — original 120×120px size
 *
 * All switches are decorative and snap back after 600ms.
 * ─────────────────────────────────────────────────────────────────────────── */
.about-equalize-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    padding: 22px 0 14px;
    border-top: 1px solid var(--border);
    margin-top: 4px;
}
.about-equalize-header {
    text-align: center;
}
.about-equalize-label {
    font-family: 'Courier New', Consolas, monospace;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--txt-mid);
    margin-bottom: 3px;
}
.about-equalize-sub {
    font-size: 0.65rem;
    color: var(--txt-mid);
    opacity: 0.65;
}

/* Switches row — hazard toggle + two rockers side by side */
/* Hazard toggle row — stands alone above the rocker switches row.
   gap:24px separates the hazard toggle from the guard toggle when both are present.
   padding-bottom:44px shows the dm-light while keeping row spacing consistent.    */
.about-hazard-row {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 24px;
}
.about-hazard-row .dm-toggle-wrap {
    padding-bottom: 44px;
}

/* Rockers row — two rocker switches side by side */
.about-switches-row {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 28px;
    flex-wrap: wrap;
    justify-content: center;
}

/* ── Rocker switch (ykadosh/ExNOmZx) ─────────────────────────────────────────
 *
 * SCSS variables hardcoded:
 *   $rotation: 25deg   $pivot-distance: 20px
 *   $width: 150px      $height: 195px (1.3 × width)
 *
 * Red  ($color: #ff1818): darken values precomputed
 * EKG  (dark: #00dfa2, light: #0ea5e9): CSS custom property --rocker-color
 * ─────────────────────────────────────────────────────────────────────────── */
.rocker {
    display: block;
    cursor: pointer;
    background: #000;
    width: 150px;
    height: 195px;
    box-shadow:
        0 0 10px 2px rgba(0,0,0,0.20),
        0 0 1px  2px #000,
        inset 0 2px 2px -2px #fff,
        inset 0 0 2px 15px #47434c,
        inset 0 0 2px 22px #000;
    border-radius: 5px;
    padding: 20px;
    perspective: 700px;
    flex-shrink: 0;
}

.rocker input { display: none; }

/* The 3D button face */
.rocker-button {
    transition: transform 0.3s cubic-bezier(1,0,1,1),
                box-shadow 0.3s cubic-bezier(1,0,1,1);
    transform-origin: center center -20px;
    transform: translateZ(20px) rotateX(-25deg);
    transform-style: preserve-3d;
    width: 100%;
    height: 100%;
    position: relative;
    cursor: pointer;
    background-repeat: no-repeat;
}
/* Front top bevel */
.rocker-button::before {
    content: "";
    width: 100%;
    height: 50px;
    transform-origin: top;
    transform: rotateX(-90deg);
    position: absolute;
    top: 0;
    background-repeat: no-repeat;
}
/* Front bottom bevel */
.rocker-button::after {
    content: "";
    width: 100%;
    height: 50px;
    transform-origin: top;
    transform: translateY(50px) rotateX(-90deg);
    position: absolute;
    bottom: 0;
}

/* Glow light */
.rocker-light {
    opacity: 0;
    animation: rocker-light-off 1s;
    position: absolute;
    width: 100%; height: 100%;
    background-repeat: no-repeat;
    pointer-events: none;
}
/* Dot texture overlay */
.rocker-dots {
    position: absolute;
    width: 100%; height: 100%;
    background-size: 10px 10px;
    pointer-events: none;
}
/* On/Off characters (line + circle) */
.rocker-characters {
    position: absolute;
    width: 100%; height: 100%;
    background:
        linear-gradient(white, white) 50% 20% / 5% 20%,
        radial-gradient(circle, transparent 50%, white 52%, white 70%, transparent 72%) 50% 80% / 33% 25%;
    background-repeat: no-repeat;
    pointer-events: none;
}
/* Top shine */
.rocker-shine {
    transition: all 0.3s cubic-bezier(1,0,1,1);
    opacity: 0.3;
    position: absolute;
    width: 100%; height: 100%;
    background:
        linear-gradient(white, transparent 3%) 50% 50% / 97% 97%,
        linear-gradient(rgba(255,255,255,0.5), transparent 50%, transparent 80%, rgba(255,255,255,0.5)) 50% 50% / 97% 97%;
    background-repeat: no-repeat;
    pointer-events: none;
}
/* Bottom shadow */
.rocker-shadow {
    transition: all 0.3s cubic-bezier(1,0,1,1);
    opacity: 1;
    position: absolute;
    width: 100%; height: 100%;
    background: linear-gradient(transparent 70%, rgba(0,0,0,0.80));
    background-repeat: no-repeat;
    pointer-events: none;
}

/* Checked state — tilt forward + glow */
.rocker input:checked + .rocker-button {
    transform: translateZ(20px) rotateX(25deg);
}
.rocker input:checked + .rocker-button .rocker-light {
    animation: rocker-flicker 0.2s infinite 0.3s;
}
.rocker input:checked + .rocker-button .rocker-shine  { opacity: 1; }
.rocker input:checked + .rocker-button .rocker-shadow { opacity: 0; }

/* ── RED rocker — color: #ff1818, always red in dark and light mode ──────── */
.rocker--red .rocker-button {
    background: linear-gradient(
        #990000 0%, #670000 30%, #670000 70%, #990000 100%);
}
.rocker--red .rocker-button::before {
    background:
        linear-gradient(rgba(255,255,255,0.8) 10%, rgba(255,255,255,0.3) 30%,
                        #5a0000 75%, #3d0000) 50% 50% / 97% 97%,
        #b30000;
    background-repeat: no-repeat;
}
.rocker--red .rocker-button::after {
    background-image: linear-gradient(#5a0000, #3d0000);
    box-shadow: 0 50px 8px 0 #000, 0 80px 20px 0 rgba(0,0,0,0.5);
}
.rocker--red .rocker-light {
    background-image: radial-gradient(#ff7070, #ff1818 40%, transparent 70%);
}
.rocker--red .rocker-dots {
    background-image: radial-gradient(transparent 30%, rgba(90,0,0,0.7) 70%);
}
.rocker--red input:checked + .rocker-button {
    box-shadow: 0 -10px 20px #ff1818;
}

/* ── EKG rocker — green dark mode (#00dfa2), blue light mode (#0ea5e9) ───── */
.rocker--ekg { --rocker-color: #00dfa2; }
body.light-theme .rocker--ekg { --rocker-color: #0ea5e9; }

/* Dark mode EKG rocker */
.rocker--ekg .rocker-button {
    background: linear-gradient(
        #005c42 0%, #003828 30%, #003828 70%, #005c42 100%);
}
.rocker--ekg .rocker-button::before {
    background:
        linear-gradient(rgba(255,255,255,0.8) 10%, rgba(255,255,255,0.3) 30%,
                        #002a1e 75%, #001a12) 50% 50% / 97% 97%,
        #004a35;
    background-repeat: no-repeat;
}
.rocker--ekg .rocker-button::after {
    background-image: linear-gradient(#002a1e, #001a12);
    box-shadow: 0 50px 8px 0 #000, 0 80px 20px 0 rgba(0,0,0,0.5);
}
.rocker--ekg .rocker-light {
    background-image: radial-gradient(#80ffe0, #00dfa2 40%, transparent 70%);
}
.rocker--ekg .rocker-dots {
    background-image: radial-gradient(transparent 30%, rgba(0,56,40,0.7) 70%);
}
.rocker--ekg input:checked + .rocker-button {
    box-shadow: 0 -10px 20px #00dfa2;
}
/* Light mode EKG rocker overrides */
body.light-theme .rocker--ekg .rocker-button {
    background: linear-gradient(
        #004a7a 0%, #002d4d 30%, #002d4d 70%, #004a7a 100%);
}
body.light-theme .rocker--ekg .rocker-button::before {
    background:
        linear-gradient(rgba(255,255,255,0.8) 10%, rgba(255,255,255,0.3) 30%,
                        #002040 75%, #001020) 50% 50% / 97% 97%,
        #003a60;
    background-repeat: no-repeat;
}
body.light-theme .rocker--ekg .rocker-button::after {
    background-image: linear-gradient(#002040, #001020);
}
body.light-theme .rocker--ekg .rocker-light {
    background-image: radial-gradient(#80d4ff, #0ea5e9 40%, transparent 70%);
}
body.light-theme .rocker--ekg .rocker-dots {
    background-image: radial-gradient(transparent 30%, rgba(0,40,80,0.7) 70%);
}
body.light-theme .rocker--ekg input:checked + .rocker-button {
    box-shadow: 0 -10px 20px #0ea5e9;
}

@keyframes rocker-flicker {
    0%   { opacity: 1; }
    80%  { opacity: 0.8; }
    100% { opacity: 1; }
}
@keyframes rocker-light-off {
    0%   { opacity: 1; }
    80%  { opacity: 0; }
    100% { opacity: 0; }
}

/* ── Metal bolt buttons row ──────────────────────────────────────────────────
 *
 * Original design from metal button matrix (Simurai adapted).
 * 120×120px circular buttons at original size.
 * aria-pressed="false" = inactive metal look
 * aria-pressed="true"  = colored glow
 * Snapback: JS reverts aria-pressed to "false" after 600ms.
 * ─────────────────────────────────────────────────────────────────────────── */
.about-bolt-row {
    display: flex;
    flex-direction: row;
    gap: 24px;
    flex-wrap: wrap;
    justify-content: center;
}
.about-bolt-btn {
    position: relative;
    outline: none;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.1s ease, box-shadow 0.2s ease;
    /* Metal texture */
    background-color: hsl(0,0%,20%);
    background-image:
        -webkit-radial-gradient(50% 0%,   8% 50%, hsla(0,0%,100%,.5) 0%, hsla(0,0%,100%,0) 100%),
        -webkit-radial-gradient(50% 100%, 12% 50%, hsla(0,0%,100%,.6) 0%, hsla(0,0%,100%,0) 100%),
        -webkit-radial-gradient(0%  50%,  50% 7%,  hsla(0,0%,100%,.5) 0%, hsla(0,0%,100%,0) 100%),
        -webkit-radial-gradient(100% 50%, 50% 5%,  hsla(0,0%,100%,.5) 0%, hsla(0,0%,100%,0) 100%),
        -webkit-repeating-radial-gradient(50% 50%, 100% 100%, hsla(0,0%,0%,0) 0%, hsla(0,0%,0%,0) 3%, hsla(0,0%,0%,.1) 3.5%),
        -webkit-repeating-radial-gradient(50% 50%, 100% 100%, hsla(0,0%,100%,0) 0%, hsla(0,0%,100%,0) 6%, hsla(0,0%,100%,.1) 7.5%),
        -webkit-repeating-radial-gradient(50% 50%, 100% 100%, hsla(0,0%,100%,0) 0%, hsla(0,0%,100%,0) 1.2%, hsla(0,0%,100%,.2) 2.2%),
        -webkit-radial-gradient(50% 50%, 200% 50%, hsl(0,0%,25%) 5%, hsl(0,0%,20%) 30%, hsl(0,0%,10%) 100%);
}
/* Conical shine pseudo-elements */
.about-bolt-btn::before, .about-bolt-btn::after {
    content: "";
    top: 0; left: 0;
    position: absolute;
    width: 100%; height: 100%;
    border-radius: 50%;
    background-image:
        -webkit-radial-gradient(50% 0%,   10% 50%, hsla(0,0%,0%,.1) 0%, hsla(0,0%,0%,0) 100%),
        -webkit-radial-gradient(50% 100%, 10% 50%, hsla(0,0%,0%,.1) 0%, hsla(0,0%,0%,0) 100%),
        -webkit-radial-gradient(0%  50%,  50% 10%, hsla(0,0%,0%,.1) 0%, hsla(0,0%,0%,0) 100%),
        -webkit-radial-gradient(100% 50%, 50% 6%,  hsla(0,0%,0%,.1) 0%, hsla(0,0%,0%,0) 100%);
    pointer-events: none;
}
.about-bolt-btn::before { transform: rotate(65deg);  z-index: 1; }
.about-bolt-btn::after  { transform: rotate(-65deg); z-index: 1; }
.about-bolt-btn:active  { transform: scale(0.97); }

.about-bolt-icon {
    width: 50%;
    height: 50%;
    position: relative;
    z-index: 10;
    transition: fill 0.2s ease, filter 0.2s ease;
}

/* ── Inactive state — dark metal (default) ───────────────────────────────── */
.about-bolt-btn[aria-pressed="false"] {
    box-shadow:
        inset hsl(0,0%,5%)  0 0 0 4px,
        inset hsl(0,0%,5%)  0 -1px 5px 4px,
        inset hsl(0,0%,0%)  0 -1px 0  7px,
        inset hsla(0,0%,100%,.15) 0 2px 1px 7px,
        hsla(0,0%,0%,.4)    0 -5px 6px 4px,
        hsla(0,0%,100%,.05) 0  5px 6px 4px;
}
.about-bolt-btn[aria-pressed="false"] .about-bolt-icon {
    fill: hsla(0,0%,5%,1);
    filter: drop-shadow(0 -1px 0 black) drop-shadow(0 1px 0 hsla(0,0%,100%,.2));
}

/* ── Light mode — light metal inactive ───────────────────────────────────── */
body.light-theme .about-bolt-btn {
    background-color: hsl(0,0%,90%);
    background-image:
        -webkit-radial-gradient(50% 0%,   8% 50%, hsla(0,0%,100%,.5) 0%, hsla(0,0%,100%,0) 100%),
        -webkit-radial-gradient(50% 100%, 12% 50%, hsla(0,0%,100%,.6) 0%, hsla(0,0%,100%,0) 100%),
        -webkit-radial-gradient(0%  50%,  50% 7%,  hsla(0,0%,100%,.5) 0%, hsla(0,0%,100%,0) 100%),
        -webkit-radial-gradient(100% 50%, 50% 5%,  hsla(0,0%,100%,.5) 0%, hsla(0,0%,100%,0) 100%),
        -webkit-repeating-radial-gradient(50% 50%, 100% 100%, hsla(0,0%,0%,0) 0%, hsla(0,0%,0%,0) 3%, hsla(0,0%,0%,.1) 3.5%),
        -webkit-repeating-radial-gradient(50% 50%, 100% 100%, hsla(0,0%,100%,0) 0%, hsla(0,0%,100%,0) 6%, hsla(0,0%,100%,.1) 7.5%),
        -webkit-repeating-radial-gradient(50% 50%, 100% 100%, hsla(0,0%,100%,0) 0%, hsla(0,0%,100%,0) 1.2%, hsla(0,0%,100%,.2) 2.2%),
        -webkit-radial-gradient(50% 50%, 200% 50%, hsl(0,0%,90%) 5%, hsl(0,0%,85%) 30%, hsl(0,0%,60%) 100%);
}
body.light-theme .about-bolt-btn[aria-pressed="false"] {
    box-shadow:
        inset hsl(0,0%,15%) 0 0 0 4px,
        inset hsl(0,0%,15%) 0 -1px 5px 4px,
        inset hsl(0,0%,0%)  0 -1px 0  7px,
        inset hsla(0,0%,100%,.7) 0 2px 1px 7px,
        hsla(0,0%,0%,.15)   0 -5px 6px 4px,
        hsla(0,0%,100%,.5)  0  5px 6px 4px;
}
body.light-theme .about-bolt-btn[aria-pressed="false"] .about-bolt-icon {
    fill: hsla(0,0%,20%,1);
    filter: drop-shadow(0 -1px 0 hsla(0,0%,40%,.5)) drop-shadow(0 2px 1px hsla(0,0%,100%,.6));
}

/* ── Active state glows ───────────────────────────────────────────────────── */
/* Green */
.about-bolt--green[aria-pressed="true"] {
    box-shadow:
        inset hsl(120,100%,30%) 0 0 0 4px,
        inset hsl(120,100%,15%) 0 -1px 5px 4px,
        inset hsl(120,100%,20%) 0 -1px 0  7px,
        inset hsla(0,0%,100%,.7) 0 2px 1px 7px,
        hsla(120,100%,75%,.8)  0 0 3px 2px,
        hsla(120,50%,40%,.25)  0 -5px 6px 4px,
        hsla(120,80%,95%, 1)   0  5px 6px 4px;
}
.about-bolt--green[aria-pressed="true"] .about-bolt-icon {
    fill: hsl(120,100%,45%);
    filter:
        drop-shadow(0 -1px 0 hsla(120,100%,20%,.3))
        drop-shadow(0 2px 1px hsl(120,100%,85%))
        drop-shadow(0 0 5px  hsla(120,100%,80%,1))
        drop-shadow(0 0 20px hsla(120,100%,50%,.8));
}
/* Blue */
.about-bolt--blue[aria-pressed="true"] {
    box-shadow:
        inset hsl(210,100%,30%) 0 0 0 4px,
        inset hsl(210,100%,15%) 0 -1px 5px 4px,
        inset hsl(210,100%,20%) 0 -1px 0  7px,
        inset hsla(0,0%,100%,.7) 0 2px 1px 7px,
        hsla(210,100%,75%,.8)  0 0 3px 2px,
        hsla(210,50%,40%,.25)  0 -5px 6px 4px,
        hsla(210,80%,95%, 1)   0  5px 6px 4px;
}
.about-bolt--blue[aria-pressed="true"] .about-bolt-icon {
    fill: hsl(210,100%,40%);
    filter:
        drop-shadow(0 -1px 0 hsla(210,100%,20%,.3))
        drop-shadow(0 2px 1px hsl(210,100%,85%))
        drop-shadow(0 0 5px  hsla(200,100%,80%,1))
        drop-shadow(0 0 20px hsla(210,100%,50%,.6));
}
/* Red */
.about-bolt--red[aria-pressed="true"] {
    box-shadow:
        inset hsl(0,100%,30%) 0 0 0 4px,
        inset hsl(0,100%,15%) 0 -1px 5px 4px,
        inset hsl(0,100%,20%) 0 -1px 0  7px,
        inset hsla(0,0%,100%,.7) 0 2px 1px 7px,
        hsla(0,100%,75%,.8)  0 0 3px 2px,
        hsla(0,50%,40%,.25)  0 -5px 6px 4px,
        hsla(0,80%,95%, 1)   0  5px 6px 4px;
}
.about-bolt--red[aria-pressed="true"] .about-bolt-icon {
    fill: hsl(0,100%,50%);
    filter:
        drop-shadow(0 -1px 0 hsla(0,100%,20%,.3))
        drop-shadow(0 2px 1px hsl(0,100%,85%))
        drop-shadow(0 0 5px  hsla(10,100%,80%,1))
        drop-shadow(0 0 20px hsla(0,100%,50%,.8));
}

.about-footer {
    display: flex; align-items: center; justify-content: space-between;
    padding: 9px 14px; background: var(--bg-card);
    border: 1px solid var(--border); border-radius: var(--radius);
}
.about-footer-tag { font-size: 0.78rem; font-weight: 700; color: var(--ekg); }
.about-footer-sub { font-size: 0.65rem; color: var(--txt-mid); }

/* ── Formula comparison card (fc-*) — About page Raw & Index visual ──────────
 *
 * Shared ingredients row: two pill-shaped boxes showing the common inputs.
 * Formula rows: INDEX and RAW side-by-side with shared terms highlighted in
 *   EKG green/blue and the differing operator highlighted in amber.
 * Legend: swatch key for shared vs different.
 * Examples: two call-out boxes, one per mode, with left accent border.
 *
 * All colors use existing CSS variables so dark/light mode is automatic.
 * ─────────────────────────────────────────────────────────────────────────── */

/* Shared inputs row */
.fc-inputs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 10px 0 12px;
}
.fc-input {
    flex: 1;
    min-width: 180px;
    display: flex;
    align-items: baseline;
    gap: 5px;
    padding: 6px 10px;
    background: var(--ekg-dim);
    border: 1px solid var(--ekg-border);
    border-radius: var(--radius);
    font-size: 0.70rem;
}
.fc-input-dot   { color: var(--ekg); font-size: 0.58rem; flex-shrink: 0; line-height: 1.6; }
.fc-input-label { font-weight: 700; color: var(--txt); white-space: nowrap; }
.fc-input-desc  { color: var(--txt-mid); font-size: 0.64rem; }

/* Formula rows */
/* Formula rows — side-by-side at desktop, stacked on narrow viewports */
.fc-formula-rows {
    display: flex;
    flex-direction: row;
    gap: 7px;
    margin: 0 0 10px;
}
.fc-row {
    display: flex;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap;
    flex: 1;                        /* each row takes equal width */
    padding: 9px 12px;
    background: var(--bg-hover);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}
@media (max-width: 600px) {
    .fc-formula-rows { flex-direction: column; }
    .fc-row { flex: none; }
}
/* Mode badge */
.fc-badge {
    font-family: 'Courier New', Consolas, monospace;
    font-size: 0.53rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    padding: 2px 6px;
    border-radius: 3px;
    flex-shrink: 0;
}
.fc-badge--index {
    color: var(--ekg);
    background: var(--ekg-dim);
    border: 1px solid var(--ekg-border);
}
.fc-badge--raw {
    color: var(--warn);
    background: rgba(245,158,11,0.10);
    border: 1px solid rgba(245,158,11,0.30);
}
/* Shared input term — EKG green highlight */
.fc-term {
    font-size: 0.68rem;
    padding: 3px 7px;
    border-radius: 3px;
    white-space: nowrap;
}
.fc-term--shared {
    color: var(--txt);
    background: var(--ekg-dim);
    border: 1px solid var(--ekg-border);
}
/* Operator — amber highlight (the differing element) */
.fc-op {
    font-size: 1.05rem;
    font-weight: 700;
    padding: 1px 5px;
    border-radius: 3px;
    flex-shrink: 0;
}
.fc-op--diff {
    color: var(--warn);
    background: rgba(245,158,11,0.12);
    border: 1px solid rgba(245,158,11,0.32);
}
/* Equals sign and result */
.fc-eq {
    font-size: 0.78rem;
    color: var(--txt-mid);
    flex-shrink: 0;
}
.fc-term--result {
    color: var(--txt-mid);
    font-size: 0.66rem;
    font-style: normal;
    background: none;
    border: none;
    padding: 0;
}
.fc-term--result em { font-style: italic; }

/* Legend */
.fc-legend {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}
.fc-legend-item {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.62rem;
    color: var(--txt-mid);
}
.fc-swatch {
    display: inline-block;
    width: 20px;
    height: 10px;
    border-radius: 2px;
    flex-shrink: 0;
}
.fc-swatch--shared {
    background: var(--ekg-dim);
    border: 1px solid var(--ekg-border);
}
.fc-swatch--diff {
    background: rgba(245,158,11,0.12);
    border: 1px solid rgba(245,158,11,0.32);
}

/* Example call-outs */
.fc-examples {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.fc-example {
    flex: 1;
    min-width: 200px;
    font-size: 0.68rem;
    color: var(--txt-mid);
    line-height: 1.60;
    padding: 8px 11px;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    background: var(--bg-card);
}
.fc-example--index { border-left: 3px solid var(--ekg); }
.fc-example--raw   { border-left: 3px solid var(--warn); }
.fc-example strong { color: var(--txt); font-weight: 700; }

/* ── External chart tooltip with close button ────────────────────────────────
 * Positioned absolutely within #chartSection (position:relative).
 * Created once in renderChart() and reused; shown/hidden via .ctt-visible.
 * pointer-events: none when hidden so it never blocks chart interactions.
 * ─────────────────────────────────────────────────────────────────────────── */
.chart-tooltip {
    position: absolute;
    z-index: 20;
    background: var(--tooltip-bg);
    border: 1px solid var(--tooltip-bdr);
    border-radius: var(--radius);
    padding: 10px 28px 10px 12px; /* right padding leaves room for the × button */
    font-size: 0.71rem;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.12s;
    min-width: 160px;
    max-width: 300px;
    white-space: nowrap;
    box-shadow: 0 4px 16px rgba(0,0,0,0.40);
    /* Position and transform are handled entirely in JS (smart edge-aware placement) */
}
.chart-tooltip.ctt-visible {
    opacity: 1;
    /* pointer-events intentionally left as 'none' (inherited from .chart-tooltip).
     * The tooltip must never intercept canvas mouse events — if it did, Chart.js
     * would detect "cursor left chart" and hide the tooltip on every re-render,
     * creating a hide/show cycle that manifests as "tooltip never displays" with
     * 4+ metrics (larger tooltip → more canvas area blocked at (0,0)).
     * Only .ctt-close below has pointer-events:auto; child elements override
     * ancestor pointer-events:none per the CSS spec, so the button still works. */
}
.ctt-close {
    position: absolute;
    top: 4px;
    right: 4px;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 0.65rem;
    color: var(--txt-mid);
    padding: 3px 5px;
    border-radius: 2px;
    line-height: 1;
    transition: color 0.12s, background 0.12s;
    /* Override parent pointer-events:none so the button is clickable */
    pointer-events: auto;
}
.ctt-close:hover { color: var(--neg); background: rgba(239,68,68,0.12); }
.ctt-title {
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--tooltip-head);
    margin-bottom: 6px;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.ctt-row {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 2px 0;
    font-size: 0.70rem;
}
.ctt-dot  { font-size: 0.70rem; flex-shrink: 0; }
.ctt-name { flex: 1; color: var(--tooltip-head); min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.ctt-val  { font-weight: 700; color: var(--tooltip-head); font-variant-numeric: tabular-nums; }
.ctt-chg  { font-size: 0.64rem; color: var(--tooltip-body); }
.ctt-sep  { height: 1px; background: var(--border); margin: 6px 0 4px; }
.ctt-tip  {
    font-size: 0.67rem;
    color: var(--tooltip-body);
    line-height: 1.45;
    padding: 2px 0;
    white-space: normal;        /* tips can wrap */
    max-width: 260px;
}

/* ── Metal bolt toggle — sidebar metric on/off switch ────────────────────────
 *
 * Adapted from Simurai's metal button (as used in the provided metal matrix HTML).
 * Keeps the existing label.sw / input.sw__chk checkbox mechanism so all event
 * delegation and metric toggling logic is unchanged.
 *
 * Structure:
 *   label.sw               — circular metal button (28×28px)
 *   input.sw__chk          — hidden checkbox (retains data-metric attribute)
 *   span.sw__btn           — the metal face with bolt SVG icon
 *     span.sw__bolt-svg    — SVG lightning bolt icon
 *
 * Colors:
 *   Dark mode  (inactive): gunmetal grey (#333)
 *   Dark mode  (active):   EKG green glow  (#00dfa2)
 *   Light mode (inactive): light metal grey (#e8e8e8)
 *   Light mode (active):   sky-blue glow   (#0ea5e9)
 * ─────────────────────────────────────────────────────────────────────────── */
.sw {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    position: relative;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    background-color: hsl(0,0%,20%);
    /* Multi-layer radial gradient metal texture */
    background-image:
        -webkit-radial-gradient(50% 0%,   8% 50%, hsla(0,0%,100%,.5) 0%, hsla(0,0%,100%,0) 100%),
        -webkit-radial-gradient(50% 100%, 12% 50%, hsla(0,0%,100%,.6) 0%, hsla(0,0%,100%,0) 100%),
        -webkit-radial-gradient(0%  50%,  50% 7%,  hsla(0,0%,100%,.5) 0%, hsla(0,0%,100%,0) 100%),
        -webkit-radial-gradient(100% 50%, 50% 5%,  hsla(0,0%,100%,.5) 0%, hsla(0,0%,100%,0) 100%),
        -webkit-repeating-radial-gradient(50% 50%, 100% 100%, hsla(0,0%,0%,0) 0%, hsla(0,0%,0%,0) 3%, hsla(0,0%,0%,.1) 3.5%),
        -webkit-repeating-radial-gradient(50% 50%, 100% 100%, hsla(0,0%,100%,0) 0%, hsla(0,0%,100%,0) 6%, hsla(0,0%,100%,.1) 7.5%),
        -webkit-repeating-radial-gradient(50% 50%, 100% 100%, hsla(0,0%,100%,0) 0%, hsla(0,0%,100%,0) 1.2%, hsla(0,0%,100%,.2) 2.2%),
        -webkit-radial-gradient(50% 50%, 200% 50%, hsl(0,0%,25%) 5%, hsl(0,0%,20%) 30%, hsl(0,0%,10%) 100%);
    /* Inactive dark: gunmetal inset shadows — shadow values scaled from about-bolt
       (120px reference) by 0.233x factor so visual proportions match at 28px size */
    box-shadow:
        inset hsl(0,0%,5%)         0 0    0    1px,
        inset hsl(0,0%,5%)         0 -0.5px 1px 1px,
        inset hsl(0,0%,0%)         0 -0.5px 0   2px,
        inset hsla(0,0%,100%,.15)  0 0.5px 0.5px 2px,
        hsla(0,0%,0%,.4)           0 -1px 1.5px 1px,
        hsla(0,0%,100%,.05)        0  1px 1.5px 1px;
    transition: box-shadow 0.2s ease;
}

/* Pseudo-element conical shines */
.sw::before, .sw::after {
    content: "";
    top: 0; left: 0;
    position: absolute;
    width: 100%; height: 100%;
    border-radius: inherit;
    background-image:
        -webkit-radial-gradient(50%   0%, 10% 50%, hsla(0,0%,0%,.1) 0%, hsla(0,0%,0%,0) 100%),
        -webkit-radial-gradient(50% 100%, 10% 50%, hsla(0,0%,0%,.1) 0%, hsla(0,0%,0%,0) 100%),
        -webkit-radial-gradient(0%   50%, 50% 10%, hsla(0,0%,0%,.1) 0%, hsla(0,0%,0%,0) 100%),
        -webkit-radial-gradient(100% 50%, 50% 6%,  hsla(0,0%,0%,.1) 0%, hsla(0,0%,0%,0) 100%);
    pointer-events: none;
}
.sw::before { transform: rotate(65deg);  z-index: 2; }
.sw::after  { transform: rotate(-65deg); z-index: 2; }

/* Hidden checkbox — retains all data attributes for event delegation */
.sw__chk { display: none; }

/* Metal face with bolt icon — centered inside the button */
.sw__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 55%;
    height: 55%;
    position: relative;
    z-index: 10;
    transition: filter 0.2s ease;
    pointer-events: none;
}

/* Bolt SVG — etched look inactive, glow when active */
.sw__bolt-svg {
    width: 100%;
    height: 100%;
    fill: hsla(0,0%,5%,1);
    /* shadow values scaled 0.233x from about-bolt reference */
    filter: drop-shadow(0 -0.5px 0 black) drop-shadow(0 0.5px 0 hsla(0,0%,100%,.2));
    transition: fill 0.2s ease, filter 0.2s ease;
}

/* ── Active (checked) state — EKG green glow (dark mode) ────────────────── */
.sw__chk:checked ~ .sw__btn .sw__bolt-svg {
    fill: var(--sw-color, #00dfa2);
    /* drop-shadow values scaled 0.233x from about-bolt reference */
    filter:
        drop-shadow(0 -0.5px 0   hsla(163,100%,20%,.3))
        drop-shadow(0  0.5px 0.5px hsl(163,80%,70%))
        drop-shadow(0  0     1px   hsla(163,100%,65%,.7))
        drop-shadow(0  0     3px   hsla(163,100%,45%,.4));
}
/* Outer casing glow — shadow values scaled 0.233x, EKG green palette */
.sw:has(.sw__chk:checked) {
    box-shadow:
        inset hsl(163,80%,26%)    0 0    0    1px,
        inset hsl(163,80%,13%)    0 -0.5px 1px 1px,
        inset hsl(163,80%,17%)    0 -0.5px 0   2px,
        inset hsla(0,0%,100%,.55) 0  0.5px 0.5px 2px,
        hsla(163,100%,55%, .45)   0  0     0.7px 0,
        hsla(163,60%,30%,  .18)   0 -1px   1.5px 1px,
        hsla(163,80%,70%,  .12)   0  1px   1.5px 1px;
}

/* ── Light theme overrides ────────────────────────────────────────────────── */
body.light-theme .sw {
    --sw-color: #0ea5e9;
    background-color: hsl(0,0%,90%);
    background-image:
        -webkit-radial-gradient(50% 0%,   8% 50%, hsla(0,0%,100%,.5) 0%, hsla(0,0%,100%,0) 100%),
        -webkit-radial-gradient(50% 100%, 12% 50%, hsla(0,0%,100%,.6) 0%, hsla(0,0%,100%,0) 100%),
        -webkit-radial-gradient(0%  50%,  50% 7%,  hsla(0,0%,100%,.5) 0%, hsla(0,0%,100%,0) 100%),
        -webkit-radial-gradient(100% 50%, 50% 5%,  hsla(0,0%,100%,.5) 0%, hsla(0,0%,100%,0) 100%),
        -webkit-repeating-radial-gradient(50% 50%, 100% 100%, hsla(0,0%,0%,0) 0%, hsla(0,0%,0%,0) 3%, hsla(0,0%,0%,.1) 3.5%),
        -webkit-repeating-radial-gradient(50% 50%, 100% 100%, hsla(0,0%,100%,0) 0%, hsla(0,0%,100%,0) 6%, hsla(0,0%,100%,.1) 7.5%),
        -webkit-repeating-radial-gradient(50% 50%, 100% 100%, hsla(0,0%,100%,0) 0%, hsla(0,0%,100%,0) 1.2%, hsla(0,0%,100%,.2) 2.2%),
        -webkit-radial-gradient(50% 50%, 200% 50%, hsl(0,0%,90%) 5%, hsl(0,0%,85%) 30%, hsl(0,0%,60%) 100%);
    /* Inactive light: silver inset shadows — grey border (hsl 50%) is softer than the
       previous near-black (hsl 15%), making the blue active stroke easier to see */
    box-shadow:
        inset hsl(0,0%,50%)        0 0    0    1px,
        inset hsl(0,0%,50%)        0 -0.5px 1px 1px,
        inset hsl(0,0%,0%)         0 -0.5px 0   2px,
        inset hsla(0,0%,100%,.7)   0  0.5px 0.5px 2px,
        hsla(0,0%,0%,.15)          0 -1px 1.5px 1px,
        hsla(0,0%,100%,.5)         0  1px 1.5px 1px;
}
body.light-theme .sw .sw__bolt-svg {
    fill: hsla(0,0%,20%,1);
    filter: drop-shadow(0 -0.5px 0 hsla(0,0%,40%,.5)) drop-shadow(0 0.5px 0 hsla(0,0%,100%,.6));
}
/* Light mode active — sky blue, scaled 0.233x.
 * Inner casing ring + insets lightened (48/32/36%) so the active "border"
 * is softer against the white background — matching the inactive border
 * treatment. Outer glow at 4px spread provides clear active indication. */
body.light-theme .sw:has(.sw__chk:checked) {
    box-shadow:
        inset hsl(210,80%,48%)    0 0    0    1px,
        inset hsl(210,80%,32%)    0 -0.5px 1px 1px,
        inset hsl(210,80%,36%)    0 -0.5px 0   2px,
        inset hsla(0,0%,100%,.7)  0  0.5px 0.5px 2px,
        hsla(210,100%,55%, .65)   0  0     4px  2px,
        hsla(210,60%,35%,  .22)   0 -1px   1.5px 1px,
        hsla(210,80%,70%,  .20)   0  1px   1.5px 1px;
}
body.light-theme .sw:has(.sw__chk:checked) .sw__bolt-svg {
    fill: #0ea5e9;
    filter:
        drop-shadow(0 -0.5px 0     hsla(210,100%,20%,.3))
        drop-shadow(0  0.5px 0.5px hsl(210,80%,75%))
        drop-shadow(0  0     1px   hsla(200,100%,65%,.7))
        drop-shadow(0  0     3px   hsla(210,100%,45%,.4));
}

/* Dark mode: EKG green variable */
.sw { --sw-color: #00dfa2; }


/* ── isb-period-label: "as of:" prefix in Live Signals header ───────────────
 * Styled to match .nav-complete (same font-size, color, weight) so it reads
 * as a label prefix rather than part of the data value.                       */
.isb-period-label {
    font-size: 0.60rem;
    color: var(--txt-mid);
    font-weight: 400;
}


/* ── sw:active — sidebar lightning bolt press animation ─────────────────────
 * Scales the button down slightly + deepens inset shadow to simulate a
 * physical press. Mirrors the about-bolt-btn:active transform:scale(0.97).   */
.sw:active {
    transform: scale(0.93);
    box-shadow:
        inset hsl(0,0%,5%)         0 0    0    1px,
        inset hsl(0,0%,3%)         0  0.5px 2px 2px,
        inset hsl(0,0%,0%)         0  0.5px 0   3px,
        inset hsla(0,0%,100%,.06)  0 -0.5px 0.5px 2px,
        hsla(0,0%,0%,.55)          0  0     1px  1px;
    transition: transform 0.05s ease, box-shadow 0.05s ease;
}
body.light-theme .sw:active {
    transform: scale(0.93);
    box-shadow:
        inset hsl(0,0%,50%)        0 0    0    1px,
        inset hsl(0,0%,30%)        0  0.5px 2px 2px,
        inset hsl(0,0%,10%)        0  0.5px 0   3px,
        inset hsla(0,0%,100%,.4)   0 -0.5px 0.5px 2px,
        hsla(0,0%,0%,.20)          0  0     1px  1px;
    transition: transform 0.05s ease, box-shadow 0.05s ease;
}


/* ── sw--connecting: yellow blink on the lightning bolt icon when a data source connects ──
 *
 * Triggered by JS adding .sw--connecting to the .sw element on checkbox → checked.
 * Animates the bolt SVG fill: 9 yellow blinks (0–85% of 2.8s), then transparent at 100%.
 *
 * Specificity: .sw.sw--connecting .sw__btn .sw__bolt-svg = (0,4,0) — same as the
 * .sw__chk:checked rule above. Placed AFTER that rule so it wins during animation.
 * No animation-fill-mode:forwards — when class is removed at 2850ms, the normal
 * :checked rule's fill (EKG green / sky blue) restores automatically.              */
@keyframes bolt-connect-blink {
    /* OFF: dim bolt, no glow */
    0%, 10%, 20%, 30%, 40%, 50%, 60%, 70%, 80%, 88% {
        fill: hsla(0,0%,5%,0.9);
        filter: drop-shadow(0 -0.5px 0 black) drop-shadow(0 0.5px 0 hsla(0,0%,100%,.1));
    }
    /* YELLOW: bright bolt with yellow glow */
    5%, 15%, 25%, 35%, 45%, 55%, 65%, 75%, 85% {
        fill: rgba(245, 210, 0, 0.97);
        filter:
            drop-shadow(0  0     2px  rgba(245,210,0,0.95))
            drop-shadow(0  0     6px  rgba(245,200,0,0.70))
            drop-shadow(0  0     12px rgba(245,200,0,0.40));
    }
    /* End: fade back — CSS :checked rule takes over when class is removed */
    100% {
        fill: hsla(0,0%,5%,0.0);
        filter: none;
    }
}
/* Same specificity as :checked rule; placed after it so it wins while .sw--connecting present */
.sw.sw--connecting .sw__btn .sw__bolt-svg {
    animation: bolt-connect-blink 2.8s linear;
}


/* ── About guard toggle (agt-*) — jamesdelaneyie/poYjxvz adapted ─────────────
 *
 * Red guard safety cover identical to the hazard dm-* toggle but scoped to
 * .about-guard-toggle so there are zero style collisions.
 * Displayed beside the hazard toggle in .about-hazard-row.
 * Light ON color: matches EKG (green dark / blue light), same as dm-light.
 * Snapback: JS adds agt-dummy to the snapIds list — reverts after 600ms.
 *
 * margin-top: 26px aligns the guard panel with the hazard switch panel which
 * sits below the EQUALIZE label (~10px) + label margin (6px) + hazard-wrap
 * border/padding (~11px) = ~27px from dm-toggle-wrap top. Visual alignment
 * ensures both switch mechanisms appear at the same height in the hazard row.
 * ─────────────────────────────────────────────────────────────────────────── */
.about-guard-toggle {
    position: relative;
    border-radius: 18px;
    border: 2px solid #202020;
    outline: 2px solid #a1a1a1;
    background: #404040;
    outline-offset: 0px;
    padding: 3px;
    margin: 0;
    margin-top: 26px;
    perspective: 300px;
    box-shadow:
        0 0 1px #050506,
        inset 0 0 0 2px #050506,
        inset 0 3px 1px #66646c;
}
.about-guard-toggle::before {
    content: "";
    position: absolute;
    right: 1px; top: 20px;
    height: 20px; width: 2px;
    border-top-right-radius: 3px;
    background-color: #a3a3a3;
    z-index: 0;
}
.about-guard-toggle::after {
    content: "";
    position: absolute;
    left: 1px; top: 20px;
    height: 20px; width: 2px;
    border-top-left-radius: 3px;
    background-color: #a3a3a3;
    z-index: 0;
}
/* Guard input */
.agt-guard {
    position: relative;
    margin: 0; padding: 0;
    -webkit-appearance: none; appearance: none;
    display: block;
    width: 50px; height: 100px;
    border-radius: 20px;
    background: linear-gradient(0deg,
        rgba(166,46,41,1)  0%,  rgba(210,47,41,1)  6%,
        rgba(237,71,65,1)  16%, rgba(237,71,65,1)  27%,
        rgba(210,47,41,1)  68%, rgba(210,47,41,1)  100%);
    box-shadow:
        inset -2px -2px 3px rgba(0,0,0,0.3),
        inset  2px  2px 3px rgba(255,255,255,0.5);
    cursor: grab;
    transform-origin: 50% 0%;
    transition: transform 0.2s ease;
    perspective: 500px;
    border: 1px solid black;
    z-index: 3;
}
.agt-guard::after {
    content: "";
    display: block;
    width: 100%; height: calc(100% - 20px);
    position: absolute; top: 20px;
    opacity: 0.6;
    background: linear-gradient(0deg,
        rgba(110,29,25,1) 0%, rgba(173,46,41,1) 4%,  rgba(210,47,41,1) 11%,
        rgba(237,71,65,1) 21%, rgba(242,107,102,1) 32%, rgba(237,71,65,1) 41%,
        rgba(210,47,41,1) 63%, rgba(210,47,41,1) 100%);
    border-radius: 14px;
}
.agt-guard::before {
    content: "";
    position: absolute;
    left: 50%; top: 0;
    transform: translateX(-50%);
    width: 50%; height: 10px;
    background-color: #303030;
    border-top-left-radius: 5px; border-top-right-radius: 5px;
    border-bottom-left-radius: 10px; border-bottom-right-radius: 10px;
    border: 3px groove #656565;
}
.agt-guard:checked {
    transform: rotateX(70deg);
    background: linear-gradient(180deg,
        rgba(166,46,41,1) 4%, rgba(210,47,41,1) 38%,
        rgba(237,71,65,1) 59%, rgba(242,113,108,1) 71%,
        rgba(242,113,108,1) 94%, rgba(210,47,41,1) 100%);
}
.agt-guard:checked + .agt-guard-sides {
    transform: translateY(0px);
    box-shadow: 0 0 20px rgba(0,0,0,1);
}
/* Guard side tabs */
.agt-guard-sides {
    position: absolute;
    left: 0; top: 20px;
    width: 100%; height: 10px;
    pointer-events: none;
    display: block;
    transform: translateY(35px);
    transition: all 0.2s ease;
    z-index: 2;
}
.agt-guard-sides::before,
.agt-guard-sides::after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    width: 8px; height: 40px;
    background: linear-gradient(0deg,
        rgba(166,46,41,1) 0%, rgba(210,47,41,1) 6%,
        rgba(237,71,65,1) 16%, rgba(237,71,65,1) 27%,
        rgba(210,47,41,1) 68%, rgba(210,47,41,1) 100%);
    box-shadow:
        inset -2px -2px 3px rgba(0,0,0,0.3),
        inset  2px  2px 1px rgba(255,255,255,0.2),
        0 3px 3px rgba(0,0,0,0.4);
}
.agt-guard-sides::before { left:  2px; }
.agt-guard-sides::after  { right: 2px; }
/* Switch button */
.agt-switch {
    position: absolute;
    margin: 0; padding: 0;
    -webkit-appearance: none; appearance: none;
    display: block;
    background: linear-gradient(to left,
        #a1a1a1 0%, #a1a1a1 1%, #c0c0c0 26%,
        #b1b1b1 48%, #909090 75%, #a1a1a1 100%);
    top: 70%; left: 50%;
    transform: translateX(-50%) translateY(-50%);
    width: 46px; height: 46px;
    outline: 1px solid rgba(0,0,0,0.31);
    outline-offset: -4px;
    border-radius: 100%;
    z-index: 0;
    cursor: pointer;
}
.agt-switch::after {
    content: "";
    position: absolute;
    top: 50%; left: 50%;
    transform: translateX(-50%) translateY(-50%);
    background: #000;
    border-radius: 100%;
    width: 15px; height: 15px;
    opacity: 0.8;
    border: 4px double #726e6e;
    box-shadow:
        2px  2px 2px rgba(255,255,255,0.5),
        -2px -2px 2px rgba(255,255,255,0.5);
}
.agt-switch:checked + .agt-knob {
    transform: translateX(-50%) rotateX(0deg);
    bottom: 13px;
}
.agt-switch:checked ~ .agt-light {
    background: var(--ekg, #00dfa2);
    box-shadow: 0 0 10px var(--ekg, #00dfa2);
}
body.light-theme .agt-switch:checked ~ .agt-light {
    background: #0ea5e9;
    box-shadow: 0 0 10px rgba(14,165,233,0.9);
}
/* Knob */
.agt-knob {
    position: absolute;
    display: block;
    width: 12px; height: 25px;
    bottom: 15px; left: 50%;
    pointer-events: none;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    transform: translateX(-50%) translateY(-14px) rotateX(-175deg);
    background: linear-gradient(to left,
        lightgrey 0%, lightgrey 1%, #e0e0e0 26%,
        #efefef 48%, #d9d9d9 75%, #bcbcbc 100%);
    border: 1px solid #000;
    z-index: 2;
    transition: all 0.2s ease;
    box-shadow:
        inset 0  -3px 3px rgba(0,0,0,1),
        inset 0   3px 3px rgba(0,0,0,0.7);
}
.agt-knob::after {
    content: "";
    position: absolute;
    bottom: -10px; left: -2px;
    width: 12px; height: 15px;
    border-radius: 6px;
    border: 1px solid black;
    border-top: 0;
    background: -webkit-radial-gradient(50% -40%,
        rgba(38,38,38,0.5), #e6e6e6 25%, #ffffff 38%,
        #a1a1a1 63%, #e6e6e6 87%, rgba(38,38,38,1));
}
/* Light indicator */
.agt-light {
    position: absolute;
    bottom: -30px; left: 50%;
    display: block;
    width: 56px; height: 20px;
    padding: 2px;
    transform: translateX(-50%);
    background-color: grey;
    border-radius: 7px;
    border: 2px ridge black;
    z-index: 0;
    transition: all 0.4s ease;
}
.agt-light::after {
    content: "";
    display: block;
    width: 100%; height: 100%;
    left: 0; top: 0;
    position: absolute;
    opacity: 0.2;
    background-image: radial-gradient(#ffffff50 2px, transparent 0);
    background-size: 5px 5px;
    background-position: -18px -15px;
    z-index: 1;
    border-radius: 7px;
    outline: 2px solid #a1a1a1;
    border: 1px solid rgba(0,0,0,0.31);
}


/* ── About radio lightbox (rdo-*) — uiverse.io/PauloRFJ/pretty-yak-30 ────────
 *
 * Three circular push-button switches (red, yellow, green) on a dark panel.
 * Scoped under .about-radio-wrap to avoid any class collisions.
 * Maintained at original size (70px switches). Decorative — snaps back 600ms.
 *
 * Layout: .about-radio-wrap sizes to its content via inline-flex + padding so
 * .about-radio-back can use inset:0 and always cover the switches exactly.
 * This avoids the em-based sizing of the original which mismatches at 14px base.
 * ─────────────────────────────────────────────────────────────────────────── */
.about-radio-row {
    display: flex;
    justify-content: center;
}
.about-radio-wrap {
    position: relative;
    display: inline-flex;
    padding: 8px 10px;
    font-family: Helvetica, sans-serif;
}
/* Dark panel background — fills the wrap exactly */
.about-radio-back {
    position: absolute;
    inset: 0;
    border-radius: 8px;
    box-shadow:
        rgba(0,0,0,0.4) 0 2px 2px,
        rgba(0,0,0,0.3) 0 7px 13px -3px,
        rgba(0,0,0,0.2) 0 -1px 0 inset;
    background-color: #171717;
}
/* Flex row of switches, sits above the back panel */
.about-radio-main {
    display: flex;
    position: relative;
    z-index: 1;
}
/* Individual switch housing — circular, 70×70px */
.rdo-switch {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    background-color: #000;
    width: 70px;
    height: 70px;
    box-shadow:
        0 0 10px 2px rgba(0,0,0,0.2),
        0 0 1px  2px #000,
        inset 0 2px 2px -2px #fff,
        inset 0 0 2px 5px #2e2e2e,
        inset 0 0 2px 22px #000;
    border-radius: 50%;
    margin: 5px;
    cursor: pointer;
}
.rdo-switch input { display: none; }
.rdo-switch input:checked + .rdo-button .rdo-light {
    animation: rdo-flicker 0.2s infinite 0.3s;
}
.rdo-switch input:checked + .rdo-button .rdo-shine  { opacity: 1; }
.rdo-switch input:checked + .rdo-button .rdo-shadow { opacity: 0; }
/* Button face — centered in the housing via flex on parent */
.rdo-button {
    transition: all 0.3s cubic-bezier(1,0,1,1);
    background-color: #2e2e2e;
    width: 55px;
    height: 55px;
    border-radius: 50%;
    position: relative;
    cursor: pointer;
    flex-shrink: 0;
}
/* Glow light overlay */
.rdo-light {
    opacity: 0;
    animation: rdo-light-off 1s;
    position: absolute;
    inset: 0;
    border-radius: 50%;
}
.rdo-dots {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background-size: 8px 8px;
}
.rdo-shine {
    transition: all 0.3s cubic-bezier(1,0,1,1);
    opacity: 0.3;
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: radial-gradient(circle at 40% 35%, rgba(255,255,255,0.75) 0%, transparent 55%);
}
.rdo-shadow {
    transition: all 0.3s cubic-bezier(1,0,1,1);
    opacity: 0.8;
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: linear-gradient(transparent 60%, rgba(0,0,0,0.75));
}
@keyframes rdo-flicker {
    0%   { opacity: 1; }
    80%  { opacity: 0.85; }
    100% { opacity: 1; }
}
@keyframes rdo-light-off {
    0%   { opacity: 1; }
    80%  { opacity: 0; }
    100% { opacity: 0; }
}
/* Red switch */
.rdo-switch--red .rdo-light {
    background-image: radial-gradient(#ffe0e0, rgba(255,0,71,0.9) 55%, transparent 70%);
}
.rdo-switch--red .rdo-dots {
    background-image: radial-gradient(transparent 30%, rgba(0,0,0,0.65) 70%);
}
/* Yellow switch */
.rdo-switch--yellow .rdo-light {
    background-image: radial-gradient(#fffbe0, rgba(255,220,0,0.9) 55%, transparent 70%);
}
.rdo-switch--yellow .rdo-dots {
    background-image: radial-gradient(transparent 30%, rgba(0,0,0,0.65) 70%);
}
/* Green switch */
.rdo-switch--green .rdo-light {
    background-image: radial-gradient(#e0ffe0, rgba(100,200,0,0.9) 55%, transparent 70%);
}
.rdo-switch--green .rdo-dots {
    background-image: radial-gradient(transparent 30%, rgba(0,0,0,0.65) 70%);
}


/* ── Live Mode panel ─────────────────────────────────────────────────────────
 *
 * Displays when Play Mode is toggled to Live. Reuses the About panel slot
 * (#insightsPanel) and mirrors the About card-grid layout for consistency.
 * .live-hero:          centered headline section with pulsing LIVE badge.
 * .live-features-grid: 2×2 card grid listing what Live mode will unlock.
 * .live-cta-section:   bottom CTA card with link to early access sign-up.
 * ─────────────────────────────────────────────────────────────────────────── */
.live-panel {
    max-width: 720px;
    margin: 0 auto;
    padding: 24px 20px 32px;
}

.live-hero {
    text-align: center;
    padding: 24px 20px 20px;
    background: var(--bg-card);
    border: 1px solid var(--ekg-border);
    border-radius: var(--radius);
    margin-bottom: 16px;
    position: relative;
    overflow: hidden;
    transition: background 0.25s;
}

/* Subtle radial glow behind hero — mirrors .about-hero::before */
.live-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 50% 0%, rgba(0,223,162,0.06) 0%, transparent 70%);
    pointer-events: none;
}
body.light-theme .live-hero::before {
    background: radial-gradient(ellipse at 50% 0%, rgba(14,165,233,0.06) 0%, transparent 70%);
}

/* Pulsing LIVE badge — red dot + uppercase label */
.live-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(239, 68, 68, 0.10);
    border: 1px solid rgba(239, 68, 68, 0.30);
    color: #ef4444;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 20px;
    margin-bottom: 14px;
}

.live-hero-badge::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #ef4444;
    flex-shrink: 0;
    animation: live-pulse 1.6s ease-in-out infinite;
}

@keyframes live-pulse {
    0%,  100% { opacity: 1;   transform: scale(1);   }
    50%        { opacity: 0.4; transform: scale(0.7); }
}

.live-hero-title {
    font-size: 1.45rem;
    font-weight: 700;
    color: var(--txt);
    letter-spacing: -0.02em;
    margin: 0 0 8px;
}

.live-hero-sub {
    font-size: 0.88rem;
    color: var(--txt-mid);
    max-width: 440px;
    margin: 0 auto;
    line-height: 1.6;
}

/* ✕ close button — top-right corner of .live-hero; mirrors .about-close-btn
   which sits at top:0 right:0 inside .about-hero-title (position:relative).
   .live-hero already carries position:relative, making it the anchor.
   z-index:1 keeps the button above the .live-hero::before radial gradient. */
.live-close-btn {
    position: absolute;
    top: 8px;
    right: 10px;
    background: transparent;
    border: 1px solid var(--border);
    color: var(--txt-mid);
    border-radius: var(--radius);
    width: 28px;
    height: 28px;
    font-size: 0.80rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color 0.2s, color 0.2s;
    z-index: 1;
}
.live-close-btn:hover { border-color: var(--border-hi); color: var(--txt); }

/* 2-column feature card grid — matches .about-grid proportions */
.live-features-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 16px;
}

.live-feature-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 16px;
    transition: background 0.25s;
}

.live-feature-icon { font-size: 1.2rem; margin-bottom: 8px; }

.live-feature-card h4 {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--txt);
    margin: 0 0 6px;
}

.live-feature-card ul {
    margin: 0;
    padding: 0 0 0 14px;
    color: var(--txt-mid);
    font-size: 0.78rem;
    line-height: 1.75;
}

/* CTA card — centered with ekg-tinted border */
.live-cta-section {
    text-align: center;
    padding: 22px 20px;
    background: var(--bg-card);
    border: 1px solid var(--ekg-border);
    border-radius: var(--radius);
    transition: background 0.25s;
}

.live-cta-heading {
    font-size: 1.02rem;
    font-weight: 700;
    color: var(--txt);
    margin: 0 0 6px;
}

.live-cta-sub {
    font-size: 0.82rem;
    color: var(--txt-mid);
    margin: 0 0 18px;
    line-height: 1.5;
}

/* Primary CTA button — ekg background, dark text, matches app accent color */
.live-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: var(--ekg);
    color: #000;
    font-weight: 700;
    font-size: 0.88rem;
    letter-spacing: 0.02em;
    padding: 11px 26px;
    border-radius: var(--radius);
    text-decoration: none;
    transition: filter 0.2s, transform 0.15s;
}
.live-cta-btn:hover  { filter: brightness(1.12); transform: translateY(-1px); }
.live-cta-btn:active { transform: translateY(0); filter: brightness(1.0); }

.live-cta-note {
    font-size: 0.70rem;
    color: var(--txt-dim);
    margin-top: 10px;
    margin-bottom: 0;
}

/* Narrow: feature cards stack to single column */
@media (max-width: 540px) {
    .live-features-grid { grid-template-columns: 1fr; }
}


/* ── Fetti Blaster (Party Mode card) ────────────────────────────────────────
 *
 * All selectors prefixed .fb- to guarantee zero collisions with the app.
 * CSS custom properties scoped to .fb-device — no :root pollution.
 * --fb-w: 100% makes all rows fill the card inner width.
 * .fb-top-row uses transform:scale(0.62) + margin-bottom:-36px to fit the
 *   110px button + 99px porthole into the card without altering shadow values.
 * Keyframes prefixed fb- to avoid animation name collisions.
 * Page-level rules (html,body / body::after) from test-party2.html excluded.
 * ─────────────────────────────────────────────────────────────────────────── */

/* ── Party Mode card ── */
.analysis-col--party {
    flex: 1;
}

/* ── Device container ── */
.fb-device {
    /* Scoped CSS variables — not inherited from :root, no global side-effects */
    --fb-ih:     22px;                          /* roller item height; must match JS IH */
    --fb-w:      100%;                          /* rows fill card inner width           */
    --fb-rh:     calc(var(--fb-ih) * 1.6);     /* ~35.2px drum viewport height         */
    --fb-pit:    #0c0d10;                       /* dark drum background                 */
    --fb-accent: #e8c96a;
    --fb-accent2:#9a7e32;

    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    width: 100%;
}

/* ── Top row: porthole + button ─────────────────────────────────────────────
 * Grid layout: two equal 110px columns (= button width). The porthole (99px)
 * is centred in the left column; the button (110px) fills the right column
 * exactly. place-items:center does both — no gap arithmetic needed.
 * transform:scale(0.62) shrinks the 220px layout footprint to a 136px visual.
 * transform-origin:top center keeps vertical alignment anchored at the top.
 * No padding — gap on .fb-device handles spacing between all elements.
 * margin-bottom:-36px compensates: 110px button × (1−0.62) ≈ 42px structural;
 *   −36px intentionally leaves ~6px visual gap below the scaled row.
 * row-gap:22px is dormant in 2-column mode (single row, no gap applied);
 *   it activates in the ≤860px single-column override to space porthole from
 *   button when they stack. The visual paint area (136px) fits within the
 *   ~140px card inner width; no overflow:hidden needed.                      */
.fb-top-row {
    display: flex;
    align-items: flex-end;          /* bottom-aligns porthole-col and button */
    row-gap: 22px;                  /* dormant in row mode; activates on mobile column stack */
    flex-shrink: 0;
    transform: scale(0.62);
    transform-origin: top center;
    /* margin-bottom: porthole-col pre-scale height ~117px (84px porthole + 8px gap + ~25px logo)
       post-scale visual: 117 × 0.62 = 72.5px; structural collapse: 44.5px; 6px gap → -39px   */
    margin-bottom: -39px;
}

/* ── 1. Porthole ── */
.fb-porthole-mount {
    width: 84px;
    height: 84px;
    position: relative;
    flex-shrink: 0;
    transform: scale(0.81);
    transform-origin: center;
}
.fb-porthole-glass {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 36px; height: 36px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 25%, #18191f 0%, #090a0d 55%, #020203 100%);
    border: 9px solid transparent;
    border-color: #a5a5a5 #5f5f5f #5f5f5f #a5a5a5;
    box-shadow:
        inset 0 4px 12px rgba(0,0,0,.97),
        inset 0 0 18px rgba(0,0,0,.9),
        inset 0 1px 3px rgba(255,255,255,.06),
        0 0 0 2px #1a1c22,
        0 0 0 4px #5a4800,
        0 0 0 5px #1a1c22,
        0 4px 12px rgba(0,0,0,.88);
}
.fb-porthole-glass::before {
    content: '';
    position: absolute;
    top: 4px; left: 5px;
    width: 10px; height: 7px;
    border-radius: 50%;
    background: rgba(255,255,255,.14);
    transform: rotate(-18deg);
    pointer-events: none;
}
.fb-porthole-glass::after {
    content: '';
    position: absolute;
    inset: 7px;
    border-radius: 50%;
    background: #010102;
    box-shadow: inset 0 0 10px rgba(0,0,0,1);
    pointer-events: none;
}
/* Brass bolts */
.fb-phbolt {
    position: absolute;
    width: 9px; height: 9px;
    border-radius: 50%;
    background: radial-gradient(circle at 33% 28%, #e8c84a 0%, #b8940a 55%, #7a5e00 100%);
    box-shadow:
        inset 0 1px 2px rgba(255,255,255,.35),
        inset 0 -1px 1px rgba(0,0,0,.4),
        0 1px 3px rgba(0,0,0,.7);
}
.fb-phbolt::before, .fb-phbolt::after {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    width: 4px; height: 1px;
    background: rgba(0,0,0,.4);
    border-radius: 1px;
}
.fb-phbolt::before { transform: translate(-50%,-50%); }
.fb-phbolt::after  { transform: translate(-50%,-50%) rotate(90deg); }
.fb-phbolt-tl { top: 15px; left: 15px; }
.fb-phbolt-tr { top: 15px; right: 15px; }
.fb-phbolt-bl { bottom: 15px; left: 15px; }
.fb-phbolt-br { bottom: 15px; right: 15px; }

/* ── 2. Skeuomorphic arcade button ── */
.fb-push-btn {
    position: relative;
    display: inline-block;
    width: 110px; height: 110px;
    border: 0; outline: none;
    background-color: hsl(10, 90%, 40%);
    border-radius: 50%;
    cursor: pointer;
    flex-shrink: 0;
    transition: box-shadow 200ms;
    user-select: none;
    -webkit-user-select: none;
    box-shadow:
        inset 0 4.58px 0 hsl(10, 90%, 45%),
        inset 0 -4.58px 1.83px hsl(10, 90%, 35%),
        0 0 1.83px hsl(10, 90%, 40%),
        inset 0 0 3.67px hsl(10, 90%, 25%),
        inset 0 0 3.67px rgba(51, 51, 51, .5),
        inset 0 0 1.83px 9.17px hsl(10, 90%, 40%),
        inset 0 -3.67px 2.75px 11px rgba(51, 51, 51, .7),
        inset 0 0 1.83px 11px hsl(10, 90%, 20%),
        inset 0 0 1.83px 11px rgba(51, 51, 51, .7),
        inset 0 0 0.92px 11.96px hsl(10, 90%, 0%),
        inset 0 0 0.92px 13.75px hsla(10, 90%, 70%, .7),
        inset 0 5.5px 0 12.94px hsla(10, 90%, 55%, .7),
        inset 0 -5.5px 1.83px 12.94px hsla(10, 90%, 30%, .2),
        inset 0 0 0 20px hsl(10, 90%, 40%),
        inset 0 44px 14.67px hsl(10, 90%, 35%),
        inset 0 0 11px 18.33px hsl(10, 90%, 30%),
        0 2.75px 5.5px rgba(0, 0, 0, .5);
}
.fb-push-btn:active,
.fb-push-btn.is-pushed {
    background-color: hsl(10, 90%, 38%);
    box-shadow:
        inset 0 4.58px 0 hsl(10, 90%, 45%),
        inset 0 -4.58px 1.83px hsl(10, 90%, 35%),
        0 0 1.83px hsl(10, 90%, 40%),
        inset 0 0 3.67px hsl(10, 90%, 25%),
        inset 0 0 3.67px rgba(51, 51, 51, .5),
        inset 0 0 1.83px 9.17px hsl(10, 90%, 40%),
        inset 0 -3.67px 2.75px 11px rgba(51, 51, 51, .7),
        inset 0 0 1.83px 11px hsl(10, 90%, 20%),
        inset 0 0 1.83px 11px rgba(51, 51, 51, .7),
        inset 0 0 2.75px 12.94px hsl(10, 90%, 0%),
        inset 0 0 0.92px 14.67px hsla(10, 90%, 70%, .2),
        inset 0 5.5px 0 12.94px hsla(10, 90%, 55%, .5),
        inset 0 -5.5px 1.83px 12.94px hsla(10, 90%, 20%, .2),
        inset 0 0 0 20px hsl(10, 90%, 37%),
        inset 0 44px 14.67px hsl(10, 90%, 32%),
        inset 0 0 11px 18.33px hsl(10, 90%, 25%),
        0 2.75px 5.5px rgba(0, 0, 0, .5);
}
.fb-push-btn::before {
    content: '';
    position: absolute;
    bottom: 24.44px; left: 30.56px;
    display: block;
    width: 50px; height: 33.33px;
    background: linear-gradient(to top, hsla(10, 90%, 80%, .3) 0%, hsla(10, 90%, 40%, .1) 100%);
    border-radius: 40% 40% 60% 60%;
    transition: opacity 200ms;
    pointer-events: none;
}
.fb-push-btn:active::before,
.fb-push-btn.is-pushed::before { opacity: .5; }

/* Party horn emoji inside button */
#fb-horn-emoji {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    font-size: 32px;
    line-height: 1;
    pointer-events: none;
    transition: filter 200ms, transform 200ms;
}
.fb-push-btn:hover #fb-horn-emoji {
    filter: brightness(1.25) drop-shadow(0 0 8px rgba(255,200,50,.75)) drop-shadow(0 0 18px rgba(255,140,0,.4));
}
.fb-push-btn:active #fb-horn-emoji,
.fb-push-btn.is-pushed #fb-horn-emoji {
    transform: translate(-50%, calc(-50% + 2px));
}

/* ── 2b. Porthole column — stacks nozzle above logo ── */
.fb-porthole-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    width: 110px;
    flex-shrink: 0;
}

/* ── 2c. Fetti Blaster logo — bare text, no container box ──────────────────
 * Extracted from the standalone micro-edition logo. No border/bg/clip added —
 * the text floats freely below the porthole inside the scale(0.62) context.
 * Font sizes (1rem / 1.2rem) use the app's 14px body base; the inherited
 * scale(0.62) renders them at ~8.7px / ~10.4px visually — fitting within the
 * 110px porthole column and matching the micro-edition proportions.
 * Keyframe prefixed fb- to stay within the existing fb- namespace.         */
@keyframes fb-extreme-pulse {
    0%   { transform: scale(1)    rotate(-5deg) skewX(-20deg); }
    100% { transform: scale(1.08) rotate(-5deg) skewX(-20deg); }
}
.fb-fusion {
    animation: fb-extreme-pulse 1s infinite alternate linear;
    line-height: 1;
}
.fb-fusion .fb-line1,
.fb-fusion .fb-line2 {
    display: block;
    line-height: 0.8;
    white-space: nowrap;
    font-family: 'Luckiest Guy', cursive;
}
.fb-fusion .fb-line1 {
    font-size: 0.729rem;
    color: #ff00ff;
    -webkit-text-stroke: 0.4px #fff;
    text-shadow:
        1.2px 1.2px 0 #00ffff,
        2.4px 2.4px 0 #000;
}
.fb-fusion .fb-line2 {
    font-size: 0.875rem;
    color: #00ff00;
    -webkit-text-stroke: 0.6px #fff;
    text-shadow:
        0.6px 0.6px 0 #006600,
        1.2px 1.2px 0 #006600,
        1.8px 1.8px 0 #ff00ff,
        2.4px 2.4px 0 #000;
    margin-left: 12px;
}

/* ── 3. Vertical text roller ── */
.fb-roller-wrap {
    position: relative;
    width: var(--fb-w);
    height: var(--fb-rh);
    cursor: ns-resize;
    user-select: none;
    -webkit-user-select: none;
    border-radius: 6px;
    flex-shrink: 0;
}
.fb-drum-pit {
    position: absolute;
    inset: 0;
    border-radius: 6px;
    background: var(--fb-pit);
    box-shadow:
        inset 0 2px 9px rgba(0,0,0,.95),
        inset 0 -2px 9px rgba(0,0,0,.75),
        inset 0 0 0 1px rgba(0,0,0,.9);
}
/* NO perspective on .fb-drum-vp — causes blank-row bug with overflow:hidden */
.fb-drum-vp {
    position: absolute;
    inset: 0;
    overflow: hidden;
    border-radius: 6px;
}
.fb-drum-track {
    position: absolute;
    width: 100%;
    will-change: transform;
}
.fb-drum-track.fb-snap {
    transition: transform .25s cubic-bezier(.18,.85,.28,1.12);
}
.fb-di {
    height: var(--fb-ih);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Rajdhani', sans-serif;
    font-weight: 600;
    text-transform: uppercase;
    pointer-events: none;
    white-space: nowrap;
    will-change: transform, color, opacity;
}
.fb-drum-fade-t, .fb-drum-fade-b {
    position: absolute;
    left: 0; right: 0;
    height: calc(var(--fb-ih) * 0.72);
    pointer-events: none;
    z-index: 4;
}
.fb-drum-fade-t {
    top: 0;
    background: linear-gradient(180deg, var(--fb-pit) 0%, rgba(12,13,16,.93) 35%, transparent 100%);
}
.fb-drum-fade-b {
    bottom: 0;
    background: linear-gradient(0deg, var(--fb-pit) 0%, rgba(12,13,16,.93) 35%, transparent 100%);
}
.fb-sel {
    position: absolute;
    left: 0; right: 0;
    top: calc(50% - var(--fb-ih) / 2);
    height: var(--fb-ih);
    pointer-events: none;
    z-index: 5;
}
.fb-sel::before, .fb-sel::after {
    content: '';
    position: absolute;
    left: 8px; right: 8px;
    height: 1px;
}
.fb-sel::before {
    top: 0;
    background: linear-gradient(90deg, transparent, rgba(232,201,106,.6) 12%, rgba(255,228,120,.9) 50%, rgba(232,201,106,.6) 88%, transparent);
    box-shadow: 0 0 8px rgba(232,201,106,.28);
}
.fb-sel::after {
    bottom: 0;
    background: linear-gradient(90deg, transparent, rgba(232,201,106,.6) 12%, rgba(255,228,120,.9) 50%, rgba(232,201,106,.6) 88%, transparent);
    box-shadow: 0 0 8px rgba(232,201,106,.28);
}
.fb-sel-fill {
    position: absolute;
    inset: 1px;
    background: linear-gradient(180deg, rgba(232,201,106,.022), rgba(232,201,106,.05), rgba(232,201,106,.022));
    border-radius: 2px;
}
.fb-sel.fb-flash::before,
.fb-sel.fb-flash::after { box-shadow: 0 0 16px rgba(232,201,106,.6); }
.fb-barrel-sh {
    position: absolute;
    inset: 0;
    border-radius: 6px;
    background: linear-gradient(90deg, rgba(0,0,0,.2) 0%, rgba(0,0,0,.05) 14%, rgba(0,0,0,0) 34%, rgba(0,0,0,0) 66%, rgba(0,0,0,.05) 86%, rgba(0,0,0,.2) 100%);
    pointer-events: none;
    z-index: 6;
}

/* ── 4. Scroll wheel row ── */
.fb-wheel-row {
    width: var(--fb-w);
    flex-shrink: 0;
}
#fb-wheel-canvas {
    display: block;
    width: 100%;
    height: 16px;
    cursor: ew-resize;
    box-shadow:
        inset 0 2px 6px rgba(0,0,0,.9),
        inset 0 -2px 6px rgba(0,0,0,.65),
        inset 0 0 0 1px rgba(0,0,0,.8);
}

/* ── 5. Nav row ── */
.fb-nav-row {
    display: flex;
    align-items: center;
    gap: 8px;
    width: var(--fb-w);
    flex-shrink: 0;
}
.fb-dial-arrow, .fb-refresh-btn {
    flex: 1;
    height: 20px;
    background: linear-gradient(180deg, #1e2128, #161820);
    border: 1px solid #282c38;
    border-radius: 4px;
    color: rgba(190,195,210,.5);
    font-size: 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    user-select: none;
    -webkit-user-select: none;
    box-shadow: 0 2px 4px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.04);
    transition: color .1s, border-color .1s, transform .08s;
}
.fb-dial-arrow:hover,  .fb-refresh-btn:hover  { color: var(--ekg); border-color: var(--ekg-border); }
.fb-dial-arrow:active, .fb-refresh-btn:active { transform: translateY(1px); }
.fb-refresh-btn { font-size: 13px; }

/* ── 6. Hopper loader ── */
.fb-bottom-row {
    width: var(--fb-w);
    flex-shrink: 0;
}
.fb-hopper-panel {
    width: 100%;
    background: #080a0c;
    border: 1px solid #1c1e24;
    border-radius: 6px;
    padding: 5px 8px;
    box-shadow: inset 0 2px 8px rgba(0,0,0,.85), inset 0 0 20px rgba(0,0,0,.3);
    display: flex;
    align-items: center;
}
.fb-hopper-bar {
    display: flex;
    gap: 3px;
    align-items: center;
    width: 100%;
}
.fb-h-cell {
    flex: 1;
    height: 7px;
    border-radius: 2px;
    background: #141820;
    border: 1px solid #22262e;
    transition: background .1s, box-shadow .1s, border-color .1s;
    overflow: hidden;
}
.fb-h-cell.fb-active {
    background: var(--ekg);
    box-shadow: 0 0 5px var(--ekg), 0 0 10px var(--ekg-dim);
    border-color: var(--ekg-border);
}
/* Cell fill burst animation on auto-reload */
.fb-h-cell.fb-filling { animation: fb-cell-fill .32s ease-out; }
@keyframes fb-cell-fill {
    0%   { background: rgba(255,255,255,0.8); box-shadow: 0 0 14px var(--ekg), 0 0 24px var(--ekg-dim); }
    100% { background: var(--ekg); box-shadow: 0 0 5px var(--ekg); }
}
/* Shake on empty click */
.fb-hopper-panel.fb-shake { animation: fb-hopper-shake .3s ease-out; }
@keyframes fb-hopper-shake {
    0%,100% { transform: translateX(0); }
    20%     { transform: translateX(-3px); }
    40%     { transform: translateX(3px); }
    60%     { transform: translateX(-2px); }
    80%     { transform: translateX(2px); }
}

/* ── Fetti Blaster — light mode overrides ── */
body.light-theme .fb-hopper-panel {
    background: var(--bg-hover);
    border-color: var(--border);
    box-shadow: inset 0 1px 3px rgba(0,0,0,.08);
}
/* Inactive cell: hardcoded mid-blue-gray — visibly distinct from
   the #e2e8f0 panel background, representing an unlit slot. */
body.light-theme .fb-h-cell {
    background: #c8d4e0;
    border-color: rgba(14,165,233,0.18);
}
/* Active cell: explicit higher-specificity rule (0,3,0 > 0,2,0) ensures
   var(--ekg) is never overridden by the inactive rule above. */
body.light-theme .fb-h-cell.fb-active {
    background: var(--ekg);
    box-shadow: 0 0 5px var(--ekg), 0 0 10px var(--ekg-dim);
    border-color: var(--ekg-border);
}
body.light-theme .fb-dial-arrow,
body.light-theme .fb-refresh-btn {
    background: var(--bg-hover);
    border-color: rgba(14,165,233,0.25);
    color: var(--txt-mid);
    box-shadow: 0 1px 2px rgba(0,0,0,.06), inset 0 1px 0 rgba(255,255,255,.6);
}

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 1440px) {
    /* analysis-settings: Data Mode and Party Mode cards become too narrow when
       they share a flex row with the fixed-width Data Mode card at this width.
       Giving analysis-cols-stack its own full row (flex:1 0 100%) causes it to
       wrap alone, pushing Data Mode + Party Mode to a second row where both get
       comfortable width. Cancelled at ≤860px by flex-wrap:nowrap + flex:1 reset
       in that block below, where flex-direction:column handles all stacking.   */
    .analysis-settings { flex-wrap: wrap; }
    .analysis-cols-stack { flex: 1 0 100%; }
}
@media (max-width: 1100px) {
    .insights-sidebar { width: 240px; }
}
@media (max-width: 860px) {
    .main-layout { flex-direction: column; }
    .controls-sidebar { width: 100%; border-right: none; border-bottom: 1px solid var(--border); padding: 12px; }
    .insights-sidebar { width: 100%; border-left: none; border-top: 1px solid var(--border); }
    .toggle-grid { grid-template-columns: repeat(4, 1fr); }
    .chart-wrapper { height: 280px; }
    .cs-slot-img { max-height: 220px; width: auto; }
    /* analysis-settings: all card columns stack vertically, each full width.
       flex-wrap:nowrap overrides the wrap set by the ≤1440px block above;
       flex-direction:column handles all stacking from this breakpoint down.   */
    .analysis-settings { flex-direction: column; flex-wrap: nowrap; gap: 10px; }
    .analysis-cols-stack { flex: 1; }   /* reset from flex:1 0 100% set at ≤1440px */
    .analysis-settings .toggle-grid { grid-template-columns: repeat(3, 1fr); }
    .analysis-col--party { flex: 2; }
    /* Party Mode top row: flex switches to column so porthole-col and button
       stack vertically, spaced by the inherited row-gap:22px.
       Column height: ~117px porthole-col + 22px row-gap + 110px button = 249px.
       Scale reduction: 249 × (1−0.62) = 94.6px. Leaves ~6px visual gap:
       margin-bottom = −(94.6 − 6) ≈ −89px.                                  */
    .fb-top-row {
        flex-direction: column;
        align-items: center;
        margin-bottom: -89px;
    }
    /* ID display: half sidebar width, centred — avoids spanning the full device
       width when the sidebar becomes full-width at this breakpoint. */
    .id-display-wrap { width: 50%; margin: 0 auto 2px; }
    /* Display Mode toggle: centre the icon + switch in the full-width sidebar */
    .theme-toggle { justify-content: center; }
    /* LED dots: smaller at tablet widths — 4px dot, 1px margin (6px cell).
       LED lightbox: per-element sizing restores layout proportion (176px of ~792px row = 22%).
       Button/switch ratio maintained at ~74% (34/46 = 73.9%). */
    .led-light { width: 4px; height: 4px; }
    .led-lightbox-wrap .rdo-switch { width: 46px; height: 46px; margin: 3px; }
    .led-lightbox-wrap .rdo-button { width: 34px; height: 34px; }
    /* About-page logo unit: scale all three elements together as one object. */
    .about-logo-unit { transform: scale(0.85); transform-origin: center; }
}
@media (max-width: 540px) {
    body { padding: 6px; }
    .app-header { padding: 10px 14px; }
    .content-area { padding: 12px; gap: 8px; }
    .toggle-grid { grid-template-columns: repeat(2, 1fr); }
    .insights-grid { grid-template-columns: 1fr; }
    .about-grid    { grid-template-columns: 1fr; }
    .header-title  { font-size: 1rem; }
    /* cs-slot-img: tighter cap at smallest breakpoint */
    .cs-slot-img { max-height: 180px; }
    /* LED dots: 3px dot + 2px margin = 7px cell — preserves getVisCols() accuracy.
       LED lightbox: further reduction for phones (146px of ~504px row = 29%).
       Button/switch ratio maintained at ~74% (28/38 = 73.7%). */
    .led-light { width: 3px; height: 3px; margin: 2px; }
    .led-lightbox-wrap .rdo-switch { width: 38px; height: 38px; margin: 2px; }
    .led-lightbox-wrap .rdo-button { width: 28px; height: 28px; }
    /* About-page logo unit: further reduction at narrowest breakpoint */
    .about-logo-unit { transform: scale(0.70); transform-origin: center; }
}