/* ON-AIR UI themes — light palette and theme switcher.
   Loaded ONLY by Brain operator pages (templates with _onair_theme.html,
   marked data-onair-brain). Presenter, VBStat and midroll never load this
   file, so the light palette cannot leak into them.
   The palette is original ON-AIR work: cool light greys, white panels and a
   darker teal derivative of the ON-AIR accent (the brand #00d4aa stays only
   where it sits on dark or as a decorative accent, because on white it is
   ~1.9:1). Status hues are preserved, darkened where needed for contrast. */
/* Brain-only readability lift for secondary text (Presenter/midroll keep
   the historic #7a8199 because they do not carry the brain marker). */
[data-onair-brain] { color-scheme: dark; --onair-dim: #8b93ad; }

[data-onair-brain][data-theme="light"] {
    --onair-header-bg: #ffffff;
    --onair-header-border: #c3cddd;
    --onair-nav-text: #566078;
    --onair-nav-active-bg: rgba(11, 124, 104, 0.1);
    color-scheme: light;
    --onair-page: #edf0f5;
    --onair-text: #1d2534;
    --onair-text-soft: #3d475c;
    --onair-dim: #566078;
    --onair-surface: #ffffff;
    --onair-surface-2: #eef2f7;
    --onair-surface-3: #e3e9f2;
    --onair-well: #e8edf4;
    --onair-well-2: #dde4ee;
    --onair-line: #d7dee9;
    --onair-border: #c3cddd;
    --onair-border-2: #aab9cf;
    --onair-border-strong: #93a2ba;
    --onair-accent: #0a7562;
    --onair-accent-strong: #097457;
    --onair-accent-ink: #ffffff;
    --onair-accent-tint: rgba(11, 124, 104, 0.1);
    --onair-accent-tint-2: rgba(11, 124, 104, 0.16);
    --onair-focus: #1f63c8;
    --onair-hover: rgba(15, 25, 45, 0.05);
    --onair-muted-line: rgba(15, 25, 45, 0.1);
    --onair-shadow: rgba(15, 23, 42, 0.25);
    --onair-shadow-2: rgba(15, 23, 42, 0.18);
    --onair-overlay: rgba(15, 23, 42, 0.5);
    --onair-overlay-2: rgba(15, 23, 42, 0.4);
    --onair-scrim: rgba(15, 23, 42, 0.45);
    --onair-scrim-2: rgba(15, 23, 42, 0.4);
    --onair-code: #1b58ba;
    --onair-code-bg: #e3eefb;
    --onair-success: #1b723c;
    --onair-success-bg: #e0f3e7;
    --onair-success-tint: rgba(30, 125, 67, 0.1);
    --onair-success-tint-2: rgba(30, 125, 67, 0.24);
    --onair-warn: #7d5600;
    --onair-warn-ink: #ffffff;
    --onair-warn-bg: #faf0d2;
    --onair-warn-border: #e0c586;
    --onair-warn-tint: rgba(138, 95, 0, 0.1);
    --onair-warn-tint-2: rgba(138, 95, 0, 0.26);
    --onair-danger: #c0392b;
    --onair-danger-soft: #c0392b;
    --onair-danger-bg: #fdecea;
    --onair-danger-border: #f0b9b3;
    --onair-danger-tint: rgba(192, 57, 43, 0.08);
    --onair-danger-tint-2: rgba(192, 57, 43, 0.22);
    --onair-info: #1b63a6;
    --onair-info-bg: #e3eefb;
    --onair-manual-bg: #fbe9f1;
    --onair-manual-bg-2: #f9dfeb;
    --onair-manual-ink: #962d55;
    --onair-selection-bg: #d5eee7;
    --onair-selection-ink: #0b5a4b;
    --onair-cat-r: #c0392b;
    --onair-cat-n: #1f6fb4;
    --onair-cat-m: #1b723c;
    --onair-cat-p: #7d3c9e;
    --onair-cat-b: #5b6472;
    --onair-cat-p-bg: #eddcf5;
    --onair-cat-p-tint: rgba(125, 60, 158, 0.12);
    --onair-cat-p-tint-2: rgba(125, 60, 158, 0.26);
    --onair-src-local-bg: #d7f0ea;
    --onair-src-local-ink: #0b6a58;
    --onair-src-partner-bg: #eddcf5;
    --onair-src-partner-ink: #7d3c9e;
    --onair-src-storage-bg: #f8e6d4;
    --onair-src-storage-ink: #9c5410;
    --onair-src-missing-bg: #fde3e0;
    --onair-src-missing-ink: #b03224;
    /* Canvas surfaces in light mode. */
    --onair-canvas-lane-a: #edf1f7;
    --onair-canvas-lane-b: #e6ecf4;
    --onair-canvas-active: #d9e4f1;
    --onair-canvas-grid: #c8d4e2;
    --onair-canvas-ruler-bg: #dde4ee;
    --onair-canvas-ruler-border: #b3c0d2;
    --onair-canvas-ruler-text: #5b6478;
    --onair-canvas-text: #3d475c;
    --onair-canvas-loading: #3d475c;
    --onair-canvas-error: #96540a;
    --onair-mk-start: #16763d;
    --onair-mk-startthis: #1f6fb4;
    --onair-mk-startnext: #9e520c;
    --onair-mk-stop: #c0392b;
    --onair-mk-fade: #7d3c9e;
    --onair-mk-playhead: #8a7100;
    --onair-mk-stroke: #ffffff;
    --onair-canvas-connector: #2389ad;
    --onair-wave-base: 28, 98, 52;
    --onair-wave-amp: 14, 58, 16;
}

/* ── Theme switcher (injected into .onair-header-right by onair-theme.js) ── */
.onair-theme-switch {
    display: inline-flex;
    align-items: center;
    gap: 0;
    border: 1px solid var(--onair-border);
    border-radius: 6px;
    overflow: hidden;
    flex: 0 0 auto;
}
.onair-theme-switch legend,
.onair-theme-switch .onair-theme-switch-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}
.onair-theme-switch button {
    appearance: none;
    border: 0;
    border-left: 1px solid var(--onair-border);
    background: var(--onair-surface-2);
    color: var(--onair-dim);
    font: inherit;
    font-size: 11px;
    font-weight: 600;
    padding: 4px 8px;
    min-height: 28px;
    cursor: pointer;
    white-space: nowrap;
}
.onair-theme-switch button:first-of-type { border-left: 0; }
.onair-theme-switch button:hover { color: var(--onair-text); background: var(--onair-surface-3); }
.onair-theme-switch button[aria-pressed="true"] {
    background: var(--onair-accent);
    color: var(--onair-accent-ink);
}
@media (max-width: 620px) {
    /* The header-right lane is width-constrained on phones: the switcher takes
       its own full row instead of overflowing the header. Pages whose
       header-right holds many controls (Player clock, pickers) get a
       full-width header row so nothing spills over the content below.
       The nav shell's legacy height:100% otherwise stretches over the
       grown multi-row header and swallows pointer events. */
    .onair-header-right:has(.onair-theme-switch) { flex: 1 0 100%; max-width: 100%; order: 3; }
    .onair-header:has(.onair-theme-switch) .onair-nav-shell { height: auto; }
    .onair-theme-switch { flex: 1 0 100%; order: 2; }
    .onair-theme-switch button { flex: 1 1 0; padding: 4px 4px; font-size: 10px; min-height: 30px; }
}