/*
 * Screener — a dark room. The picture is the product, so everything else is
 * quiet: the console never puts a bright panel next to the frame, and the
 * seat page is almost entirely video.
 */

.sc-console {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: var(--sp-4);
    align-items: start;
}

.sc-seat { max-width: 900px; margin: 0 auto; display: grid; gap: var(--sp-4); }

.sc-videowrap {
    position: relative;
    background: #000;
    border-radius: var(--radius-2, 12px);
    overflow: hidden;
    aspect-ratio: 16 / 9;
}

.sc-videowrap video { width: 100%; height: 100%; display: block; background: #000; }

.sc-buffer {
    position: absolute;
    inset: auto 0 12px 0;
    text-align: center;
    color: #e2e8f0;
    font-size: 0.85rem;
    margin: 0;
}

.sc-card {
    background: var(--surface-1, #fff);
    border: 1px solid var(--border-1, #e2e8f0);
    border-radius: var(--radius-2, 12px);
    padding: var(--sp-4, 16px);
    margin-bottom: var(--sp-4, 16px);
    display: grid;
    gap: var(--sp-3, 12px);
}

.sc-card__title { font-weight: 650; font-size: 0.95rem; }
.sc-card h2 { margin: 0; font-size: 1.15rem; }

.sc-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-2, 8px);
    margin: var(--sp-3, 12px) 0;
}

.sc-spacer { flex: 1 1 auto; }
.sc-cut { max-width: 160px; }
.sc-counts { font-size: 0.85rem; opacity: 0.85; }

/* Preflight ---------------------------------------------------------- */

.sc-preflight {
    border-radius: var(--radius-2, 12px);
    padding: var(--sp-3, 12px) var(--sp-4, 16px);
    border-left: 4px solid var(--border-2, #94a3b8);
    background: var(--surface-2, #f1f5f9);
    font-size: 0.9rem;
}

.sc-preflight.is-ok { border-left-color: #15803d; }
.sc-preflight.is-bad { border-left-color: #b91c1c; }
.sc-preflight ul { margin: var(--sp-2, 8px) 0 0; padding-left: 1.1rem; }
.sc-preflight p { margin: var(--sp-2, 8px) 0 0; }

.sc-fix {
    margin: var(--sp-3, 12px) 0 0;
    padding: var(--sp-2, 8px);
    background: #0f172a;
    color: #e2e8f0;
    border-radius: var(--radius-1, 8px);
    font-size: 0.78rem;
    overflow-x: auto;
    white-space: pre-wrap;
    word-break: break-all;
}

/* Seats and notes ----------------------------------------------------- */

.sc-seats, .sc-notes { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2, 8px); }

.sc-seat, .sc-note {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-2, 8px);
    padding: var(--sp-2, 8px) var(--sp-3, 12px);
    border-radius: var(--radius-1, 8px);
    background: var(--surface-2, #f1f5f9);
    font-size: 0.85rem;
}

li.sc-seat { display: flex; }
.sc-seat.is-waiting { background: #fef3c7; }
.sc-seat span { opacity: 0.8; }
.sc-seat .btn { margin-left: auto; }

.sc-note { align-items: flex-start; }
.sc-note p { margin: 0; flex: 1 1 200px; }
.sc-note.is-addressed { opacity: 0.6; }
.sc-note.is-open { border-left: 3px solid #b45309; }

.sc-tc { font-family: var(--font-mono, ui-monospace, monospace); font-size: 0.78rem; }

.sc-receipt {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    gap: 4px var(--sp-3, 12px);
    margin: 0;
    font-size: 0.85rem;
}

.sc-receipt dt { opacity: 0.7; }
.sc-receipt dd { margin: 0; font-family: var(--font-mono, ui-monospace, monospace); overflow-wrap: anywhere; }

.sc-toast {
    position: fixed;
    left: 50%;
    bottom: 24px;
    transform: translateX(-50%);
    max-width: min(560px, calc(100vw - 32px));
    padding: 12px 16px;
    border-radius: var(--radius-2, 12px);
    background: #0f172a;
    color: #f8fafc;
    font-size: 0.9rem;
    z-index: 60;
}

.sc-toast.is-ok { background: #14532d; }
.sc-toast.is-warn { background: #78350f; }
.sc-toast.is-error { background: #7f1d1d; }

@media (max-width: 900px) {
    .sc-console { grid-template-columns: minmax(0, 1fr); }
}