/* showkit.css — one stylesheet for all three modules.
 *
 * NO CDN. The show machine is expected to boot without internet, so there is no
 * @import and no remote font here — the stacks below resolve to the deck's own
 * vendored BBC Reith faces when present (loaded by the host page's
 * /fonts/fonts.css) and to system fonts when not. Nothing here fetches.
 *
 * COLOUR IS INHERITED, NOT IMPOSED. Every token falls back to the host deck's
 * own variable first (--accent, --live, --good, --preview, --panel …) and only
 * uses a literal when the host defines nothing. Dropped into the Control Room
 * this reads as the Control Room; dropped into a bare page it still renders.
 *
 * The status mapping follows the HOST's semantics, which for this deck are:
 *   current / on air  -> --good     (#2fd196)   green
 *   next / armed      -> --preview  (#f2b705)   amber
 *   destructive/warn  -> --live     (#ff4d6d)   red
 * That is deliberate. Red means "destructive" in this codebase, so painting the
 * current segment red would invert the one colour language the operator already
 * reads without thinking.
 */
:root {
  --sk-bg:     var(--bg, #0a0c16);
  --sk-panel:  var(--panel, #141829);
  --sk-panel2: var(--panel-2, #1b2036);
  --sk-line:   var(--line, rgba(255,255,255,.07));
  --sk-line2:  rgba(255,255,255,.14);
  --sk-ink:    var(--ink, #eef1fb);
  --sk-dim:    #b9c0d8;
  --sk-quiet:  var(--muted, #8b93b0);

  --sk-accent: var(--accent, #7c5cff);
  --sk-cur:    var(--good, #2fd196);      /* NOW / current segment */
  --sk-armed:  var(--preview, #f2b705);   /* armed / next */
  --sk-bad:    var(--live, #ff4d6d);      /* destructive + fault only */
  --sk-ready:  var(--good, #2fd196);

  --sk-radius:    var(--radius-sm, 14px);
  --sk-radius-sm: 8px;
  --sk-font:  var(--font, 'Reith Sans','Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif);
  --sk-title: var(--display, 'Reith Sans Condensed','Rajdhani','Inter',system-ui,sans-serif);
  --sk-mono:  ui-monospace, Menlo, Consolas, monospace;
}

/* Replay: a panelist/cohost edit bench, deliberately visually distinct from
   red LIVE controls. Preview and trimming cannot reach Program. */
.rp-head{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;margin-bottom:18px}
.rp-head h2{font-family:var(--sk-title);font-size:28px;text-transform:uppercase;letter-spacing:.04em;margin:9px 0 3px}
.rp-head p{color:var(--sk-quiet);margin:0;max-width:720px}
.rp-layout{display:grid;grid-template-columns:minmax(250px,330px) minmax(0,1fr);gap:18px;align-items:start}
.rp-library,.rp-workbench{padding:16px}.rp-library-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.rp-library-head b{font-family:var(--sk-title);text-transform:uppercase;letter-spacing:.06em}.rp-library-head span{color:var(--sk-quiet)}
.rp-files{display:flex;flex-direction:column;gap:8px;max-height:620px;overflow:auto}
.rp-file{display:flex;flex-direction:column;align-items:flex-start;gap:4px;width:100%;padding:11px 12px;text-align:left;background:var(--sk-panel2);border:1px solid var(--sk-line);border-radius:10px;color:var(--sk-ink)}
.rp-file b{font-size:12px;line-height:1.3;word-break:break-word}.rp-file span{font-size:11px;color:var(--sk-quiet)}
.rp-file.active{border-color:var(--sk-accent);box-shadow:0 0 0 1px var(--sk-accent);background:rgba(124,92,255,.12)}
.rp-video-wrap{position:relative;aspect-ratio:16/9;max-width:560px;background:#03050a;border-radius:12px;overflow:hidden;border:1px solid var(--sk-line)}
.rp-video-wrap video{width:100%;height:100%;display:block;background:#000}.rp-video-empty{position:absolute;inset:0;display:grid;place-items:center;color:var(--sk-quiet);background:#090c14;pointer-events:none}
.rp-source{display:flex;justify-content:space-between;gap:12px;margin:12px 0 10px}.rp-source b{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rp-source span{color:var(--sk-quiet);font-size:12px;white-space:nowrap}
.rp-trimmer{margin:18px 8px 14px}.rp-range{height:10px;border-radius:6px;background:var(--sk-panel2);position:relative;margin:0 0 11px}
.rp-range i{display:block;height:100%;background:var(--sk-accent);border-radius:inherit;position:absolute;top:0}
.rp-range b{position:absolute;top:-5px;width:2px;height:20px;background:#fff;box-shadow:0 0 5px #000;transform:translateX(-1px);pointer-events:none;z-index:5}
.rp-range input{position:absolute;left:0;top:-10px;width:100%;height:30px;margin:0;appearance:none;-webkit-appearance:none;background:transparent;pointer-events:none;z-index:3}
.rp-range input[data-rp="out-slider"]{z-index:4}.rp-range input::-webkit-slider-runnable-track{height:10px;background:transparent}
.rp-range input::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:18px;height:26px;margin-top:-8px;border:2px solid #fff;border-radius:4px;background:var(--sk-accent);box-shadow:0 2px 8px rgba(0,0,0,.7);cursor:ew-resize;pointer-events:auto}
.rp-range input::-moz-range-track{height:10px;background:transparent}.rp-range input::-moz-range-thumb{width:16px;height:24px;border:2px solid #fff;border-radius:4px;background:var(--sk-accent);box-shadow:0 2px 8px rgba(0,0,0,.7);cursor:ew-resize;pointer-events:auto}
.rp-range input:focus-visible::-webkit-slider-thumb{outline:3px solid var(--sk-armed);outline-offset:2px}.rp-range input:disabled::-webkit-slider-thumb{opacity:.35;cursor:not-allowed}
.rp-trim-labels{display:flex;justify-content:space-between;gap:12px;color:var(--sk-quiet);font-size:11px}.rp-trim-labels strong{color:var(--sk-ink);font:700 12px var(--sk-mono)}
.rp-actions{display:flex;align-items:center;gap:14px;margin-top:14px}.rp-status{color:var(--sk-quiet);font-size:12px}
@media(max-width:850px){.rp-layout{grid-template-columns:1fr}.rp-files{max-height:220px}.rp-head{flex-direction:column}}

.sk-rd, .sk-pv, .sk-tw { color: var(--sk-ink); font-family: var(--sk-font); }
.sk-rd *, .sk-pv *, .sk-tw * { box-sizing: border-box; }

.sk-h2 { font-family: var(--sk-title); font-size: 17px; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; margin: 0; color: var(--sk-ink); }
.sk-k { font-family: var(--sk-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--sk-quiet); display: block; margin-bottom: 4px; }

.sk-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--sk-line2); flex: none; display: inline-block; }
.sk-dot-live { background: var(--sk-cur); box-shadow: 0 0 10px var(--sk-cur); }
.sk-dot-armed { background: var(--sk-armed); box-shadow: 0 0 10px rgba(242,183,5,.7); }
.sk-dot-ready { background: var(--sk-ready); box-shadow: 0 0 8px rgba(47,209,150,.6); }
.sk-dot-bad { background: var(--sk-bad); box-shadow: 0 0 10px rgba(255,77,109,.7); }
.sk-dot-white { background: #fff; }

.sk-btn { font-family: var(--sk-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  background: var(--sk-panel2); color: var(--sk-ink); border: 1px solid var(--sk-line2);
  border-radius: 2px; padding: 9px 15px; cursor: pointer; }
.sk-btn:hover:not(:disabled) { border-color: var(--sk-accent); box-shadow: 0 0 0 2px rgba(124,92,255,.28); }
.sk-btn:disabled { opacity: .35; cursor: not-allowed; }
.sk-btn-sm { padding: 6px 10px; font-size: 10px; }
.sk-btn-ghost { background: transparent; }
/* ADVANCE is the one control used every show — it is bigger and it is green,
   and it is deliberately nowhere near anything that changes air. */
.sk-btn-go { background: rgba(47,209,150,.12); border-color: rgba(47,209,150,.45); color: var(--sk-ready);
  font-weight: 700; padding: 11px 22px; }
.sk-btn-go:hover:not(:disabled) { border-color: var(--sk-ready); box-shadow: 0 0 14px -3px var(--sk-ready); }

.sk-in { background: var(--sk-bg); border: 1px solid var(--sk-line); border-radius: 2px; color: var(--sk-ink);
  padding: 7px 9px; font-family: var(--sk-font); font-size: 13px; min-width: 0; }
.sk-in:focus { outline: none; border-color: var(--sk-accent); }
.sk-sel { font-family: var(--sk-mono); font-size: 11px; }
.sk-est-in { width: 62px; font-family: var(--sk-mono); }
.sk-row { display: flex; gap: 7px; align-items: center; flex-wrap: wrap; }
.sk-sp { flex: 1; }
kbd { font-family: var(--sk-mono); font-size: 10px; background: var(--sk-panel2); border: 1px solid var(--sk-line2);
  border-radius: 2px; padding: 1px 5px; color: var(--sk-dim); }

/* ===================== RUNDOWN ===================== */
.sk-rd { background: var(--sk-bg); padding: 16px 18px; }
.sk-rd-head { display: flex; align-items: center; gap: 14px; margin-bottom: 13px; }
.sk-clock { margin-left: auto; font-family: var(--sk-mono); font-size: 19px; color: var(--sk-dim); }

.sk-bt { font-family: var(--sk-mono); font-size: 11px; letter-spacing: .1em; padding: 4px 10px;
  border-radius: 2px; border: 1px solid var(--sk-line2); color: var(--sk-quiet); }
.sk-bt-on { color: var(--sk-ready); border-color: rgba(47,209,150,.45); }
.sk-bt-early { color: var(--sk-accent); border-color: rgba(124,92,255,.45); }
.sk-bt-late { color: var(--sk-armed); border-color: rgba(242,183,5,.5); background: rgba(242,183,5,.08); }

.sk-strip { display: grid; grid-template-columns: 1.4fr 1.4fr auto; gap: 16px; align-items: center;
  background: var(--sk-panel); border: 1px solid var(--sk-line); border-radius: var(--sk-radius);
  padding: 13px 16px; margin-bottom: 10px; }
.sk-now { font-family: var(--sk-title); font-size: 20px; font-weight: 700; color: var(--sk-ink); display: block; line-height: 1.15; }
.sk-next { font-size: 16px; color: var(--sk-dim); display: block; line-height: 1.2; }
.sk-strip-ctl { display: flex; gap: 8px; }

.sk-prog { position: relative; height: 20px; background: var(--sk-bg); border: 1px solid var(--sk-line);
  border-radius: 2px; margin-bottom: 14px; overflow: hidden; }
.sk-prog-bar { height: 100%; background: linear-gradient(90deg, rgba(124,92,255,.55), rgba(193,89,240,.30)); }
.sk-prog-t { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-family: var(--sk-mono); font-size: 10px; letter-spacing: .1em; color: var(--sk-dim); }

.sk-seg { margin-bottom: 12px; }
.sk-seg.is-done { opacity: .45; }
.sk-seg-h { display: flex; align-items: baseline; gap: 10px; padding: 5px 0 6px; border-bottom: 1px solid var(--sk-line); }
.sk-seg-t { font-family: var(--sk-title); font-size: 12px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--sk-dim); }
.sk-seg-n { font-family: var(--sk-mono); font-size: 10px; color: var(--sk-quiet); margin-left: auto; }

.sk-cues { list-style: none; margin: 0; padding: 0; }
.sk-cue { display: flex; align-items: center; gap: 11px; padding: 8px 10px; border-radius: 3px; cursor: pointer;
  border-left: 3px solid transparent; }
.sk-cue:hover { background: rgba(255,255,255,.03); }
.sk-cue.is-done .sk-title { text-decoration: line-through; color: var(--sk-quiet); }
.sk-cue.is-cur { background: rgba(47,209,150,.14); border-left-color: var(--sk-cur); }
.sk-cue.is-next { background: rgba(242,183,5,.10); border-left-color: var(--sk-armed); }
.sk-mark { font-family: var(--sk-mono); font-size: 9px; font-weight: 700; letter-spacing: .08em;
  width: 40px; flex: none; color: var(--sk-quiet); }
.sk-cue.is-cur .sk-mark { color: var(--sk-cur); }
.sk-cue.is-next .sk-mark { color: var(--sk-armed); }
.sk-type { font-family: var(--sk-mono); font-size: 9px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--sk-quiet); border: 1px solid var(--sk-line2); border-radius: 2px; padding: 1px 5px; width: 62px;
  text-align: center; flex: none; }
/* A cue that can never be armed says so quietly rather than looking broken. */
.sk-cue.sk-noair .sk-type { opacity: .5; }
.sk-title { flex: 1; font-size: 14px; color: var(--sk-ink); }
.sk-est { font-family: var(--sk-mono); font-size: 11px; color: var(--sk-quiet); }
.sk-x { background: transparent; border: 0; color: var(--sk-quiet); cursor: pointer; font-size: 15px;
  line-height: 1; padding: 0 3px; }
.sk-x:hover { color: var(--sk-bad); }
.sk-addrow { padding: 7px 10px 0 51px; }
.sk-foot { display: flex; align-items: center; gap: 8px; margin-top: 14px; padding-top: 11px;
  border-top: 1px solid var(--sk-line); font-size: 11px; color: var(--sk-quiet); }

.sk-empty { border: 1px dashed var(--sk-line2); border-radius: var(--sk-radius); padding: 26px; text-align: center; }
.sk-empty-k { font-family: var(--sk-title); font-size: 13px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--sk-dim); margin-bottom: 9px; }
.sk-empty p { font-size: 13px; color: var(--sk-quiet); max-width: 52ch; margin: 0 auto 15px; line-height: 1.6; }
.sk-empty .sk-row { justify-content: center; }

/* ===================== PANEL VIEW ===================== */
.sk-pv { background: var(--sk-bg); height: 100%; display: flex; flex-direction: column; padding: 14px 18px; }
.sk-pv-top { display: flex; align-items: center; gap: 14px; margin-bottom: 13px; }
.sk-pv-title { font-family: var(--sk-title); font-size: 15px; font-weight: 700; letter-spacing: .18em;
  text-transform: uppercase; color: var(--sk-ink); }
.sk-pv-clock { margin-left: auto; font-family: var(--sk-mono); font-size: 22px; color: var(--sk-dim); }
/* The sync state is never allowed to be invisible. Anything short of full
   cross-machine sync is amber, because assuming the desk is following when it
   is not is how a cue gets called to nobody. */
.sk-pv-sync { font-family: var(--sk-mono); font-size: 9.5px; letter-spacing: .1em; padding: 3px 9px;
  border-radius: 2px; border: 1px solid var(--sk-line2); color: var(--sk-quiet); }
.sk-pv-share:empty { display: none; }
.sk-mode-server { color: var(--sk-ready); border-color: rgba(47,209,150,.45); }
.sk-mode-local, .sk-mode-solo { color: var(--sk-armed); border-color: rgba(242,183,5,.5);
  background: rgba(242,183,5,.08); }

/* Program return (and, when the host page asks for it, Twitch chat under it)
   down the left; the run of show takes the whole centre column, where the NOW
   and ARMED cards used to sit — the list already marks NOW/NEXT itself, so
   those cards were saying the same thing twice. */
.sk-pv-grid { flex: 1; display: grid; gap: 14px; min-height: 0;
  grid-template-columns: 1fr 1fr; grid-template-rows: auto;
  grid-template-areas: "return run"; }
.sk-pv-grid.has-chat { grid-template-rows: auto 1fr; grid-template-areas: "return run" "chat run"; }
.sk-pb { border: 1px solid var(--sk-line); border-radius: 10px; background: var(--sk-panel);
  padding: 16px 18px; overflow: hidden; min-width: 0; }
.sk-pb-k { font-family: var(--sk-mono); font-size: 11px; letter-spacing: .14em; color: var(--sk-quiet);
  margin-bottom: 11px; display: flex; align-items: center; gap: 9px; }

/* Return and chat both host a component that draws its own panel chrome, so
   these cells are bare frames. */
.sk-pb-return { grid-area: return; padding: 0; border: 0; background: transparent; }
.sk-pb-chat { grid-area: chat; padding: 0; border: 0; background: transparent; min-height: 0; }
.sk-pb-run { grid-area: run; display: flex; flex-direction: column; }
.sk-pv-rundown { flex: none; margin: -2px 0 13px; padding-bottom: 13px; border-bottom: 1px solid var(--sk-line); }
.sk-pv-rundown .sk-rd { padding: 0; background: transparent; }
.sk-pv-rundown .sk-rd-head { margin-bottom: 9px; }
.sk-pv-rundown .sk-strip { grid-template-columns: minmax(0,1fr) minmax(0,1fr) auto; gap: 10px;
  padding: 10px 11px; margin-bottom: 7px; }
.sk-pv-rundown .sk-now { font-size: 17px; }
.sk-pv-rundown .sk-next { font-size: 14px; }
.sk-pv-rundown .sk-strip-ctl { gap: 6px; }
.sk-pv-rundown .sk-strip-ctl .sk-btn { padding: 7px 9px; }
.sk-pv-list { overflow-y: auto; flex: 1; }
.sk-pv-seg { font-family: var(--sk-title); font-size: 12px; font-weight: 900; letter-spacing: .16em;
  text-transform: uppercase; color: var(--sk-ink); background: rgba(47,209,150,.16); border-radius: 4px;
  padding: 6px 10px; margin: 22px 0 8px; }
.sk-pv-seg:first-child { margin-top: 0; }
.sk-pv-row { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 4px; }
.sk-pv-row[data-beats-key][aria-expanded="false"] { cursor: zoom-in; }
.sk-pv-row[data-beats-key][aria-expanded="true"]:not(.is-cur) { cursor: zoom-out; }
.sk-pv-row[data-beats-key]:focus-visible { outline: 2px solid var(--sk-accent); outline-offset: 1px; }
.sk-pv-row.is-cur { background: rgba(47,209,150,.16); }
.sk-pv-row.is-next { background: rgba(242,183,5,.12); }
.sk-pv-row.is-done .sk-pv-t { text-decoration: line-through; color: var(--sk-quiet); }
.sk-pv-mark { font-family: var(--sk-mono); font-size: 9px; font-weight: 700; width: 38px; flex: none; color: var(--sk-quiet); }
.sk-pv-row.is-cur .sk-pv-mark { color: var(--sk-cur); }
.sk-pv-row.is-next .sk-pv-mark { color: var(--sk-armed); }
.sk-pv-t { flex: 1; font-size: 14px; color: var(--sk-dim); }
.sk-pv-row.is-cur .sk-pv-t, .sk-pv-row.is-next .sk-pv-t { color: var(--sk-ink); font-weight: 600; }
.sk-pv-e { font-family: var(--sk-mono); font-size: 10px; color: var(--sk-quiet); }
.sk-pv-empty { color: var(--sk-quiet); font-size: 13px; padding: 18px 0; }
.sk-pv-beats { list-style: none; margin: 0 0 6px; padding: 0 10px 0 78px; display: flex; flex-direction: column; gap: 3px; }
.sk-pv-beats li { font-size: 12px; color: var(--sk-dim); position: relative; }
.sk-pv-beats li::before { content: '\2022'; position: absolute; left: -12px; color: var(--sk-quiet); }

@media (max-width: 1100px) {
  .sk-pv-grid, .sk-pv-grid.has-chat { grid-template-columns: 1fr;
    grid-template-rows: auto auto 1fr; grid-template-areas: "return" "chat" "run"; }
  .sk-pb-chat { min-height: 52vh; }
}

/* ===================== PROGRAM RETURN ===================== */
.sk-tw { border: 1px solid var(--sk-line); border-radius: 10px; background: var(--sk-panel);
  padding: 14px 16px; height: 100%; display: flex; flex-direction: column; }
.sk-tw-bad { border-color: rgba(255,77,109,.45); background: linear-gradient(180deg, #170b14, #0f1216); }
.sk-tw-k { font-family: var(--sk-mono); font-size: 11px; letter-spacing: .14em; color: var(--sk-quiet);
  margin-bottom: 10px; display: flex; align-items: center; gap: 9px; }
.sk-tw-ch { color: var(--sk-accent); }
/* The one button the return can show: the one-time camera grant, inside the
   fault overlay. (The MUTED/AUDIO chips went with the Twitch player — the OBS
   camera carries no audio to gate.) */
.sk-tw-act { margin-top: 10px; font-family: var(--sk-mono); font-size: 9px; letter-spacing: .1em;
  padding: 3px 9px; border-radius: 2px; border: 1px solid var(--sk-line2);
  background: transparent; color: var(--sk-quiet); cursor: pointer; }
.sk-tw-act:hover { color: var(--sk-ink); border-color: var(--sk-accent); }
.sk-tw-frame { position: relative; aspect-ratio: 16/9; width: 100%; background: var(--sk-bg);
  border-radius: 6px; overflow: hidden; }
.sk-tw-frame iframe { width: 100%; height: 100%; border: 0; display: block; }
/* The OBS sources — a still swapped a few times a second, or the virtual camera
   live. Contain, so a canvas that isn't 16/9 letterboxes instead of stretching
   faces. */
.sk-tw-frame img, .sk-tw-frame video { width: 100%; height: 100%; display: block; object-fit: contain; }
/* Chat is a column, not a video box — grows to fill the pane instead of
   locking to 16/9. */
.sk-tw-chatframe { aspect-ratio: auto; flex: 1; min-height: 0; }
.sk-tw-chat { height: 100%; }
.sk-tw-wait { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  text-align: center; padding: 16px; font-family: var(--sk-mono); font-size: 11px; letter-spacing: .1em;
  color: var(--sk-quiet); background: var(--sk-bg); }
.sk-tw-wait-bad { color: var(--sk-bad); letter-spacing: .04em; line-height: 1.7; background: rgba(10,12,22,.95); }
.sk-tw-note { font-size: 11.5px; color: var(--sk-quiet); margin-top: 10px; line-height: 1.5; }
.sk-tw-warn { font-size: 11.5px; color: var(--sk-armed); margin-top: 10px; line-height: 1.55;
  border-left: 2px solid var(--sk-armed); padding-left: 10px; }
.sk-tw-probs { margin: 0 0 12px; padding-left: 18px; font-size: 13px; line-height: 1.65; color: var(--sk-ink); }
.sk-tw-meta { font-size: 10.5px; color: var(--sk-quiet); margin-top: auto; padding-top: 10px; }
.sk-tw code { font-family: var(--sk-mono); color: var(--sk-accent); background: var(--sk-bg);
  padding: 1px 5px; border-radius: 2px; }