/* ON-AIR Shared UI — Russian operator theme.
   Semantic color tokens. Dark values are the long-standing ON-AIR palette and
   are the defaults, so pages without the theme include (Presenter, VBStat,
   midroll) keep their current appearance. Light values are applied only on
   Brain pages (data-onair-brain) via static/css/onair-theme.css. */
:root {
    --onair-page: #12121c;
    --onair-header-bg: #161b2e;
    --onair-header-border: #252a3d;
    --onair-nav-text: #8b92a8;
    --onair-nav-active-bg: rgba(0, 212, 170, 0.05);
    --onair-text: #e0e0e0;
    --onair-text-soft: #c5cadd;
    --onair-dim: #7a8199;
    --onair-surface: #16213e;
    --onair-surface-2: #1e2540;
    --onair-surface-3: #252d4d;
    --onair-well: #0d1020;
    --onair-well-2: #0a0f1a;
    --onair-line: #1a1f33;
    --onair-border: #2a3045;
    --onair-border-2: #0f3460;
    --onair-border-strong: #3a4160;
    --onair-accent: #00d4aa;
    --onair-accent-strong: #00f0bf;
    --onair-accent-ink: #000000;
    --onair-accent-tint: rgba(0, 212, 170, 0.08);
    --onair-accent-tint-2: rgba(0, 212, 170, 0.14);
    --onair-focus: #52a8ea;
    --onair-hover: rgba(255, 255, 255, 0.04);
    --onair-muted-line: rgba(255, 255, 255, 0.06);
    --onair-shadow: rgba(0, 0, 0, 0.45);
    --onair-shadow-2: rgba(0, 0, 0, 0.35);
    --onair-overlay: rgba(0, 0, 0, 0.55);
    --onair-overlay-2: rgba(0, 0, 0, 0.5);
    --onair-scrim: rgba(9, 16, 31, 0.92);
    --onair-scrim-2: rgba(10, 22, 40, 0.85);
    --onair-code: #9ecbff;
    --onair-code-bg: #0f2535;
    --onair-success: #2ecc71;
    --onair-success-bg: #123026;
    --onair-success-tint: rgba(46, 204, 113, 0.1);
    --onair-success-tint-2: rgba(46, 204, 113, 0.28);
    --onair-warn: #e6a817;
    --onair-warn-ink: #2f260d;
    --onair-warn-bg: #2f260d;
    --onair-warn-border: #5d4914;
    --onair-warn-tint: rgba(230, 168, 23, 0.1);
    --onair-warn-tint-2: rgba(230, 168, 23, 0.3);
    --onair-danger: #e74c3c;
    --onair-danger-soft: #ff6b5f;
    --onair-danger-bg: #351515;
    --onair-danger-border: #6a2a2a;
    --onair-danger-tint: rgba(231, 76, 60, 0.1);
    --onair-danger-tint-2: rgba(231, 76, 60, 0.3);
    --onair-info: #3498db;
    --onair-info-bg: #0f3460;
    --onair-manual-bg: rgba(244, 184, 205, 0.1);
    --onair-manual-bg-2: rgba(244, 184, 205, 0.16);
    --onair-manual-ink: #f4b8cd;
    --onair-selection-bg: #0f3460;
    --onair-selection-ink: #00d4aa;
    --onair-cat-r: #e74c3c;
    --onair-cat-n: #3498db;
    --onair-cat-m: #2ecc71;
    --onair-cat-p: #9b59b6;
    --onair-cat-b: #555555;
    --onair-cat-p-bg: #241a35;
    --onair-cat-p-tint: rgba(155, 89, 182, 0.14);
    --onair-cat-p-tint-2: rgba(155, 89, 182, 0.32);
    --onair-src-local-bg: rgba(0, 212, 170, 0.14);
    --onair-src-local-ink: #00d4aa;
    --onair-src-partner-bg: rgba(155, 89, 182, 0.14);
    --onair-src-partner-ink: #bb8fce;
    --onair-src-storage-bg: rgba(230, 126, 34, 0.14);
    --onair-src-storage-ink: #f0b27f;
    --onair-src-missing-bg: rgba(231, 76, 60, 0.1);
    --onair-src-missing-ink: #ff6b5f;
    /* Canvas surfaces (JS reads these via getComputedStyle). */
    --onair-canvas-lane-a: #111825;
    --onair-canvas-lane-b: #0e1520;
    --onair-canvas-active: #1a2540;
    --onair-canvas-grid: #1a2540;
    --onair-canvas-ruler-bg: #0a0f1a;
    --onair-canvas-ruler-border: #1e2d4a;
    --onair-canvas-ruler-text: #666666;
    --onair-canvas-text: #ffffffaa;
    --onair-canvas-loading: #d5e3f2;
    --onair-canvas-error: #ffc478;
    --onair-mk-start: #2ecc71;
    --onair-mk-startthis: #3498db;
    --onair-mk-startnext: #e67e22;
    --onair-mk-stop: #e74c3c;
    --onair-mk-fade: #9b59b6;
    --onair-mk-playhead: #ffdd00;
    --onair-mk-stroke: #ffffff;
    --onair-canvas-connector: #00ccff;
    --onair-wave-base: 40, 80, 30;
    --onair-wave-amp: 20, 80, 10;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
    background: var(--onair-page);
    color: var(--onair-text);
    -webkit-font-smoothing: antialiased;
    height: 100%;
}
a { color: var(--onair-accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ── Accessibility baseline ── */
:focus-visible {
    outline: 2px solid var(--onair-focus);
    outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ── Header ── */
.onair-header {
    background: var(--onair-header-bg);
    height: 48px;
    display: flex;
    align-items: center;
    gap: 0;
    border-bottom: 1px solid var(--onair-header-border);
    padding: 0 20px;
    flex-shrink: 0;
}
.onair-brand {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-right: 16px;
    flex: 0 0 auto;
    white-space: nowrap;
}
.onair-logo {
    font-size: 18px;
    font-weight: 800;
    color: var(--onair-accent);
    letter-spacing: 1px;
    user-select: none;
    white-space: nowrap;
}
.onair-logo:hover { text-decoration: none; }

.onair-nav {
    display: flex;
    gap: 0;
    height: 100%;
}
[data-onair-nav-shell] [data-nav-role][hidden] {
    display: none !important;
}
.onair-nav-item {
    display: flex;
    align-items: center;
    padding: 0 16px;
    font-size: 13px;
    font-weight: 500;
    color: var(--onair-nav-text);
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: color .15s, background .15s;
}
.onair-nav-item:hover {
    color: var(--onair-text);
    background: var(--onair-hover);
    text-decoration: none;
}
.onair-nav-item.active {
    color: var(--onair-accent);
    border-bottom-color: var(--onair-accent);
    background: var(--onair-nav-active-bg);
}
.onair-nav-item.disabled {
    opacity: 0.4;
    pointer-events: none;
}

.onair-header-right {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}
.onair-header-right select {
    background: var(--onair-well);
    border: 1px solid var(--onair-border);
    color: var(--onair-text);
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 12px;
}
.onair-user-link {
    color: var(--onair-nav-text);
    border: 1px solid var(--onair-border);
    border-radius: 6px;
    padding: 4px 10px;
    font-size: 12px;
    white-space: nowrap;
}
.onair-user-link:hover {
    color: var(--onair-accent);
    border-color: var(--onair-accent);
    text-decoration: none;
}

/* The operator nav is intentionally dense.  On narrower screens it scrolls
   inside its own lane; the whole page and the logout control must not drift
   off-canvas when a new module is added. */
@media (max-width: 1100px) {
    .onair-header {
        min-width: 0;
        padding-inline: 10px;
    }
    .onair-brand {
        flex: 0 0 auto;
        margin-right: 8px;
    }
    .onair-nav {
        flex: 1 1 auto;
        min-width: 0;
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: thin;
    }
    .onair-nav-item {
        flex: 0 0 auto;
        padding-inline: 10px;
        white-space: nowrap;
    }
    /* Nothing in the header is parked off-canvas behind a scroller: the
       right lane wraps onto a second row when needed and the header grows. */
    .onair-header {
        height: auto;
        min-height: 48px;
        flex-wrap: wrap;
        row-gap: 4px;
        padding-block: 4px;
    }
    .onair-header-right {
        flex: 1 1 auto;
        min-width: 0;
        max-width: none;
        gap: 6px;
        margin-left: 8px;
        flex-wrap: wrap;
        justify-content: flex-end;
        overflow: visible;
    }
    .onair-header-right > * {
        flex: 0 1 auto;
        min-width: 0;
    }
    /* The lane wraps instead of scrolling; the station picker keeps its own
       bounded tab scroller only when there are many stations. */
    .onair-header-right .station-picker {
        max-width: 100%;
    }
}
@media (max-width: 620px) {
    /* Phone: the picker takes a full row of the wrapped lane so a long
       single station name (220px tab) never widens the page. */
    .onair-header-right .station-picker,
    .onair-header-right > [id$="StationPicker"] {
        flex: 1 0 100%;
        max-width: 100%;
        order: 1;
    }
    .onair-header-right .search { flex: 1 1 160px; }
    .onair-header-right .onair-user-link { order: 0; }
}
@media (max-width: 620px) {
    .onair-header {
        height: auto;
        min-height: 48px;
        padding-inline: 8px;
    }
    .onair-brand {
        margin-right: 6px;
    }
    .onair-logo {
        font-size: 16px;
    }
    .onair-nav-item {
        padding-inline: 9px;
        font-size: 12px;
        min-height: 46px;
    }
    .onair-header-right {
        max-width: min(40vw, 200px);
        gap: 5px;
    }
    .onair-readiness {
        height: auto;
        min-height: 32px;
        padding: 4px 10px;
        flex-wrap: wrap;
    }
    .onair-readiness-counters {
        margin-left: 0;
        gap: 4px 10px;
    }
}

/* ── Readiness bar ── */
.onair-readiness {
    background: var(--onair-well);
    height: 32px;
    display: flex;
    align-items: center;
    gap: 12px;
    border-bottom: 1px solid var(--onair-line);
    padding: 0 20px;
    font-size: 12px;
}
.onair-readiness-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--onair-success);
    flex-shrink: 0;
}
.onair-readiness-dot.warning { background: var(--onair-warn); }
.onair-readiness-dot.critical { background: var(--onair-danger-soft); }
.onair-readiness-label {
    font-weight: 600;
    color: var(--onair-text);
    white-space: nowrap;
}
.onair-readiness-counters {
    color: var(--onair-dim);
    margin-left: auto;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
}
.onair-readiness-counters span { white-space: nowrap; }
.onair-diagnostics-details {
    background: var(--onair-well-2);
    border-bottom: 1px solid var(--onair-line);
    color: var(--onair-text-soft);
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 7px 20px;
    font-size: 12px;
}
.onair-diagnostics-title {
    color: var(--onair-dim);
    font-weight: 600;
    text-transform: uppercase;
    font-size: 10px;
    line-height: 22px;
    white-space: nowrap;
}
.onair-diagnostics-reasons {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    flex: 1 1 auto;
    min-width: 160px;
}
.onair-diagnostics-reason {
    border: 1px solid var(--onair-border);
    border-radius: 999px;
    background: var(--onair-well);
    color: var(--onair-text-soft);
    padding: 3px 9px;
    line-height: 14px;
}
.onair-diagnostics-reason.warning {
    border-color: var(--onair-warn-border);
    background: var(--onair-warn-bg);
    color: var(--onair-warn);
}
.onair-diagnostics-reason.critical {
    border-color: var(--onair-danger-border);
    background: var(--onair-danger-bg);
    color: var(--onair-danger-soft);
}

/* ── Buttons ── */
.onair-btn {
    background: var(--onair-surface-2);
    border: 1px solid var(--onair-border);
    color: var(--onair-text-soft);
    padding: 6px 14px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    transition: background .15s, border-color .15s, transform .05s;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.onair-btn:hover {
    background: var(--onair-surface-3);
    border-color: var(--onair-border-strong);
}
.onair-btn:active { transform: translateY(1px); }
.onair-btn.primary {
    background: var(--onair-accent);
    border-color: var(--onair-accent);
    color: var(--onair-accent-ink);
    font-weight: 600;
}
.onair-btn.primary:hover { background: var(--onair-accent-strong); }
.onair-btn.danger {
    background: var(--onair-danger);
    border-color: var(--onair-danger);
    color: var(--onair-text);
}
.onair-btn.danger:hover { background: var(--onair-danger); }
.onair-btn.small {
    padding: 3px 10px;
    font-size: 11px;
}
.onair-btn:disabled,
.onair-btn[disabled] {
    opacity: .45;
    cursor: not-allowed;
}

/* ── Badges ── */
.diag-badge {
    padding: 3px 10px;
    border-radius: 10px;
    font-size: 11px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    background: var(--onair-success-bg);
    color: var(--onair-success);
    max-width: 280px;
}
.diag-badge.warning { background: var(--onair-warn-bg); color: var(--onair-warn); }
.diag-badge.critical { background: var(--onair-danger-bg); color: var(--onair-danger-soft); }
.listeners-badge {
    background: var(--onair-info-bg);
    padding: 3px 10px;
    border-radius: 10px;
    font-size: 11px;
    color: var(--onair-text-soft);
}

/* ── Shared Modals ── */
.modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: var(--onair-overlay);
    z-index: 10000;
    align-items: center;
    justify-content: center;
}
.modal-overlay.show {
    display: flex;
}
.modal-box {
    background: var(--onair-surface);
    border: 1px solid var(--onair-border-2);
    border-radius: 8px;
    padding: 16px;
    width: 350px;
    max-height: 500px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 16px 40px var(--onair-shadow);
}
.modal-box h4 {
    margin-bottom: 10px;
    color: var(--onair-accent);
    font-size: 14px;
}
.modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 12px;
}

/* ── Station tabs ── */
.station-picker {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    max-width: 100%;
}
.station-picker.compact { gap: 4px; }
.station-picker.tabs-mode {
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: thin;
}
.station-picker-label {
    color: var(--onair-dim);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .5px;
    white-space: nowrap;
}
.station-picker-empty {
    color: var(--onair-dim);
    font-size: 12px;
}
.station-picker-select {
    min-width: 180px;
    max-width: 280px;
    background: var(--onair-well);
    border: 1px solid var(--onair-border);
    color: var(--onair-text);
    padding: 5px 10px;
    border-radius: 5px;
    font-size: 12px;
}
.station-picker.compact .station-picker-select {
    min-width: 140px;
    padding: 3px 8px;
    font-size: 11px;
}
/* Keep this override after the base picker rules: before it, the later
   min-width declarations won the cascade and a compact picker could shrink
   its box while its native select still widened the whole mobile page. */
@media (max-width: 620px) {
    .station-picker-select,
    .station-picker.compact .station-picker-select {
        width: 100%;
        min-width: 0;
        max-width: 100%;
    }
}
.station-tabs {
    display: flex;
    gap: 4px;
}
.station-tab {
    flex: 0 0 auto;
    min-width: 0;
    max-width: 220px;
    padding: 4px 14px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 700;
    border: none;
    cursor: pointer;
    background: var(--onair-surface-2);
    color: var(--onair-dim);
    transition: background .15s, color .15s;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.station-tab:hover { background: var(--onair-surface-3); color: var(--onair-text-soft); }
.station-tab.active {
    background: var(--station-color, var(--onair-accent));
    color: var(--onair-accent-ink);
}

/* ── Operator console (player bar) ── */
.operator-console {
    background: var(--onair-well);
    border-top: 1px solid var(--onair-line);
    flex-shrink: 0;
}
.console-main {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 10px 20px;
    border-bottom: 1px solid var(--onair-line);
}
.console-current {
    min-width: 220px;
    max-width: 340px;
}
.console-label {
    font-size: 10px;
    color: var(--onair-dim);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 2px;
}
.console-track {
    font-size: 14px;
    font-weight: 600;
    color: var(--onair-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.console-time {
    font-family: 'Courier New', monospace;
    font-size: 18px;
    font-weight: 700;
    color: var(--onair-accent);
}
.console-progress-wrap {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.console-progress-bg {
    height: 6px;
    background: var(--onair-surface-2);
    border-radius: 3px;
    overflow: hidden;
}
.console-progress-fill {
    height: 100%;
    background: var(--onair-accent);
    border-radius: 3px;
    transition: width .5s linear;
}
.console-next {
    min-width: 160px;
    max-width: 260px;
}
.console-next .console-track {
    font-size: 12px;
    color: var(--onair-warn);
}
.console-controls {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 20px;
    flex-wrap: wrap;
}
.transport-btns {
    display: flex;
    gap: 6px;
}
.mode-btns {
    display: flex;
    gap: 2px;
}
.mode-btn {
    padding: 5px 14px;
    border: none;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    background: var(--onair-surface-2);
    color: var(--onair-dim);
    transition: background .15s, color .15s;
}
.mode-btn:first-child { border-radius: 4px 0 0 4px; }
.mode-btn:last-child { border-radius: 0 4px 4px 0; }
.mode-btn:hover { background: var(--onair-surface-3); color: var(--onair-text-soft); }
.mode-btn.active {
    background: var(--onair-accent);
    color: var(--onair-accent-ink);
}
.console-status {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: auto;
    flex-wrap: wrap;
    max-width: 100%;
}
.status-text {
    font-size: 12px;
    font-weight: 600;
}
.status-onair { color: var(--onair-danger); animation: blink-air 1.2s infinite; }
.status-stop { color: var(--onair-dim); }
.status-paused { color: var(--onair-warn); }
@keyframes blink-air { 0%,100%{opacity:1} 50%{opacity:.5} }

/* ── Compact player status (rotator) ── */
.compact-player-status {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 12px;
    background: var(--onair-well);
    border-bottom: 1px solid var(--onair-line);
    font-size: 12px;
    flex-shrink: 0;
}
.compact-player-status .label { color: var(--onair-dim); }
.compact-player-status .track { color: var(--onair-text); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.compact-player-status .state { font-size: 10px; text-transform: uppercase; padding: 1px 6px; border-radius: 3px; font-weight: 600; }
.state-playing { background: var(--onair-success-bg); color: var(--onair-success); }
.state-stopped { background: var(--onair-well-2); color: var(--onair-dim); }

/* ── Tabs ── */
.onair-tabs {
    background: var(--onair-well);
    display: flex;
    border-bottom: 1px solid var(--onair-line);
    padding: 0 16px;
    height: 40px;
    align-items: center;
    gap: 0;
    flex-shrink: 0;
}
.onair-tab {
    padding: 0 16px;
    height: 100%;
    display: flex;
    align-items: center;
    font-size: 13px;
    font-weight: 500;
    color: var(--onair-dim);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    user-select: none;
    transition: color .15s;
}
.onair-tab:hover { color: var(--onair-text); }
.onair-tab.active { color: var(--onair-accent); border-bottom-color: var(--onair-accent); }

/* ── Utilities ── */
.flex { display: flex; }
.flex-1 { flex: 1; }
.gap-8 { gap: 8px; }
.gap-12 { gap: 12px; }
.ml-auto { margin-left: auto; }
.text-muted { color: var(--onair-dim); }
.text-small { font-size: 11px; }

/* ── Shared Toast ── */
.onair-toast-container {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 99999;
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: flex-end;
    pointer-events: none;
}
.onair-toast {
    background: var(--onair-surface);
    border: 1px solid var(--onair-border-2);
    color: var(--onair-text);
    padding: 10px 16px;
    border-radius: 6px;
    font-size: 13px;
    box-shadow: 0 4px 16px var(--onair-shadow);
    max-width: 360px;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.25s ease, transform 0.25s ease;
    pointer-events: auto;
    word-break: break-word;
}
.onair-toast.visible {
    opacity: 1;
    transform: translateY(0);
}
.onair-toast.success { border-color: var(--onair-success); color: var(--onair-success); }
.onair-toast.error   { border-color: var(--onair-danger); color: var(--onair-danger-soft); }
.onair-toast.info    { border-color: var(--onair-info); color: var(--onair-info); }

/* ── Persistent background-job indicator ── */
.onair-job-indicator {
    position: fixed;
    left: 20px;
    bottom: 20px;
    z-index: 9000;
    width: min(340px, calc(100vw - 40px));
    padding: 10px 12px;
    border: 1px solid var(--onair-accent);
    border-radius: 7px;
    background: var(--onair-surface);
    color: var(--onair-text-soft);
    box-shadow: 0 8px 28px var(--onair-shadow);
    cursor: pointer;
    text-align: left;
    font: inherit;
}
.onair-job-indicator[hidden] { display: none; }
.onair-job-indicator:hover { border-color: var(--onair-accent); }
.onair-job-indicator:focus-visible { outline: 2px solid var(--onair-focus); outline-offset: 2px; }
.onair-job-indicator.done { border-color: var(--onair-success); }
.onair-job-indicator.failed { border-color: var(--onair-danger); }
.onair-job-title { display: flex; justify-content: space-between; gap: 10px; font-size: 12px; font-weight: 700; }
.onair-job-title span:last-child { color: var(--onair-accent); font-variant-numeric: tabular-nums; }
.onair-job-indicator.done .onair-job-title span:last-child { color: var(--onair-success); }
.onair-job-indicator.failed .onair-job-title span:last-child { color: var(--onair-danger-soft); }
.onair-job-phase { margin-top: 4px; color: var(--onair-dim); font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.onair-job-track { height: 5px; margin-top: 7px; overflow: hidden; border: 1px solid var(--onair-border-2); border-radius: 3px; background: var(--onair-well-2); }
.onair-job-fill { height: 100%; width: 0; border-radius: 2px; background: var(--onair-accent); transition: width .25s ease; }
.onair-job-track.is-indeterminate .onair-job-fill {
    width: 34% !important;
    animation: onair-job-indeterminate 1.15s ease-in-out infinite;
    transition: none;
}
@keyframes onair-job-indeterminate {
    0% { transform: translateX(-115%); }
    100% { transform: translateX(315%); }
}
.onair-job-indicator.done .onair-job-fill { background: var(--onair-success); }
.onair-job-indicator.failed .onair-job-fill { background: var(--onair-danger); }
.onair-job-hint { margin-top: 5px; color: var(--onair-dim); font-size: 10px; }
.onair-job-dismiss {
    position: absolute;
    top: 4px;
    right: 7px;
    width: 18px;
    height: 18px;
    line-height: 16px;
    text-align: center;
    border-radius: 4px;
    color: var(--onair-dim);
    font-size: 15px;
    font-weight: 700;
    border: 0;
    background: transparent;
    cursor: pointer;
}
.onair-job-dismiss[hidden] { display: none; }
.onair-job-dismiss:hover { color: var(--onair-danger-soft); background: var(--onair-src-missing-bg); }
.schedule-range-job-indicator { left: auto; right: 20px; }
.schedule-teardown-job-indicator { bottom: 116px; }
@media (max-width: 600px) {
    .onair-job-indicator { left: 12px; right: 12px; bottom: 12px; width: auto; }
    .schedule-range-job-indicator { bottom: 112px; }
    .schedule-teardown-job-indicator { bottom: 212px; }
}

/* ── Login ── */
.login-page {
    min-height: 100%;
    background:
        radial-gradient(circle at 15% 20%, var(--onair-accent-tint-2), transparent 28%),
        linear-gradient(135deg, var(--onair-page) 0%, var(--onair-surface) 48%, var(--onair-well) 100%);
}
.login-shell {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}
.login-panel {
    width: min(420px, 100%);
    background: var(--onair-surface);
    border: 1px solid var(--onair-border);
    border-radius: 8px;
    padding: 28px;
    box-shadow: 0 24px 60px var(--onair-shadow-2);
}
.login-brand {
    color: var(--onair-accent);
    font-weight: 800;
    font-size: 22px;
    margin-bottom: 18px;
}
.login-panel h1 {
    font-size: 20px;
    margin-bottom: 18px;
}
.login-form {
    display: grid;
    gap: 10px;
}
.login-form label {
    color: var(--onair-dim);
    font-size: 12px;
}
.login-form input {
    background: var(--onair-well);
    border: 1px solid var(--onair-border);
    border-radius: 6px;
    color: var(--onair-text);
    padding: 10px 12px;
    font-size: 15px;
}
.login-submit {
    margin-top: 8px;
    justify-content: center;
}
.login-error {
    background: var(--onair-danger-bg);
    border: 1px solid var(--onair-danger-border);
    color: var(--onair-danger-soft);
    border-radius: 6px;
    padding: 9px 10px;
    font-size: 13px;
}

/* ── Source badges (shared: library table + track card) ── */
.source-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    white-space: nowrap;
    line-height: 1.4;
}
.source-onair-local {
    background: var(--onair-accent-tint-2);
    color: var(--onair-accent);
    border: 1px solid var(--onair-src-local-bg);
}
.source-partner-agent,
.source-partner-http {
    background: var(--onair-src-partner-bg);
    color: var(--onair-cat-p);
    border: 1px solid var(--onair-src-partner-bg);
}
.source-object-storage {
    background: var(--onair-src-storage-bg);
    color: var(--onair-src-storage-ink);
    border: 1px solid var(--onair-src-storage-bg);
}
.source-missing,
.source-warn {
    background: var(--onair-danger-tint);
    color: var(--onair-danger-soft);
    border: 1px solid var(--onair-danger-tint-2);
}
.source-loading {
    background: transparent;
    color: var(--onair-dim);
    border: 1px solid transparent;
}
.source-status-layout {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.source-status-line {
    display: flex;
    gap: 8px;
    align-items: center;
}
.source-status-state {
    font-size: 12px;
    color: var(--onair-accent);
}
.source-status-state.warn {
    color: var(--onair-danger-soft);
}
.source-status-name {
    font-size: 12px;
    color: var(--onair-dim);
}
.source-status-local {
    font-size: 11px;
    color: var(--onair-dim);
}

/* Header budget at 1440 with five groups: the diagnostics badge keeps its
   ellipsis but yields width to the navigation and the station picker. */
.onair-header .diag-badge { max-width: 220px; }
.header .diag-badge { max-width: 220px; }

/* ── Operator navigation shell (five task groups) ─────────────────────────
   Desktop: five compact group controls; groups with several destinations
   open a dropdown (button + aria-expanded).  Narrow screens (<= 1100px):
   one disclosure button opens a fixed left drawer listing every group and
   destination.  No hover-only behaviour; all state is driven by
   onair-common.js initNavShell(). */
.onair-nav-shell {
    position: relative;
    display: flex;
    align-items: stretch;
    gap: 0;
    height: 100%;
    /* Never squeezed: the shell either fits unclipped or switches to the
       compact disclosure (measured by initNavShell). */
    flex: 0 0 auto;
    min-width: 0;
    overflow: visible;
}
/* Header budget: the station picker keeps its natural width (bounded — a
   many-station tab strip scrolls inside), the MBD search yields first. */
.onair-header-right .station-picker,
.onair-header-right > [id$="StationPicker"] { flex: 0 0 auto; max-width: min(320px, 100%); }
.onair-header-right .search { flex: 1 1 110px; max-width: 220px; min-width: 110px; }
.onair-header-right .search form { width: 100%; }
/* Legacy `.header` variant (Settings/Import/AVM/monitor): the brand must not
   wrap into two lines when the header is squeezed; the shell shrinks instead. */
.header > h1 { white-space: nowrap; flex: 0 0 auto; }
.onair-nav-toggle {
    display: none;
    align-items: center;
    gap: 6px;
    min-height: 32px;
    padding: 4px 12px;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    color: var(--onair-text);
    background: var(--onair-surface-2);
    border: 1px solid var(--onair-border);
    border-radius: 6px;
    cursor: pointer;
    white-space: nowrap;
}
.onair-nav-toggle::before {
    content: "";
    width: 14px;
    height: 2px;
    background: currentColor;
    box-shadow: 0 -5px 0 currentColor, 0 5px 0 currentColor;
}
.onair-nav-toggle[aria-expanded="true"] { color: var(--onair-accent); border-color: var(--onair-accent); }
.onair-nav-groups {
    display: flex;
    align-items: stretch;
    gap: 0;
    height: 100%;
    min-width: 0;
}
.onair-nav-group {
    position: relative;
    display: flex;
    align-items: stretch;
    min-width: 0;
}
.onair-nav-group-label { display: none; }
.onair-nav-group-btn,
.onair-nav-group-link {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 9px;
    font: inherit;
    font-size: 13px;
    font-weight: 500;
    color: var(--onair-nav-text);
    background: transparent;
    border: 0;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    border-radius: 0;
    cursor: pointer;
    white-space: nowrap;
    min-width: 0;
    overflow: hidden;
    transition: color .15s, background .15s;
}
.onair-nav-group-btn::after {
    content: "";
    width: 6px;
    height: 6px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
    opacity: .7;
}
.onair-nav-group-btn:hover,
.onair-nav-group-link:hover {
    color: var(--onair-text);
    background: var(--onair-hover);
    text-decoration: none;
}
.onair-nav-group-btn:focus-visible,
.onair-nav-group-link:focus-visible,
.onair-nav-toggle:focus-visible,
.onair-nav-menu .onair-nav-item:focus-visible {
    outline: 2px solid var(--onair-accent);
    outline-offset: -2px;
}
.onair-nav-group.active > .onair-nav-group-btn,
.onair-nav-group.active > .onair-nav-group-link,
.onair-nav-group-link.active {
    color: var(--onair-accent);
    border-bottom-color: var(--onair-accent);
    background: var(--onair-nav-active-bg);
}
.onair-nav-group.open > .onair-nav-group-btn {
    color: var(--onair-text);
    background: var(--onair-hover);
}
.onair-nav-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 200px;
    padding: 6px 0;
    background: var(--onair-surface);
    border: 1px solid var(--onair-border);
    border-radius: 0 0 8px 8px;
    box-shadow: 0 10px 24px var(--onair-shadow);
    z-index: 60;
}
.onair-nav-group.open > .onair-nav-menu { display: block; }
.onair-nav-menu-label {
    display: block;
    padding: 6px 14px 4px;
    font-size: 10px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--onair-dim);
    border-top: 1px solid var(--onair-hover);
    margin-top: 4px;
}
.onair-nav-menu .onair-nav-menu-label:first-child {
    border-top: none;
    margin-top: 0;
}
.onair-nav-menu .onair-nav-item {
    display: flex;
    padding: 8px 14px;
    border-bottom: 0;
    margin: 0;
    font-size: 13px;
}
.onair-nav-menu .onair-nav-item.active {
    color: var(--onair-accent);
    background: var(--onair-accent-tint-2);
}

/* Pre-script / no-script fallback at tablet and phone widths: the group
   row is hidden and the disclosure button shown before initNavShell adds
   the compact class, so the first paint never shows an overflowing header. */
@media (max-width: 1100px) {
    .onair-nav-shell:not(.onair-nav-shell--compact) .onair-nav-groups { display: none; }
    .onair-nav-shell:not(.onair-nav-shell--compact) .onair-nav-toggle { display: inline-flex; }
}

/* Compact (disclosure) mode.  Applied by onair-common.js initNavShell when
   the five group controls do not fit unclipped next to the brand, status
   items, station picker and logout — measured, not guessed — and always at
   or below 1100px.  The same rules used to live in a media query. */
.onair-nav-shell--compact {
    flex: 0 0 auto;
    overflow: visible;
    align-items: center;
}
.onair-nav-shell--compact .onair-nav-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 32px;
    padding: 4px 12px;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    color: var(--onair-text);
    background: var(--onair-surface-2);
    border: 1px solid var(--onair-border);
    border-radius: 6px;
    cursor: pointer;
    white-space: nowrap;
}
.onair-nav-shell--compact .onair-nav-toggle::before {
    content: "";
    width: 14px;
    height: 2px;
    background: currentColor;
    box-shadow: 0 -5px 0 currentColor, 0 5px 0 currentColor;
}
.onair-nav-shell--compact .onair-nav-toggle[aria-expanded="true"] { color: var(--onair-accent); border-color: var(--onair-accent); }
.onair-nav-shell--compact .onair-nav-groups {
    display: none;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    width: min(320px, 88vw);
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    height: auto;
    padding: 12px 8px 20px;
    overflow-y: auto;
    background: var(--onair-surface);
    border-right: 1px solid var(--onair-border);
    box-shadow: 8px 0 24px var(--onair-overlay-2);
    z-index: 200;
}
.onair-nav-shell--compact.open .onair-nav-groups { display: flex; }
.onair-nav-shell--compact .onair-nav-group { flex-direction: column; align-items: stretch; }
.onair-nav-shell--compact .onair-nav-group-btn { display: none; }
.onair-nav-shell--compact .onair-nav-group-label {
    display: block;
    padding: 10px 12px 4px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .5px;
    text-transform: uppercase;
    color: var(--onair-dim);
}
.onair-nav-shell--compact .onair-nav-group-link {
    padding: 10px 12px;
    border-bottom: 0;
    margin: 0;
    border-radius: 6px;
    font-size: 13px;
}
.onair-nav-shell--compact .onair-nav-group.active > .onair-nav-group-link,
.onair-nav-shell--compact .onair-nav-group-link.active { background: var(--onair-accent-tint-2); }
.onair-nav-shell--compact .onair-nav-menu {
    display: block;
    position: static;
    min-width: 0;
    padding: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
}
.onair-nav-shell--compact .onair-nav-menu .onair-nav-item {
    padding: 9px 20px;
    border-radius: 6px;
    font-size: 13px;
    min-height: 40px;
    align-items: center;
}

/* ── Contextual status help (onair-status-help.js) ──
   Trigger: a small real button next to a status; panel: a non-modal dialog
   anchored to the trigger.  Both work by mouse, keyboard and touch. */
.onair-help-btn,
.onair-help-sample {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    margin-left: 4px;
    padding: 0;
    border-radius: 50%;
    border: 1px solid var(--onair-border-strong);
    background: var(--onair-hover);
    color: var(--onair-code);
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    vertical-align: middle;
    flex: 0 0 auto;
}
.onair-help-btn:hover,
.onair-help-btn:focus-visible {
    background: var(--onair-accent-tint-2);
    border-color: var(--onair-accent);
    color: var(--onair-text);
    outline: 2px solid var(--onair-accent);
    outline-offset: 1px;
}
.onair-help-btn[aria-expanded="true"] { background: var(--onair-src-local-bg); border-color: var(--onair-accent); color: var(--onair-text); }
.onair-help-popover {
    position: fixed;
    z-index: 9500;
    box-sizing: border-box;
    padding: 10px 12px 10px;
    background: var(--onair-surface);
    border: 1px solid var(--onair-border-2);
    border-radius: 8px;
    box-shadow: 0 12px 32px var(--onair-overlay-2);
    color: var(--onair-text);
    font-size: 12px;
    line-height: 1.45;
    overflow: auto;
}
.onair-help-popover:focus { outline: 2px solid var(--onair-accent); outline-offset: -2px; }
.onair-help-head { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.onair-help-kicker { font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--onair-dim); flex: 1; min-width: 0; }
.onair-help-close {
    width: 22px; height: 22px; padding: 0; border-radius: 4px;
    border: 1px solid var(--onair-border); background: transparent; color: var(--onair-dim); font-size: 15px; line-height: 1; cursor: pointer;
}
.onair-help-close:hover, .onair-help-close:focus-visible { color: var(--onair-text); border-color: var(--onair-accent); outline: none; }
.onair-help-title { margin: 0 0 6px; font-size: 13px; color: var(--onair-accent); }
.onair-help-body p { margin: 0 0 6px; }
.onair-help-detail { color: var(--onair-warn); overflow-wrap: anywhere; }
.onair-help-proves, .onair-help-action { color: var(--onair-text-soft); }
.onair-help-proves b, .onair-help-action b { color: var(--onair-text); }
.onair-help-tech { margin: 6px 0 2px; font-size: 11px; color: var(--onair-dim); }
.onair-help-tech summary { cursor: pointer; }
.onair-help-tech code { font-size: 10px; color: var(--onair-code); overflow-wrap: anywhere; }
.onair-help-foot { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--onair-border); font-size: 11px; }
.onair-help-link { color: var(--onair-accent); text-decoration: none; }
.onair-help-link:hover, .onair-help-link:focus-visible { text-decoration: underline; }
.onair-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* ── /help page ── */
.onair-help-page { max-width: 960px; margin: 0 auto; padding: 18px 20px 40px; color: var(--onair-text-soft); font-size: 13px; line-height: 1.55; }
.onair-help-page h2 { color: var(--onair-accent); font-size: 18px; margin: 0 0 10px; }
.onair-help-page h3 { color: var(--onair-accent); font-size: 15px; margin: 26px 0 8px; scroll-margin-top: 70px; }
.onair-help-page h4 { color: var(--onair-text); font-size: 13px; margin: 18px 0 6px; scroll-margin-top: 70px; }
.onair-help-page p, .onair-help-page li { margin: 0 0 6px; }
.onair-help-page ul, .onair-help-page ol { padding-left: 20px; margin: 0 0 8px; }
.onair-help-page code { font-size: 11px; color: var(--onair-code); }
.onair-help-toc { display: flex; flex-wrap: wrap; gap: 6px 12px; padding: 10px 12px; margin: 0 0 8px; background: var(--onair-well); border: 1px solid var(--onair-border-2); border-radius: 8px; list-style: none; }
.onair-help-toc li { margin: 0; }
.onair-help-toc a { color: var(--onair-accent); text-decoration: none; }
.onair-help-toc a:hover, .onair-help-toc a:focus-visible { text-decoration: underline; }
.onair-help-note { padding: 8px 12px; margin: 8px 0; border-left: 3px solid var(--onair-warn); background: var(--onair-warn-tint); color: var(--onair-warn); border-radius: 0 6px 6px 0; }
.onair-help-role { color: var(--onair-dim); font-size: 12px; }
.onair-help-anchor { color: var(--onair-dim); text-decoration: none; font-weight: 400; margin-left: 4px; }
.onair-help-anchor:hover, .onair-help-anchor:focus-visible { color: var(--onair-accent); }
.onair-help-index-group { margin-top: 20px; }
.onair-help-topic { scroll-margin-top: 70px; }
.onair-help-table-wrap { overflow-x: auto; max-width: 100%; }
.onair-help-table { width: 100%; border-collapse: collapse; font-size: 12px; min-width: 520px; }
.onair-help-table th, .onair-help-table td { text-align: left; vertical-align: top; padding: 6px 8px; border-bottom: 1px solid var(--onair-line); }
.onair-help-table th { color: var(--onair-dim); font-weight: 600; font-size: 11px; }
.onair-help-table small { color: var(--onair-dim); }
@media (max-width: 480px) {
    .onair-help-page { padding: 12px 12px 32px; }
    .onair-help-table { min-width: 440px; }
}
@media (max-width: 900px) {
    /* settings.css hides the header station badge here; its help goes with it */
    .header .diag-badge-help { display: none; }
}
.onair-help-btn.hidden { display: none; }