/* ============================================================
   MISSION FLOW — Admin Panel Stylesheet
   Clean, functional dark interface
   ============================================================ */

/* ---- Daylight Pro tokens (HANDOFF.md §1) — admin defaults LIGHT. ------
   Legacy variable names alias onto the new tokens so the whole console
   re-skins from one place; body[data-theme="dark"] flips the palette. */
:root {
    --bg: #f6f5f2;
    --surface: #fff;
    --ink: #1d232b;
    --mut: #6e7681;
    --faint: #9aa0a8;
    --line: rgba(0, 0, 0, .09);
    --track: #e4e1da;
    --chip: #eceae4;
    --accent: #2f5fa8;
    --accent-ink: #fff;
    --tint: #e8eefb;
    --choice-a: #2f5fa8;
    --choice-b: #b07f2f;
    --choice-c: #3f8f5f;
    --choice-d: #b3383f;
    --choice-e: #7a3fb0;
    --choice-f: #0f7a85;
    --choice-g: #6b6a10;
    --choice-h: #5e5e5e;

    /* Legacy aliases */
    --primary: var(--accent);
    --primary-dim: var(--tint);
    --secondary: #b07f2f;
    --danger: #b3383f;
    --danger-dim: rgba(179, 56, 63, .12);
    --success: #3f8f5f;
    --bg-body: var(--bg);
    --bg-sidebar: var(--surface);
    --bg-card: var(--surface);
    --bg-input: var(--bg);
    --text-primary: var(--ink);
    --text-secondary: var(--mut);
    --text-dim: var(--faint);
    --border: var(--line);
    --font-heading: 'Archivo', system-ui, sans-serif;
    --font-mono: 'Archivo', system-ui, sans-serif;
}

body[data-theme="dark"] {
    --bg: #171b21;
    --surface: #20252d;
    --ink: #eceef1;
    --mut: #8a919b;
    --faint: #69737f;
    --line: rgba(255, 255, 255, .08);
    --track: #2b323c;
    --chip: #2b323c;
    --accent: #7fa7e0;
    --accent-ink: #171b21;
    --tint: rgba(127, 167, 224, .14);
    --choice-a: #7fa7e0;
    --choice-b: #e0b97f;
    --choice-c: #8fd0a8;
    --choice-d: #e09a9f;
    --choice-e: #c9a0e8;
    --choice-f: #6fcfd6;
    --choice-g: #d6e46f;
    --choice-h: #c8c8c8;
    --secondary: #e0b97f;
    --danger: #e09a9f;
    --success: #8fd0a8;
    /* Aliases re-declared: var() chains compute where declared, so
       the :root copies freeze to light unless re-stated here. */
    --primary: var(--accent);
    --primary-dim: var(--tint);
    --bg-body: var(--bg);
    --bg-sidebar: var(--surface);
    --bg-card: var(--surface);
    --bg-input: var(--bg);
    --text-primary: var(--ink);
    --text-secondary: var(--mut);
    --text-dim: var(--faint);
    --border: var(--line);
}

*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    height: 100%;
    overflow: hidden;
}

body {
    background: var(--bg-body);
    color: var(--text-primary);
    font-family: var(--font-heading);
    display: flex;
    -webkit-font-smoothing: antialiased;
}

/* ============ Sidebar ============ */

.sidebar {
    width: 300px;
    height: 100vh;
    background: var(--bg-sidebar);
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    flex-shrink: 0;
}

.sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.2rem;
    border-bottom: 1px solid var(--border);
}

.sidebar-brand {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--primary);
    letter-spacing: 0.2em;
    display: flex;
    align-items: center;
    gap: 0.55rem;
    margin: 0;
}

/* Shared inline brand glyph — sized for ~one cap-height beside the wordmark. */
.brand-glyph {
    width: 1.7em;
    height: 1.7em;
    flex-shrink: 0;
    display: block;
}

.connection-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--success);
}

/* ---- Sidebar footer (version + update chip) ---- */
.sidebar-footer {
    margin-top: auto;
    padding: 0.8rem 1.2rem 1rem;
    border-top: 1px solid var(--border);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--font-mono, 'Share Tech Mono', monospace);
    font-size: 0.7rem;
    letter-spacing: 0.15em;
    color: var(--text-dim, #5f6368);
}
.version-chip {
    cursor: pointer;
    transition: color 0.15s;
}
.version-chip:hover { color: var(--primary, #00e5ff); }
.update-chip {
    background: var(--secondary, #ff6f00);
    color: var(--bg-body, #0a0e17);
    padding: 0.15rem 0.5rem;
    border-radius: 3px;
    cursor: pointer;
    font-weight: 700;
    letter-spacing: 0.1em;
    animation: pulse-update 2s ease-in-out infinite;
}
@keyframes pulse-update {
    0%, 100% { box-shadow: 0 0 0 rgba(255, 111, 0, 0); }
    50%      { box-shadow: 0 0 12px rgba(255, 111, 0, 0.55); }
}

.connection-dot.reconnecting { background: var(--secondary); }
.connection-dot.disconnected { background: var(--danger); }

.sidebar-panel {
    padding: 1rem 1.2rem;
    flex: 1;
}

.panel-title {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: var(--text-dim);
    letter-spacing: 0.2em;
    margin-bottom: 0.8rem;
}

/* Title row: lets us put a small action button (e.g. + NEW / EDIT) next to
   the section heading without disturbing the heading's vertical rhythm. */
.panel-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.8rem;
}
.panel-title-row .panel-title { margin-bottom: 0; }
.btn-ghost {
    background: transparent;
    border: 1px solid var(--primary-dim, var(--tint));
    color: var(--primary, #00e5ff);
    text-decoration: none;
}
.btn-ghost:hover {
    background: var(--primary-dim, var(--tint));
    color: var(--primary, #00e5ff);
}

.panel-subtitle {
    font-family: var(--font-mono);
    font-size: 0.65rem;
    color: var(--text-dim);
    letter-spacing: 0.15em;
    margin-bottom: 0.6rem;
}

/* Scenario list */
.scenario-list {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.scenario-card {
    padding: 0.45rem 0.6rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 6px;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
}

.scenario-card:hover {
    border-color: var(--primary-dim);
    background: var(--tint);
}

.scenario-card.expanded {
    border-color: var(--primary-dim);
}

.scenario-card-details {
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--border);
}

.scenario-card-start {
    margin-top: 0.55rem;
    width: 100%;
}

.scenario-card-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin-top: 0.45rem;
}
.scenario-card-chip {
    font-size: 0.7rem;
    padding: 0.12em 0.55em;
    border-radius: 999px;
    background: var(--tint);
    color: var(--primary);
    border: 1px solid var(--tint);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.scenario-card-chip.subtle {
    background: rgba(255, 255, 255, 0.04);
    color: var(--text-secondary);
    border-color: rgba(255, 255, 255, 0.08);
    text-transform: none;
    letter-spacing: 0;
}

.loading-text {
    color: var(--text-dim);
    font-size: 0.9rem;
}

/* Session info */
.session-info {
    margin-bottom: 1rem;
}

.info-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.4rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
}

.info-label {
    font-size: 0.8rem;
    color: var(--text-dim);
}

.info-value {
    font-family: var(--font-mono);
    font-size: 0.85rem;
    color: var(--text-primary);
}

.state-badge {
    padding: 0.15rem 0.5rem;
    border-radius: 3px;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.state-badge.state-lobby { background: var(--primary-dim); color: var(--primary); }
.state-badge.state-story { background: rgba(76, 175, 80, 0.15); color: var(--success); }
.state-badge.state-voting { background: rgba(255, 111, 0, 0.15); color: var(--secondary); }
.state-badge.state-vote_results { background: rgba(255, 111, 0, 0.15); color: var(--secondary); }
.state-badge.state-ending { background: rgba(255, 23, 68, 0.15); color: var(--danger); }
.state-badge.state-comparison { background: var(--tint); color: var(--primary); }

/* Buttons */
.action-buttons {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.btn {
    padding: 0.7rem 1rem;
    font-family: var(--font-heading);
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.2s;
}

.btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

.btn-primary {
    background: var(--primary);
    color: var(--bg-body);
}

.btn-primary:not(:disabled):hover {
    box-shadow: 0 0 15px var(--primary-dim);
}

.btn-secondary {
    background: var(--bg-input);
    color: var(--text-primary);
    border: 1px solid var(--border);
}

.btn-secondary:not(:disabled):hover {
    border-color: var(--primary);
}

.btn-danger {
    background: var(--danger-dim);
    color: var(--danger);
    border: 1px solid rgba(255, 23, 68, 0.3);
}

.btn-danger:not(:disabled):hover {
    background: rgba(255, 23, 68, 0.25);
}

.btn-small {
    padding: 0.45rem 0.7rem;
    font-size: 0.75rem;
    background: var(--bg-input);
    color: var(--text-secondary);
    border: 1px solid var(--border);
}

.btn-small:hover {
    border-color: var(--text-dim);
    color: var(--text-primary);
}

/* Override section */
.override-section {
    margin-bottom: 1rem;
    padding: 0.8rem;
    background: var(--bg-card);
    border-radius: 6px;
    border: 1px solid rgba(255, 111, 0, 0.2);
}

.override-section .panel-subtitle { display: flex; flex-wrap: wrap; gap: 0.3rem 0.8rem; align-items: baseline; }
.override-hint {
    font-family: var(--font-body);
    font-size: 0.8rem;
    letter-spacing: 0;
    text-transform: none;
    color: var(--text-dim);
}

.override-buttons {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0.4rem;
}
.override-btn {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.25;
}

.override-btn {
    padding: 0.5rem 0.8rem;
    font-family: var(--font-heading);
    font-size: 0.85rem;
    background: var(--bg-input);
    color: var(--text-primary);
    border: 2px solid;
    border-radius: 4px;
    cursor: pointer;
    text-align: left;
    transition: background 0.2s;
}

.override-btn:hover { background: rgba(255, 255, 255, 0.05); }
.override-btn.finish-vote { border-color: var(--primary); font-weight: 700; }
.override-btn[data-choice="a"] { border-color: var(--choice-a); }
.override-btn[data-choice="b"] { border-color: var(--choice-b); }
.override-btn[data-choice="c"] { border-color: var(--choice-c); }
.override-btn[data-choice="d"] { border-color: var(--choice-d); }
.override-btn[data-choice="e"] { border-color: var(--choice-e); }
.override-btn[data-choice="f"] { border-color: var(--choice-f); }
.override-btn[data-choice="g"] { border-color: var(--choice-g); }
.override-btn[data-choice="h"] { border-color: var(--choice-h); }

/* Quick actions */
.quick-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.5rem;
}

/* ============ Main Content ============ */

.main-content {
    flex: 1;
    height: 100vh;
    overflow-y: auto;
    padding: 1.5rem 2rem;
}

.main-placeholder {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.main-placeholder h2 {
    font-size: 1.5rem;
    color: var(--text-dim);
    margin-bottom: 0.5rem;
}

.main-placeholder p {
    color: var(--text-dim);
    font-size: 1rem;
}

/* Monitor sections */
.main-monitor {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.monitor-section {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 1.2rem 1.5rem;
}
/* Escape team/captain control rows */
.escape-team-row {
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 0.6rem 0.7rem;
    margin-bottom: 0.6rem;
}
.escape-team-head { display: flex; justify-content: space-between; align-items: baseline; gap: 0.5rem; margin-bottom: 0.45rem; }
.escape-team-name { font-weight: 700; letter-spacing: 0.04em; }
.escape-team-meta { font-family: var(--font-mono, monospace); font-size: 0.72rem; color: var(--text-dim, #5f6368); }
.escape-team-controls { display: flex; gap: 0.4rem; margin-top: 0.35rem; }
.escape-team-controls select,
.escape-team-controls input[type="text"] {
    flex: 1; min-width: 0;
    background: var(--bg-input, #222838);
    border: 1px solid var(--border);
    color: var(--text-primary, #e8eaed);
    padding: 0.4rem 0.5rem;
    border-radius: 4px;
    font-size: 0.8rem;
}

.section-title {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: var(--text-dim);
    letter-spacing: 0.2em;
    margin-bottom: 0.8rem;
}

/* Node display */
.node-title {
    font-size: 1.2rem;
    color: var(--primary);
    font-weight: 600;
    margin-bottom: 0.5rem;
}

/* The narrative and the facilitator's notes keep the line breaks typed in the
   editor, as every screen does (tests/test_e2e_line_breaks.py). The scenario
   cards show no description since 14 Oct: their tagline is one line. */
.node-narrative,
#monitor-notes-text {
    white-space: pre-line;
}
.node-narrative {
    font-size: 0.95rem;
    color: var(--text-secondary);
    line-height: 1.5;
}

/* Vote progress */
.vote-progress {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 0.8rem;
}

.progress-bar-track {
    flex: 1;
    height: 8px;
    background: var(--bg-input);
    border-radius: 4px;
    overflow: hidden;
}

.progress-bar-fill {
    height: 100%;
    background: var(--primary);
    border-radius: 4px;
    transition: width 0.3s ease;
    width: 0%;
}

.progress-text {
    font-family: var(--font-mono);
    font-size: 0.8rem;
    color: var(--text-secondary);
    white-space: nowrap;
}

.monitor-vote-bars {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.monitor-bar-row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.monitor-bar-letter {
    font-family: var(--font-mono);
    font-size: 0.85rem;
    font-weight: 700;
    width: 1.5em;
}

.monitor-bar-track {
    flex: 1;
    height: 18px;
    background: var(--bg-input);
    border-radius: 3px;
    overflow: hidden;
}

.monitor-bar-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.4s ease;
    width: 0%;
}

.monitor-bar-count {
    font-family: var(--font-mono);
    font-size: 0.8rem;
    color: var(--text-secondary);
    width: 3em;
    text-align: right;
}

.timer-display-small {
    font-family: var(--font-mono);
    font-size: 0.9rem;
    color: var(--primary);
    margin-top: 0.5rem;
}

/* Join info — lives in the narrow ROOM rail: wrap instead of clipping the
   code/URL when the QR + code don't fit side by side. */
.join-info-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 1.2rem;
    align-items: center;
}

.join-details {
    flex: 1;
    min-width: 130px;
}

.qr-preview img {
    width: 120px;
    height: 120px;
    border-radius: 4px;
}

.join-code-display {
    font-family: var(--font-mono);
    font-size: clamp(1.25rem, 1.5vw, 1.7rem);
    font-weight: 700;
    color: var(--primary);
    letter-spacing: 0.12em;
    margin-bottom: 0.3rem;
}

.join-url-display {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--text-dim);
    word-break: break-all;
}

/* Team tracks: the answers screens' comments switch, under FLIP ALL. */
.track-comments-row { margin-top: 0.7rem; }

/* The big screen's corner QR codes switch, under the join QR. */
.corner-qr-row {
    margin-top: 0.8rem;
    padding-top: 0.8rem;
    border-top: 1px solid var(--line);
}

/* The venue Wi-Fi under the join QR (admin.js VenueWifi). */
.wifi-form {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 0.8rem;
    padding-top: 0.8rem;
    border-top: 1px solid var(--line);
}
.wifi-field {
    display: grid;
    grid-template-columns: 4.6rem minmax(0, 1fr);
    align-items: center;
    gap: 0.6rem;
}
.wifi-field span {
    font-size: 0.8rem;
    color: var(--text-secondary);
}
.wifi-field input {
    width: 100%;
    min-width: 0;
    background: var(--bg-input, #222838);
    border: 1px solid var(--border);
    color: var(--text-primary, #e8eaed);
    padding: 0.4rem 0.5rem;
    border-radius: 4px;
    font-size: 0.85rem;
}
.wifi-field input::placeholder { color: var(--text-dim); }

/* Settings */
.settings-grid {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.setting-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.setting-row label {
    font-size: 0.9rem;
    color: var(--text-secondary);
}

/* Toggle switch */
.toggle {
    position: relative;
    display: inline-block;
    width: 42px;
    height: 22px;
    cursor: pointer;
}

.toggle input { display: none; }

.toggle-slider {
    position: absolute;
    inset: 0;
    background: var(--bg-input);
    border-radius: 11px;
    transition: background 0.3s;
}

.toggle-slider::before {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--text-dim);
    top: 3px;
    left: 3px;
    transition: transform 0.3s, background 0.3s;
}

.toggle input:checked + .toggle-slider {
    background: var(--primary-dim);
}

.toggle input:checked + .toggle-slider::before {
    transform: translateX(20px);
    background: var(--primary);
}

/* Range slider */
.range-group {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.range-group input[type="range"] {
    width: 100px;
    accent-color: var(--primary);
}

.range-group span {
    font-family: var(--font-mono);
    font-size: 0.8rem;
    color: var(--text-secondary);
    width: 3em;
}

/* ============ Facilitator Notes ============ */
.facilitator-notes-card { margin-top: 0.8rem; padding: 0.8rem 1rem; background: var(--secondary-dim, rgba(176, 127, 47, 0.08)); border: 1px solid var(--secondary); border-radius: 10px; }
.notes-title { font-family: var(--font-mono); font-size: 0.6rem; color: var(--secondary); letter-spacing: 0.15em; margin-bottom: 0.4rem; }
.facilitator-notes-card p { font-size: 0.85rem; color: var(--text-secondary); line-height: 1.5; }

/* ============ Responsive ============ */

@media (max-width: 768px) {
    body { flex-direction: column; }

    .sidebar {
        width: 100%;
        height: auto;
        max-height: 40vh;
        border-right: none;
        border-bottom: 1px solid var(--border);
    }

    .main-content {
        height: auto;
        flex: 1;
    }
}

/* ============ Diagnostics ============ */

.diagnostics-banner {
    background: rgba(255, 111, 0, 0.08);
    border: 1px solid rgba(255, 111, 0, 0.4);
    border-left: 4px solid var(--secondary);
    border-radius: 6px;
    padding: 0.9rem 1rem;
    margin-bottom: 1rem;
}

.diagnostics-banner-title {
    font-weight: 700;
    letter-spacing: 0.12em;
    color: var(--secondary);
    font-size: 0.85rem;
    margin-bottom: 0.5rem;
}

.diagnostics-banner-body {
    font-size: 0.85rem;
    color: var(--text-secondary);
    line-height: 1.35;
    margin-bottom: 0.5rem;
}

.diagnostics-banner-path {
    display: block;
    font-family: var(--font-mono);
    font-size: 0.78rem;
    background: rgba(0, 0, 0, 0.35);
    color: var(--text-primary);
    padding: 0.45rem 0.6rem;
    border-radius: 4px;
    word-break: break-all;
    margin-bottom: 0.5rem;
}

.diagnostics-banner-errors {
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid rgba(255, 111, 0, 0.25);
}

.diagnostics-banner-errors-title {
    font-size: 0.75rem;
    letter-spacing: 0.12em;
    color: var(--danger);
    margin-bottom: 0.35rem;
}

.diagnostics-error-row {
    font-size: 0.78rem;
    color: var(--text-secondary);
    margin-bottom: 0.25rem;
    word-break: break-word;
}

.diagnostics-error-row code {
    font-family: var(--font-mono);
    color: var(--text-primary);
}

.diagnostics-banner-actions {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.6rem;
}

.diagnostics-panel {
    margin-top: 1rem;
    padding: 0.6rem 0.8rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 0.8rem;
}

.diagnostics-panel summary {
    cursor: pointer;
    color: var(--text-secondary);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-size: 0.75rem;
    user-select: none;
}

.diagnostics-panel summary:hover {
    color: var(--primary);
}

.diagnostics-details {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 0.35rem 0.7rem;
    margin: 0.7rem 0;
}

.diagnostics-details dt {
    color: var(--text-dim);
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    align-self: start;
}

.diagnostics-details dd {
    color: var(--text-primary);
    font-family: var(--font-mono);
    font-size: 0.76rem;
    word-break: break-all;
    white-space: pre-wrap;
}

/* Data-dir fallback trail: shows the candidate paths the server tried and which
   one was selected. Helps debug locked-down domain PCs without console access. */
.diag-attempts-title {
    font-family: var(--font-mono);
    font-size: 0.65rem;
    color: var(--text-dim);
    letter-spacing: 0.18em;
    margin: 0.8rem 0 0.3rem;
}
.diag-attempts {
    list-style: none;
    padding: 0;
    margin: 0 0 0.5rem;
    font-family: var(--font-mono);
    font-size: 0.7rem;
}
.diag-attempts li {
    display: grid;
    grid-template-columns: 1rem 8rem 1fr;
    gap: 0.4rem;
    align-items: baseline;
    padding: 0.25rem 0;
    border-bottom: 1px solid rgba(255,255,255,0.04);
}
.diag-attempts .diag-attempt-marker {
    text-align: center;
    font-weight: 700;
}
.diag-attempts .diag-attempt-label { color: var(--text-secondary, #9aa0a6); }
.diag-attempts .diag-attempt-path  { color: var(--text-primary); word-break: break-all; }
.diag-attempts .diag-attempt-reason {
    grid-column: 2 / -1;
    color: var(--danger, #ff1744);
    font-size: 0.65rem;
    padding-top: 0.2rem;
}
.diag-attempts .diag-attempt-ok   .diag-attempt-marker { color: var(--success, #00c853); }
.diag-attempts .diag-attempt-fail .diag-attempt-marker { color: var(--danger, #ff1744); }
.diag-attempts .diag-attempt-fail .diag-attempt-label  { color: var(--text-dim); text-decoration: line-through; }
.diag-attempts .diag-attempt-fail .diag-attempt-path   { color: var(--text-dim); }

/* ============ Team play: roster / assignment panel ============ */
.team-assign-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin: 0.7rem 0 0.25rem;
    padding-bottom: 0.2rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.team-assign-team {
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--accent);
    font-size: 0.8rem;
}
.team-assign-head.unassigned .team-assign-team { color: var(--secondary); }
.team-assign-score {
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.8rem;
    color: #9aa0a6;
}
.team-assign-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.25rem 0;
}
.team-assign-name {
    font-size: 0.85rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* Team exercises: each device's role (captain / player / facilitator), in
   the colours of the band and badge on the device itself (voter.css). */
.team-role-tag {
    display: inline-block;
    margin-right: 0.4rem;
    padding: 0.05rem 0.4rem;
    border-radius: 999px;
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    color: #fff;
    vertical-align: 0.08em;
}
.team-role-tag.role-captain { background: #9a6200; }
.team-role-tag.role-player { background: #1e6ba8; }
.team-role-tag.role-facilitator { background: #6a3fb0; }

/* Players panel (voter:roster): one row per device with RENAME / HIDE. */
.voter-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.3rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.voter-row:last-child { border-bottom: 0; }
.voter-row.is-hidden .voter-row-name { text-decoration: line-through; opacity: 0.6; }
.voter-row.is-offline { opacity: 0.5; }
.voter-row-name {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 0.85rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.voter-row-meta {
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.75rem;
    color: #9aa0a6;
    white-space: nowrap;
}
.voter-row-actions { display: inline-flex; gap: 0.3rem; flex-shrink: 0; }
.voter-row-actions .tbtn { padding: 0.2rem 0.5rem; font-size: 0.7rem; }
.voter-panel-count { font-size: 0.75rem; color: #9aa0a6; margin: 0 0 0.3rem; }
.team-assign-sel {
    background: var(--bg-input);
    color: var(--ink);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 0.3rem 0.45rem;
    font-family: inherit;
    font-size: 0.8rem;
}

/* Amber variant of the banner error box for non-blocking QA warnings. */
.diagnostics-banner-warnings {
    border-color: rgba(255, 145, 0, 0.4);
}
.diagnostics-banner-warnings .diagnostics-banner-errors-title {
    color: var(--secondary);
}
.diag-warning-line {
    /* Was #ffcc80, a pale amber from the old dark console: unreadable on the
       light banner. The theme's amber, darkened towards the ink. */
    color: var(--secondary);
    color: color-mix(in srgb, var(--secondary) 62%, var(--text-primary));
    padding-left: 1em;
    font-size: 0.75rem;
}

/* ============================================================
   PRO-UI PASS — tokens, cockpit, toasts, motion, empty states
   ============================================================ */

/* ---- Type + spacing tokens. New/updated rules use these; legacy rules are
   migrated opportunistically as they're touched. ---- */
:root {
    --fs-xs: 0.7rem;
    --fs-sm: 0.8rem;
    --fs-md: 0.9rem;
    --fs-lg: 1.05rem;
    --fs-xl: 1.4rem;
    --sp-1: 0.25rem;
    --sp-2: 0.5rem;
    --sp-3: 0.75rem;
    --sp-4: 1rem;
    --sp-5: 1.5rem;
    --ease-snap: cubic-bezier(0.2, 0.9, 0.3, 1);
}

/* ---- Micro-motion. Small, fast, and fully disabled for reduced-motion. ---- */
.btn, .tbtn, .scenario-card, .monitor-section, .team-assign-sel {
    transition: transform 140ms var(--ease-snap), border-color 140ms ease,
                background 140ms ease, box-shadow 140ms ease, opacity 140ms ease;
}
.btn:active, .tbtn:active { transform: scale(0.97); }
.scenario-card-details { animation: mf-reveal 160ms var(--ease-snap); }
.monitor-section { animation: mf-reveal 220ms var(--ease-snap); }
@keyframes mf-reveal {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
    .btn, .tbtn, .scenario-card, .monitor-section, .team-assign-sel { transition: none; }
    .scenario-card-details, .monitor-section, .admin-toast { animation: none; }
    .btn:active, .tbtn:active { transform: none; }
}

/* ---- Icon alignment inside buttons ---- */
.btn .btn-ic, .tbtn .btn-ic {
    display: inline-flex;
    vertical-align: -2px;
    margin-right: 0.45em;
}
.mf-icon { flex-shrink: 0; }

/* ---- Toast stack ---- */
.admin-toasts {
    position: fixed;
    right: var(--sp-4);
    bottom: var(--sp-4);
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    z-index: 9000;
    pointer-events: none;
    max-width: 340px;
}
.admin-toast {
    display: flex;
    align-items: center;
    gap: 0.55em;
    padding: 0.6rem 0.9rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-left: 3px solid var(--primary);
    border-radius: 6px;
    font-size: var(--fs-sm);
    color: var(--text-primary);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
    animation: mf-toast-in 180ms var(--ease-snap);
}
.admin-toast.toast-success { border-left-color: var(--success); }
.admin-toast.toast-success .mf-icon { color: var(--success); }
.admin-toast.toast-warning { border-left-color: #ff9100; }
.admin-toast.toast-warning .mf-icon { color: #ff9100; }
.admin-toast.toast-error { border-left-color: var(--danger); }
.admin-toast.toast-error .mf-icon { color: var(--danger); }
.admin-toast.toast-info .mf-icon { color: var(--primary); }
.admin-toast.leaving { opacity: 0; transform: translateX(12px); transition: all 320ms ease; }
@keyframes mf-toast-in {
    from { opacity: 0; transform: translateX(16px); }
    to   { opacity: 1; transform: none; }
}

/* ---- Mission timeline (facilitator cockpit) ---- */
.mission-timeline {
    display: flex;
    gap: var(--sp-2);
    overflow-x: auto;
    padding: var(--sp-1) 0 var(--sp-2);
    scrollbar-width: thin;
}
.tl-node {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 0.4em;
    padding: 0.35rem 0.7rem;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--bg-card);
    font-size: var(--fs-xs);
    letter-spacing: 0.04em;
    color: var(--text-dim);
    max-width: 180px;
    white-space: nowrap;
    position: relative;
}
.tl-node .tl-label { overflow: hidden; text-overflow: ellipsis; }
.tl-node .tl-ic { display: inline-flex; }
.tl-node.done {
    color: var(--text-secondary);
    border-color: var(--tint);
}
.tl-node.done .tl-ic { color: var(--primary); }
.tl-node.current {
    color: var(--primary);
    border-color: var(--primary);
    background: var(--tint);
    box-shadow: 0 0 12px var(--tint);
    font-weight: 700;
}
/* connector dash between chips */
.tl-node + .tl-node::before {
    content: '';
    position: absolute;
    left: calc(-1 * var(--sp-2));
    top: 50%;
    width: var(--sp-2);
    height: 1px;
    background: var(--border);
}

/* ---- Dominant primary action ---- */
#btn-advance {
    font-size: var(--fs-lg);
    padding: 0.95rem 1rem;
    letter-spacing: 0.12em;
    box-shadow: 0 0 18px var(--tint);
}
#btn-advance:not(:disabled):hover { box-shadow: 0 0 26px var(--tint); }
#btn-start { font-size: var(--fs-lg); padding: 0.95rem 1rem; letter-spacing: 0.12em; }

/* ---- Skeleton loading + empty state ---- */
.skeleton-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.55rem 0.6rem;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--bg-card);
}
.skeleton-bar {
    display: block;
    height: 0.7em;
    border-radius: 4px;
    background: linear-gradient(90deg, rgba(255,255,255,0.05) 25%,
                rgba(255,255,255,0.12) 50%, rgba(255,255,255,0.05) 75%);
    background-size: 200% 100%;
    animation: mf-shimmer 1.4s ease infinite;
}
@keyframes mf-shimmer {
    from { background-position: 200% 0; }
    to   { background-position: -200% 0; }
}
@media (prefers-reduced-motion: reduce) {
    .skeleton-bar { animation: none; }
}
.main-placeholder .placeholder-glyph {
    color: var(--primary);
    opacity: 0.5;
    margin-bottom: var(--sp-4);
}
.main-placeholder h2 {
    font-size: var(--fs-xl);
    letter-spacing: 0.15em;
    color: var(--text-primary);
    margin-bottom: var(--sp-2);
}
.main-placeholder p {
    font-size: var(--fs-md);
    color: var(--text-secondary);
    line-height: 1.6;
    text-align: center;
}
/* The editor link: the page's accent, not the browser's default blue. */
.main-placeholder a { color: var(--primary); }

/* ---- PIN gate, in the mfConfirm card language ----
   The backdrop, the card's glow and the scanlines are variables an edition's
   tokens.css may set (18 Oct 2026); these are their defaults. */
.mf-auth-backdrop {
    position: fixed;
    inset: 0;
    background: var(--auth-backdrop, rgba(10, 14, 23, 0.96));
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}
.mf-auth-card {
    position: relative;
    width: min(380px, 92vw);
    padding: 2rem 2rem 1.6rem;
    text-align: center;
    background: var(--bg-card);
    border: 1px solid var(--tint);
    border-radius: 10px;
    box-shadow: var(--auth-glow, 0 0 40px var(--tint)), 0 24px 60px rgba(0, 0, 0, 0.6);
    overflow: hidden;
    animation: mf-reveal 220ms var(--ease-snap);
}
.mf-auth-scanlines {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: var(--auth-scanlines, repeating-linear-gradient(0deg,
        transparent 0 2px, rgba(255, 255, 255, 0.015) 2px 4px));
}
.mf-auth-glyph { width: 44px; height: 44px; margin-bottom: var(--sp-3); }
.mf-auth-eyebrow {
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    color: var(--primary);
    letter-spacing: 0.25em;
    margin-bottom: var(--sp-1);
}
.mf-auth-title {
    font-size: var(--fs-xl);
    font-weight: 700;
    letter-spacing: 0.2em;
    color: var(--text-primary);
    margin-bottom: var(--sp-2);
}
.mf-auth-body {
    font-size: var(--fs-md);
    color: var(--text-secondary);
    margin-bottom: var(--sp-5);
}
.mf-auth-input {
    width: 100%;
    padding: 0.9rem;
    font-family: var(--font-mono);
    font-size: 1.7rem;
    letter-spacing: 0.35em;
    text-align: center;
    text-transform: uppercase;
    background: var(--bg-input);
    color: var(--text-primary);
    border: 2px solid var(--border);
    border-radius: 8px;
    outline: none;
    transition: border-color 140ms ease, box-shadow 140ms ease;
}
.mf-auth-input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 14px var(--tint);
}
.mf-auth-submit {
    width: 100%;
    margin-top: var(--sp-4);
    padding: 0.8rem;
    font-family: var(--font-heading);
    font-size: var(--fs-lg);
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--bg-body);
    background: var(--primary);
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: box-shadow 140ms ease, transform 140ms var(--ease-snap);
}
.mf-auth-submit:hover { box-shadow: 0 0 18px var(--tint); }
.mf-auth-submit:active { transform: scale(0.98); }
.mf-auth-error {
    margin-top: var(--sp-3);
    font-size: var(--fs-sm);
    color: var(--danger);
    min-height: 1.3em;
}

/* ============================================================
   DAYLIGHT ADMIN LAYOUT (HANDOFF §4 admin) — top bar · timeline
   strip · NOW column · ROOM rail · More menu. The legacy sidebar
   rules above are inert (markup no longer uses them).
   ============================================================ */
body.admin-daylight {
    flex-direction: column;
    background: var(--bg);
}

.admin-topbar {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 11px 20px;
    border-bottom: 1px solid var(--line);
    background: var(--surface);
    flex: none;
}
.admin-topbar .sidebar-brand { font-size: 12.5px; letter-spacing: 0.14em; }
.topbar-context { font-size: 13px; color: var(--mut); }
.topbar-pill {
    margin-left: auto;
    font-size: 12.5px;
    color: var(--mut);
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 5px 13px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.topbar-pill strong { color: var(--ink); letter-spacing: 0.1em; }
.topbar-pill .state-badge { color: var(--accent); font-weight: 600; }

.more-wrap { position: relative; }
.more-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 300px;
    max-height: min(78vh, 640px);
    overflow-y: auto;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 14px;
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.16);
    padding: 12px;
    z-index: 500;
}
.more-section { display: flex; flex-direction: column; gap: 6px; }
.more-section + .more-section { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.more-section .btn { justify-content: flex-start; text-align: left; width: 100%; }
.more-settings .section-title { margin-bottom: 6px; }
.more-section .section-title { margin-bottom: 4px; }
/* Exports: the whole group hides until a session has something to export
   (admin.js toggles the buttons themselves; both inline-style spellings). */
.more-exports:not(:has(.btn:not([style*="display:none"]):not([style*="display: none"]))) { display: none; }
.more-footer {
    flex-direction: row;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    color: var(--faint);
}
.more-run-meta { margin-left: auto; }

.admin-shell {
    flex: 1;
    min-height: 0;
    /* The shell itself never scrolls — each pane (scenario picker, NOW
       column, room rail) scrolls internally, so the console shows at most
       thin pane scrollbars and never a full-height page bar. */
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.no-session-panel {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}

/* Scrollbars that do remain are thin and quiet, everywhere in the console. */
.admin-daylight * { scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
.admin-daylight ::-webkit-scrollbar { width: 6px; height: 6px; }
.admin-daylight ::-webkit-scrollbar-thumb { background: var(--line); border-radius: 3px; }
.admin-daylight ::-webkit-scrollbar-track { background: transparent; }

/* ---- No-session view: single centred column ---- */
.admin-daylight .main-placeholder {
    /* Kill the legacy full-height centered placeholder: it must be a normal
       heading block, or it starves the scenario list of every pixel now that
       the shell no longer scrolls as a page. */
    height: auto;
    flex: none;
    display: block;
    text-align: center;
    max-width: 1080px;
    width: 100%;
    margin: 0 auto;
    padding: 36px 32px 10px;
}
.main-placeholder h2 { font-size: 24px; font-weight: 700; letter-spacing: -0.01em; color: var(--ink); }
.main-placeholder p { font-size: 14px; color: var(--mut); margin-top: 5px; }
.no-session-panel {
    max-width: 1080px;
    width: 100%;
    margin: 0 auto;
    padding: 16px 32px 40px;
}
.no-session-panel .diagnostics-panel { margin-top: 18px; }

/* The scenario list as storyboard cards (14 Oct, PREMIERE: scenario_cards.css
   draws the face, the department is the line above the title). Three across
   on a laptop; the loading rows and any message take the full width. A card
   keeps its paper and its accent edge when hovered or opened (the plain
   list's hover tinted both). */
.no-session-panel .scenario-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 12px;
    align-items: start;
}
.no-session-panel .scenario-list > :not(.scenario-card) { grid-column: 1 / -1; }
.scenario-card.sc-card { padding: 16px 18px; transition: box-shadow 0.15s, transform 0.15s; }
.scenario-card.sc-card:hover,
.scenario-card.sc-card.expanded {
    background: var(--surface);
    border-color: var(--line);
    border-top-color: var(--sc-accent, var(--accent));
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}
.scenario-card.sc-card:hover { transform: translateY(-1px); }
.scenario-card .scenario-card-head { display: grid; gap: 8px; min-width: 0; }
.scenario-card.sc-card .scenario-card-flag { position: absolute; top: 12px; right: 12px; }
.scenario-card.sc-card .scenario-card-details { margin-top: 4px; }
.scenario-card.sc-card .scenario-card-actions { flex-wrap: wrap; }
.scenario-card.sc-card .scenario-card-actions .scenario-card-start { flex: 1 1 100%; }

/* ---- Live view: timeline strip + NOW/ROOM grid ---- */
.live-panel { flex: 1; min-height: 0; display: flex; flex-direction: column; }
#main-monitor.main-monitor {
    flex: 1;
    min-height: 0;
    flex-direction: column;
    padding: 0;
    overflow: hidden;
}
.timeline-strip {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 20px;
    border-bottom: 1px solid var(--line);
    background: var(--surface);
    flex: none;
    overflow-x: auto;
}
.timeline-strip .section-title { margin: 0; flex: none; }
.timeline-strip .mission-timeline { display: flex; gap: 8px; flex-wrap: nowrap; overflow-x: auto; }

.monitor-grid {
    flex: 1;
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 1px;
    background: var(--line);
}
.now-column, .room-rail {
    background: var(--bg);
    padding: 22px 26px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-height: 0;
}
.room-rail { padding: 22px 20px; }
.now-column .monitor-section, .room-rail .monitor-section { margin: 0; }

.now-column .node-title { font-size: 22px; font-weight: 650; letter-spacing: -0.01em; }
.now-column .node-narrative { font-size: 14px; color: var(--mut); margin-top: 5px; }

.now-column .action-buttons {
    display: flex;
    flex-direction: row;
    gap: 10px;
    max-width: 560px;
    /* Controls sit directly under the NOW card — margin-top:auto shoved them
       to the bottom of a mostly-empty column, forcing pointless mouse travel. */
    margin-top: 4px;
}
.now-column .action-buttons .btn-primary {
    flex: 1;
    font-size: 15.5px;
    font-weight: 700;
    padding: 15px 0;
    border-radius: 11px;
}
/* The controls (override + main buttons + the narration line) are one block that
   stays in sight: in flow under the NOW card when the column has room, held to
   the column's bottom edge when it has not. Found with a full room on a 1366x768
   console: a long narrative, its notes and a vote's bars left FINISH VOTE and
   the main button under the fold. */
.now-column .now-controls {
    position: sticky;
    bottom: 0;
    z-index: 3;
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: var(--bg);
    padding: 8px 0 10px;           /* its own strip of background when it is held over the column's content */
    margin: -8px 0 -10px;          /* ...which costs nothing when it is simply in flow */
}
.now-column .now-controls .override-section { margin-bottom: 0; }
/* A node's own buttons (node_actions.js) sit in the row beside NEXT. */
.node-actions { display: contents; }
.node-actions[hidden] { display: none; }
.node-status { margin: 0; font-size: 14px; font-weight: 700; letter-spacing: 0.08em; color: var(--primary); overflow-wrap: anywhere; }
.node-status[hidden] { display: none; }
.now-column .action-buttons .node-actions .btn { white-space: nowrap; padding: 15px 16px; border-radius: 11px; font-weight: 700; }
.now-column .now-controls .narration-status { margin: 0; }

@media (max-width: 980px) {
    .monitor-grid { grid-template-columns: 1fr; }
    .room-rail { border-top: 1px solid var(--line); }
}

/* Wide screens: the room rail doubles up so Teams / Team tracks / Join sit
   side by side instead of forcing a scroll through one long column. */
@media (min-width: 1360px) {
    .monitor-grid { grid-template-columns: minmax(0, 1fr) minmax(520px, 38%); }
    .room-rail {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 12px;
        align-content: start;
    }
    .room-rail .monitor-section { min-width: 0; }
}
/* Tighter cards everywhere on the rail — density over whitespace. */
.room-rail .monitor-section { padding: 12px 14px; }
.room-rail .section-title { margin-bottom: 8px; }
.qr-preview img { width: 96px; height: 96px; }

/* ---- The rail with a full room in it (tools\populated_audit.py, sixty players, 2026-09-21) ----
   Measured before this block: at 1366x768 the two-column rail left a player's
   name 36 px ("Ais...") and, once anybody had scored, none at all ("#14 · 2 pts"
   took the room), so RENAME and HIDE could not be aimed; sixty rows of Players
   and as many of Teams stood ABOVE the Team tracks panel, which is the one a
   facilitator watches through every question window of a team exercise.

   1. A roster is something to look a device up in: it scrolls inside its own
      panel, as tall as the window allows, and never pushes the panels after it
      thousands of pixels down the rail. */
#admin-voter-list,
#admin-team-list {
    max-height: max(200px, calc(100vh - 262px));
    overflow-y: auto;
    padding-right: 4px;
}
/* Two rosters in a one-column rail share the height. */
@media (max-width: 1359px) {
    .room-rail:has(#admin-team-panel:not([hidden])) #admin-voter-list,
    .room-rail:has(#admin-team-panel:not([hidden])) #admin-team-list { max-height: max(180px, calc(50vh - 170px)); }
}
/* 2. Team tracks first, and across the whole rail: LOCKED IN per team is what
      the facilitator is looking for, and its two device pickers need the width. */
.room-rail #admin-track-panel { order: -1; }
@media (min-width: 1360px) {
    .room-rail #admin-track-panel { grid-column: 1 / -1; }
    .room-rail:has(#admin-track-panel:not([hidden])) #admin-voter-list,
    .room-rail:has(#admin-track-panel:not([hidden])) #admin-team-list { max-height: max(180px, calc(100vh - 600px)); }
}
/* 3. In a narrow panel the name has a line to itself; standing, RENAME and HIDE
      (or the team picker) go underneath it. */
#admin-voter-panel, #admin-team-panel, #admin-track-panel { container-type: inline-size; }
@container (max-width: 345px) {
    /* Players: the name on a line of its own, standing and the two buttons under it.
       A grid, so it is two lines for every row: "#25 · 10 pts · offline" gives way
       (ellipsis) rather than push RENAME / HIDE onto a third line. */
    .voter-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 0.4rem; row-gap: 0.15rem; align-items: center; }
    .voter-row-name { grid-column: 1 / -1; }
    .voter-row-meta { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
    .voter-row-actions .tbtn { padding: 0.15rem 0.4rem; font-size: 0.66rem; }
    /* Teams: the name, then its team picker across the panel. */
    .team-assign-row { flex-wrap: wrap; row-gap: 0.2rem; }
    .team-assign-name { flex: 1 0 100%; }
    .team-assign-sel { flex: 1 1 auto; min-width: 0; }
}
/* (The Team tracks panel's own narrow layout follows its rules, further down.) */

/* Guidance under a panel title: small print, not body copy. */
.admin-daylight .help-text { font-size: 0.76rem; line-height: 1.4; color: var(--mut); margin: 0 0 0.55rem; }

/* ============ TRIPWIRE track panel (per-team group rows) ============ */
.track-row {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 8px 10px;
    margin-bottom: 6px;
}
.track-row.holding { border-color: var(--accent); }
.track-row-top {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}
.track-team { font-weight: 700; font-size: 0.8rem; flex: none; }
.track-node {
    flex: 1;
    min-width: 0;
    font-size: 0.75rem;
    color: var(--mut);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.track-badge {
    flex: none;
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    background: var(--chip, var(--tint));
    color: var(--mut);
    border-radius: 5px;
    padding: 2px 7px;
}
.track-badge.hold { background: var(--tint); color: var(--accent); }
.track-row-bottom {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
}
.track-meta { font-size: 0.7rem; color: var(--mut); flex: none; }
.track-tablet-sel,
.track-fac-sel {
    flex: 1;
    min-width: 0;
    font-size: 0.72rem;
    font-family: inherit;
    padding: 3px 6px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: var(--bg);
    color: var(--ink);
}
.track-flip-row {
    display: flex;
    gap: 8px;
    margin-top: 8px;
}
.track-flip-row select {
    flex: 1;
    min-width: 0;
    font-size: 0.72rem;
    font-family: inherit;
    padding: 4px 6px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: var(--bg);
    color: var(--ink);
}
/* A narrow panel (the one-column rail of a 1280 px laptop or a tablet): measured
   there, a team's current step read "TCW..." and its two device pickers were
   20 px arrows. The step gets a line of its own under team + badge; the pickers
   get one under standing + FINISH, half each. (After the rules above on purpose:
   same specificity, so the later one wins.) */
@container (max-width: 420px) {
    .track-row-top { flex-wrap: wrap; row-gap: 2px; }
    .track-badge { margin-left: auto; }
    .track-node { order: 3; flex: 1 0 100%; }
    .track-row-bottom { flex-wrap: wrap; }
    .track-meta { flex: 1 1 auto; }
    .track-tablet-sel, .track-fac-sel { order: 2; flex: 1 1 40%; }
}

/* Expanded scenario card: START SESSION + OPEN IN EDITOR + EXPORT side by side.
   The row carries the top margin (START SESSION's own margin, from when it
   stood alone, dropped it below its neighbours), and START SESSION keeps the
   primary colour that .btn-small would otherwise paint over. */
.scenario-card-actions { display: flex; gap: 0.5rem; margin-top: 0.55rem; }
.scenario-card-actions .btn { flex: 1; margin-top: 0; }
.scenario-card-actions .scenario-card-start {
    background: var(--primary);
    border-color: var(--primary);
    color: var(--bg-body);
}

/* START FROM: which step BEGIN SCENARIO opens (a room picked up after a crash).
   The select takes the row's width and never pushes the card wider. */
.scenario-card-from {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.55rem;
    font-size: 0.75rem;
    color: var(--text-dim);
    letter-spacing: 0.04em;
    white-space: nowrap;
}
.scenario-card-from-select {
    flex: 1;
    min-width: 0;
    width: 100%;
    font: inherit;
    font-size: 0.8rem;
    color: var(--text-primary);
    background: var(--bg-body);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 0.3rem 0.4rem;
    text-overflow: ellipsis;
}

/* Remote-on-your-phone QR inside the mfAlert card (More menu). */
.mf-confirm-qr { display: block; width: 200px; height: 200px; margin: 0 auto 0.9rem; padding: 6px; background: #fff; border-radius: 8px; }

/* Q&A node: the question bank */
.qna-admin-counts { font-weight: 400; font-size: 0.78rem; color: var(--text-secondary); margin-left: 0.5rem; text-transform: none; letter-spacing: 0; }
.qna-admin-slides { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.8rem; font-size: 0.85rem; }
/* display: flex beats the hidden attribute: "Prev slide 1 / 1 Next slide" showed in every Q&A that had no slides. */
.qna-admin-slides[hidden] { display: none; }
.qna-admin-list { display: flex; flex-direction: column; gap: 0.5rem; }
.qna-admin-empty { color: var(--text-secondary); font-size: 0.85rem; margin: 0; }
.qna-admin-row { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; padding: 0.6rem 0.8rem; border-radius: 8px; background: var(--bg-input, rgba(255,255,255,0.04)); border-left: 4px solid var(--text-dim); }
.qna-admin-row.is-pending { border-left-color: var(--secondary, #ff9e40); }
.qna-admin-row.is-approved { border-left-color: var(--primary); }
.qna-admin-row.is-shown { border-left-color: var(--success, #3f8f5f); background: rgba(63, 143, 95, 0.12); }
.qna-admin-row.is-answered, .qna-admin-row.is-dismissed { opacity: 0.55; }
.qna-admin-main { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.qna-admin-text { font-size: 0.95rem; }
.qna-admin-meta { font-size: 0.72rem; color: var(--text-secondary); letter-spacing: 0.06em; }
.qna-admin-btns { display: flex; gap: 0.35rem; flex-shrink: 0; flex-wrap: wrap; justify-content: flex-end; }

/* ---- Scenario folders: import / open folder / reload, and the missing-media flag ---- */
.scenario-tools { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0 0 0.7rem; }
.scenario-card-chip.warn { background: rgba(179, 56, 63, 0.12); color: var(--danger, #b3383f); border-color: rgba(179, 56, 63, 0.4); font-weight: 700; }
.scenario-card-flag {
    flex: none; width: 1.25rem; height: 1.25rem; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 0.75rem; font-weight: 800; color: #fff; background: var(--danger, #b3383f);
}

/* A node's pictures to pick from (the Drawing wall; node_actions.js gallery). */
.node-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; margin-top: 10px; max-height: 42vh; overflow-y: auto; }
.node-gallery[hidden] { display: none; }
.node-thumb { display: flex; flex-direction: column; gap: 3px; min-width: 0; padding: 4px; border: 2px solid var(--line, rgba(127, 127, 127, 0.35)); border-radius: 8px; background: var(--surface, transparent); color: var(--ink, inherit); cursor: pointer; }
.node-thumb svg { display: block; width: 100%; height: auto; aspect-ratio: 1; border-radius: 5px; }
.node-thumb span { font-size: 11px; line-height: 1.2; overflow-wrap: anywhere; }   /* a long name wraps: never cut to "Ais..." */
.node-thumb span:empty { display: none; }
.node-thumb.is-shown { border-color: var(--primary); box-shadow: 0 0 0 2px var(--primary); }
.node-thumb.is-hidden { opacity: 0.35; }

/* Games the app saved before it stopped (save-resume.md 4.1): one row each,
   its title, code and time, RESUME and END. */
.saved-games { display: flex; flex-direction: column; gap: 0.4rem; margin: 0 0 0.9rem; }
.saved-games-title { font-weight: 700; letter-spacing: 0.08em; font-size: 0.8rem; color: var(--text-secondary); }
.saved-game {
    display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.9rem; padding: 0.55rem 0.8rem;
    background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px; color: var(--text-primary);
}
.saved-game-title { font-weight: 700; flex: 1 1 12rem; min-width: 0; overflow-wrap: anywhere; }
.saved-game-code { font-family: var(--font-mono, monospace); letter-spacing: 0.12em; color: var(--primary); }
.saved-game-time { color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.saved-game-actions { display: flex; gap: 0.4rem; margin-left: auto; }

/* A removed player (REMOVE on the players panel, save-resume.md 2.4). */
.voter-row.is-removed .voter-row-name { text-decoration: line-through; opacity: 0.6; }
/* With REMOVE beside RENAME and HIDE the narrow panel cannot hold the standing
   and three buttons on one line: the name shares the first line with the
   standing, the buttons take the second (still two lines a row). */
@container (max-width: 345px) {
    .voter-row-name { grid-column: 1; }
    .voter-row-meta { grid-column: 2; overflow: visible; }
    .voter-row-actions { grid-column: 1 / -1; justify-self: end; }
}