/* The hidden attribute must actually hide.
   [hidden] works only because the UA stylesheet says `display: none`, so ANY author
   rule that sets display on the same element wins — and this file sets display on
   .stage video, .rv-grid, .rv-cell-wait and .peer-strip. The result was that
   `element.hidden = true` did nothing: the single player stayed on screen underneath
   grid mode, and the "starts at" overlay never went away. One !important here is
   cheaper and safer than remembering to guard every future display rule. */
[hidden] { display: none !important; }

/* studio.css — GRC Studio specific surfaces.
   Layout and base come from chrome.css + main.css (house dark-sidebar / light
   content). The stage is deliberately dark: it is a camera preview, and a bright
   panel around a face spills light into the shot. */

/* --- sidebar nav icons -------------------------------------------------- */
/* chrome.css already lays these anchors out as flex rows and sizes any nested
   svg to 18px. Only the two numbers the icon spec differs on are restated, so
   hover/active/collapsed behaviour stays chrome's. */
.sidebar-nav a { gap: 0.625rem; }
.sidebar-nav a .nav-icon { width: 20px; height: 20px; flex: 0 0 20px; }

.studio-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(320px, 1fr);
    gap: 1.25rem;
    align-items: start;
}
@media (max-width: 980px) {
    .studio-grid { grid-template-columns: 1fr; }
}

/* Review reverses the reading order: pick a take on the left, watch and cut it on
   the right. Scoped to the class review.html adds, because studio.html shares
   .studio-grid and its stage must stay first and wide. */
.studio-grid.tracks-left {
    grid-template-columns: minmax(300px, 0.8fr) minmax(0, 1.6fr);
}
@media (max-width: 980px) {
    /* Higher specificity than the plain .studio-grid stack rule above, so it has
       to repeat it — otherwise two columns survive on a phone. */
    .studio-grid.tracks-left { grid-template-columns: 1fr; }
    /* Stacked, the video comes first: the tracks card is long, and burying the
       player under it is not what "stage" means. */
    .studio-grid.tracks-left > .stage { order: -1; }
}

/* --- stage ------------------------------------------------------------- */
.stage {
    background: #0f1215;
    border: 1px solid #23282e;
    border-radius: var(--radius-lg);
    padding: 0.75rem;
    position: relative;
}
.stage.recording { border-color: #dc2626; box-shadow: 0 0 0 1px #dc262655; }

.stage video {
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #000;
    border-radius: var(--radius-md);
    display: block;
    object-fit: cover;
}

.stage-bar {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 0.625rem;
    color: #cbd5e1;
    font-size: 0.8125rem;
}
.rec-dot {
    width: 10px; height: 10px; border-radius: 50%;
    background: #475569; flex: 0 0 auto;
}
.stage.recording .rec-dot { background: #ef4444; animation: rec-pulse 1.4s ease-in-out infinite; }
@keyframes rec-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }

.rec-timer {
    font: 600 1.0625rem/1 ui-monospace, SFMono-Regular, Menlo, monospace;
    color: #f1f5f9;
    font-variant-numeric: tabular-nums;
}
.device-detail { margin-left: auto; color: #94a3b8; font-size: 0.75rem; text-align: right; }

/* mic level meter */
.meter {
    height: 6px; margin-top: 0.5rem; border-radius: 3px;
    background: #1e242b; overflow: hidden;
}
.meter-fill {
    height: 100%; width: 0%;
    background: linear-gradient(90deg, #22c55e, #84cc16 70%, #eab308);
    transition: width 60ms linear;
}
.meter-fill.hot { background: #ef4444; }

/* --- lobby form ------------------------------------------------------- */
.field-row {
    display: flex; align-items: center; gap: 0.75rem;
    padding: 0.4rem 0;
}
.field-row label {
    flex: 0 0 8.5rem;
    font-size: 0.8125rem; font-weight: 600; color: var(--text-primary);
}
.field-row select {
    flex: 1 1 auto; min-width: 0;
    padding: 0.375rem 0.5rem;
    border: 1px solid var(--border-color); border-radius: var(--radius-sm);
    font: inherit; font-size: 0.8125rem; background: #fff;
}
.field-row input[type="checkbox"] { width: 16px; height: 16px; }
.field-actions { display: flex; gap: 0.5rem; margin: 0.75rem 0 0.25rem; }

/* --- preflight -------------------------------------------------------- */
.preflight { margin-top: 1rem; border-top: 1px solid var(--border-color); }
.pf-row {
    display: flex; gap: 0.625rem; align-items: flex-start;
    padding: 0.5rem 0; border-bottom: 1px solid var(--border-color);
}
.pf-row:last-child { border-bottom: none; }
.pf-dot {
    width: 8px; height: 8px; border-radius: 50%; margin-top: 0.375rem; flex: 0 0 auto;
}
.pf-pass .pf-dot { background: #16a34a; }
.pf-warn .pf-dot { background: #f59e0b; }
.pf-fail .pf-dot { background: #dc2626; }
.pf-body { min-width: 0; }
.pf-label { font-size: 0.8125rem; font-weight: 600; }
.pf-detail { font-size: 0.75rem; color: var(--text-muted); line-height: 1.45; }
.pf-fail .pf-detail { color: #b91c1c; }

.preflight-summary {
    margin-top: 0.75rem; font-size: 0.8125rem; font-weight: 600;
}

/* --- track health ----------------------------------------------------- */
.track-row {
    display: flex; align-items: baseline; gap: 0.75rem;
    padding: 0.4375rem 0; border-bottom: 1px solid var(--border-color);
    font-size: 0.8125rem;
}
.track-row:last-of-type { border-bottom: none; }
.track-kind {
    flex: 0 0 3.5rem; font-weight: 700; text-transform: uppercase;
    font-size: 0.6875rem; letter-spacing: 0.06em; color: var(--text-muted);
}
.track-meta { font-variant-numeric: tabular-nums; }
.track-mime {
    margin-left: auto; font-size: 0.6875rem; color: var(--text-muted);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 45%;
}

.upload-line {
    margin-top: 0.75rem; padding: 0.5rem 0.625rem;
    background: var(--bg-secondary); border-radius: var(--radius-sm);
    font-size: 0.8125rem; font-variant-numeric: tabular-nums;
}
.upload-line.warn { background: #fef3c7; color: #92400e; font-weight: 600; }

/* --- banners ---------------------------------------------------------- */
.banner {
    padding: 0.625rem 0.875rem; border-radius: var(--radius-md);
    font-size: 0.8125rem; margin-bottom: 1rem; line-height: 1.5;
}
.banner-warn { background: #fef3c7; color: #92400e; border: 1px solid #fcd34d; }
.banner-info { background: #dbeafe; color: #1e40af; border: 1px solid #93c5fd; }
.banner-info.done { background: #dcfce7; color: #166534; border-color: #86efac; }

.hint {
    margin: 0.875rem 0 0; font-size: 0.75rem; color: var(--text-muted); line-height: 1.5;
}

/* --- sessions table --------------------------------------------------- */
.session-link { font-weight: 600; text-decoration: none; color: var(--color-primary, #4f46e5); }
.session-link:hover { text-decoration: underline; }
.session-id {
    font-size: 0.6875rem; color: var(--text-muted);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.row-actions { text-align: right; white-space: nowrap; }

.state-badge {
    display: inline-block; padding: 0.125rem 0.5rem; border-radius: 999px;
    font-size: 0.6875rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.04em; background: #e2e8f0; color: #475569;
}
.state-recording { background: #fee2e2; color: #b91c1c; }
.state-uploading { background: #fef3c7; color: #92400e; }
.state-complete { background: #dcfce7; color: #166534; }
.state-assembled { background: #dbeafe; color: #1e40af; }
.state-abandoned { background: #f1f5f9; color: #94a3b8; }

.btn-danger {
    background-color: #dc2626; color: #fff; border: none;
    padding: 0.5rem 1rem; border-radius: var(--radius-md);
    font: inherit; font-size: 0.875rem; font-weight: 600; cursor: pointer;
}
.btn-danger:hover:not(:disabled) { background-color: #b91c1c; }
.btn-danger:disabled { opacity: 0.5; cursor: wait; }

.muted { color: var(--text-muted); font-size: 0.8125rem; }

/* --- green room peer tiles (Phase 3) ---------------------------------- */
/* Preview only. Nothing here is recorded — each participant records locally,
   which is why these are deliberately small and low-bitrate. */
.peer-strip {
    display: flex; gap: 0.5rem; margin-top: 0.625rem;
    overflow-x: auto; padding-bottom: 0.25rem;
}
.peer-strip:empty { display: none; }
.peer-tile { position: relative; flex: 0 0 auto; }
.peer-tile video {
    width: 148px; aspect-ratio: 16/9; background: #000;
    border-radius: var(--radius-sm); border: 1px solid #2a3038;
    display: block; object-fit: cover;
}
.peer-label {
    position: absolute; bottom: 3px; left: 4px;
    font-size: 0.5625rem; font-family: ui-monospace, Menlo, monospace;
    color: #e2e8f0; background: rgba(0,0,0,0.65);
    padding: 1px 4px; border-radius: 2px;
}
.mesh-status {
    margin-top: 0.5rem; font-size: 0.6875rem; color: #94a3b8;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    line-height: 1.5; word-break: break-word;
}

/* Screen share status (Phase 4) */
.screen-note {
    margin-top: 0.5rem; padding: 0.4375rem 0.625rem;
    background: var(--bg-secondary); border-radius: var(--radius-sm);
    font-size: 0.75rem; color: var(--text-muted); line-height: 1.45;
}

/* Stage-bar action buttons. These sit on the stage rather than in the lobby card
   because the lobby is hidden during recording, and screen sharing is most wanted
   mid-take. */
.btn-stage {
    font: inherit; font-size: 0.6875rem; font-weight: 600;
    padding: 0.25rem 0.5rem; border-radius: var(--radius-sm);
    border: 1px solid #3a4148; background: #232830; color: #e6e9ec;
    cursor: pointer; white-space: nowrap;
}
.btn-stage:hover:not(:disabled) { background: #2c323b; }
.btn-stage:disabled { opacity: 0.4; cursor: not-allowed; }
.btn-stage.active { background: #c2410c; border-color: #c2410c; }

/* --- review surface --------------------------------------------------- */
.rv-select {
    font: inherit; font-size: 0.8125rem; padding: 0.4rem 0.5rem;
    border: 1px solid var(--border-color); border-radius: var(--radius-md);
    background: #fff; max-width: 22rem;
}
.rv-track {
    display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap;
    padding: 0.625rem 0; border-bottom: 1px solid var(--border-color);
}
.rv-track:last-child { border-bottom: none; }
.rv-track.active { background: #f1f5ff; margin: 0 -0.5rem; padding: 0.625rem 0.5rem; border-radius: var(--radius-sm); }
.rv-track-main { flex: 1 1 12rem; min-width: 0; }
.rv-track-title { font-size: 0.8125rem; font-weight: 600; }
.rv-track-meta { font-size: 0.75rem; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.rv-track-mime {
    font-size: 0.6875rem; color: var(--text-muted);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rv-gap {
    flex: 1 1 100%; font-size: 0.6875rem; color: #b91c1c;
    background: #fef2f2; padding: 0.25rem 0.5rem; border-radius: var(--radius-sm);
}
/* An audio-only track has no picture; a tall black box just looks broken. */
#rv-video.audio-only { aspect-ratio: auto; height: 56px; }

/* --- review: visual track cards + synced grid -------------------------- */
/* A vertical LIST, not a tile grid: thumbnail left, details right. Full names fit
   instead of truncating, and the scan order matches the timeline rows beside it. */
.rv-cards { display: flex; flex-direction: column; gap: 0.625rem; }
.rv-card {
    border: 1px solid var(--border-color); border-radius: var(--radius-md);
    overflow: hidden; cursor: pointer; background: #fff; position: relative;
    transition: border-color .12s, box-shadow .12s;
    display: flex; align-items: stretch;
}
.rv-card:hover { border-color: #94a3b8; box-shadow: var(--shadow-sm); }
.rv-card.active { border-color: #c2410c; box-shadow: 0 0 0 1px #c2410c55; }
.rv-thumb {
    position: relative; aspect-ratio: 16/9; background: #0f1215;
    display: flex; align-items: center; justify-content: center;
    flex: 0 0 150px;
}
.rv-card .rv-card-body { flex: 1 1 auto; min-width: 0; align-self: center; }
.rv-card .rv-card-title { white-space: normal; }
.rv-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rv-thumb.is-audio { background: linear-gradient(135deg, #1e293b, #0f1215); }
.rv-thumb-kind {
    position: absolute; bottom: 4px; left: 5px; z-index: 1;
    font-size: 0.5625rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
    color: #e2e8f0; background: rgba(0,0,0,.65); padding: 1px 5px; border-radius: 2px;
}
.rv-card-body { padding: 0.4375rem 0.5rem; }
.rv-card-title { font-size: 0.75rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rv-card-meta { font-size: 0.625rem; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.rv-card-gap {
    position: absolute; top: 4px; right: 4px;
    font-size: 0.5625rem; font-weight: 700; color: #fff; background: #dc2626;
    padding: 1px 5px; border-radius: 2px;
}
.rv-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0.5rem; }
.rv-cell { position: relative; }
.rv-cell video {
    width: 100%; aspect-ratio: 16/9; background: #000;
    border-radius: var(--radius-sm); display: block; object-fit: contain;
}
.rv-cell-label {
    position: absolute; bottom: 4px; left: 5px;
    font-size: 0.625rem; color: #e2e8f0; background: rgba(0,0,0,.7);
    padding: 1px 5px; border-radius: 2px;
}
.rv-cell-err { font-size: 0.625rem; color: #fca5a5; padding: 0.25rem; }

/* Session-timeline cues in Review */
.rv-card-offset { font-size: 0.625rem; color: #c2410c; font-weight: 600; }
.rv-cell-wait {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    background: rgba(0,0,0,.72); color: #e2e8f0; font-size: 0.75rem; font-weight: 600;
    border-radius: var(--radius-sm); pointer-events: none;
}

/* --- timeline ---------------------------------------------------------- */
/* The timeline is an EDITING surface, not a monitor: it is read for hours, dense
   with small type, and it lives in the same page as the house light content area.
   So it is light — only the program monitor and the <video> elements stay black,
   because a bright surround changes how the picture itself reads. Every block
   colour below is a 600/700-weight fill, dark enough to carry white labels on a
   white panel. */
.tl-wrap { margin-top: 0.75rem; background: var(--bg-primary); border: 1px solid var(--border-color);
           border-radius: var(--radius-md); padding: 0.5rem; }
/* Two rows: what changes the EDIT on top, what changes the VIEW underneath. */
.tl-toolbar { margin-bottom: 0.5rem; }
.tl-toolbar-row { display: flex; align-items: center; gap: 0.375rem;
                  flex-wrap: wrap; row-gap: 0.375rem; }
.tl-toolbar-row + .tl-toolbar-row { margin-top: 0.375rem; }
.tl-hint { margin-left: auto; font-size: 0.6875rem; color: var(--text-muted); }
.tl-root { display: flex; align-items: stretch; }
.tl-labels { flex: 0 0 104px; }
.tl-scroller { flex: 1 1 auto; min-width: 0; overflow-x: auto; overflow-y: hidden; }
.tl-lanes { position: relative; cursor: crosshair; background: var(--bg-primary); }

.tl-label { height: 32px; display: flex; flex-direction: column; justify-content: center;
            padding-right: 6px; border-bottom: 1px solid var(--border-color); }
.tl-label-main { font-size: 0.6875rem; font-weight: 600; color: var(--text-primary);
                 overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tl-label-sub { font-size: 0.5625rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; }

.tl-ruler { position: relative; height: 26px; border-bottom: 1px solid var(--border-color);
            background: var(--bg-secondary); }
.tl-tick { position: absolute; top: 0; bottom: 0; border-left: 1px solid #cbd5e1; }
.tl-tick-label { position: absolute; left: 3px; top: 5px; font-size: 0.5625rem; color: var(--text-muted);
                 font-family: ui-monospace, Menlo, monospace; }

.tl-lane { position: relative; height: 32px; border-bottom: 1px solid var(--border-color); }
.tl-empty { position: absolute; left: 6px; top: 7px; font-size: 0.625rem; color: #94a3b8; }

.tl-cut, .tl-clip, .tl-gap { position: absolute; top: 3px; bottom: 3px; border-radius: 2px;
                             overflow: hidden; }
.tl-cut-label, .tl-clip-label { position: absolute; left: 4px; top: 3px; font-size: 0.5625rem;
    color: rgba(255,255,255,.92); white-space: nowrap; font-weight: 600; }
/* One colour per speaker, stable across the whole timeline. Green and cyan are a
   step darker than their brand shades so the white clip label still clears 4.5:1
   now that these blocks sit on white instead of black. */
.tl-cut.spk-0 { background: #2563eb; }
.tl-cut.spk-1 { background: #15803d; }
.tl-cut.spk-2 { background: #9333ea; }
.tl-cut.spk-3 { background: #0e7490; }
.tl-cut.is-wide { background: #475569; }
.tl-cut.is-screen { background: #c2410c; }

/* Source media strips: what EXISTS, as opposed to what is on air. Pale tints of
   the same hues, so a strip reads as background against the solid on-air cell. */
.tl-clip.tl-av { background: #bfdbfe; border: 1px solid #2563eb; }
.tl-clip.tl-screen { background: #fed7aa; border: 1px solid #c2410c; }
.tl-clip.tl-aud { background: #bbf7d0; border: 1px solid #15803d; }

.tl-gap { background: repeating-linear-gradient(45deg, #f87171, #f87171 4px, #fee2e2 4px, #fee2e2 8px);
          border: 1px solid #dc2626; }

.tl-playhead { position: absolute; top: 0; bottom: 0; width: 2px; background: #dc2626;
               pointer-events: none; z-index: 5; }

/* --- editor ------------------------------------------------------------ */
/* Program clips are interactive: select by click, trim by the edges. */
.tl-program .tl-cut { cursor: pointer; }
.tl-program .tl-cut.selected { outline: 2px solid #d97706; outline-offset: -1px; z-index: 2; }
.tl-h { position: absolute; top: 0; bottom: 0; width: 8px; opacity: 0; cursor: ew-resize; }
.tl-h-l { left: 0; border-left: 3px solid rgba(255,255,255,.85); }
.tl-h-r { right: 0; border-right: 3px solid rgba(255,255,255,.85); }
.tl-program .tl-cut:hover .tl-h, .tl-program .tl-cut.selected .tl-h { opacity: 1; }
/* Live timecode while trimming. */
.tl-tip { position: absolute; top: -2px; transform: translateX(-50%); z-index: 8;
          background: #fbbf24; color: #1c1917; font-size: 0.625rem; font-weight: 700;
          padding: 1px 5px; border-radius: 3px; pointer-events: none; white-space: nowrap;
          font-family: ui-monospace, Menlo, monospace; }
.tl-mini-btn { background: none; border: none; padding: 0; color: #1d4ed8;
               font-size: 0.625rem; cursor: pointer; text-decoration: underline; }
.tl-sep { width: 1px; height: 16px; background: #cbd5e1; margin: 0 0.25rem; }
/* The toolbar lives inside the now-light panel, so its chips flip with it. Scoped
   to .tl-toolbar on purpose: the same .btn-stage class is used on the Record
   page's stage bar, which is over a camera preview and stays dark. */
.tl-toolbar .btn-stage { background: #fff; border-color: #cbd5e1; color: #334155; }
.tl-toolbar .btn-stage:hover:not(:disabled) { background: var(--bg-secondary); border-color: #94a3b8; }
.tl-toolbar .tl-btn-primary { background: #1d4ed8; border-color: #1d4ed8; color: #fff; }
.tl-toolbar .tl-btn-primary:hover:not(:disabled) { background: #1e40af; border-color: #1e40af; }
.tl-toolbar .tl-btn-save:not(:disabled) { background: #b45309; border-color: #b45309; color: #fff; }
.tl-toolbar .tl-btn-save:not(:disabled):hover { background: #92400e; border-color: #92400e; }
/* Icon + label chips. The icon inherits colour, so the active state flips it too. */
.tl-toolbar .btn-icon { display: inline-flex; align-items: center; gap: 0.3rem; }
.tl-toolbar .btn-icon svg { width: 15px; height: 15px; flex: none; fill: currentColor; }

/* Program monitor: all tracks stacked, only .active visible. The videos keep
   playing when hidden — visibility is the switch, which is what makes cuts
   instant instead of waiting on a seek. */
.pm-stage { position: relative; aspect-ratio: 16 / 9; background: #000;
            border-radius: var(--radius-md); overflow: hidden; }
.pm-stage video { position: absolute; inset: 0; width: 100%; height: 100%;
                  object-fit: contain; visibility: hidden; }
.pm-stage video.active { visibility: visible; }
.pm-label { position: absolute; left: 10px; bottom: 8px; z-index: 3;
            background: rgba(0,0,0,.65); color: #e2e8f0; font-size: 0.75rem;
            font-weight: 600; padding: 2px 8px; border-radius: 4px;
            font-family: ui-monospace, Menlo, monospace; }
/* A cell too narrow to hold two grips gets none — they would meet in the middle
   and there would be no body left to click. (.tl-on is where the class is
   actually set; .tl-cut is kept so the Output lane behaves the same way.) */
.tl-cut.no-handles .tl-h, .tl-on.no-handles .tl-h { display: none; }

/* MANUAL TRIM. Off, the grips are an invisible hot zone and a click selects the
   column. On, they are painted and widened, so the gesture is visible before you
   commit to it. The drag itself is unchanged either way. */
.tl-root.trim-mode .tl-on.is-primary { cursor: ew-resize; }
.tl-root.trim-mode .tl-on.is-primary .tl-h { opacity: 1; width: 14px; }
.tl-root.trim-mode .tl-on.is-primary .tl-h-l { border-left-width: 4px; }
.tl-root.trim-mode .tl-on.is-primary .tl-h-r { border-right-width: 4px; }
.tl-root.trim-mode .tl-off { opacity: 0; pointer-events: none; }
/* Output lane: the cuts packed gap-free — the video you will actually get. Its
   lane is a shade off white so the packed blocks read as sitting IN a track. */
.tl-output { background: #f1f5f9; cursor: pointer; }
.tl-oblock { position: absolute; top: 3px; bottom: 3px; border-radius: 2px; overflow: hidden;
             opacity: 0.95; }
.tl-oblock.spk-0 { background: #2563eb; }
.tl-oblock.spk-1 { background: #15803d; }
.tl-oblock.spk-2 { background: #9333ea; }
.tl-oblock.spk-3 { background: #0e7490; }
.tl-oblock.is-wide { background: #475569; }
.tl-oblock.is-screen { background: #c2410c; }
.tl-oblock + .tl-oblock { border-left: 1px solid rgba(255,255,255,.35); }
.tl-out-playhead { position: absolute; top: 0; bottom: 0; width: 2px; background: #d97706;
                   pointer-events: none; z-index: 4; }
.tl-gap { cursor: pointer; }
/* Brightening a light hatch just erases it — darken to signal hover instead. */
.tl-gap:hover { filter: brightness(0.94) saturate(1.2); }
/* Source picker for the selected clip. */
.tl-src { display: inline-flex; align-items: center; gap: 0.3rem; margin-left: 0.25rem; }
.tl-src-label { font-size: 0.6875rem; color: var(--text-muted); }
.tl-src-btn.active { background: #c2410c; border-color: #c2410c; }
/* Inset preview: screen big, speaker small in the corner — same as the render. */
.pm-stage video.pip { visibility: visible; inset: auto; right: 12px; bottom: 12px;
                      width: 26%; height: auto; aspect-ratio: 16 / 9; object-fit: cover;
                      border: 2px solid rgba(255,255,255,.55); border-radius: 6px; z-index: 2; }
.btn-line-danger { color: #dc2626; border-color: #fecaca; }
.btn-line-danger:hover:not(:disabled) { background: #fef2f2; border-color: #dc2626; }
/* Side-by-side preview halves; louder selection everywhere a clip can be clicked. */
.pm-stage video.split-l, .pm-stage video.split-r { visibility: visible; inset: auto;
  top: 0; bottom: 0; height: 100%; width: 50%; object-fit: cover; }
.pm-stage video.split-l { left: 0; border-right: 1px solid rgba(255,255,255,.4); }
.pm-stage video.split-r { right: 0; }
.tl-program .tl-cut.selected, .tl-oblock.selected {
  outline: 2px solid #d97706; outline-offset: -1px; z-index: 3;
  box-shadow: 0 0 0 3px rgba(217, 119, 6, .35); }
.tl-oblock { cursor: pointer; }
/* --- switcher grid ------------------------------------------------------ */
/* The toolbar must never overflow the panel again. */
.tl-toolbar-row { flex-wrap: wrap; row-gap: 0.375rem; }
.tl-hint { flex: 1 1 240px; min-width: 0; }
/* Layout row: one chip per moment saying HOW sources share the frame. */
.tl-layout { background: #f1f5f9; }
.tl-lchip { position: absolute; top: 4px; bottom: 4px; border-radius: 3px;
            background: #fff; border: 1px solid #cbd5e1; cursor: pointer;
            display: flex; align-items: center; justify-content: center; overflow: hidden; }
.tl-lchip:hover { border-color: #64748b; }
.tl-lchip-txt { font-size: 0.5625rem; font-weight: 700; color: #334155;
                letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
.tl-lchip.selected { outline: 2px solid #d97706; outline-offset: -1px;
                     box-shadow: 0 0 0 3px rgba(217,119,6,.35); z-index: 3; }
/* Source rows are switch surfaces: pale media strip, saturated on-air cells. The
   dimming is much lighter than it was on black — 0.28 of a pale tint on white is
   indistinguishable from the panel, so the strip would vanish entirely. */
.tl-src-row { cursor: copy; }
.tl-src-row .tl-clip { opacity: 0.6; pointer-events: none; }
.tl-src-row:hover .tl-clip { opacity: 0.8; }
/* CLIPPED, not visible: a long label in the LAST cell used to spill past the lane
   and give the whole timeline 32px of phantom horizontal scroll. The ✕ sits inside
   the cell's own box, so nothing is lost by clipping. */
.tl-on { position: absolute; top: 3px; bottom: 3px; border-radius: 2px;
         cursor: pointer; overflow: hidden; z-index: 1; }
.tl-on.k-av { background: #2563eb; }
.tl-on.k-screen { background: #c2410c; }
/* Inset cells stay hatched and slightly held back, but not so far back that they
   wash out against white — the white label on them has to stay legible. */
.tl-on.is-inset { top: 9px; bottom: 9px; opacity: .9;
                  background-image: repeating-linear-gradient(45deg,
                      rgba(255,255,255,.18) 0 4px, transparent 4px 8px); }
.tl-on.selected { outline: 2px solid #d97706; outline-offset: -1px;
                  box-shadow: 0 0 0 3px rgba(217,119,6,.35); z-index: 3; }
.tl-on .tl-cut-label { pointer-events: none; }
.tl-off { position: absolute; right: 1px; top: 0; width: 14px; height: 14px;
          line-height: 13px; text-align: center; font-size: 11px; font-weight: 700;
          color: #fff; background: rgba(0,0,0,.45); border-radius: 3px;
          opacity: 0; cursor: pointer; z-index: 4; }
.tl-on:hover .tl-off, .tl-on.selected .tl-off { opacity: 1; }
.tl-off:hover { background: #dc2626; }
/* Portrait preview: the monitor becomes a phone frame; sources crop to fill,
   matching the renderer. */
.pm-stage.portrait { aspect-ratio: 9 / 16; max-height: min(62vh, 640px); margin: 0 auto; }
.pm-stage.portrait video { object-fit: cover; }
.pm-stage.portrait video.pip { width: 42%; }
/* PiP positions — the same element, a different corner per cut. */
.pm-stage video.pip.pip-br { inset: auto; right: 12px; bottom: 12px; }
.pm-stage video.pip.pip-bl { inset: auto; left: 12px; bottom: 12px; }
.pm-stage video.pip.pip-tr { inset: auto; right: 12px; top: 12px; }
.pm-stage video.pip.pip-tl { inset: auto; left: 12px; top: 12px; }
.pm-stage video.pip.pip-l { inset: auto; left: 12px; top: 50%; transform: translateY(-50%); }
.pm-stage video.pip.pip-r { inset: auto; right: 12px; top: 50%; transform: translateY(-50%); }
.pm-stage video.pip.pip-top { inset: auto; left: 50%; top: 12px; transform: translateX(-50%); }
.pm-stage video.pip.pip-bottom { inset: auto; left: 50%; bottom: 12px; transform: translateX(-50%); }
/* Portrait split halves stack top/bottom, matching the vstack render. */
.pm-stage.portrait video.split-l, .pm-stage.portrait video.split-r {
    width: 100%; height: 50%; left: 0; right: auto; }
.pm-stage.portrait video.split-l { top: 0; bottom: auto; border-right: none;
    border-bottom: 1px solid rgba(255,255,255,.4); }
.pm-stage.portrait video.split-r { top: auto; bottom: 0; }
/* The audio waveform fills its lane, behind nothing — dead air is the gaps. */
.tl-wave { position: absolute; left: 0; top: 3px; pointer-events: none; opacity: .85; }

/* --- transcript panel: light theme ------------------------------------- */
/* transcript-view.js injects its own <style> at mount, which lands AFTER this
   file in the document, so a matching selector would lose on source order. Every
   rule here is therefore anchored on #tv-root (the host div review.html provides)
   purely to outrank it. Edit the colours here, not there — the module is shared. */
#tv-root .tv-panel { background: var(--bg-primary); border-color: var(--border-color); }
#tv-root .tv-body { color: var(--text-primary); }
#tv-root .tv-spk { color: var(--text-muted); }
#tv-root .tv-w:hover { background: #e2e8f0; }
/* Struck-through words must still be READABLE — they are the click target that
   restores them, so they are muted, not erased. */
#tv-root .tv-cut { color: #94a3b8; }
#tv-root .tv-now { background: #fed7aa; }
#tv-root .tv-empty { color: var(--text-muted); }
#tv-root .tv-empty code { color: #334155; background: var(--bg-secondary);
                          padding: 0 3px; border-radius: 2px; }
/* The pill is parented to <body>, not to #tv-root, so it needs a different lever:
   `body >` beats a bare class on specificity. Only the drop shadow changes — the
   pill itself is a saturated orange chip that already reads on either surface. */
body > .tv-pill { box-shadow: 0 4px 12px rgba(15, 23, 42, 0.18); }

/* The EDIT page's stage is a light panel: the dark surround only ever existed for
   the Record page's live camera preview. The program monitor and every <video>
   inside it stay black — a picture still needs a dark frame. */
.stage.stage-light { background: var(--bg-primary); border-color: var(--border-color); }
.stage.stage-light .device-detail { color: var(--text-muted); }
/* An audio lane with a waveform shows the WAVEFORM, not a flat tint behind it. */
.tl-lane.has-wave .tl-clip { background: transparent; border-color: #86efac; }
/* Audio-only card: its waveform, not an empty black rectangle. */
.rv-thumb .rv-wave { display: block; width: 100%; height: 100%; }
.rv-thumb.is-audio { background: #0b1220; }
/* Transport controls: big enough to hit without looking. */
.tl-transport { display: inline-flex; align-items: center; gap: 0.25rem; margin-right: 0.5rem; }
.tp-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; padding: 0; cursor: pointer;
    border: 1px solid var(--border-color); border-radius: var(--radius-sm);
    background: #fff; color: #334155;
}
.tp-btn:hover:not(:disabled) { background: var(--bg-secondary); border-color: #94a3b8; }
.tp-btn:disabled { opacity: .4; cursor: not-allowed; }
.tp-btn svg { width: 18px; height: 18px; fill: currentColor; }
.tp-btn.tp-play {
    width: 46px; height: 40px; background: #1d4ed8; border-color: #1d4ed8; color: #fff;
}
.tp-btn.tp-play:hover:not(:disabled) { background: #1e40af; border-color: #1e40af; }
.tp-btn.tp-play svg { width: 22px; height: 22px; }

/* --- Edit page layout ---------------------------------------------------
   Picture left, ONE tabbed side panel right, timeline spanning both below.
   The three-column version (tracks | monitor | script) starved every column:
   a 230px track card wrapped its titles to one word per line, and the timeline
   was pushed below the tallest column leaving a dead band under the video. */
.edit-layout {
    display: grid;
    grid-template-columns: minmax(0, 2.4fr) minmax(320px, 1.05fr);
    grid-template-rows: auto minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
}
/* The SCRIPT PANEL RUNS THE FULL HEIGHT, beside both the monitor and the timeline.
   The timeline gives up that width deliberately: on a long take the script is what
   you read continuously, and a tall column shows a paragraph instead of three lines.
   The timeline keeps its own horizontal scroll, so nothing is lost — only narrower. */
.edit-layout > .stage { grid-column: 1; grid-row: 1; }
.edit-layout > .side-panel { grid-column: 2; grid-row: 1 / span 2; }
.edit-layout > .tl-wrap { grid-column: 1; grid-row: 2; margin-top: 0; }

.side-panel {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    display: flex; flex-direction: column;
    /* Full height of the viewport minus the page chrome — the point of the change. */
    max-height: calc(100vh - 130px);
    height: 100%;
    overflow: hidden;
}
.side-tabs {
    display: flex; gap: 0.25rem; padding: 0.5rem 0.5rem 0;
    border-bottom: 1px solid var(--border-color); flex: 0 0 auto;
}
.side-tab {
    font: inherit; font-size: 0.8125rem; font-weight: 600;
    padding: 0.4rem 0.75rem; cursor: pointer; color: var(--text-muted);
    background: none; border: none; border-bottom: 2px solid transparent;
    margin-bottom: -1px;
}
.side-tab:hover { color: var(--text-primary); }
.side-tab.active { color: var(--text-primary); border-bottom-color: #c2410c; }
.side-body { overflow-y: auto; padding: 0.75rem; flex: 1 1 auto; min-height: 0; }
.side-body::-webkit-scrollbar { width: 10px; }
.side-body::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 5px; }
/* Inside the panel the cards are a plain list — the panel supplies the frame. */
.side-body .rv-cards { gap: 0.5rem; }
.tp-time {
    margin-left: 0.4rem; font-size: 0.75rem; color: var(--text-muted);
    font-family: ui-monospace, Menlo, monospace; font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
@media (max-width: 1100px) {
    .edit-layout { grid-template-columns: 1fr; grid-template-rows: auto auto auto; }
    .edit-layout > .stage { grid-column: 1; grid-row: 1; }
    .edit-layout > .tl-wrap { grid-column: 1; grid-row: 2; }
    .edit-layout > .side-panel { grid-column: 1; grid-row: 3; max-height: 60vh; }
}
/* Shorts: candidate clips mined from the transcript. */
.shorts-head { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.75rem; }
.short-card {
    border: 1px solid var(--border-color); border-radius: var(--radius-md);
    padding: 0.625rem 0.75rem; margin-bottom: 0.5rem; background: var(--bg-primary);
}
.short-card.active { border-color: #c2410c; box-shadow: 0 0 0 1px #c2410c33; }
.short-title { font-size: 0.8125rem; font-weight: 700; }
.short-meta { font-size: 0.6875rem; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.short-quote { font-size: 0.75rem; color: var(--text-primary); margin: 0.35rem 0;
               font-style: italic; }
.short-reason { font-size: 0.6875rem; color: var(--text-muted); }
.short-actions { display: flex; gap: 0.375rem; margin-top: 0.5rem; }
.short-actions .btn-stage { font-size: 0.6875rem; padding: 0.25rem 0.5rem; }
.btn-stage.active { background: #c2410c; border-color: #c2410c; color: #fff; }
/* Job progress: what the Mac is doing, while it is doing it. */
.job-progress { margin-top: 0.625rem; }
.job-progress-row { display: flex; align-items: baseline; gap: 0.5rem;
    font-size: 0.75rem; color: var(--text-primary); margin-bottom: 0.3rem; }
.job-progress-time { margin-left: auto; color: var(--text-muted);
    font-variant-numeric: tabular-nums; font-family: ui-monospace, Menlo, monospace; }
.job-progress-track { height: 6px; border-radius: 3px; background: var(--bg-secondary);
    overflow: hidden; }
.job-progress-track > i { display: block; height: 100%; width: 4%;
    background: linear-gradient(90deg, #c2410c, #f59e0b);
    transition: width .4s ease; }
/* Background tab: mode chips plus the backdrop library already used at record time. */
.bg-modes { display: flex; gap: 0.375rem; margin-bottom: 0.75rem; }
.bg-mode.active { background: #c2410c; border-color: #c2410c; color: #fff; }
.bg-library { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
    gap: 0.5rem; }
.bg-thumb { position: relative; aspect-ratio: 16/9; border-radius: var(--radius-sm);
    overflow: hidden; cursor: pointer; border: 2px solid transparent; background: #0f1215; }
.bg-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bg-thumb.active { border-color: #c2410c; }
/* A thumbnail whose bytes could not be fetched. The <img> is hidden outright so
   the browser's broken-image glyph never stands in for an explanation. */
.bg-thumb-failed img { display: none; }
.bg-thumb-failed { display: flex; align-items: center; justify-content: center;
    border-color: #7f1d1d; }
.bg-thumb-note { font-size: 0.625rem; color: var(--text-muted); text-align: center;
    padding: 0 0.375rem; }
.bg-upload-row { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.625rem; }
/* Per-camera overrides: one row per person, name left, treatment right. */
.bg-tracks-head { margin-top: 1rem; padding-top: 0.75rem; border-top: 1px solid #2c323b;
    font-size: 0.75rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.04em; color: var(--text-muted); }
.bg-track { display: flex; align-items: center; gap: 0.5rem; padding: 0.3125rem 0; }
.bg-track-name { flex: 1 1 auto; min-width: 0; font-size: 0.8125rem; font-weight: 600;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bg-track-modes { display: flex; gap: 0.25rem; flex: none; }
.bg-track-mode { font-size: 0.6875rem; padding: 0.1875rem 0.4375rem; }
/* A per-camera picker is a subordinate of the row above it, so it is inset and
   smaller — it must not compete with the edit-wide grid. */
.bg-track-library { margin: 0 0 0.625rem 0.75rem;
    grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); }

/* --- export dialog ------------------------------------------------------ */
/* Options left, artifacts right. The artifact list is the important half: it is
   what stops a download depending on which job happened to run last. */
.ex-dialog { border: none; border-radius: var(--radius-md); padding: 0; width: min(880px, 94vw);
    max-height: 90vh; background: var(--bg-primary); color: var(--text-primary);
    box-shadow: 0 20px 60px rgba(0,0,0,.35); }
.ex-dialog::backdrop { background: rgba(15,18,21,.55); }
.ex-form { display: flex; flex-direction: column; max-height: 90vh; }
.ex-head { display: flex; align-items: center; justify-content: space-between;
    padding: 0.875rem 1.125rem; border-bottom: 1px solid var(--border-color); }
.ex-title { margin: 0; font-size: 1rem; font-weight: 700; }
.ex-close { background: none; border: none; font-size: 1.5rem; line-height: 1;
    color: var(--text-muted); cursor: pointer; padding: 0 0.25rem; }
.ex-close:hover { color: var(--text-primary); }
.ex-body { display: flex; gap: 1.25rem; padding: 1.125rem; overflow-y: auto; }
.ex-options { flex: 0 0 320px; min-width: 0; }
.ex-renders { flex: 1 1 auto; min-width: 0; }
.ex-group { margin-bottom: 0.875rem; }
.ex-label { display: block; margin-bottom: 0.3125rem; font-size: 0.6875rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); }
.ex-choices { display: flex; gap: 0.3125rem; flex-wrap: wrap; }
.ex-choice { font-size: 0.75rem; }
.ex-note { margin: 0.375rem 0 0; font-size: 0.6875rem; line-height: 1.5; color: var(--text-muted); }
.ex-estimate { margin: 0.75rem 0 0; padding: 0.5rem 0.625rem; border-radius: var(--radius-sm);
    background: var(--bg-secondary); font-size: 0.75rem; font-variant-numeric: tabular-nums; }
.ex-actions { display: flex; align-items: center; gap: 0.5rem; padding: 0.875rem 1.125rem;
    border-top: 1px solid var(--border-color); }
.ex-actions .ex-note { margin: 0; flex: 1 1 auto; }
.ex-go { background: #b45309; border-color: #b45309; color: #fff; }
.ex-go:hover:not(:disabled) { background: #92400e; border-color: #92400e; }

/* One row per artifact, each stating what it IS — dimensions and duration, read
   from the file at render time. A short can never pose as the full export again. */
.ex-render { display: flex; align-items: center; gap: 0.625rem; padding: 0.5rem 0;
    border-bottom: 1px solid var(--border-color); }
.ex-render:last-child { border-bottom: 0; }
.ex-render-meta { flex: 1 1 auto; min-width: 0; }
.ex-render-name { font-size: 0.8125rem; font-weight: 600;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ex-render-sub { font-size: 0.6875rem; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.ex-render-tag { flex: none; font-size: 0.625rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.04em; padding: 0.125rem 0.375rem; border-radius: 3px;
    background: var(--bg-secondary); color: var(--text-muted); }
.ex-render-tag.is-full { background: #b45309; color: #fff; }

.ex-progress { margin-top: 0.875rem; padding: 0.625rem 0.75rem;
    background: var(--bg-secondary); border-radius: var(--radius-md); }
.ex-progress-row { display: flex; justify-content: space-between; font-size: 0.75rem;
    font-weight: 600; }
.ex-progress-pct { font-variant-numeric: tabular-nums; color: var(--text-muted); }
.ex-progress-track { height: 6px; margin-top: 0.4375rem; background: #e2e8f0;
    border-radius: 999px; overflow: hidden; }
.ex-progress-track i { display: block; height: 100%; width: 0;
    background: #b45309; border-radius: 999px; transition: width .3s ease; }

@media (max-width: 720px) {
    .ex-body { flex-direction: column; }
    .ex-options { flex: 1 1 auto; }
}
/* A render older than the last save. Not an error — it is a real file someone may
   still want — so it is marked, not hidden or disabled. */
.ex-render.is-stale { background: #fffbeb; }
.ex-render-stale { margin-top: 0.1875rem; font-size: 0.6875rem; line-height: 1.4;
    color: #92400e; font-weight: 600; }