/* Yagi desk
 *
 * A studio console on one screen. Colour is a signal, not decoration, and each signal means one thing everywhere:
 *   red     a microphone is live (nothing else is ever red, except a clipping meter)
 *   teal    music is playing, a cart is playing
 *   amber   what is next, or a warning (a track is about to end)
 *   orange  the last three seconds of a track
 *   rose    talk (a talk segment, and the bed under it)        blue    advertising (an ad break and its spots)
 * Rose and blue only ever mark the kind of thing a row is, so they are never mistaken for a state. Everything else is graphite and grey, so the signals are the only thing that jumps out.
 * Type is Bahnschrift (Windows' own DIN-style face, the voice of every signage and console label), falling back to
 * the system face. Numbers are always tabular so a countdown never jitters.
 */

:root {
  color-scheme: dark;
  --bg: #0f1216;
  --panel: #181c22;
  --raised: #1f242b;
  --well: #0c0f12;
  --line: #2a313a;
  --line-strong: #3a434e;
  --text: #e9edf1;
  --muted: #919ca9;
  --faint: #5f6a76;
  --key: #262c34;
  --key-hover: #303842;
  --key-text: #e9edf1;
  --primary: #e9edf1;
  --primary-hover: #ffffff;
  --primary-text: #12161a;
  --air: #f0402f;
  --air-soft: rgba(240, 64, 47, 0.16);
  --play: #35c9c1;
  --play-soft: rgba(53, 201, 193, 0.14);
  --next: #f2b13c;
  --next-soft: rgba(242, 177, 60, 0.14);
  --hot: #ff7b1c;
  --talk: #e58bb8;
  --talk-soft: rgba(229, 139, 184, 0.12);
  --ad: #6ea8ff;
  --ad-soft: rgba(110, 168, 255, 0.12);
  --good: #48c78e;
  --focus: #7cc4ff;
  --wave: #8fb4d8;
  --wave-off: #4b5663;
  --shadow: 0 1px 0 rgba(255, 255, 255, 0.03) inset, 0 8px 24px rgba(0, 0, 0, 0.28);
  --font: "Bahnschrift", "Segoe UI Variable Text", "Segoe UI", "SF Pro Text", system-ui, "Helvetica Neue", Arial, sans-serif;
  --radius: 8px;

  /* cart colours: a background and the text that sits on it */
  --c-slate: #3a444f;   --c-slate-t: #e9edf1;
  --c-red: #9b312b;     --c-red-t: #fff1ef;
  --c-orange: #a5571d;  --c-orange-t: #fff3e8;
  --c-amber: #8d6d14;   --c-amber-t: #fff8e1;
  --c-green: #2c7c49;   --c-green-t: #eafaf0;
  --c-teal: #1f7a75;    --c-teal-t: #e6fbf9;
  --c-blue: #2c609f;    --c-blue-t: #eaf3ff;
  --c-purple: #6c46a3;  --c-purple-t: #f3ecff;
  --c-pink: #9d3c74;    --c-pink-t: #ffeef7;
}

:root[data-theme="light"] {
  color-scheme: light;
  --bg: #d8dee4;
  --panel: #f3f5f7;
  --raised: #ffffff;
  --well: #e4e9ed;
  --line: #c6ced6;
  --line-strong: #aeb8c2;
  --text: #12171c;
  --muted: #546070;
  --faint: #7d8896;
  --key: #e8ecf0;
  --key-hover: #dbe1e7;
  --key-text: #12171c;
  --primary: #1b2128;
  --primary-hover: #000000;
  --primary-text: #ffffff;
  --air: #d42a1a;
  --air-soft: rgba(212, 42, 26, 0.12);
  --play: #0c8c86;
  --play-soft: rgba(12, 140, 134, 0.12);
  --next: #b57a00;
  --next-soft: rgba(181, 122, 0, 0.13);
  --hot: #d95a00;
  --talk: #b23b7c;
  --talk-soft: rgba(178, 59, 124, 0.10);
  --ad: #2563c9;
  --ad-soft: rgba(37, 99, 201, 0.10);
  --good: #1f8a5b;
  --focus: #0a64c8;
  --wave: #2a6aa8;
  --wave-off: #9aa6b2;
  --shadow: 0 1px 2px rgba(20, 30, 40, 0.08);
  --c-slate: #5b6672;
  --c-red: #c5402f;
  --c-orange: #cf6a1f;
  --c-amber: #b88a12;
  --c-green: #2f8a52;
  --c-teal: #208a83;
  --c-blue: #2f6bb3;
  --c-purple: #7c52b8;
  --c-pink: #b24a86;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font: 14px/1.35 var(--font);
  display: grid; grid-template-rows: auto minmax(0, 1fr); overflow: hidden;
}
button, input, select { font: inherit; color: inherit; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.num, .clock, #digits { font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 32px; padding: 0 12px; border: 1px solid var(--line-strong); border-radius: 6px;
  background: var(--key); color: var(--key-text); font-weight: 600; cursor: pointer; white-space: nowrap;
  transition: background-color 0.12s, border-color 0.12s;
}
.btn:hover:not(:disabled) { background: var(--key-hover); }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn.small { min-height: 26px; padding: 0 9px; font-size: 12.5px; }
.btn.primary { background: var(--primary); border-color: var(--primary); color: var(--primary-text); }
.btn.primary:hover:not(:disabled) { background: var(--primary-hover); border-color: var(--primary-hover); }
.btn.live { background: var(--air); border-color: var(--air); color: #fff; }
.btn.live:hover:not(:disabled) { background: var(--air); border-color: var(--air); filter: brightness(1.1); }
.btn.ghost { background: transparent; border-color: transparent; color: var(--muted); }
.btn.ghost:hover:not(:disabled) { background: var(--key); color: var(--text); }
/* the little arrow beside Mix Next: how long it takes */
.mixlen-btn { padding-left: 7px; padding-right: 7px; min-width: 0; margin-left: -4px; }
/* Stop and Clear decks: small, next to Take Next and Mix Next, and they ask for a second press first. */
.stop-btn { color: #ff7a6c; border-color: #8f2a22; background: transparent; }
.stop-btn:hover:not(:disabled) { background: #c4281c; border-color: #c4281c; color: #fff; }
.clear-decks-btn { color: var(--hot); border-color: #7a4a14; background: transparent; }
.clear-decks-btn:hover:not(:disabled) { background: var(--hot); border-color: var(--hot); color: #1b0d00; }
.stop-btn.confirm, .stop-btn.confirm:hover:not(:disabled) { background: #c4281c; border-color: #c4281c; color: #fff; }
.clear-decks-btn.confirm, .clear-decks-btn.confirm:hover:not(:disabled) { background: var(--hot); border-color: var(--hot); color: #1b0d00; }
:root[data-theme="light"] .stop-btn { color: #b3261a; border-color: #d9877f; }
:root[data-theme="light"] .clear-decks-btn { color: #a14a00; border-color: #d9a56a; }
.btn.confirm, .btn.confirm:hover:not(:disabled) { background: var(--next); border-color: var(--next); color: #1b1300; }
.btn[aria-pressed="true"].toggle { background: var(--play-soft); border-color: var(--play); color: var(--play); }
.btn.icon { min-width: 30px; padding: 0 6px; }

/* ---------------------------------------------------------------- top bar */
.bar {
  display: flex; align-items: center; gap: 14px; padding: 8px 14px; min-height: 52px;
  background: var(--panel); border-bottom: 1px solid var(--line);
}
.brand { font-size: 19px; font-weight: 700; letter-spacing: 0.01em; margin-right: 4px; }
.brand::before { content: ""; display: inline-block; width: 24px; height: 17px; margin-right: 9px; vertical-align: -2px; background: currentColor; opacity: 0.92;
  -webkit-mask: url("yagi.svg") center / contain no-repeat; mask: url("yagi.svg") center / contain no-repeat; }
.brand::after { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--faint); margin-left: 7px; vertical-align: 2px; }
body[data-air="true"] .brand::after { background: var(--air); box-shadow: 0 0 10px var(--air); }
.air {
  display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px; border-radius: 999px;
  border: 1px solid var(--line-strong); color: var(--muted); font-weight: 700; font-size: 13px;
}
.air[data-on="true"] { background: var(--air); border-color: var(--air); color: #fff; box-shadow: 0 0 0 3px var(--air-soft), 0 0 18px var(--air-soft); }
.clock { font-size: 22px; font-weight: 600; letter-spacing: 0.02em; margin-left: auto; font-stretch: 85%; }
.clock-zone { font-size: 12px; font-weight: 500; letter-spacing: 0; opacity: 0.75; margin-left: 2px; }
.eng { display: inline-flex; align-items: center; gap: 7px; color: var(--muted); font-size: 13px; }
.eng i { width: 8px; height: 8px; border-radius: 50%; background: var(--faint); }
.eng[data-state="online"] i { background: var(--good); }
.eng[data-state="offline"] i { background: var(--air); }
.eng[data-state="offline"] { color: var(--air); }
/* Online, but the engine started an older script because the newest one did not pass its check. */
.eng[data-state="online"][data-script="older"] i,
.eng[data-state="online"][data-script="13f"] i,
.eng[data-state="online"][data-script="13e"] i,
.eng[data-state="online"][data-script="13d"] i,
.eng[data-state="online"][data-script="13g"] i { background: var(--next); }
.who { font-size: 13px; padding: 3px 10px; border-radius: 999px; border: 1px solid var(--line-strong); color: var(--muted); }
.who a { color: var(--text); }
.who[data-kind="host"] { color: var(--text); }
.bar-sp { flex: 1; }

.master { display: flex; align-items: center; gap: 8px; min-width: 170px; }
.master .bar-track { position: relative; flex: 1; height: 10px; background: var(--well); border: 1px solid var(--line); border-radius: 3px; overflow: hidden; }
.master .fill { position: absolute; inset: 0 auto 0 0; width: 0; background: var(--play); transition: width 0.06s linear; }
.master[data-zone="hot"] .fill, .master .bar-track[data-zone="hot"] .fill { background: var(--next); }
.master .bar-track[data-zone="clip"] .fill { background: var(--air); }
.master .hold { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--text); opacity: 0.8; }
.master .tick { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--well); opacity: 0.9; }
.master .db { font-size: 12px; color: var(--muted); min-width: 74px; text-align: right; font-variant-numeric: tabular-nums; }
.master[data-state="off"] .db { color: var(--air); }
.master[data-clip="true"] .db { color: var(--air); font-weight: 700; }

/* ---------------------------------------------------------------- tabs (narrow screens) */
.tabs { display: none; gap: 6px; padding: 8px 10px 0; }
.tabs button { flex: 1; min-height: 36px; border: 1px solid var(--line); border-radius: 6px; background: var(--panel); color: var(--muted); font-weight: 600; cursor: pointer; }
.tabs button[aria-selected="true"] { color: var(--text); background: var(--raised); border-color: var(--line-strong); }

/* ---------------------------------------------------------------- the deck */
.deck {
  display: grid; gap: 10px; padding: 10px; min-height: 0;
  grid-template-columns: minmax(390px, 31%) minmax(440px, 1fr) minmax(340px, 26%);
}
.col { display: flex; flex-direction: column; gap: 10px; min-height: 0; min-width: 0; }
.panel {
  display: flex; flex-direction: column; min-height: 0; min-width: 0;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow);
}
.panel.grow { flex: 1 1 0; }
.ph {
  display: flex; align-items: center; gap: 10px; padding: 9px 12px 8px; min-height: 40px; border-bottom: 1px solid var(--line); flex: none;
}
.ph h2 { margin: 0; font-size: 15px; font-weight: 700; }
.ph .count { color: var(--muted); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.ph .sp { flex: 1; }
.scroll { overflow-y: auto; overflow-x: hidden; min-height: 0; flex: 1; scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
.msg { margin: 0; padding: 6px 12px; font-size: 12.5px; color: var(--muted); }
.msg.err { color: var(--air); }
.empty { color: var(--muted); padding: 18px 14px; margin: 0; line-height: 1.5; }
.empty strong { color: var(--text); }

/* ---------------------------------------------------------------- now playing */
.now { padding: 12px 12px 10px; display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 4px 14px; align-items: start; }
.now .meta { min-width: 0; }
.now .cover { grid-row: 1; width: 92px; height: 92px; border-radius: 6px; background: var(--well); border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; color: var(--faint); font-size: 34px; overflow: hidden; }
.now .cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.now .status { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--muted); min-height: 18px; }
.now .status i { width: 8px; height: 8px; border-radius: 50%; background: var(--faint); }
.now[data-live="true"] .status { color: var(--play); }
.now[data-live="true"] .status i { background: var(--play); box-shadow: 0 0 8px var(--play); }
.now h2 { margin: 2px 0 0; font-size: 20px; line-height: 1.15; font-weight: 700; overflow-wrap: anywhere; }
.now .artist { margin: 0; color: var(--muted); font-size: 14px; overflow-wrap: anywhere; }
.now .where { margin: 3px 0 0; color: var(--faint); font-size: 12.5px; }
.readout { grid-column: 1 / -1; display: flex; align-items: baseline; gap: 10px; padding-top: 6px; }
.readout #digits { font-size: clamp(52px, 9.5vh, 84px); line-height: 0.95; font-weight: 600; letter-spacing: 0.01em; font-stretch: 80%; color: var(--text); font-variant-numeric: tabular-nums; }
.readout .unit { color: var(--muted); font-size: 13px; }
.readout[data-level="warn"] #digits { color: var(--next); }
.readout[data-level="end"] #digits { color: var(--hot); }
.readout .intro-box { margin-left: auto; text-align: right; }
.readout .intro-box b { display: block; font-size: 30px; line-height: 1; font-weight: 600; font-variant-numeric: tabular-nums; font-stretch: 85%; color: var(--next); }
.readout .intro-box span { color: var(--muted); font-size: 12px; }
.tape { grid-column: 1 / -1; position: relative; height: 10px; border-radius: 3px; background: var(--well); border: 1px solid var(--line); overflow: hidden; }
.tape .fill { position: absolute; inset: 0 auto 0 0; width: 0; background: var(--play); }
.readout[data-level="warn"] ~ .tape .fill { background: var(--next); }
.readout[data-level="end"] ~ .tape .fill { background: var(--hot); }
.tape .intro { position: absolute; top: 0; bottom: 0; width: 0; background: rgba(255, 255, 255, 0.14); border-right: 2px solid var(--next); display: none; }
.tape-info { grid-column: 1 / -1; display: flex; justify-content: space-between; color: var(--muted); font-size: 12.5px; min-height: 18px; font-variant-numeric: tabular-nums; }
.now-actions { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; padding-top: 4px; }
.now-actions .next-up { flex: 1; min-width: 0; color: var(--muted); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.now-actions .next-up b { color: var(--next); font-weight: 700; }
.music { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; padding: 8px 12px; border-top: 1px solid var(--line); }
.music input[type="range"] { flex: 1 1 130px; width: auto; min-width: 100px; }
.music label { font-weight: 600; font-size: 13px; }
.music .db { min-width: 52px; text-align: right; font-variant-numeric: tabular-nums; color: var(--muted); font-size: 13px; }
.music select { min-height: 26px; background: var(--key); border: 1px solid var(--line-strong); border-radius: 6px; padding: 0 6px; }
.music .state { color: var(--next); font-size: 12.5px; }
.music[data-offline="true"] { opacity: 0.55; }

/* sliders */
input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 22px; background: transparent; margin: 0; cursor: pointer; }
input[type="range"]::-webkit-slider-runnable-track { height: 6px; border-radius: 3px; background: var(--line-strong); }
input[type="range"]::-moz-range-track { height: 6px; border-radius: 3px; background: var(--line-strong); }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 20px; margin-top: -7px; border-radius: 3px; background: var(--text); border: 0; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); }
input[type="range"]::-moz-range-thumb { width: 14px; height: 20px; border-radius: 3px; background: var(--text); border: 0; }
input[type="range"]:disabled { opacity: 0.45; cursor: not-allowed; }

/* ---------------------------------------------------------------- running order */
.ro { list-style: none; margin: 0; padding: 4px 0; }
.ro li { position: relative; display: grid; grid-template-columns: 18px 38px minmax(0, 1fr) auto auto; gap: 0 10px; align-items: center; padding: 7px 10px 7px 8px; border-bottom: 1px solid var(--line); background: var(--panel); }
.ro li::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: transparent; }
.ro li[data-state="queued"]::before { background: var(--next); }
.ro li[data-state="playing"]::before { background: var(--play); }
.ro li[data-state="playing"] { background: linear-gradient(90deg, var(--play-soft), transparent 70%); }
.ro li[data-state="queued"] { background: linear-gradient(90deg, var(--next-soft), transparent 70%); }
.ro li[data-state="played"] .t, .ro li[data-state="played"] .s { color: var(--faint); }
.ro li[data-state="played"] .thumb { opacity: 0.45; }
.ro li[data-state="missed"]::before { background: var(--hot); }
.ro li[data-dragging="true"] { opacity: 0.35; }
.ro li[data-over="before"] { box-shadow: 0 2px 0 -1px var(--focus) inset; }
.ro li[data-over="after"] { box-shadow: 0 -2px 0 -1px var(--focus) inset; }
.ro .grip { color: var(--faint); cursor: grab; text-align: center; user-select: none; font-size: 15px; letter-spacing: -2px; }
.thumb { width: 38px; height: 38px; border-radius: 4px; background: var(--well); border: 1px solid var(--line); object-fit: cover; display: flex; align-items: center; justify-content: center; color: var(--faint); font-size: 16px; overflow: hidden; }
img.thumb { display: block; }
.ro .txt, .lib .txt { min-width: 0; }
.ro .t, .lib .t { display: block; font-weight: 600; font-size: 14.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ro .s, .lib .s { display: block; color: var(--muted); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ro .chip { font-size: 12px; font-weight: 700; padding: 1px 8px; border-radius: 999px; border: 1px solid var(--line-strong); color: var(--muted); white-space: nowrap; }
.ro li[data-state="playing"] .chip { color: var(--play); border-color: var(--play); }
.ro li[data-state="queued"] .chip { color: var(--next); border-color: var(--next); }
.ro li[data-state="missed"] .chip { color: var(--hot); border-color: var(--hot); }
.ro .acts { display: flex; gap: 4px; align-items: center; }
.ro li.note { grid-template-columns: 18px minmax(0, 1fr) auto; background: var(--raised); }
.ro li.note .t { font-weight: 500; font-style: normal; white-space: normal; }
.ro li.note .tag { color: var(--next); font-weight: 700; font-size: 12px; }
.ro li.note input { width: 100%; min-height: 28px; background: var(--well); border: 1px solid var(--line-strong); border-radius: 5px; padding: 0 8px; }
.ro li.editor { grid-template-columns: 1fr; background: var(--well); padding: 10px 12px 10px 22px; }
.ro li.editor::before { display: none; }
.cue-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; gap: 8px; align-items: end; }
.cue-grid label { display: block; font-size: 12px; color: var(--muted); margin-bottom: 2px; }
.cue-grid input, .pad-editor input[type="text"], .pad-editor input[type="number"] {
  width: 100%; min-height: 30px; background: var(--panel); border: 1px solid var(--line-strong); border-radius: 5px; padding: 0 8px; font-variant-numeric: tabular-nums;
}
.ro-foot { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 10px; border-top: 1px solid var(--line); flex: none; }
.ro-foot .sp { flex: 1; }
.dropping { outline: 2px dashed var(--focus); outline-offset: -4px; }

/* ---------------------------------------------------------------- cart wall */
.carts-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; padding: 10px; }
.pad {
  position: relative; min-height: 70px; border-radius: 7px; padding: 8px 9px 14px; text-align: left; cursor: pointer;
  border: 1px solid transparent; background: var(--pc, var(--c-slate)); color: var(--pc-t, var(--c-slate-t));
  display: flex; flex-direction: column; justify-content: flex-start; gap: 2px; overflow: hidden;
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.04) inset;
  transition: transform 0.06s, filter 0.12s;
}
.pad:hover:not(:disabled) { filter: brightness(1.12); }
.pad:active:not(:disabled) { transform: translateY(2px); box-shadow: none; }
.pad .pl { font-weight: 700; font-size: 13.5px; line-height: 1.15; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere; }
.pad .pk { position: absolute; top: 5px; right: 6px; font-size: 11px; font-weight: 700; opacity: 0.7; }
.pad .pt { margin-top: auto; font-size: 12px; font-variant-numeric: tabular-nums; opacity: 0.85; }
.pad .pp { position: absolute; left: 0; right: 0; bottom: 0; height: 5px; background: rgba(0, 0, 0, 0.3); display: none; }
.pad .pp i { display: block; height: 100%; width: 0; background: #fff; opacity: 0.9; }
.pad[data-playing="true"] { outline: 2px solid var(--play); outline-offset: 1px; filter: brightness(1.2); }
.pad[data-playing="true"] .pp { display: block; }
.pad[data-stopping="true"] { filter: brightness(0.9); }
.pad[data-empty="true"] { background: transparent; border: 1px dashed var(--line-strong); color: var(--faint); box-shadow: none; align-items: center; justify-content: center; font-size: 22px; }
.pad[data-empty="true"] .pk { color: var(--faint); }
.pad[data-over="true"] { outline: 2px dashed var(--focus); outline-offset: 1px; }
.pad[data-bad="true"] { background: repeating-linear-gradient(135deg, var(--panel), var(--panel) 8px, var(--well) 8px, var(--well) 16px); color: var(--muted); border: 1px solid var(--air); }
.carts-off { padding: 18px 14px; color: var(--muted); }
.carts-off strong { color: var(--next); }
.pad-editor { padding: 10px 12px 12px; border-top: 1px solid var(--line); background: var(--well); display: grid; gap: 8px; }
.pad-editor .row { display: flex; gap: 8px; align-items: end; flex-wrap: wrap; }
.pad-editor label { display: block; font-size: 12px; color: var(--muted); margin-bottom: 2px; }
.swatches { display: flex; gap: 6px; flex-wrap: wrap; }
.swatches button { width: 24px; height: 24px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; background: var(--pc); }
.swatches button[aria-pressed="true"] { border-color: var(--text); }
.pad-pick { max-height: 180px; overflow: auto; border: 1px solid var(--line); border-radius: 6px; background: var(--panel); }
.pad-pick button { display: flex; width: 100%; gap: 8px; align-items: center; padding: 6px 8px; background: none; border: 0; border-bottom: 1px solid var(--line); text-align: left; cursor: pointer; }
.pad-pick button:hover { background: var(--key); }
.pad-pick button[aria-pressed="true"] { background: var(--play-soft); }

/* ---------------------------------------------------------------- library */
.lib-tools { display: flex; gap: 8px; padding: 8px 10px; border-bottom: 1px solid var(--line); flex: none; }
.lib-tools input[type="search"] { flex: 1; min-height: 32px; background: var(--well); border: 1px solid var(--line-strong); border-radius: 6px; padding: 0 10px; }
.lib-tools select { min-height: 32px; background: var(--key); border: 1px solid var(--line-strong); border-radius: 6px; padding: 0 6px; }
.lib { list-style: none; margin: 0; padding: 0; }
.lib li { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto auto; gap: 0 10px; align-items: center; padding: 7px 10px; border-bottom: 1px solid var(--line); }
.lib li[data-playing="true"] { background: linear-gradient(90deg, var(--play-soft), transparent 70%); }
.lib li[data-ok="false"] { background: var(--air-soft); }
.lib li[data-ok="false"] .t { color: var(--muted); }
.lib li[data-open="true"] { background: var(--raised); }
.lib .len { color: var(--muted); font-variant-numeric: tabular-nums; font-size: 13px; min-width: 40px; text-align: right; }
.lib .acts { display: flex; gap: 4px; }
.lib .problem, .lib .warn { grid-column: 2 / -1; font-size: 12.5px; font-weight: 600; margin-top: 3px; overflow-wrap: anywhere; }
.lib .problem { color: var(--air); }
.lib .warn { color: var(--next); }
.lib-note { padding: 6px 12px; color: var(--muted); font-size: 12.5px; border-top: 1px solid var(--line); flex: none; }

/* ---------------------------------------------------------------- microphones */
.strips { padding: 8px; display: grid; gap: 8px; }
.strip {
  position: relative; display: grid; grid-template-columns: 14px minmax(0, 1fr) auto; gap: 6px 10px; align-items: center;
  padding: 9px 10px 9px 12px; background: var(--raised); border: 1px solid var(--line); border-radius: 7px;
}
.strip .lamp { width: 12px; height: 12px; border-radius: 50%; background: var(--faint); align-self: start; margin-top: 4px; }
.strip[data-state="off"] .lamp { background: var(--good); }
.strip[data-state="live"] { border-color: var(--air); box-shadow: 0 0 0 1px var(--air), 0 0 20px var(--air-soft); }
.strip[data-state="live"] .lamp { background: var(--air); box-shadow: 0 0 10px var(--air); }
.strip[data-state="nosignal"] .lamp { background: var(--next); }
.strip[data-state="empty"] { opacity: 0.6; }
.strip[data-locked="true"] { background: var(--well); }
.strip .ident { min-width: 0; }
.strip .nm { font-weight: 700; font-size: 15px; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.strip .st { color: var(--muted); font-size: 12.5px; display: block; }
.strip[data-state="live"] .st { color: var(--air); font-weight: 700; }
.strip .micbtn { min-width: 92px; }
.strip .mtr { grid-column: 2 / -1; height: 6px; border-radius: 3px; background: var(--well); border: 1px solid var(--line); overflow: hidden; }
.strip .mtr > span { display: block; height: 100%; width: 0; background: var(--play); transition: width 0.06s linear; }
.strip .mtr[data-zone="hot"] > span { background: var(--next); }
.strip .mtr[data-zone="clip"] > span { background: var(--air); }
.strip .fader { grid-column: 2 / -1; display: grid; grid-template-columns: minmax(0, 1fr) 56px; gap: 8px; align-items: center; }
.strip .pct { text-align: right; color: var(--muted); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.strip .whoact { grid-column: 2 / -1; display: flex; gap: 6px; flex-wrap: wrap; }
.strip .whoact:empty { display: none; }
.mics-foot { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-top: 1px solid var(--line); flex: none; flex-wrap: wrap; }
.mics-foot .sp { flex: 1; }
.mics-foot .sync { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 12.5px; }
.mics-foot .sync b { color: var(--text); min-width: 52px; text-align: center; font-variant-numeric: tabular-nums; }
.kbd { display: inline-block; min-width: 18px; padding: 0 4px; text-align: center; border: 1px solid var(--line-strong); border-radius: 4px; font-size: 11px; color: var(--muted); }
.return-note { padding: 6px 12px; font-size: 12.5px; color: var(--muted); border-top: 1px solid var(--line); }
.return-note[data-state="warn"] { color: var(--next); }

/* ---------------------------------------------------------------- lobby */
.people { list-style: none; margin: 0; padding: 8px; display: grid; gap: 8px; }
.person { padding: 9px 10px; background: var(--raised); border: 1px solid var(--line); border-radius: 7px; display: grid; gap: 7px; }
.phead { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.pname { font-weight: 700; font-size: 15px; }
.pwait, .pnote { color: var(--muted); font-size: 12.5px; }
.ptalk { color: var(--next); font-weight: 700; font-size: 12.5px; }
.pact { display: flex; gap: 5px; flex-wrap: wrap; align-items: center; }
.pact .plab { color: var(--muted); font-size: 12.5px; margin-right: 2px; }
.pact .sp { flex: 1; }
#p-lobby[data-waiting="true"] .ph h2::after { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--next); margin-left: 8px; box-shadow: 0 0 8px var(--next); }
.badge { display: inline-block; min-width: 20px; padding: 0 7px; border-radius: 999px; background: var(--key); color: var(--muted); font-size: 12px; font-weight: 700; text-align: center; }
.join-box { padding: 8px 12px; border-top: 1px solid var(--line); font-size: 12.5px; color: var(--muted); flex: none; }
.join-box code { color: var(--text); font-family: ui-monospace, Consolas, monospace; font-size: 12.5px; overflow-wrap: anywhere; }
.team-h { margin: 4px 10px 0; font-size: 12.5px; font-weight: 700; color: var(--muted); }

/* ---------------------------------------------------------------- my microphone (the join page, inside the desk) */
.mymic { flex: none; }
.mymic iframe { display: block; width: 100%; height: 340px; border: 0; background: var(--panel); border-radius: 0 0 var(--radius) var(--radius); }

/* ---------------------------------------------------------------- menus and toasts */
.menu { position: fixed; z-index: 50; min-width: 180px; background: var(--raised); border: 1px solid var(--line-strong); border-radius: 8px; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45); padding: 4px; }
.menu button { display: block; width: 100%; padding: 7px 10px; text-align: left; background: none; border: 0; border-radius: 5px; cursor: pointer; font-size: 13.5px; }
.menu button:hover, .menu button:focus-visible { background: var(--key-hover); }
.menu button.danger { color: var(--air); }
.menu hr { border: 0; border-top: 1px solid var(--line); margin: 4px 0; }
.toasts { position: fixed; left: 14px; bottom: 14px; z-index: 60; display: grid; gap: 8px; max-width: min(440px, calc(100vw - 28px)); }
.toast { padding: 10px 14px; border-radius: 8px; background: var(--raised); border: 1px solid var(--line-strong); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4); font-size: 13.5px; }
.toast.err { border-color: var(--air); }
.toast b { display: block; margin-bottom: 2px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ---------------------------------------------------------------- participant desk: no lobby, no host controls */
body[data-mode="participant"] .host-only { display: none !important; }

/* ---------------------------------------------------------------- narrower screens: one column at a time */
@media (max-width: 1180px) {
  html, body { height: auto; }
  body { overflow: auto; grid-template-rows: auto auto 1fr; min-height: 100%; }
  .tabs { display: flex; position: sticky; top: 0; z-index: 20; background: var(--bg); padding-bottom: 8px; }
  .deck { display: block; padding: 10px; }
  .col { display: none; }
  .col[data-active="true"] { display: flex; }
  .panel.grow { flex: none; }
  .scroll { max-height: none; overflow: visible; }
  .bar { flex-wrap: wrap; gap: 8px 12px; }
  .clock { margin-left: 0; }
  .master { min-width: 120px; }
  .readout #digits { font-size: 64px; }
  .carts-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .ro li { grid-template-columns: 14px 34px minmax(0, 1fr) auto; }
  .ro li .chip, .ro li .cues { display: none; }
  .carts-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .now { grid-template-columns: 70px minmax(0, 1fr); }
  .now .cover { width: 70px; height: 70px; }
  .readout #digits { font-size: 54px; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* ---------------------------------------------------------------- additions once the page existed */
#col-mics { overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
#col-mics > .panel { flex: none; }
#waitChip { border-color: var(--next); color: var(--next); }
#waitChip:hover:not(:disabled) { background: var(--next-soft); }
#recBtn[data-on="true"] { border-color: var(--next); color: var(--next); background: var(--next-soft); }
#listenBtn[data-state="playing"], #listenBtn[data-state="connecting"] { border-color: var(--play); color: var(--play); background: var(--play-soft); }
.pad[data-empty="true"] .pl { font-size: 22px; }
.pad[data-empty="true"] .pt, .pad[data-empty="true"] .pp { display: none; }
.carts-grid[data-edit="true"] .pad:not([data-empty="true"]) { outline: 1px dashed var(--text); outline-offset: -3px; }
.lib li[data-playing="true"] .t::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 7px; border-radius: 50%; background: var(--play); box-shadow: 0 0 6px var(--play); vertical-align: 1px; }
.ro li.note .txt { display: flex; gap: 8px; align-items: baseline; }
.strip .fader input { min-width: 0; }

/* pop-up sheets (pad editor, pad chooser) */
dialog.sheet { width: min(560px, calc(100vw - 24px)); max-height: calc(100vh - 32px); padding: 0; border: 1px solid var(--line-strong); border-radius: 10px; background: var(--panel); color: var(--text); box-shadow: 0 24px 64px rgba(0, 0, 0, 0.55); }
dialog.sheet.wide { width: min(1000px, calc(100vw - 24px)); }
dialog.sheet::backdrop { background: rgba(5, 8, 11, 0.62); }
dialog.sheet[open] { display: flex; flex-direction: column; }
.sh-head { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--line); flex: none; }
.sh-head h2 { margin: 0; flex: 1; font-size: 16px; overflow-wrap: anywhere; }
.sh-body { padding: 12px 14px; overflow-y: auto; min-height: 0; flex: 1; }
.sh-foot { display: flex; gap: 8px; padding: 10px 14px; border-top: 1px solid var(--line); flex: none; flex-wrap: wrap; }
.sh-body .pad-editor { gap: 12px; }
.sh-body .pad-editor > div > label, .sh-body .pad-editor .row label { display: block; font-size: 12.5px; color: var(--muted); margin-bottom: 3px; }
.sh-body #padName { width: 100%; min-height: 32px; background: var(--well); border: 1px solid var(--line-strong); border-radius: 6px; padding: 0 10px; }
.sh-body .carts-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.sh-body .carts-grid .pad { min-height: 56px; }
@media (max-width: 560px) { .sh-body .carts-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* a little less height on the pads when the screen is short */
.pad { min-height: clamp(58px, 8.6vh, 86px); }

/* ---------------------------------------------------------------- second pass (after looking at it) */
.msg.warn { color: var(--next); }
.ph h2 { white-space: nowrap; }
.ph .count { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }

/* now playing: the cover beside the title and the countdown, the buttons beside the played time */
.now { grid-template-columns: 96px minmax(0, 1fr); gap: 2px 14px; }
.now .cover { grid-row: 1 / span 2; width: 96px; height: 96px; font-size: 38px; }
.readout { grid-column: 2; padding-top: 2px; flex-wrap: wrap; }
.readout #digits { font-size: clamp(44px, min(8.4vh, 4.6vw), 84px); }
.readout[data-idle="true"] #digits { color: var(--faint); }
.readout .intro-box b { font-size: clamp(24px, 3.6vh, 34px); }
.tape { margin-top: 6px; }
.now-actions { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; padding-top: 6px; }
.now-actions .tape-text { flex: 1; min-width: 0; color: var(--muted); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.next-up { grid-column: 1 / -1; color: var(--muted); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-top: 2px; }
.next-up b { color: var(--next); font-weight: 700; }

/* pads: the key sits bottom right, so a name can use the full width */
.pad .pk { top: auto; bottom: 6px; right: 7px; }
.pad .pl { font-size: 13px; overflow-wrap: break-word; word-break: normal; hyphens: auto; }
.pad .pt { margin-top: auto; padding-right: 14px; }

/* microphone strips: an empty one is a single quiet line */
.strip[data-state="empty"] .mtr, .strip[data-state="empty"] .fader { display: none; }
.strip { padding: 8px 10px 8px 12px; gap: 5px 10px; }
.strip .whoact { padding-top: 2px; }
.master { min-width: 210px; }
.master .bar-track { min-width: 120px; }

/* ---------------------------------------------------------------- third pass */
.bar { flex-wrap: nowrap; white-space: nowrap; gap: 12px; }
.bar > * { flex: none; }
.bar .bar-sp { flex: 1 1 0; min-width: 0; }
.clock { font-size: 20px; margin-left: 0; }
.master { min-width: 0; }
.master .bar-track { width: 110px; flex: none; min-width: 0; }
.master .db { min-width: 0; font-size: 12px; }
.who { max-width: 260px; overflow: hidden; text-overflow: ellipsis; }

/* every column can scroll when the window is short, and the lists inside keep a usable height */
.col { overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
.col > .panel { flex: none; }
.col > .panel.grow { flex: 1 1 0; min-height: 240px; }      /* the lists scroll inside their panel, so now playing and the cart wall stay in view */

.music { flex-wrap: nowrap; gap: 8px; }
.music .state { display: none; }
.music .state:not(:empty) { display: inline; }
.pad { padding: 7px 6px 14px 7px; }
.pad .pl { font-size: 12.5px; }

/* short windows (laptops): slimmer pads, so the library keeps room to be useful */
@media (max-height: 800px) and (min-width: 1181px) {
  .pad { min-height: 56px; padding: 6px 8px 12px; }
  .carts-grid { gap: 6px; padding: 8px; }
  .pad .pl { font-size: 12px; }
  .pad .pt { font-size: 11.5px; }
}

/* ---------------------------------------------------------------- narrow screens, again (these must come last) */
@media (max-width: 1180px) {
  body { grid-template-columns: minmax(0, 1fr); }
  .bar { flex-wrap: wrap; white-space: normal; row-gap: 6px; }
  .bar > * { flex: none; }
  .bar .bar-sp { flex: 1 1 8px; min-width: 0; }
  .col { overflow: visible; }
  .col > .panel.grow { flex: none; min-height: 0; }
  #col-mics { overflow: visible; }
  .tabs { padding-left: 10px; padding-right: 10px; }
}
@media (max-width: 560px) {
  .master .db { display: none; }
  .master .bar-track { width: 90px; }
  .clock { font-size: 18px; }
  #themeBtn { display: none; }
  .brand { font-size: 17px; }
  .now .cover { width: 64px; height: 64px; font-size: 26px; }
  .now { grid-template-columns: 64px minmax(0, 1fr); }
  .readout #digits { font-size: 48px; }
}

/* talkback and "disable my mic" switches: amber when they are in the cautious position */
.tbbtn[aria-pressed="false"], .tbbtn[aria-pressed="false"]:hover:not(:disabled) { color: var(--next); border-color: var(--next); background: var(--next-soft); }
.lockbtn[aria-pressed="true"], .lockbtn[aria-pressed="true"]:hover:not(:disabled) { color: var(--next); border-color: var(--next); background: var(--next-soft); }
.tbbtn:disabled { opacity: 0.55; }

/* phones: bigger things to tap, and the music row may wrap */
@media (max-width: 560px) {
  .btn { min-height: 38px; }
  .btn.small { min-height: 36px; }
  .btn.icon { min-width: 38px; }
  .music { flex-wrap: wrap; }
  .ro li { padding: 8px 8px 8px 6px; }
}

/* ---------------------------------------------------------------- the waveform editor */
.wave-ed { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.wave-ed .sp, .media-page .sp { flex: 1; }
.wave-ov { display: block; width: 100%; height: 40px; cursor: pointer; outline-offset: 2px; border-radius: 4px; box-shadow: 0 0 0 1px var(--line); background: var(--well); }
.wave-stage { position: relative; border-radius: 4px; box-shadow: 0 0 0 1px var(--line); overflow: hidden; background: var(--well); }
.wave-main { display: block; width: 100%; cursor: crosshair; }
.wave-main:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.wave-msg { margin: 0; font-size: 12.5px; color: var(--muted); }
.wave-msg.err { color: var(--hot); font-weight: 600; }
.wave-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.wave-read { font-variant-numeric: tabular-nums; color: var(--muted); font-size: 13px; min-width: 112px; padding: 0 4px; }
.wave-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(176px, 1fr)); gap: 8px; }
.wf label { display: block; font-size: 12px; color: var(--muted); margin-bottom: 2px; }
.wf-row { display: flex; gap: 4px; align-items: center; }
.wf-row input { flex: 1; min-width: 0; min-height: 30px; background: var(--well); border: 1px solid var(--line-strong); border-radius: 5px; padding: 0 8px; font-variant-numeric: tabular-nums; }
.wf-row input[aria-invalid="true"] { border-color: var(--hot); }
.ro li.editor .wave-ed .wf-row input { background: var(--panel); }
.wave-help { margin: 0; font-size: 12px; color: var(--muted); }

/* ---------------------------------------------------------------- the Media page */
.media-page {
  display: none; flex-direction: column; position: relative; min-height: 0; min-width: 0; margin: 10px; overflow: hidden;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); color: var(--text); box-shadow: var(--shadow);
}
body[data-view="media"] .media-page { display: flex; }
body[data-view="media"] .deck, body[data-view="media"] .tabs { display: none; }
.mm-head { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--line); flex: none; }
.mm-head h2 { margin: 0; font-size: 17px; }
.mm-count { color: var(--muted); font-size: 13px; }
.mm-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 14px; border-bottom: 1px solid var(--line); flex: none; }
.mm-bar input[type="search"] { flex: 1 1 220px; min-width: 0; min-height: 32px; background: var(--well); border: 1px solid var(--line-strong); border-radius: 6px; padding: 0 10px; }
.mm-bar select { min-height: 32px; background: var(--key); border: 1px solid var(--line-strong); border-radius: 6px; padding: 0 6px; max-width: 100%; }
.mm-notice { margin: 0; padding: 8px 14px; background: var(--next-soft); border-bottom: 1px solid var(--next); font-size: 13px; flex: none; }
.mm-body { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(300px, 410px) minmax(0, 1fr); }
.mm-left { display: flex; flex-direction: column; min-height: 0; border-right: 1px solid var(--line); }
.mm-bulk { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 8px 10px; background: var(--raised); border-bottom: 1px solid var(--line); flex: none; }
.mm-bulk input { min-height: 26px; width: 130px; background: var(--well); border: 1px solid var(--line-strong); border-radius: 5px; padding: 0 8px; }
.mm-uploads { padding: 8px 10px; border-bottom: 1px solid var(--line); background: var(--well); max-height: 210px; overflow-y: auto; flex: none; }
.mm-up-head { display: flex; align-items: center; gap: 8px; font-size: 13px; margin-bottom: 4px; }
.mm-up-list { list-style: none; margin: 0; padding: 0; }
.mm-up { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 1px 8px; padding: 5px 0; border-top: 1px solid var(--line); font-size: 12.5px; }
.mm-up .n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.mm-up .z { color: var(--muted); font-variant-numeric: tabular-nums; }
.mm-up .btn { grid-column: 3; grid-row: 1 / span 2; align-self: center; }
.mm-up .pbar { grid-column: 1 / 3; height: 4px; border-radius: 2px; background: var(--line-strong); overflow: hidden; align-self: center; }
.mm-up .pbar i { display: block; height: 100%; width: 0; background: var(--play); transition: width 0.15s linear; }
.mm-up .st { grid-column: 1 / 3; color: var(--muted); }
.mm-up .w { grid-column: 1 / 3; color: var(--next); font-weight: 600; overflow-wrap: anywhere; }
.mm-up[data-state="done"] .pbar i, .mm-up[data-state="warn"] .pbar i { background: var(--good); }
.mm-up[data-state="done"] .st { color: var(--good); }
.mm-up[data-state="error"] .pbar i { background: var(--hot); }
.mm-up[data-state="error"] .st { color: var(--hot); font-weight: 600; overflow-wrap: anywhere; }
.mm-up[data-state="skipped"], .mm-up[data-state="cancelled"] { opacity: 0.65; }
.mm-up-more { margin: 4px 0 0; color: var(--muted); font-size: 12px; }
.mm-scroll { flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
.mm-list { list-style: none; margin: 0; padding: 0; }
.mm-item { display: flex; align-items: stretch; border-bottom: 1px solid var(--line); }
.mm-item:hover { background: var(--raised); }
.mm-item[data-state="bad"] { background: var(--air-soft); }
.mm-item[data-state="bad"] .t { color: var(--muted); }
.mm-item[data-selected="true"] { background: var(--raised); box-shadow: inset 3px 0 0 var(--focus); }
.mm-check { display: flex; align-items: center; padding: 0 2px 0 10px; cursor: pointer; }
.mm-check input { width: 16px; height: 16px; margin: 0; cursor: pointer; }
.mm-open { flex: 1; min-width: 0; display: grid; grid-template-columns: 40px minmax(0, 1fr) auto auto; gap: 0 10px; align-items: center; padding: 7px 10px; border: 0; background: none; color: inherit; text-align: left; cursor: pointer; }
.mm-open:focus-visible { outline-offset: -3px; }
.mm-open .thumb { width: 40px; height: 40px; }
.mm-open .txt { min-width: 0; }
.mm-open .t { display: block; font-weight: 600; font-size: 14.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mm-open .s { display: block; color: var(--muted); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mm-item[data-state="bad"] .s { color: var(--air); font-weight: 600; }
.mm-open .len { color: var(--muted); font-variant-numeric: tabular-nums; font-size: 13px; min-width: 38px; text-align: right; }
.mm-open .tags { display: flex; gap: 4px; }
.mm-list .chip { font-size: 11.5px; font-weight: 700; padding: 1px 7px; border-radius: 999px; border: 1px solid var(--line-strong); color: var(--muted); white-space: nowrap; }
.mm-list .chip.cue { color: var(--good); border-color: var(--good); }
.mm-list .chip.warn { color: var(--next); border-color: var(--next); }
.mm-list li.more { display: block; text-align: center; padding: 10px; border-bottom: 0; }
.mm-list li.more:hover { background: none; }
.mm-empty { margin: 0; padding: 18px 16px; color: var(--muted); }
.mm-pane { min-width: 0; min-height: 0; overflow-y: auto; padding: 14px 18px 20px; display: flex; flex-direction: column; gap: 14px; scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
.mm-pane-empty { margin: auto; max-width: 360px; text-align: center; color: var(--muted); }
.mm-pane-empty strong { display: block; color: var(--text); font-size: 17px; margin-bottom: 4px; }
.mm-pane-empty p { margin: 0; }
.mm-top { display: flex; align-items: center; gap: 16px; }
.thumb.big { width: 96px; height: 96px; border-radius: 6px; font-size: 38px; flex: none; }
.mm-top .txt { min-width: 0; }
.mm-top h3 { margin: 0; font-size: 21px; line-height: 1.2; overflow-wrap: anywhere; }
.mm-top .artist { margin: 2px 0 0; font-size: 15px; color: var(--muted); }
.mm-top .file { margin: 6px 0 0; font-size: 12px; color: var(--faint); overflow-wrap: anywhere; }
.mm-problem { margin: 0; padding: 8px 10px; border-radius: 6px; border: 1px solid var(--line-strong); font-size: 13px; font-weight: 600; overflow-wrap: anywhere; }
.mm-problem[data-kind="bad"] { color: var(--air); background: var(--air-soft); border-color: var(--air); }
.mm-problem[data-kind="warn"] { color: var(--next); background: var(--next-soft); border-color: var(--next); }
.mm-problem[data-kind="info"] { color: var(--muted); font-weight: 500; }
.mm-sec { padding-top: 12px; border-top: 1px solid var(--line); min-width: 0; }
.mm-sec-h { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.mm-sec-h h4 { margin: 0; font-size: 14px; }
.mm-saved { font-size: 12px; color: var(--muted); }
.mm-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.mm-fields .wide { grid-column: 1 / -1; }
.mm-fields label, .mm-rename label { display: block; font-size: 12.5px; color: var(--muted); margin-bottom: 3px; }
.mm-fields input, .mm-fields textarea, .mm-rename input { width: 100%; min-height: 32px; background: var(--well); border: 1px solid var(--line-strong); border-radius: 6px; padding: 0 10px; font: inherit; color: var(--text); }
.mm-fields textarea { padding: 6px 10px; resize: vertical; min-height: 56px; }
.mm-fields ::placeholder, .mm-bulk ::placeholder { color: var(--faint); }
.mm-hint { margin: 6px 0 0; font-size: 12.5px; color: var(--muted); }
/* A track's own volume (Media page) */
.mm-gain { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.mm-gain input[type=range] { flex: 1 1 200px; min-width: 140px; max-width: 420px; accent-color: var(--play); }
.mm-gain-n { min-width: 11.5em; font-variant-numeric: tabular-nums; font-weight: 600; color: var(--text); }
.mm-gain-n[data-zero="true"] { font-weight: 400; color: var(--muted); }
.mm-gain-warn { color: var(--next); }
.mm-gain-warn[hidden] { display: none; }
.mm-list .chip.vol { color: var(--play); border-color: var(--play); }
.mm-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.mm-tech { margin: 0 0 8px; color: var(--muted); font-size: 13px; }
.mm-rename { display: flex; flex-wrap: wrap; align-items: end; gap: 6px; margin-bottom: 10px; }
.mm-rename label { flex-basis: 100%; margin-bottom: 0; }
.mm-rename input { flex: 1 1 220px; width: auto; }
.mm-rename .ext { color: var(--muted); padding-bottom: 6px; }
.mm-drop { position: absolute; inset: 0; z-index: 10; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; border: 3px dashed var(--focus); border-radius: inherit; background: rgba(12, 15, 18, 0.88); pointer-events: none; text-align: center; padding: 20px; }
:root[data-theme="light"] .mm-drop { background: rgba(243, 245, 247, 0.9); }
.mm-drop strong { font-size: 22px; }
.mm-drop span { color: var(--muted); }

/* delete: a deliberate, not a red, button (red is kept for a live microphone) */
.btn.danger-btn { color: var(--hot); border-color: var(--hot); background: transparent; }
.btn.danger-btn:hover:not(:disabled) { background: var(--key-hover); }
.btn.primary.danger-btn, .btn.primary.danger-btn:hover:not(:disabled) { background: var(--hot); border-color: var(--hot); color: #1b0d00; }

@media (max-width: 900px) {
  .media-page { margin: 0; border-radius: 0; border-left: 0; border-right: 0; border-bottom: 0; }
  .mm-body { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(120px, 36%) minmax(0, 1fr); }
  .mm-left { border-right: 0; border-bottom: 1px solid var(--line); }
  .mm-pane { padding: 12px 12px 18px; }
  .mm-fields { grid-template-columns: minmax(0, 1fr); }
  .mm-open .tags { display: none; }
  .thumb.big { width: 64px; height: 64px; font-size: 26px; }
  .mm-top h3 { font-size: 18px; }
}

/* ---------------------------------------------------------------- cart wall pages, loop mark, plain forms */
.cpages { display: flex; align-items: flex-end; gap: 4px; padding: 6px 10px 0; border-bottom: 1px solid var(--line); flex: none; }
.ctabs { display: flex; flex-wrap: wrap; gap: 3px; min-width: 0; flex: 1; }
.ctab {
  position: relative; display: inline-flex; align-items: center; gap: 6px; min-height: 28px; max-width: 170px; padding: 0 12px;
  background: transparent; border: 1px solid transparent; border-bottom: 0; border-radius: 6px 6px 0 0; margin-bottom: -1px;
  color: var(--muted); font-size: 13px; font-weight: 600; cursor: pointer;
}
.ctab .tn { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ctab:hover { color: var(--text); background: var(--key); }
.ctab[aria-selected="true"] { color: var(--text); background: var(--panel); border-color: var(--line-strong); border-bottom: 1px solid var(--panel); }
.ctab .dot { display: none; width: 7px; height: 7px; border-radius: 50%; background: var(--play); box-shadow: 0 0 6px var(--play); flex: none; }
.ctab[data-playing="true"] .dot { display: inline-block; }
.ctab[data-over="true"] { outline: 2px dashed var(--focus); outline-offset: -2px; color: var(--text); }
.cpages .btn.icon { margin-bottom: 2px; min-width: 28px; }
.ctabs.chooser { padding: 0 0 8px; }
.ctabs.chooser .ctab { border-bottom: 1px solid var(--line-strong); border-radius: 6px; margin-bottom: 0; }
.pad .pg { position: absolute; top: 4px; right: 6px; font-size: 13px; font-weight: 700; opacity: 0.9; line-height: 1; }
.pad[data-loop="true"] .pl { padding-right: 15px; }
.pad-editor.plain { background: transparent; border: 0; padding: 0; }
.sh-body .pad-editor .chk { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--text); margin: 0 0 4px; cursor: pointer; }
.sh-body .pad-editor .chk input { width: 18px; height: 18px; margin: 0; }
.pad-pick .txt { display: flex; flex-direction: column; min-width: 0; }
.pad-pick .txt .t { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pad-pick .txt .s { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pad-pick .cover { flex: none; }


/* ================================================================ stage 6 */
:root { --outro: #b693f5; }
:root[data-theme="light"] { --outro: #7a4fc4; }

/* the Desk / Media switch */
.views { display: inline-flex; border: 1px solid var(--line-strong); border-radius: 7px; overflow: hidden; }
.views .btn { border: 0; border-radius: 0; background: transparent; color: var(--muted); }
.views .btn + .btn { border-left: 1px solid var(--line-strong); }
.views .btn[aria-pressed="true"] { background: var(--raised); color: var(--text); }
.views .btn:hover:not(:disabled):not([aria-pressed="true"]) { background: var(--key); color: var(--text); }
/* narrow screens: the Media page needs the window to itself, so the page does not scroll behind it */
@media (max-width: 1180px) {
  body[data-view="media"], body[data-view="recordings"] { height: 100vh; height: 100dvh; overflow: hidden; grid-template-rows: auto minmax(0, 1fr); }
}

/* the running order is the main thing: it gets the widest column */
.deck { grid-template-columns: minmax(420px, 1.25fr) minmax(440px, 1fr) minmax(300px, 0.58fr); }

/* now playing: the cue countdowns, the outro on the tape, the buttons */
.readout .cue-boxes { margin-left: auto; display: flex; gap: 18px; text-align: right; }
.readout .cue-boxes .intro-box { margin-left: 0; }
.readout .outro-box b { color: var(--outro); }
.tape .outro { position: absolute; top: 0; bottom: 0; right: 0; width: 0; background: rgba(182, 147, 245, 0.2); border-left: 2px solid var(--outro); display: none; }
.now-actions { flex-wrap: wrap; }
.now-actions .tape-text { flex: 1 1 120px; }
#loopBtn[aria-pressed="true"] { background: var(--play-soft); border-color: var(--play); color: var(--play); }

/* the players */
.players { display: grid; gap: 8px; padding: 0 12px 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.players[data-count="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.player { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; align-items: center; gap: 0 9px; padding: 8px 10px; background: var(--raised); border: 1px solid var(--line); border-radius: 7px; min-width: 0; }
.player .pid { align-self: start; width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--line-strong); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; color: var(--muted); }
.player .pbody { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.player .pstate { font-size: 12px; color: var(--muted); }
.player .pstate b { color: var(--text); }
.player .pt { font-weight: 700; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.player .ps { font-size: 12.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.player .ppills { display: flex; flex-wrap: wrap; gap: 4px; padding-top: 3px; min-height: 0; }
.player .ppills:empty { display: none; }
.ppill { font-size: 12px; font-weight: 700; padding: 1px 8px; border-radius: 999px; border: 1px solid var(--line-strong); color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.player[data-state="air"] { border-color: var(--play); background: linear-gradient(90deg, var(--play-soft), transparent 80%), var(--raised); }
.player[data-state="air"] .pid { background: var(--play); border-color: var(--play); color: #04201f; }
.player[data-state="loaded"] { border-color: var(--next); }
.player[data-state="loaded"] .pid { border-color: var(--next); color: var(--next); }
.player[data-state="idle"], .player[data-state="empty"] { opacity: 0.7; border-style: dashed; }
.ppill[data-kind="ends"] { color: var(--text); border-color: var(--play); }
.ppill[data-kind="ends"][data-level="warn"] { color: var(--next); border-color: var(--next); }
.ppill[data-kind="ends"][data-level="end"] { color: var(--hot); border-color: var(--hot); }
.ppill[data-kind="vocal"] { color: var(--next); border-color: var(--next); }
.ppill[data-kind="outro"] { color: var(--outro); border-color: var(--outro); }
.ppill[data-kind="outro"][data-level="now"] { background: var(--outro); color: #1b1030; }
.player > .btn { align-self: center; }

/* running order: loop on every row */
.ro .acts .loopbtn { color: var(--faint); }
.ro .acts .loopbtn[aria-pressed="true"] { color: var(--play); }
.cue-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) auto; }
@media (max-width: 700px) { .cue-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* microphones: a slot nobody is using folds to one quiet line */
#strips[data-fold="true"] .strip[data-state="empty"] { padding: 4px 10px 4px 12px; grid-template-columns: 14px minmax(0, 1fr); min-height: 0; }
#strips[data-fold="true"] .strip[data-state="empty"] .lamp { margin-top: 0; align-self: center; }
#strips[data-fold="true"] .strip[data-state="empty"] .nm,
#strips[data-fold="true"] .strip[data-state="empty"] .micbtn,
#strips[data-fold="true"] .strip[data-state="empty"] .whoact { display: none; }
#strips[data-fold="true"] .strip[data-state="empty"] .st { font-size: 12px; }
#strips[data-fold="true"] { gap: 5px; }

/* settings */
.set-sec { padding: 4px 0 12px; border-bottom: 1px solid var(--line); margin-bottom: 12px; }
.set-sec:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }
.set-sec h3 { margin: 0 0 6px; font-size: 14px; }
.set-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.set-row .chk { display: flex; align-items: center; gap: 8px; cursor: pointer; font-weight: 600; }
.set-row .chk input { width: 18px; height: 18px; margin: 0; }
.set-note { margin: 4px 0 0; font-size: 12.5px; color: var(--muted); line-height: 1.45; }
.set-seg { display: inline-flex; border: 1px solid var(--line-strong); border-radius: 7px; overflow: hidden; }
.set-seg button { border: 0; border-radius: 0; background: transparent; padding: 0 14px; min-height: 30px; font-weight: 600; color: var(--muted); cursor: pointer; }
.set-seg button + button { border-left: 1px solid var(--line-strong); }
.set-seg button[aria-pressed="true"] { background: var(--raised); color: var(--text); }
#syncBox { display: inline-flex; align-items: center; gap: 8px; }
#syncBox b { min-width: 64px; text-align: center; font-variant-numeric: tabular-nums; }

/* a short window (a laptop): now playing gives some height back to the running order */
@media (max-height: 860px) and (min-width: 1181px) {
  .now .cover { grid-row: 1; width: 64px; height: 64px; font-size: 26px; }
  .now { grid-template-columns: 64px minmax(0, 1fr); }
  .now .where { display: none; }
  .readout { grid-column: 1 / -1; }
  #nextUp { display: none; }
  .player .ps { display: none; }
  .player[data-state="air"] .ps { display: block; }
  .players { padding-bottom: 8px; }
}
@media (max-width: 1500px) and (min-width: 1181px) {
  .pad .pl { font-size: 11.5px; }
  .pad { padding: 6px 4px 13px 6px; }
}

/* ---------------------------------------------------------------- stage 7: the show (running order) */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.show-head { gap: 8px; flex-wrap: wrap; }
.show-title { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 10px; min-width: 0; flex: 1 1 120px; }
.show-name { background: none; border: 0; padding: 2px 6px; margin: 0 -6px; border-radius: 6px; font: inherit; font-size: 17px; font-weight: 700; color: var(--text); cursor: text; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.show-name:hover { background: var(--key); }
.show-name-input { min-height: 30px; width: min(320px, 60vw); background: var(--well); border: 1px solid var(--line-strong); border-radius: 6px; padding: 0 8px; font: inherit; font-size: 16px; font-weight: 700; }
.show-state { font-size: 12px; white-space: nowrap; color: var(--faint); }
.show-state[data-state="unsaved"] { color: var(--next); }
.show-state[data-state="none"] { display: none; }
#showRunBtn { min-width: 110px; font-weight: 700; }
#showRunBtn[data-state="running"] { background: var(--play-soft); border-color: var(--play); color: var(--play); }
#showRunBtn[data-state="paused"] { background: var(--next-soft); border-color: var(--next); color: var(--next); }
.show-times { margin: 0; padding: 0 12px 8px; font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; cursor: pointer; flex: none; }
.show-times[hidden] { display: none; }
.show-times[data-level="running"] { color: var(--play); }
.show-times[data-level="late"] { color: var(--hot); }
.ro-wrap { position: relative; display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.ro-wrap > .scroll { flex: 1; }
.ro-back { position: absolute; left: 50%; transform: translateX(-50%); z-index: 3; background: var(--next); border-color: var(--next); color: #1b1300; font-weight: 700; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45); }
.ro-back:hover:not(:disabled) { background: var(--next); filter: brightness(1.08); }
.ro-back[hidden] { display: none; }

/* a row: grip, the time it starts, a picture, the words, a chip, buttons */
.ro li { grid-template-columns: 18px 62px 38px minmax(0, 1fr) auto auto; }
.ro .when { font-size: 12.5px; font-variant-numeric: tabular-nums; color: var(--muted); text-align: right; white-space: nowrap; letter-spacing: 0.01em; }
.ro .when[data-how="back"] { font-style: italic; color: var(--next); }
.ro .when[data-how="rel"] { color: var(--faint); }
.ro .when[data-how="past"] { color: var(--faint); }
.ro li[data-state="playing"] .when { color: var(--play); font-weight: 700; }
.ro .tag { display: inline-block; margin-right: 8px; padding: 0 6px; border-radius: 4px; border: 1px solid var(--line-strong); color: var(--muted); font-size: 11.5px; font-weight: 700; vertical-align: 1px; }
.ro li.talk, .ro li.bed { background: var(--raised); }
.ro li.talk .tag, .ro li.bed .tag { color: var(--text); border-color: var(--muted); }
.ro li.talk[data-state="playing"], .ro li.bed[data-state="playing"] { background: linear-gradient(90deg, var(--play-soft), transparent 70%), var(--raised); }
.ro li.talk[data-state="played"] .t, .ro li.talk[data-state="played"] .s { color: var(--faint); }
.ro .talkicon { width: 38px; height: 38px; border-radius: 6px; background: var(--well); border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; color: var(--muted); }
.ro .talkicon svg { width: 18px; height: 18px; }
.ro li.talk[data-state="playing"] .talkicon { color: var(--play); border-color: var(--play); }
.ro .chip[data-live="talk"] { min-width: 76px; text-align: center; font-variant-numeric: tabular-nums; color: var(--play); border-color: var(--play); }
.ro .chip[data-live="talk"][data-over="true"] { color: var(--hot); border-color: var(--hot); }
.ro .script { white-space: pre-wrap; font-size: 13px; line-height: 1.4; color: var(--muted); margin-top: 3px; cursor: pointer; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.ro .script[data-open="true"], .ro li[data-state="playing"] .script { display: block; -webkit-line-clamp: unset; }
.ro li[data-state="playing"] .script { color: var(--text); font-size: 15px; line-height: 1.5; padding: 4px 0 2px; cursor: default; }

/* notes */
.ro li.note { grid-template-columns: 18px 62px minmax(0, 1fr) auto; }
.ro li.note .txt { display: block; }
.ro li.note .t { white-space: pre-wrap; display: inline; font-weight: 500; overflow: visible; text-overflow: clip; }
.ro li.note[data-state="played"] .t { color: var(--faint); }

/* timing points */
.ro li.marker { grid-template-columns: 18px 62px minmax(0, 1fr) auto; background: var(--well); border-top: 1px dashed var(--line-strong); border-bottom: 1px dashed var(--line-strong); padding-top: 5px; padding-bottom: 5px; }
.ro li.marker .t { display: flex; gap: 10px; align-items: baseline; font-weight: 500; }
.ro li.marker .mk-time { font-variant-numeric: tabular-nums; font-weight: 700; letter-spacing: 0.02em; }
.ro li.marker .mk-title { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ro li.marker .mk-status { font-variant-numeric: tabular-nums; min-height: 1em; }
.ro li.marker .mk-status[data-level="ok"] { color: var(--good); }
.ro li.marker .mk-status[data-level="fill"] { color: var(--next); }
.ro li.marker .mk-status[data-level="late"] { color: var(--hot); font-weight: 700; }
.ro li.marker .mk-status[data-level="back"], .ro li.marker .mk-status[data-level="past"] { color: var(--faint); }
.ro li.marker[data-state="played"] .mk-time, .ro li.marker[data-state="played"] .mk-title { color: var(--faint); }

/* sheets: text boxes, the list of saved shows */
.sh-body .pad-editor textarea, .sh-body .pad-editor input[type="time"], .sh-body .pad-editor input[type="date"] { width: 100%; background: var(--well); border: 1px solid var(--line-strong); border-radius: 6px; padding: 8px 10px; font: inherit; font-size: 14px; color: var(--text); line-height: 1.45; }
.sh-body .pad-editor input[type="time"], .sh-body .pad-editor input[type="date"] { min-height: 34px; padding: 0 10px; font-variant-numeric: tabular-nums; }
.sh-body .pad-editor input[type="text"] { min-height: 34px; background: var(--well); }
.sh-body .pad-editor textarea { resize: vertical; }
.sh-body .pad-editor .row > div { flex: 1 1 140px; }
.plan-sum .msg { padding: 2px 0; }
.shows-list { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.shows-list:empty { display: none; }
.shows-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 12px; align-items: center; padding: 9px 12px; border-bottom: 1px solid var(--line); background: var(--panel); }
.shows-list li:last-child { border-bottom: 0; }
.shows-list li[data-current="true"] { background: linear-gradient(90deg, var(--play-soft), transparent 70%); }
.shows-list .t { display: block; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shows-list .s { display: block; color: var(--muted); font-size: 12.5px; }
.shows-list .acts { display: flex; gap: 6px; }

/* players: a drop target */
.player[data-over="true"] { border-color: var(--focus); outline: 2px dashed var(--focus); outline-offset: -4px; }
.player[data-state="talk"] { border-color: var(--play); background: linear-gradient(90deg, var(--play-soft), transparent 80%), var(--raised); }
.player[data-state="talk"] .pid { background: var(--play); border-color: var(--play); color: #04201f; }
.now[data-talk="true"] .cover { font-size: 17px; font-weight: 700; letter-spacing: 0.02em; color: var(--muted); }

@media (max-width: 560px) {
  .ro li { grid-template-columns: 14px 54px minmax(0, 1fr) auto; }
  .ro li > .thumb, .ro li > img.thumb, .ro li > .talkicon { display: none; }
  .ro li.note, .ro li.marker { grid-template-columns: 14px 54px minmax(0, 1fr) auto; }
  .show-times { white-space: normal; }
}

/* ---------------------------------------------------------------- stage 7c: copy box, categories */
.copy-box { width: 100%; box-sizing: border-box; font: 13px/1.4 ui-monospace, Consolas, monospace; background: var(--bg); color: var(--text); border: 1px solid var(--line-strong); border-radius: 6px; padding: 8px; resize: none; }

.cat { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 700; line-height: 1; padding: 2px 8px 2px 6px; margin-right: 6px; border-radius: 999px; border: 1px solid var(--line-strong); color: var(--muted); white-space: nowrap; vertical-align: 1px; }
.cat i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: hsl(var(--h) 62% 58%); flex: none; }
:root[data-theme="light"] .cat i { background: hsl(var(--h) 58% 44%); }
.cat-grid { display: flex; flex-wrap: wrap; gap: 8px; padding: 6px 0 14px; }
.cat-pick { display: inline-flex; align-items: center; gap: 8px; min-height: 38px; padding: 0 14px 0 11px; font-weight: 700; background: var(--key); color: var(--text); border: 1px solid var(--line-strong); border-radius: 999px; cursor: pointer; }
.cat-pick:hover { background: var(--raised); }
.cat-pick[aria-pressed="true"] { border-color: var(--play); box-shadow: inset 0 0 0 1px var(--play); }
.cat-pick i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: hsl(var(--h) 62% 58%); }
:root[data-theme="light"] .cat-pick i { background: hsl(var(--h) 58% 44%); }
.cat-custom { display: grid; gap: 4px; }
.cat-custom input { min-height: 36px; background: var(--well); border: 1px solid var(--line-strong); border-radius: 6px; padding: 0 10px; color: var(--text); }
.lib-tools select#libCat { max-width: 128px; min-width: 0; }
.lib-tools input[type="search"] { min-width: 0; }
.lib-tools select { min-width: 0; }
.cat-presets { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.cat-mini { display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 0 11px 0 8px; font-size: 12.5px; font-weight: 700; background: var(--key); color: var(--text); border: 1px solid var(--line-strong); border-radius: 999px; cursor: pointer; }
.cat-mini:hover { background: var(--raised); }
.cat-mini i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: hsl(var(--h) 62% 58%); }
:root[data-theme="light"] .cat-mini i { background: hsl(var(--h) 58% 44%); }

/* ---------------------------------------------------------------- stage 8: joining on the desk (the invite link) */
body:not([data-mode="participant"]) .guest-only { display: none !important; }
#p-me { flex: none; }
#p-me .me-banner { margin: 10px 12px 0; padding: 10px 12px; border-radius: 8px; border: 1px solid var(--line-strong); background: var(--raised); font-weight: 700; font-size: 16px; line-height: 1.25; }
#p-me .me-banner small { display: block; margin-top: 4px; font-size: 13px; font-weight: 400; color: var(--muted); }
#p-me .me-banner[data-state="working"], #p-me .me-banner[data-state="lobby"] { border-color: var(--next); background: var(--next-soft, rgba(235, 180, 60, 0.12)); }
#p-me .me-banner[data-state="ready"] { border-color: var(--play); background: var(--play-soft); }
#p-me .me-banner[data-state="onair"] { background: var(--air); border-color: var(--air); color: #fff; font-size: 24px; box-shadow: 0 0 18px 2px var(--air-soft); }
#p-me .me-banner[data-state="onair"] small { color: #fff; }
#p-me .me-banner[data-state="problem"] { border-color: var(--air); background: var(--air-soft); }
#p-me .me-banner[data-state="producer"] { border-color: var(--focus); }
#p-me .me-banner[data-state="talking"] { background: var(--focus); border-color: var(--focus); color: #04131f; font-size: 22px; }
#p-me .me-banner[data-state="talking"] small { color: #04131f; }
#p-me .me-banner[data-state="disabled"] { background: var(--key); }
#p-me .me-block { display: grid; gap: 8px; padding: 10px 12px; }
#p-me .me-block[hidden] { display: none; }
#p-me .me-seatrow { display: flex; flex-wrap: wrap; gap: 8px; }
#p-me .me-seatrow .btn[aria-pressed="true"] { border-color: var(--accent, currentColor); font-weight: 700; }
#p-me h3 { margin: 4px 0 0; font-size: 14px; }
#p-me label { font-size: 12.5px; color: var(--muted); font-weight: 600; }
#p-me input[type="text"], #p-me select { min-height: 38px; background: var(--well); border: 1px solid var(--line-strong); border-radius: 6px; padding: 0 10px; color: var(--text); width: 100%; box-sizing: border-box; }
#p-me input[type="range"] { width: 100%; }
#p-me .me-row { display: flex; gap: 8px; flex-wrap: wrap; }
#p-me .me-row .btn { flex: 1 1 auto; min-height: 40px; }
#p-me .me-meterbox { display: grid; gap: 4px; }
#p-me .me-meter { height: 12px; background: var(--well); border-radius: 3px; overflow: hidden; border: 1px solid var(--line); }
#p-me .me-meter.small { height: 8px; }
#p-me .me-meter > span { display: block; height: 100%; width: 0%; background: var(--play); transition: width 60ms linear; }
#p-me .me-meter[data-hot="true"] > span { background: var(--air); }
#p-me .hint { margin: 0; font-size: 12.5px; color: var(--muted); line-height: 1.45; }
#p-me .state { margin: 0; font-size: 13.5px; line-height: 1.4; }
#p-me .state.bad { color: var(--next); font-weight: 600; }
#p-me .btn.toggle[aria-pressed="false"] { border-color: var(--air); color: var(--air); }
#p-me .talkbtn { min-height: 64px; font-size: 18px; font-weight: 700; width: 100%; touch-action: none; user-select: none; }
#p-me .talkbtn[aria-pressed="true"] { background: var(--focus); border-color: var(--focus); color: #04131f; }
#p-me .me-warn { background: var(--next-soft, rgba(235, 180, 60, 0.12)); border: 1px solid var(--next); border-radius: 8px; padding: 10px 12px; font-size: 13px; line-height: 1.5; }
#p-me .me-warn[hidden] { display: none; }
#p-me .me-warn ol { margin: 6px 0; padding-left: 20px; }
#p-me .me-warn code { font-family: ui-monospace, Consolas, monospace; user-select: all; overflow-wrap: anywhere; }
#p-me .me-link { background: none; border: 0; padding: 4px 0; color: var(--muted); text-decoration: underline; cursor: pointer; text-align: left; font-size: 13px; width: fit-content; }
#p-me .me-link[hidden] { display: none; }
/* before they have joined, the card sits in the middle of a dimmed page */
body[data-join="gate"]::after { content: ""; position: fixed; inset: 0; background: rgba(5, 8, 11, 0.72); z-index: 40; }
body[data-join="gate"] > #p-me { position: fixed; z-index: 41; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(480px, calc(100vw - 24px)); max-height: calc(100vh - 24px); overflow: auto; box-shadow: 0 24px 64px rgba(0, 0, 0, 0.6); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }


/* ---------------------------------------------------------------- stage 9: the detailed running order */
/* what kind of row it is: a stripe down the left edge and a faint wash, never the colours that mean a state */
.ro li.talk[data-state="planned"]::before, .ro li.bed[data-state="planned"]::before { background: var(--talk); }
.ro li.talk[data-state="played"]::before, .ro li.bed[data-state="played"]::before { background: var(--talk); opacity: 0.35; }
.ro li.adbreak[data-state="planned"]::before { background: var(--ad); }
.ro li.adbreak[data-state="played"]::before { background: var(--ad); opacity: 0.35; }
.ro li.talk[data-state="planned"], .ro li.bed[data-state="planned"] { background: linear-gradient(90deg, var(--talk-soft), transparent 60%), var(--raised); }
.ro li.adbreak[data-state="planned"] { background: linear-gradient(90deg, var(--ad-soft), transparent 60%), var(--raised); }
.ro li.talk .tag, .ro li.bed .tag { color: var(--talk); border-color: var(--talk); }
.ro li.adbreak .tag { color: var(--ad); border-color: var(--ad); }
.ro .talkicon { color: var(--talk); border-color: var(--talk); background: var(--talk-soft); }
.ro .adicon { width: 38px; height: 38px; border-radius: 6px; background: var(--ad-soft); border: 1px solid var(--ad); display: flex; align-items: center; justify-content: center; color: var(--ad); }
.ro .adicon svg { width: 18px; height: 18px; }
.ro li.adbreak[data-state="playing"] { background: linear-gradient(90deg, var(--play-soft), transparent 70%), var(--raised); }
.ro li.adbreak[data-state="playing"] .adicon { color: var(--play); border-color: var(--play); }
.ro li.adbreak[data-state="played"] .t, .ro li.adbreak[data-state="played"] .s { color: var(--faint); }
.ro li.talk[data-state="playing"] .talkicon { color: var(--play); border-color: var(--play); background: var(--play-soft); }
.ro li.adbreak, .ro li.adbreak .acts { cursor: default; }
.ro li.adbreak .sum { cursor: pointer; }
.ro .chip[data-live="ad"] { min-width: 76px; text-align: center; font-variant-numeric: tabular-nums; color: var(--play); border-color: var(--play); }

/* the spots inside an ad break */
.spots { list-style: none; margin: 4px 0 2px; padding: 0; display: grid; gap: 2px; }
.ro .spots li { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 0 8px; align-items: baseline; padding: 2px 6px; border: 0; background: transparent; border-radius: 4px; font-size: 13px; }
.ro .spots li::before { display: none; }
.spots .sn { color: var(--faint); font-variant-numeric: tabular-nums; text-align: right; }
.spots .st { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.spots .sl { color: var(--muted); font-variant-numeric: tabular-nums; }
.ro .spots li[data-spot="now"] { background: var(--play-soft); color: var(--play); font-weight: 700; }
.ro .spots li[data-spot="now"] .sn, .ro .spots li[data-spot="now"] .sl { color: var(--play); }
.ro .spots li[data-spot="done"] .st, .ro .spots li[data-spot="done"] .sl { color: var(--faint); }
.ro .spots li[data-spot="bad"] .st { color: var(--hot); text-decoration: line-through; }

/* the planned on air line, and the two-line time cell */
.ro .when { line-height: 1.25; }
.ro .when .w-end { display: block; font-size: 11px; color: var(--faint); }
.ro[data-detail="off"] .when .w-end { display: none; }
.ro .airline { display: block; margin-top: 2px; font-size: 12px; font-variant-numeric: tabular-nums; color: var(--muted); }
.ro .airline:empty { display: none; }
.ro .airline b { font-weight: 700; color: var(--text); }
.ro .airline[data-level="ok"] .al-words { color: var(--good); }
.ro .airline[data-level="fill"] .al-words, .ro .airline[data-level="early"] .al-words { color: var(--next); }
.ro .airline[data-level="late"] .al-words { color: var(--hot); font-weight: 700; }
.ro .airline[data-level="back"] .al-words, .ro .airline[data-level="past"] .al-words { color: var(--faint); font-style: italic; }
.ro li[data-state="played"] .airline b { color: var(--faint); }

/* the show map */
.show-map { flex: none; margin: 0 12px 6px; padding: 5px 10px 6px; border: 1px solid var(--line); border-radius: 8px; background: var(--well); }
.show-map[hidden] { display: none; }
.show-map .map-bar { position: relative; height: 18px; border-radius: 4px; background: var(--panel); overflow: hidden; }
.show-map .map-ruler { position: relative; height: 13px; line-height: 1.2; font-size: 10px; color: var(--faint); font-variant-numeric: tabular-nums; }
.show-map .map-ruler span { position: absolute; top: 0; transform: translateX(-50%); white-space: nowrap; }
.show-map .map-ruler span:first-child { transform: none; }
.show-map .map-ruler span:last-child { transform: translateX(-100%); }
.show-map .blk { position: absolute; top: 0; bottom: 0; min-width: 2px; border: 0; padding: 0; margin: 0; border-right: 1px solid var(--well); background: var(--muted); cursor: pointer; opacity: 0.92; }
.show-map .blk:hover, .show-map .blk:focus-visible { opacity: 1; outline: 2px solid var(--focus); outline-offset: -2px; z-index: 2; }
.show-map .blk[data-type="music"] { background: #6f8aa6; }
.show-map .blk[data-type="bed"] { background: var(--talk); opacity: 0.6; }
.show-map .blk[data-type="talk"] { background: var(--talk); }
.show-map .blk[data-type="ad"] { background: var(--ad); }
.show-map .blk[data-state="played"] { opacity: 0.38; }
.show-map .blk[data-state="playing"] { box-shadow: 0 0 0 2px var(--play) inset; opacity: 1; }
.show-map .blk[data-over="true"] { background-image: repeating-linear-gradient(135deg, rgba(0, 0, 0, 0.35) 0 3px, transparent 3px 6px); }
.show-map .blk .cap { position: absolute; left: 0; right: 0; top: 0; height: 4px; background: hsl(var(--h) 62% 58%); }
:root[data-theme="light"] .show-map .blk .cap { background: hsl(var(--h) 58% 44%); }
.show-map .blk[data-type="music"] { background: #5d7893; }
:root[data-theme="light"] .show-map .blk[data-type="music"] { background: #7f98b2; }
.show-map .gap { position: absolute; top: 5px; bottom: 5px; border-radius: 3px; border: 1px dashed var(--next); background: repeating-linear-gradient(135deg, var(--next-soft) 0 4px, transparent 4px 8px); pointer-events: none; }
.show-map .now { position: absolute; top: -2px; bottom: -2px; width: 2px; background: var(--play); z-index: 3; pointer-events: none; }
.show-map .flags { position: relative; height: 17px; margin-top: 1px; }
.show-map .flag { position: absolute; top: 0; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; font-size: 10px; line-height: 1; white-space: nowrap; color: var(--muted); pointer-events: none; }
.show-map .flag::before { content: ""; width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-bottom: 6px solid var(--muted); }
.show-map .flag[data-kind="air"]::before { border-bottom-color: var(--ad); }
.show-map .flag[data-level="late"] { color: var(--hot); }
.show-map .flag[data-level="late"]::before { border-bottom-color: var(--hot); }
.show-map .flag[data-level="fill"] { color: var(--next); }
.show-map .flag[data-level="fill"]::before { border-bottom-color: var(--next); }
.show-map .flag[data-edge="right"] { transform: translateX(-100%); align-items: flex-end; }
.show-map .flag[data-edge="left"] { transform: none; align-items: flex-start; }
.show-map .map-sum { margin: 0; font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; display: flex; flex-wrap: wrap; gap: 2px 12px; align-items: center; }
.show-map .map-sum .sw { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 5px; vertical-align: -1px; }
.show-map .map-sum .verdict { margin-left: auto; font-weight: 700; }
.show-map .map-sum .verdict[data-level="ok"] { color: var(--good); }
.show-map .map-sum .verdict[data-level="fill"] { color: var(--next); }
.show-map .map-sum .verdict[data-level="late"] { color: var(--hot); }
.ro li[data-flash="true"] { animation: roflash 1.4s ease-out 1; }
@keyframes roflash { 0% { box-shadow: 0 0 0 2px var(--focus) inset; } 100% { box-shadow: 0 0 0 2px transparent inset; } }
@media (prefers-reduced-motion: reduce) { .ro li[data-flash="true"] { animation: none; box-shadow: 0 0 0 2px var(--focus) inset; } }
@media (max-width: 560px) {
  .show-map { margin: 0 8px 8px; }
  .ro li.adbreak { grid-template-columns: 14px 54px minmax(0, 1fr) auto; }
  .ro li > .adicon { display: none; }
}

/* the foot of the running order */
.ro-foot .toggle[aria-pressed="true"] { border-color: var(--play); color: var(--play); }

/* printing the rundown: only the rundown comes out */
#printSheet { display: none; }
@media print {
  body > *:not(#printSheet) { display: none !important; }
  html, body { height: auto !important; background: #fff !important; color: #000 !important; overflow: visible !important; }
  #printSheet { display: block !important; position: static; color: #000; background: #fff; font: 11pt/1.35 "Segoe UI", Arial, sans-serif; }
  #printSheet h1 { margin: 0 0 2pt; font-size: 18pt; }
  #printSheet .ps-sub { margin: 0 0 10pt; font-size: 10pt; color: #333; }
  #printSheet table { width: 100%; border-collapse: collapse; }
  #printSheet th { text-align: left; font-size: 9pt; text-transform: none; border-bottom: 1.5pt solid #000; padding: 3pt 4pt; }
  #printSheet td { vertical-align: top; padding: 3pt 4pt; border-bottom: 0.5pt solid #999; }
  #printSheet tr { page-break-inside: avoid; }
  #printSheet td.pt { white-space: nowrap; font-variant-numeric: tabular-nums; }
  #printSheet td.pk { white-space: nowrap; font-weight: 700; font-size: 9pt; }
  #printSheet tr[data-kind="talk"] td.pk, #printSheet tr[data-kind="bed"] td.pk { color: #a0245f; }
  #printSheet tr[data-kind="adbreak"] td.pk { color: #1c4fa6; }
  #printSheet tr[data-kind="marker"] td { border-top: 1pt dashed #000; font-weight: 700; }
  #printSheet .ps-script { white-space: pre-wrap; font-size: 10pt; color: #222; margin-top: 2pt; }
  #printSheet .ps-spots { margin: 2pt 0 0; padding-left: 14pt; font-size: 10pt; }
  #printSheet .ps-foot { margin-top: 10pt; font-size: 9pt; color: #444; }
}

.show-map .endline { position: absolute; top: 0; bottom: 0; width: 0; border-left: 2px dashed var(--text); opacity: 0.55; z-index: 2; pointer-events: none; }
.link-btn { background: none; border: 0; padding: 0; margin: 0; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.link-btn:hover { text-decoration: underline; }
.ro .airline.link-btn { display: block; width: fit-content; max-width: 100%; }
.thumb.sm { width: 28px; height: 28px; font-size: 13px; }
.ad-list { list-style: none; margin: 0 0 4px; padding: 0; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.ad-list li { display: grid; grid-template-columns: 22px 28px minmax(0, 1fr) auto; gap: 0 10px; align-items: center; padding: 6px 10px; border-bottom: 1px solid var(--line); background: var(--panel); }
.ad-list li:last-child { border-bottom: 0; }
.ad-list li.ad-empty { display: block; color: var(--muted); font-size: 13px; padding: 12px; }
.ad-list .sn { color: var(--faint); font-variant-numeric: tabular-nums; text-align: right; }
.ad-list .t { display: block; font-weight: 600; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ad-list .s { display: block; color: var(--muted); font-size: 12.5px; }
.ad-list .acts { display: flex; gap: 2px; }
.ad-picker .pad-pick button { position: relative; }
.ad-picker .pick-add { margin-left: auto; align-self: center; font-size: 12px; font-weight: 700; color: var(--ad); border: 1px solid var(--ad); border-radius: 999px; padding: 1px 10px; }
.now[data-ad="true"] .cover { font-size: 17px; font-weight: 700; letter-spacing: 0.02em; color: var(--ad); }
@media (max-width: 560px) { .show-map, #roMapBtn { display: none !important; } }


/* ================================================================ stage 10: the professional rundown */
/* numbers, who, floated, ready, picked */
.ro li > .num, .ro li > .who-col, .ro li > .latest { display: none; }
.ro .t[data-num]::before { content: attr(data-num); display: inline-block; min-width: 24px; margin-right: 6px; color: var(--faint); font-size: 11.5px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: 0.02em; }
.ro .who-in { margin-left: 8px; padding: 0 6px; border-radius: 4px; background: var(--well); border: 1px solid var(--line-strong); color: var(--muted); font-size: 11.5px; font-weight: 600; vertical-align: 1px; white-space: nowrap; }
.ro li[data-sel="true"] { outline: 2px solid var(--focus); outline-offset: -2px; }
.ro li[data-sel="true"]::after { content: ""; position: absolute; inset: 0; background: var(--focus); opacity: 0.1; pointer-events: none; }
.ro li { cursor: default; }
#roList:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; border-radius: 4px; }
.ro li[data-float="true"] { opacity: 0.55; background: repeating-linear-gradient(135deg, transparent 0 9px, rgba(127, 127, 127, 0.09) 9px 18px), var(--panel) !important; }
.ro li[data-float="true"]::before { background: var(--faint) !important; opacity: 1 !important; }
.ro li[data-float="true"] .t { text-decoration: line-through; text-decoration-color: var(--faint); }
.ro li[data-float="true"] .t .tag, .ro li[data-float="true"] .t .who-in { text-decoration: none; }
.ro .float-tag { display: inline-block; color: var(--muted) !important; border-style: dashed !important; background: transparent; }
.ro .ready-btn { color: var(--faint); opacity: 0; }
.ro li:hover .ready-btn, .ro li:focus-within .ready-btn, .ro li[data-sel="true"] .ready-btn { opacity: 1; }
.ro .ready-btn[aria-pressed="true"] { color: var(--good); opacity: 1; }
@media (hover: none) { .ro .ready-btn { opacity: 1; } }

/* segment headings */
.ro li.segment { grid-template-columns: 18px 62px minmax(0, 1fr) auto auto; background: var(--well); border-top: 2px solid var(--line-strong); padding-top: 9px; padding-bottom: 9px; }
.ro li.segment::before { background: var(--muted); }
.ro li.segment > .num { display: block; text-align: right; font-size: 24px; line-height: 1; font-weight: 700; color: var(--text); font-stretch: 85%; letter-spacing: 0.01em; }
.ro li.segment .t { font-size: 15.5px; font-weight: 700; }
.ro li.segment .t::before { content: none; }
.ro li.segment .seg-sub { font-variant-numeric: tabular-nums; }
.ro li.segment .seg-chip { font-variant-numeric: tabular-nums; }
.ro li.segment .seg-chip[data-level="over"] { color: var(--hot); border-color: var(--hot); }
.ro li.segment .seg-chip[data-level="under"] { color: var(--next); border-color: var(--next); }
.ro li.segment .seg-chip[data-level="ok"] { color: var(--good); border-color: var(--good); }
.ro li.segment[data-folded="true"] { border-bottom: 2px solid var(--line-strong); }
.ro li.segment .airline { margin-top: 2px; }

/* the find box and the bar for picked rows */
.ro-tools { display: none; flex-wrap: wrap; align-items: center; gap: 6px 8px; padding: 6px 12px; border-bottom: 1px solid var(--line); flex: none; }
.ro-tools[data-open="true"], body[data-view="rundown"] .ro-tools { display: flex; }
.ro-tools input[type="search"] { flex: 1 1 150px; min-width: 0; min-height: 30px; background: var(--well); border: 1px solid var(--line-strong); border-radius: 6px; padding: 0 10px; }
.ro-tools select { min-height: 30px; background: var(--key); border: 1px solid var(--line-strong); border-radius: 6px; padding: 0 6px; max-width: 100%; }
.ro-tools select[hidden], .ro-tools .btn[hidden] { display: none; }
.ro-found { color: var(--muted); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.ro-bulk { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 6px 12px; background: var(--raised); border-bottom: 1px solid var(--line); flex: none; }
.ro-bulk[hidden] { display: none; }
.ro-bulk .bulk-n { margin-right: 4px; font-size: 13px; }
.ro-bulk .sp { flex: 1; }
.who-chips { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 8px; }
.read-est { color: var(--muted); }

/* the Rundown page: a wide list with columns */
.ro-cols { display: none; }
#roLibBtn { display: none; }
@media (max-width: 1180px) { #rundownBtn { display: none; } }
@media (min-width: 1181px) {
  body[data-view="rundown"] .deck { grid-template-columns: minmax(0, 1fr); }
  body[data-view="rundown"] #col-mics, body[data-view="rundown"] #p-carts { display: none; }
  body[data-view="rundown"] #col-lib { display: none; position: fixed; top: 62px; right: 14px; bottom: 14px; width: min(440px, 92vw); z-index: 40; box-shadow: 0 14px 44px rgba(0, 0, 0, 0.6); }
  body[data-view="rundown"][data-lib="open"] #col-lib { display: flex; }
  body[data-view="rundown"] #roLibBtn { display: inline-flex; }
  body[data-view="rundown"] .ro-cols, body[data-view="rundown"] .ro li { display: grid; grid-template-columns: 18px 46px 84px 84px minmax(240px, 1fr) 130px 96px 236px; gap: 0 10px; align-items: center; }
  body[data-view="rundown"] .ro-cols { position: sticky; top: 0; z-index: 4; background: var(--raised); border-bottom: 1px solid var(--line-strong); padding: 6px 10px 6px 8px; font-size: 12px; font-weight: 700; color: var(--muted); }
  body[data-view="rundown"] .ro-cols .c-num { text-align: right; }
  body[data-view="rundown"] .ro li { padding: 5px 10px 5px 8px; }
  body[data-view="rundown"] .ro li.editor { display: block; padding: 10px 12px 10px 22px; }
  body[data-view="rundown"] .ro li:not(.editor) > * { grid-row: 1; }
  body[data-view="rundown"] .ro li > .grip { grid-column: 1; }
  body[data-view="rundown"] .ro li > .num { display: block; grid-column: 2; text-align: right; }
  body[data-view="rundown"] .ro li > .when { grid-column: 3; text-align: left; }
  body[data-view="rundown"] .ro li > .latest { display: block; grid-column: 4; font-size: 12.5px; font-variant-numeric: tabular-nums; color: var(--faint); white-space: nowrap; }
  body[data-view="rundown"] .ro li > .latest[data-late="true"] { color: var(--hot); font-weight: 700; }
  body[data-view="rundown"] .ro li > .txt { grid-column: 5; }
  body[data-view="rundown"] .ro li > .who-col { display: block; grid-column: 6; color: var(--muted); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  body[data-view="rundown"] .ro li > .chip { grid-column: 7; justify-self: start; }
  body[data-view="rundown"] .ro li > .acts, body[data-view="rundown"] .ro li > button[data-act="more"] { grid-column: 8; justify-self: end; }
  body[data-view="rundown"] .ro li > .thumb, body[data-view="rundown"] .ro li > .talkicon, body[data-view="rundown"] .ro li > .adicon { display: none; }
  body[data-view="rundown"] .ro .t[data-num]::before { display: none; }
  body[data-view="rundown"] .ro .who-in { display: none; }
  body[data-view="rundown"] .ro li.note > .txt, body[data-view="rundown"] .ro li.marker > .txt { grid-column: 3 / 8; }
  body[data-view="rundown"] .ro li.segment > .txt { grid-column: 3 / 6; }
  body[data-view="rundown"] .ro li.segment > .num { font-size: 22px; }
  body[data-view="rundown"] .ro .ready-btn { opacity: 1; }
  /* a slimmer "now playing" strip, so the list gets the height */
  body[data-view="rundown"] .now { grid-template-columns: 56px minmax(0, 1fr) auto; padding: 8px 12px 6px; gap: 2px 14px; }
  body[data-view="rundown"] .now .cover { width: 56px; height: 56px; font-size: 24px; grid-row: 1 / span 2; }
  body[data-view="rundown"] .now h2 { font-size: 18px; }
  body[data-view="rundown"] .readout { grid-column: 3; grid-row: 1 / span 2; padding-top: 0; align-self: center; }
  body[data-view="rundown"] .readout #digits { font-size: 50px; }
  body[data-view="rundown"] .readout .unit { display: none; }
}

/* three players side by side: the Play button sits under the text, and a long state line is cut short */
.players[data-count="3"] .player { grid-template-columns: 26px minmax(0, 1fr); }
.players[data-count="3"] .player > .btn { grid-column: 2; justify-self: start; margin-top: 5px; }
.player .pstate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* segment dividers on the map */
.map-bar .segline { position: absolute; top: 0; bottom: 0; width: 0; border-left: 1px dashed var(--muted); opacity: 0.8; pointer-events: auto; z-index: 1; }
.map-bar .segline::after { content: attr(data-letter); position: absolute; left: 3px; bottom: 0; font-size: 10px; font-weight: 700; font-style: normal; color: var(--text); }
/* the as-run report */
.asrun-wrap { overflow: auto; max-height: 60vh; }
.asrun-wrap .asrun { width: 100%; border-collapse: collapse; font-size: 13px; }
.asrun-wrap .asrun th { text-align: left; padding: 5px 8px; border-bottom: 1px solid var(--line-strong); color: var(--muted); font-weight: 700; position: sticky; top: 0; background: var(--panel); }
.asrun-wrap .asrun td { padding: 5px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
.asrun-wrap .asrun td.pt { white-space: nowrap; font-variant-numeric: tabular-nums; }
.asrun-wrap .asrun tr[data-state="missed"] td { color: var(--hot); }
@media print {
  #printSheet tr[data-kind="segment"] td { border-top: 1.5pt solid #000; border-bottom: 0.5pt solid #000; background: #eee; padding-top: 5pt; padding-bottom: 5pt; font-size: 12pt; }
  #printSheet .ps-segsub { font-weight: 400; font-size: 10pt; color: #333; }
  #printSheet tr[data-float="true"] td { color: #777; text-decoration: line-through; }
  #printSheet tr[data-state="missed"] td { font-style: italic; }
  #printSheet .asrun { font-size: 10pt; }
}

/* The Desk page keeps the foot of the running order on one line: print and the end-times switch live on the Rundown page and in the More… menu. */
body:not([data-view="rundown"]) #roPrintBtn, body:not([data-view="rundown"]) #roDetailBtn { display: none; }

/* The Rundown page: what is on air shrinks to one slim strip (the Desk page has the full console), so the list gets the height. */
@media (min-width: 1181px) {
  body[data-view="rundown"] #p-now .now { grid-template-columns: minmax(0, 1fr) auto auto; gap: 4px 18px; padding: 8px 12px 6px; align-items: center; }
  body[data-view="rundown"] #p-now .now .cover, body[data-view="rundown"] #p-now .now .artist, body[data-view="rundown"] #p-now .now .where,
  body[data-view="rundown"] #p-now .now .next-up, body[data-view="rundown"] #p-now .now .tape-text, body[data-view="rundown"] #p-now .now .cue-boxes { display: none; }
  body[data-view="rundown"] #p-now .now .meta { grid-column: 1; grid-row: 1; }
  body[data-view="rundown"] #p-now .now .readout { grid-column: 2; grid-row: 1; padding-top: 0; flex-wrap: nowrap; }
  body[data-view="rundown"] #p-now .now .readout #digits { font-size: 34px; }
  body[data-view="rundown"] #p-now .now .now-actions { grid-column: 3; grid-row: 1; padding-top: 0; flex-wrap: nowrap; }
  body[data-view="rundown"] #p-now .now .tape { grid-column: 1 / -1; grid-row: 2; height: 5px; margin-top: 0; }
  body[data-view="rundown"] #p-now .now h2 { font-size: 17px; margin: 0; }
  body[data-view="rundown"] #p-now .players { padding: 0 12px 8px; gap: 6px; }
  body[data-view="rundown"] #p-now .players[data-count] .player { grid-template-columns: 22px minmax(0, 1fr) auto; grid-template-rows: auto auto; padding: 4px 8px 5px; gap: 2px 8px; align-items: center; }
  body[data-view="rundown"] #p-now .player .part { grid-column: 1; grid-row: 1; width: 22px; height: 22px; }
  body[data-view="rundown"] #p-now .player .pimg { display: none; }
  body[data-view="rundown"] #p-now .player .pid { position: static; width: 22px; height: 22px; font-size: 12px; }
  body[data-view="rundown"] #p-now .player .pbody { grid-column: 2; grid-row: 1; }
  body[data-view="rundown"] #p-now .player .ps, body[data-view="rundown"] #p-now .player .ppills { display: none; }
  body[data-view="rundown"] #p-now .players[data-count] .player > .btn { grid-column: 3; grid-row: 1; justify-self: end; margin-top: 0; }
  body[data-view="rundown"] #p-now .player .pbar { grid-row: 2; }
  body[data-view="rundown"] #p-now #musicBox { display: none; }
}

/* ---------------------------------------------------------------- stage 10b: the players never move, they have a picture and a bar; the top of the desk uses its space */
.players { gap: 10px; padding: 0 12px 10px; }
.players[data-count] .player { grid-template-columns: 56px minmax(0, 1fr); grid-template-rows: auto auto auto; align-items: start; gap: 4px 10px; padding: 10px 10px 8px; }
.player .part { grid-column: 1; grid-row: 1 / span 2; position: relative; width: 56px; height: 56px; }
.player .pimg { width: 56px; height: 56px; border-radius: 6px; background: var(--well); border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; color: var(--faint); font-size: 24px; object-fit: cover; overflow: hidden; }
.player .pimg[data-word="1"] { font-size: 12.5px; font-weight: 700; color: var(--muted); }
.player .part .pid { position: absolute; left: -7px; top: -7px; width: 20px; height: 20px; font-size: 11px; background: var(--panel); z-index: 1; }
.player[data-state="air"] .part .pid { background: var(--play); }
.player .pbody { grid-column: 2; grid-row: 1; }
.players[data-count] .player > .btn { grid-column: 2; grid-row: 2; justify-self: start; margin-top: 0; align-self: end; }
.player .pbar { grid-column: 1 / -1; grid-row: 3; position: relative; height: 5px; border-radius: 3px; background: var(--well); border: 1px solid var(--line); overflow: hidden; }
.pbar .pfill { position: absolute; inset: 0 auto 0 0; width: 0; background: var(--play); }
.pbar .pmi { position: absolute; top: 0; bottom: 0; left: 0; background: rgba(255, 255, 255, 0.12); border-right: 2px solid var(--next); }
.pbar .pmo { position: absolute; top: 0; bottom: 0; right: 0; background: rgba(182, 147, 245, 0.25); border-left: 2px solid var(--outro); }
.pbar[data-empty="true"] { opacity: 0.35; }
@media (min-width: 1181px) {
  #p-now .now { grid-template-columns: 84px minmax(0, 1fr) auto; gap: 2px 14px; padding: 12px 12px 8px; align-items: center; }
  #p-now .now .cover { grid-column: 1; grid-row: 1 / span 2; width: 84px; height: 84px; font-size: 32px; }
  #p-now .now .meta { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
  #p-now .now .readout { grid-column: 3; grid-row: 1 / span 2; padding-top: 0; justify-content: flex-end; align-self: center; text-align: right; }
  #p-now .now .tape { grid-column: 1 / -1; grid-row: 3; margin-top: 6px; }
  #p-now .now .now-actions { grid-column: 1 / -1; grid-row: 4; }
  #p-now #nextUp { display: none; }
}
@media (min-width: 1331px) {
  /* six buttons share the row: it stays one line (the "Played 0:02 of 4:03" words give way first). On a narrower screen the row wraps instead. */
  #p-now .now .now-actions { flex-wrap: nowrap; gap: 5px; }
  #p-now .now .now-actions .btn { padding-left: 10px; padding-right: 10px; white-space: nowrap; flex: none; }
  #p-now .now .now-actions .tape-text { flex: 1 1 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}
.players[data-count] .player { grid-template-columns: 48px minmax(0, 1fr); padding: 9px 9px 8px; gap: 4px 9px; }
.player .part, .player .pimg { width: 48px; height: 48px; }
.player .part { grid-row: 1 / span 2; }
.player .pimg { font-size: 20px; }
.player .pimg[data-word="1"] { font-size: 11.5px; }
.player .pstate { font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (min-width: 1181px) { body[data-view="rundown"] #p-now .players[data-count] .player { grid-template-columns: 22px minmax(0, 1fr) auto; padding: 4px 8px 5px; } }

/* ---------------------------------------------------------------- stage 10b: messages can be cleared and moved */
.toasts[data-pos="tm"] { left: 50%; right: auto; bottom: auto; top: 62px; transform: translateX(-50%); justify-items: center; }
.toasts[data-pos="br"] { left: auto; right: 14px; justify-items: end; }
.toast { position: relative; padding-right: 32px; cursor: pointer; }
.toast-x { position: absolute; top: 4px; right: 5px; width: 22px; height: 22px; padding: 0; line-height: 1; font-size: 18px; border-radius: 50%; border: 0; background: transparent; color: var(--muted); cursor: pointer; }
.toast-x:hover { background: var(--well); color: var(--ink); }
.toast-clear { justify-self: start; }
.toasts[data-pos="tm"] .toast-clear { justify-self: center; }
.toasts[data-pos="br"] .toast-clear { justify-self: end; }

/* ---------------------------------------------------------------- stage 10b: the right-hand column fits with My microphone open */
#p-lobby .empty { margin: 0; padding: 10px 14px; }
#p-lobby .join-box { padding: 6px 12px; }
.mymic iframe { height: 270px; }

/* ---------------------------------------------------------------- stage 10b: the library flags tracks that are already in the show or have played (Desk view only) */
.lib-use { display: inline-block; margin-right: 6px; padding: 0 6px; border-radius: 4px; font-size: 11px; font-weight: 700; line-height: 17px; vertical-align: 1px; white-space: nowrap; }
.lib-use[data-use="in"] { background: var(--play-soft); color: var(--play); border: 1px solid var(--play); }
.lib-use[data-use="played"] { background: transparent; color: var(--muted); border: 1px solid var(--line-strong); }
.lib-row[data-use="played"] .t { color: var(--muted); }
body[data-view="rundown"] .lib-use, body[data-view="media"] .lib-use { display: none; }
body[data-view="rundown"] .lib-row[data-use="played"] .t { color: inherit; }

/* ---------------------------------------------------------------- stage 10b: library filters */
.lib-tools #libFiltBtn { flex: none; white-space: nowrap; }
.lib-tools #libFiltBtn[data-active="true"] { border-color: var(--play); color: var(--play); }
.lib-filters { padding: 8px 10px 10px; border-bottom: 1px solid var(--line); display: grid; gap: 8px; flex: none; background: var(--panel-2, var(--well)); }
.lib-filters[hidden] { display: none; }
.lf-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.lf-row label { color: var(--muted); font-size: 12.5px; }
.lf-row input[type="text"], .lf-row select { min-height: 32px; min-width: 0; flex: 1 1 110px; background: var(--well); border: 1px solid var(--line-strong); border-radius: 6px; padding: 0 8px; color: var(--text); }
.lf-row input[aria-invalid="true"] { border-color: var(--hot); }
#fLenFrom, #fLenTo { flex: 0 1 84px !important; text-align: center; font-variant-numeric: tabular-nums; }
.lf-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.lf-note { margin: 0; font-size: 12px; color: var(--muted); line-height: 1.45; }
.lf-note code { font-family: ui-monospace, Consolas, monospace; font-size: 11.5px; color: var(--text); }
#fsBtn[aria-pressed="true"] { border-color: var(--play); color: var(--play); }

/* Settings: the studio time zone box */
#setTz { min-width: 14em; flex: 1 1 14em; max-width: 24em; min-height: 36px; }
#setTzMsg.err, #setGreenMsg.err { color: var(--hot); font-weight: 600; }

/* Upload music: the drop strip on the Media page, and the drop target on the library */
.mm-dropstrip { margin: 0; padding: 7px 12px; border: 1.5px dashed var(--line-strong, var(--line)); border-radius: 8px; color: var(--muted); font-size: 13px; flex: none; }
.mm-dropstrip strong { color: var(--text); }
.mm-dropstrip[hidden] { display: none; }
#p-lib { position: relative; }
.lib-dropover { position: absolute; inset: 0; z-index: 8; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; border: 3px dashed var(--focus); border-radius: inherit; background: rgba(12, 15, 18, 0.88); pointer-events: none; text-align: center; padding: 16px; }
:root[data-theme="light"] .lib-dropover { background: rgba(243, 245, 247, 0.92); }
.lib-dropover strong { font-size: 20px; }
.lib-dropover span { color: var(--muted); font-size: 13px; }
.lib-dropover[data-blocked="true"] { border-color: var(--hot); }
.lib-dropover[hidden] { display: none; }
#libMediaBtn[data-readonly="true"] { border-style: dashed; }

/* The right-hand column does not move when a mic goes on or off air: the status line of a mic strip always has room for two lines
   (going live shortens it, and the strip, and everything below it, used to jump up), and the column keeps its scrollbar's room. */
.strip .st { line-height: 1.35; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.strip:not([data-state="empty"]) .st { min-height: 2.7em; }
#col-mics { scrollbar-gutter: stable; overflow-anchor: none; }

/* Settings: microphone test meter */
.set-meter { height: 10px; margin: 8px 0 4px; border-radius: 5px; background: var(--well); border: 1px solid var(--line); overflow: hidden; max-width: 340px; }
.set-meter > span { display: block; height: 100%; width: 0; background: var(--play); transition: width 0.05s linear; }
#setMicMsg.err { color: var(--hot); font-weight: 600; }

/* Start at…: choose where in the track a running order row begins */
.start-sheet .start-opts { display: grid; gap: 6px; margin: 10px 0 4px; }
.btn.start-opt { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: baseline; text-align: left; padding: 9px 12px; height: auto; white-space: normal; }
.btn.start-opt b { font-weight: 600; }
.btn.start-opt small { color: var(--muted); font-size: 12.5px; text-align: right; }
.btn.start-opt[aria-pressed="true"] { border-color: var(--good); box-shadow: inset 3px 0 0 var(--good); }
.start-sheet .start-typed { display: flex; gap: 8px; align-items: end; margin-top: 8px; }
.start-sheet .start-typed > div { flex: 1; min-width: 0; }
.start-sheet .start-typed input { width: 100%; }
.start-sheet .start-also { margin-top: 10px; }


/* ---------------------------------------------------------------- the Recordings page */
.rec-page {
  display: none; flex-direction: column; position: relative; min-height: 0; min-width: 0; margin: 10px; overflow: hidden;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); color: var(--text); box-shadow: var(--shadow);
}
body[data-view="recordings"] .rec-page { display: flex; }
body[data-view="recordings"] .deck, body[data-view="recordings"] .tabs, body[data-view="recordings"] .media-page { display: none; }
.rec-page .sp { flex: 1; }
.rec-head { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--line); flex: none; }
.rec-head h2 { margin: 0; font-size: 17px; }
.rec-count { color: var(--muted); font-size: 13px; }
.rec-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 14px; border-bottom: 1px solid var(--line); flex: none; }
.rec-bar input[type="search"] { flex: 1 1 260px; min-width: 0; min-height: 32px; background: var(--well); border: 1px solid var(--line-strong); border-radius: 6px; padding: 0 10px; }
.rec-bar select, .rec-bar input[type="date"], .rec-bar input[type="number"] { min-height: 32px; background: var(--key); border: 1px solid var(--line-strong); border-radius: 6px; padding: 0 6px; max-width: 100%; color: var(--text); font: inherit; }
.rec-bar input[type="number"] { width: 70px; }
.rec-bar2 { padding-top: 4px; font-size: 12.5px; color: var(--muted); }
.rec-bar2 label { color: var(--muted); }
.rec-notice { margin: 0; padding: 8px 14px; background: var(--next-soft); border-bottom: 1px solid var(--next); font-size: 13px; flex: none; }
.rec-body { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(300px, 430px) minmax(0, 1fr); }
.rec-left { display: flex; flex-direction: column; min-height: 0; border-right: 1px solid var(--line); }
.rec-now { margin: 0; padding: 8px 12px; background: var(--air-soft); border-bottom: 1px solid var(--air); color: var(--air); font-weight: 700; font-size: 13.5px; flex: none; font-variant-numeric: tabular-nums; }
.rec-scroll { flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
.rec-list { list-style: none; margin: 0; padding: 0; }
.rec-item { display: block; padding: 9px 12px; border-bottom: 1px solid var(--line); cursor: pointer; }
.rec-item:hover { background: var(--raised); }
.rec-item[aria-selected="true"] { background: var(--raised); box-shadow: inset 3px 0 0 var(--focus); }
.rec-item:focus-visible { outline-offset: -3px; }
.rec-t { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.rec-title { font-weight: 600; font-size: 14.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.rec-live { flex: none; font-size: 11.5px; font-weight: 700; padding: 1px 7px; border-radius: 999px; color: var(--air); border: 1px solid var(--air); }
.rec-s { color: var(--muted); font-size: 12.5px; margin-top: 2px; display: flex; flex-wrap: wrap; gap: 2px 8px; align-items: center; font-variant-numeric: tabular-nums; }
.rec-chip { font-size: 11.5px; font-weight: 700; padding: 0 7px; border-radius: 999px; border: 1px solid var(--line-strong); white-space: nowrap; }
.rec-show { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 14em; }
.rec-gone { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 10px; align-items: center; cursor: default; }
.rec-gone .rec-t, .rec-gone .rec-s { grid-column: 1; }
.rec-gone .btn { grid-column: 2; grid-row: 1 / span 2; }
.rec-empty { margin: 0; padding: 18px 16px; color: var(--muted); }
.rec-more { margin: 10px auto; display: block; }
.rec-pane { min-width: 0; min-height: 0; overflow-y: auto; padding: 14px 18px 20px; scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
.rec-help { margin: 8px 0; color: var(--muted); max-width: 52ch; line-height: 1.5; }
.rec-detail { display: flex; flex-direction: column; gap: 14px; max-width: 760px; }
.rec-h { margin: 0; font-size: 21px; line-height: 1.2; overflow-wrap: anywhere; }
.rec-when { margin: -8px 0 0; color: var(--muted); font-size: 13.5px; font-variant-numeric: tabular-nums; }
.rec-player { display: grid; gap: 8px; padding: 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--well); }
.rec-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.rec-read { font-variant-numeric: tabular-nums; color: var(--muted); font-size: 14px; min-width: 96px; padding: 0 4px; }
.rec-player input.rec-seek { width: 100%; margin: 4px 0; }
.rec-player input.rec-vol { width: 110px; flex: none; }
.rec-vlab { color: var(--muted); font-size: 12.5px; }
.rec-rate { min-height: 32px; background: var(--key); border: 1px solid var(--line-strong); border-radius: 6px; padding: 0 6px; color: var(--text); font: inherit; }
.rec-msg { margin: 0; font-size: 12.5px; color: var(--muted); }
.rec-msg.err { color: var(--hot); font-weight: 600; }
.rec-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.rec-fields .wide { grid-column: 1 / -1; }
.rec-fields label { display: block; font-size: 12.5px; color: var(--muted); margin-bottom: 3px; }
.rec-fields input, .rec-fields textarea { width: 100%; min-height: 32px; background: var(--well); border: 1px solid var(--line-strong); border-radius: 6px; padding: 0 10px; font: inherit; color: var(--text); }
.rec-fields textarea { padding: 6px 10px; resize: vertical; min-height: 64px; }
.rec-fields ::placeholder { color: var(--faint); }
.wave-vol { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted); white-space: nowrap; }
.wave-vol input { width: 90px; accent-color: var(--accent, currentColor); }
.wave-voln { min-width: 3ch; text-align: right; font-variant-numeric: tabular-nums; }
.rec-who { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 8px 0; margin-top: 6px; border-top: 1px solid var(--line); }
.rec-whotext { margin: 0; flex: 1 1 240px; font-size: 13px; color: var(--muted); }
.rec-people { display: flex; flex-direction: column; gap: 2px; max-height: 50vh; overflow: auto; }
.rec-person { display: flex; align-items: center; gap: 10px; padding: 6px 4px; border-radius: 6px; cursor: pointer; }
.rec-person:hover { background: var(--hover, rgba(127,127,127,0.12)); }
.rec-person input { width: 18px; height: 18px; flex: none; }
.rec-pn { flex: 1; font-weight: 600; }
.rec-pr { color: var(--muted); font-size: 12.5px; }
.rec-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.rec-acts a.btn { text-decoration: none; display: inline-flex; align-items: center; }
.rec-acts a.btn.disabled { opacity: 0.45; cursor: not-allowed; }
.rec-saved { font-size: 12px; color: var(--muted); }
.rec-saved.err { color: var(--hot); font-weight: 600; }
.rec-info { margin: 0; color: var(--faint); font-size: 12px; overflow-wrap: anywhere; }
@media (max-width: 900px) {
  .rec-page { margin: 0; border-radius: 0; border-left: 0; border-right: 0; border-bottom: 0; }
  .rec-body { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(140px, 38%) minmax(0, 1fr); }
  .rec-left { border-right: 0; border-bottom: 1px solid var(--line); }
  .rec-pane { padding: 12px 12px 18px; }
  .rec-fields { grid-template-columns: minmax(0, 1fr); }
}

/* Shows list: find and sort, and the show date in the timing and save sheets */
.shows-tools { display: flex; gap: 8px; margin: 0 0 8px; }
.shows-tools[hidden] { display: none; }
.shows-tools input[type="search"] { flex: 1 1 auto; min-width: 0; min-height: 34px; background: var(--well); border: 1px solid var(--line-strong); border-radius: 6px; padding: 0 10px; font: inherit; font-size: 14px; color: var(--text); }
.shows-tools select { flex: 0 0 auto; min-height: 34px; background: var(--well); border: 1px solid var(--line-strong); border-radius: 6px; padding: 0 8px; font: inherit; font-size: 13.5px; color: var(--text); }
.sh-body .pad-editor .date-row { margin-bottom: 8px; }
.sh-body .pad-editor .date-row > div { flex: 0 1 240px; }

/* Recordings page: what was on air */
.rec-log { display: grid; gap: 8px; padding: 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--well); }
.rec-log-h { display: flex; align-items: center; gap: 8px; }
.rec-log-h h4 { margin: 0; font-size: 14.5px; }
.rec-log-h .sp { flex: 1; }
.rec-log-filters { display: flex; flex-wrap: wrap; gap: 6px; }
.rec-log-filters .btn[aria-pressed="true"] { background: var(--raised); border-color: var(--focus); color: var(--text); }
.rec-log-now { margin: 0; padding: 6px 10px; border-radius: 6px; background: var(--raised); font-size: 13px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.rec-log-list { list-style: none; margin: 0; padding: 0; max-height: 300px; overflow-y: auto; border: 1px solid var(--line); border-radius: 6px; background: var(--panel); scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
.rec-log-list:empty { display: none; }
.rec-ev { display: grid; grid-template-columns: minmax(0, 1fr) auto; border-bottom: 1px solid var(--line); }
.rec-ev:last-child { border-bottom: 0; }
.rec-ev.now { background: var(--play-soft); box-shadow: inset 3px 0 0 var(--focus); }
.rec-ev button { font: inherit; color: inherit; background: transparent; border: 0; cursor: pointer; text-align: left; }
.rec-ev-go { display: grid; grid-template-columns: 4.6em 4.8em minmax(0, 1fr) auto; gap: 8px; align-items: baseline; padding: 6px 8px; min-width: 0; }
.rec-ev-go:hover, .rec-ev-play:hover { background: var(--raised); }
.rec-ev-t { font-variant-numeric: tabular-nums; color: var(--muted); font-size: 13px; }
.rec-ev-k { font-size: 11.5px; font-weight: 700; color: var(--muted); }
.rec-ev[data-type="mic"] .rec-ev-k { color: var(--air); }
.rec-ev[data-type="cart"] .rec-ev-k { color: var(--next); }
.rec-ev-x { display: flex; flex-direction: column; min-width: 0; }
.rec-ev-m { font-size: 13.5px; font-weight: 600; overflow-wrap: anywhere; }
.rec-ev-s { font-size: 12px; color: var(--muted); overflow-wrap: anywhere; }
.rec-ev-l { font-variant-numeric: tabular-nums; color: var(--muted); font-size: 12.5px; }
.rec-ev-play { padding: 0 12px; font-size: 13px; color: var(--muted); border-left: 1px solid var(--line) !important; }
.rec-log-msg { margin: 0; max-width: none; font-size: 12.5px; }

/* Laptop widths (a little over 1180 up to about 1500, wider since the ON AIR badge joined the bar): the top bar has to fit on one line, or the whole desk is wider than the window and the
   right-hand column is cut off. The sound meter gets shorter and gives up its words (the tooltip and the Engine light still say what is wrong). */
@media (max-width: 1560px) and (min-width: 1181px) {
  .bar { gap: 8px; padding-left: 10px; padding-right: 10px; }
  .bar .btn.small { padding-left: 8px; padding-right: 8px; }
  .airstate { max-width: 170px; padding-left: 10px; padding-right: 10px; }
  .airstate::before { margin-right: 5px; }
  .master .bar-track { width: 70px; }
  .master .db { display: none; }
  .who { max-width: 180px; }
}
/* ...and on the smallest laptop widths the Full screen button steps aside (F11, or the top bar's right-click menu, still does it) */
@media (max-width: 1330px) and (min-width: 1181px) {
  #fsBtn { display: none; }
  .bar { gap: 6px; }
  .who { max-width: 110px; }
  .airstate { max-width: 140px; }
  .master .bar-track { width: 40px; }
}

/* ---------------------------------------------------------------- the Trash, duplicate files and the library health line (stage 10f) */
.mm-health { margin: 0; padding: 5px 14px; border-bottom: 1px solid var(--line); font-size: 12.5px; color: var(--muted); display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; flex: none; }
.mm-health[hidden] { display: none; }
.mm-health .sep { color: var(--faint); }
.mm-health .link-btn { background: none; border: 0; padding: 0; min-height: 0; font: inherit; color: var(--text); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.mm-health .link-btn.warn { color: var(--next); font-weight: 700; }
.mm-health .link-btn:hover { color: var(--play); }
.mm-used { margin: 0; padding: 6px 10px; border: 1px solid var(--line); border-radius: 6px; font-size: 13px; color: var(--muted); overflow-wrap: anywhere; }
.mm-used[hidden] { display: none; }
.trash-list, .dup-groups ul { list-style: none; margin: 0; padding: 0; }
.trash-item { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.trash-item .txt { flex: 1 1 220px; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.trash-item .t, .dup-group li .t { font-weight: 600; overflow-wrap: anywhere; }
.trash-item .s, .dup-group li .s { font-size: 12.5px; color: var(--muted); }
.dup-group { padding: 8px 0 10px; border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.dup-group h3 { margin: 0; font-size: 13px; color: var(--muted); font-weight: 600; }
.dup-group li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; padding: 2px 0; }
.dup-group .chip, .trash-item .chip { font-size: 11.5px; font-weight: 700; padding: 1px 7px; border-radius: 999px; border: 1px solid var(--line-strong); color: var(--muted); white-space: nowrap; }
.dup-group .chip.cue { color: var(--good); border-color: var(--good); }
.dup-group .chip.warn { color: var(--next); border-color: var(--next); }
.tr-status { margin: 0 0 8px; padding: 6px 10px; border: 1px solid var(--line-strong); border-radius: 6px; color: var(--text); font-size: 13px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.tr-status[hidden] { display: none; }
.tr-status[data-err="true"] { color: var(--air); border-color: var(--air); background: var(--air-soft); }

/* Nothing moves when a mic goes on or off air (stage 10g). Things that change their words get room for the longest of them:
   the "MIC LIVE / MICS OFF" pill, the "Music is dipped" note beside the music fader, and a joined presenter's banner
   ("You are on Mic 1 ..." against "YOU ARE ON AIR"), which used to be 6 pixels shorter on air and pulled the whole column up. */
.air { min-width: 104px; justify-content: center; }
.music #duckState { display: inline-block; flex: none; min-width: 7.8em; }
.music #duckState:empty { visibility: hidden; }
body[data-join="in"] #p-me .me-banner { min-height: 104px; }

/* The Rundown page's library drawer can be closed from its own header (it sits over the Library button in the toolbar) */
.lib-close { display: none; }
body[data-view="rundown"][data-lib="open"] .lib-close { display: inline-flex; }

/* ---------------------------------------------------------------- Recordings: the map of what was on air (stage 10g) */
.rm { display: grid; gap: 6px; padding: 8px 10px 7px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); }
.rm[hidden] { display: none; }
.rm-grid { display: grid; grid-template-columns: 3.9em minmax(0, 1fr); gap: 0 8px; }
.rm-labels { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.rm-lab { font-size: 10.5px; line-height: 1; color: var(--muted); display: flex; align-items: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rm-lab-ruler { height: 14px; }
.rm-main { position: relative; min-width: 0; touch-action: pan-y; cursor: crosshair; user-select: none; }
.rm-ruler { position: relative; height: 14px; font-size: 10px; line-height: 14px; color: var(--faint); font-variant-numeric: tabular-nums; margin-bottom: 3px; }
.rm-ruler span { position: absolute; top: 0; transform: translateX(-50%); white-space: nowrap; }
.rm-ruler span[data-edge="start"] { transform: none; }
.rm-ruler span[data-edge="end"] { transform: translateX(-100%); }
.rm-tracks { position: relative; display: flex; flex-direction: column; gap: 3px; }
.rm-lane { position: relative; border-radius: 3px; background: var(--well); overflow: hidden; }
.rm-blk { position: absolute; top: 0; bottom: 0; min-width: 3px; padding: 0 4px; margin: 0; border: 0; border-right: 1px solid var(--well); background: var(--muted); cursor: pointer; opacity: 0.92; font: inherit; font-size: 10px; line-height: 15px; color: #fff; text-align: left; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.rm-blk[data-type="track"] { background: #5d7893; }
:root[data-theme="light"] .rm-blk[data-type="track"] { background: #7f98b2; }
.rm-blk[data-type="talk"] { background: var(--talk); }
.rm-blk[data-type="ad"] { background: var(--ad); }
.rm-blk[data-type="cart"] { background: var(--next); min-width: 4px; border-radius: 2px; }
.rm-blk[data-type="mic"] { background: hsl(var(--h) 55% 40%); }
.rm-blk.dim { opacity: 0.16; }
.rm-blk:hover, .rm-blk.hot, .rm-blk:focus-visible { opacity: 1; outline: 2px solid var(--focus); outline-offset: -2px; z-index: 2; }
.rm-blk.now { opacity: 1; box-shadow: 0 0 0 2px var(--play) inset; }
.rm-now { position: absolute; top: -4px; bottom: -2px; width: 2px; margin-left: -1px; background: var(--play); z-index: 4; pointer-events: none; }
.rm-now::before { content: ""; position: absolute; top: -3px; left: -4px; width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 7px solid var(--play); }
.rm-hover { position: absolute; top: -3px; bottom: -3px; width: 0; border-left: 1px dashed var(--text); opacity: 0.45; z-index: 3; pointer-events: none; }
.rm-hover[hidden], .rm-tip[hidden] { display: none; }
.rm-tip { position: absolute; top: -1px; transform: translateX(-50%); padding: 1px 6px; border-radius: 4px; background: var(--raised); border: 1px solid var(--line-strong); font-size: 10.5px; line-height: 14px; white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--text); pointer-events: none; z-index: 6; }
.rm-sum { margin: 0; font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; display: flex; flex-wrap: wrap; gap: 2px 12px; align-items: center; }
.rm-sum .sw { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 5px; vertical-align: -1px; background: var(--muted); }
.rm-sum .sw[data-type="track"] { background: #5d7893; }
.rm-sum .sw[data-type="talk"] { background: var(--talk); }
.rm-sum .sw[data-type="ad"] { background: var(--ad); }
.rm-sum .sw[data-type="cart"] { background: var(--next); }
.rm-sum .sw[data-type="mic"] { background: var(--air); }
.rm-sum .rm-when { margin-left: auto; }
.rec-ev.hot { background: var(--raised); }
.rec-ev.pulse { animation: rec-pulse 1.1s ease-out; }
@keyframes rec-pulse { from { background: var(--play-soft); box-shadow: inset 3px 0 0 var(--play); } to { background: transparent; } }
@media (prefers-reduced-motion: reduce) { .rec-ev.pulse { animation: none; } }
@media (max-width: 560px) { .rm-grid { grid-template-columns: 3.2em minmax(0, 1fr); } .rm-sum .rm-when { margin-left: 0; } }

/* ---------------------------------------------------------------- folders for the saved shows (stage 10g) */
.shows-list li.folder-h { background: var(--raised); padding: 4px 12px; border-top: 1px solid var(--line-strong); }
.shows-list li.folder-h:first-child { border-top: 0; }
.shows-list li.folder-h .folder-tog { display: flex; align-items: center; gap: 8px; min-width: 0; background: transparent; border: 0; color: var(--text); font: inherit; font-weight: 700; cursor: pointer; padding: 5px 0; text-align: left; }
.shows-list li.folder-h .fold { width: 1em; color: var(--muted); flex: none; }
.shows-list li.folder-h .fname { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shows-list li.folder-h .fcount { color: var(--muted); font-weight: 500; font-size: 12.5px; flex: none; }
.shows-list li.folder-h.over { outline: 2px solid var(--focus); outline-offset: -2px; background: var(--play-soft); }
.shows-list li.folder-h ~ li.show-row { padding-left: 26px; }
.shows-list li.show-row.dragging { opacity: 0.45; }
.shows-list li.folder-empty { display: block; padding: 8px 12px 8px 26px; color: var(--muted); font-size: 12.5px; }
@media (max-width: 560px) { .shows-list li.folder-h ~ li.show-row { padding-left: 14px; } .shows-list .acts { flex-wrap: wrap; justify-content: flex-end; } }

/* ---------------------------------------------------------------- logins (stage 10h) */
/* ---------------------------------------------------------------- signing in (stage 10h) */
/* Until the studio says who this is, nothing of the desk is shown: only the card. */
body[data-gate="1"] > *:not(.auth-wrap) { visibility: hidden; }
.auth-wrap {
  position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; padding: 16px; overflow: auto;
  background: radial-gradient(1200px 600px at 50% -10%, rgba(124, 196, 255, 0.07), transparent 60%), var(--bg);
}
.auth-wrap[data-overlay="1"] { background: rgba(5, 8, 11, 0.82); backdrop-filter: blur(3px); }
.auth-card {
  width: min(440px, 100%); margin: auto; padding: 22px 22px 18px; border: 1px solid var(--line-strong); border-radius: 12px;
  background: var(--panel); box-shadow: 0 24px 64px rgba(0, 0, 0, 0.5); display: grid; gap: 12px;
}
.auth-brand { display: flex; align-items: center; gap: 9px; font-size: 15px; letter-spacing: 0.02em; }
.auth-mark { width: 26px; height: 19px; background: currentColor; opacity: 0.92;
  -webkit-mask: url("yagi.svg") center / contain no-repeat; mask: url("yagi.svg") center / contain no-repeat; }
.auth-card h1 { margin: 6px 0 0; font-size: 22px; line-height: 1.2; font-weight: 700; }
.auth-lead { margin: 0; color: var(--muted); line-height: 1.5; }
.auth-step { margin: 0; padding: 10px 12px; border-radius: 8px; background: var(--well); border: 1px solid var(--line); color: var(--muted); line-height: 1.5; font-size: 13px; }
.auth-tip { margin: 0; color: var(--faint); font-size: 12.5px; line-height: 1.5; }
.auth-field { display: grid; gap: 4px; position: relative; }
.auth-field > span { font-size: 12.5px; color: var(--muted); font-weight: 600; }
.auth-field > small { color: var(--faint); font-size: 12px; }
.auth-field input { min-height: 40px; width: 100%; padding: 0 12px; border-radius: 8px; border: 1px solid var(--line-strong); background: var(--well); color: var(--text); font-size: 15px; }
.auth-field input:focus { border-color: var(--focus); outline: none; box-shadow: 0 0 0 2px rgba(124, 196, 255, 0.25); }
.auth-field.has-show input { padding-right: 62px; }
.auth-show { position: absolute; right: 6px; top: 22px; min-height: 28px; padding: 0 9px; border: 0; border-radius: 6px; background: transparent; color: var(--muted); font-size: 12.5px; cursor: pointer; }
.auth-show:hover { color: var(--text); background: var(--key); }
.auth-go { min-height: 42px; font-size: 15px; width: 100%; }
.auth-msg { margin: 0; min-height: 18px; font-size: 13px; color: var(--hot); font-weight: 600; line-height: 1.4; }
.auth-msg[data-ok="1"] { color: var(--muted); font-weight: 400; }
.auth-foot { display: grid; gap: 6px; justify-items: start; }
.auth-link { background: none; border: 0; padding: 0; color: var(--focus); font-size: 13px; cursor: pointer; text-align: left; }
.auth-link:hover { text-decoration: underline; }
.auth-small { color: var(--faint); font-size: 12.5px; }

/* ---------------------------------------------------------------- the People page */
.pp-page {
  display: none; flex-direction: column; position: relative; min-height: 0; min-width: 0; margin: 10px; overflow: hidden;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); color: var(--text); box-shadow: var(--shadow);
}
body[data-view="people"] .pp-page { display: flex; }
body[data-view="people"] .deck, body[data-view="people"] .tabs, body[data-view="people"] .media-page, body[data-view="people"] .rec-page { display: none; }
.pp-page .sp { flex: 1; }
.pp-head { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--line); flex: none; }
.pp-head h2 { margin: 0; font-size: 17px; }
.pp-count { color: var(--muted); font-size: 13px; }
.pp-tabs { display: flex; gap: 4px; padding: 8px 14px 0; border-bottom: 1px solid var(--line); flex: none; }
.pp-tab { min-height: 34px; padding: 0 14px; border: 1px solid transparent; border-bottom: 0; border-radius: 6px 6px 0 0; background: transparent; color: var(--muted); font-weight: 600; cursor: pointer; }
.pp-tab:hover { color: var(--text); }
.pp-tab.on { background: var(--raised); color: var(--text); border-color: var(--line-strong); position: relative; top: 1px; }
.pp-notice { margin: 0; padding: 8px 14px; background: var(--next-soft); color: var(--next); font-size: 13px; flex: none; }
.pp-body { flex: 1; min-height: 0; overflow-y: auto; padding: 14px; display: block; scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
.pp-bar { display: flex; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
.pp-note { margin: 0 0 12px; color: var(--muted); font-size: 13px; line-height: 1.5; max-width: 80ch; }
.pp-sub { margin: 22px 0 8px; font-size: 13px; color: var(--muted); font-weight: 600; }
.pp-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.pp-empty { color: var(--muted); padding: 12px 4px; }
.pp-row, .pp-inv { display: grid; grid-template-columns: 14px minmax(160px, 1.4fr) minmax(90px, 0.8fr) minmax(130px, 1fr) auto; gap: 12px; align-items: center; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--raised); }
.pp-inv { grid-template-columns: 14px minmax(180px, 1.4fr) minmax(160px, 1.2fr) auto; }
.pp-row[data-disabled="1"] { opacity: 0.6; }
.pp-row:hover, .pp-inv:hover { border-color: var(--line-strong); }
.pp-who { display: grid; min-width: 0; }
.pp-who b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pp-who small { color: var(--muted); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pp-who .pp-tag { justify-self: start; }
.pp-tag { display: inline-block; margin-top: 3px; padding: 0 7px; border-radius: 999px; border: 1px solid var(--line-strong); color: var(--muted); font-size: 11.5px; font-weight: 600; }
.pp-tag.warn { color: var(--next); border-color: var(--next); }
.pp-lamp { width: 9px; height: 9px; border-radius: 50%; background: var(--line-strong); justify-self: center; }
.pp-lamp[data-on="1"] { background: var(--good); box-shadow: 0 0 0 3px rgba(72, 199, 142, 0.18); }
.pp-role-col, .pp-seen, .pp-status { color: var(--muted); font-size: 13px; }
.pp-more { min-width: 30px; }
.pp-guests .pp-row { grid-template-columns: 14px minmax(160px, 1.4fr) minmax(90px, 0.8fr) minmax(130px, 1fr); }

.pp-roles { display: grid; grid-template-columns: minmax(220px, 300px) minmax(0, 1fr); gap: 16px; align-items: start; }
.pp-role { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 8px; align-items: center; padding: 9px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--raised); cursor: pointer; }
.pp-role:hover { border-color: var(--line-strong); }
.pp-role.on { border-color: var(--focus); box-shadow: inset 3px 0 0 var(--focus); }
.pp-role .pp-count { font-size: 12.5px; }
.pp-edit { border: 1px solid var(--line); border-radius: 8px; background: var(--raised); padding: 14px; min-width: 0; }
.pp-edit-head { display: grid; grid-template-columns: minmax(160px, 260px) minmax(0, 1fr); gap: 12px; margin-bottom: 8px; }
.pp-fld { display: grid; gap: 4px; margin-bottom: 12px; }
.pp-edit-head .pp-fld { margin-bottom: 0; }
.pp-fld label { font-size: 12.5px; color: var(--muted); font-weight: 600; }
.pp-fld input, .pp-fld select { min-height: 34px; padding: 0 10px; border-radius: 6px; border: 1px solid var(--line-strong); background: var(--well); color: var(--text); width: 100%; }
.pp-fld small { color: var(--faint); font-size: 12px; }
.pp-perms { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 14px; margin-top: 8px; }
.pp-group { border: 1px solid var(--line); border-radius: 8px; padding: 6px 10px 8px; background: var(--panel); }
.pp-ghead { display: flex; align-items: center; gap: 4px; }
.pp-ghead h3 { margin: 0; flex: 1; font-size: 13.5px; }
.pp-perm { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 8px; padding: 6px 0; border-top: 1px solid var(--line); cursor: pointer; align-items: start; }
.pp-perm:first-of-type { border-top: 0; }
.pp-perm input { margin: 3px 0 0; width: 16px; height: 16px; accent-color: var(--play); }
.pp-ptext { display: grid; }
.pp-ptext b { font-size: 13.5px; }
.pp-ptext small { color: var(--muted); font-size: 12.5px; line-height: 1.4; }
.pp-edit-foot { display: flex; gap: 8px; align-items: center; margin-top: 14px; flex-wrap: wrap; position: sticky; bottom: 0; padding: 10px 0 0; background: linear-gradient(transparent, var(--raised) 30%); }
.pp-err { margin: 6px 0 0; color: var(--hot); font-weight: 600; font-size: 13px; min-height: 0; }
.pp-err:empty { display: none; }
.pp-details { margin: 8px 0; padding: 10px 12px; border-radius: 8px; background: var(--well); border: 1px solid var(--line-strong); font: 14px/1.5 ui-monospace, "Cascadia Mono", Consolas, monospace; white-space: pre-wrap; user-select: all; }
.pp-link { width: 100%; padding: 10px; border-radius: 8px; border: 1px solid var(--line-strong); background: var(--well); color: var(--text); font: 13px/1.4 ui-monospace, "Cascadia Mono", Consolas, monospace; resize: none; }

.pp-sec { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; align-items: start; }
.pp-card { border: 1px solid var(--line); border-radius: 8px; background: var(--raised); padding: 12px 14px; }
.pp-card.wide { grid-column: 1 / -1; }
.pp-card h3 { margin: 0 0 8px; font-size: 14px; }
.pp-log { list-style: none; margin: 0; padding: 0; max-height: 320px; overflow-y: auto; display: grid; font-size: 13px; scrollbar-width: thin; }
.pp-log li { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 10px; padding: 4px 0; border-top: 1px solid var(--line); }
.pp-log li:first-child { border-top: 0; }
.pp-log time { color: var(--muted); font-variant-numeric: tabular-nums; }
.pp-log li[data-type="login-failed"], .pp-log li[data-type="refused"], .pp-log li[data-type="setup-code-wrong"] { color: var(--next); }
@media (max-width: 900px) {
  .pp-row, .pp-inv { grid-template-columns: 14px minmax(0, 1fr) auto; }
  .pp-row .pp-role-col, .pp-row .pp-seen, .pp-inv .pp-status { grid-column: 2 / 3; }
  .pp-roles { grid-template-columns: minmax(0, 1fr); }
  .pp-edit-head { grid-template-columns: minmax(0, 1fr); }
  .pp-page { margin: 0; border-radius: 0; border-left: 0; border-right: 0; border-bottom: 0; }
}

/* A control marked data-perm="some.permission" is hidden for a role that does not have it (desk-core.js puts can-... classes on the page). The studio refuses the request anyway; this just stops the button being there. */
body:not(.can-all):not(.can-desk-view) [data-perm~="desk.view"],
body:not(.can-all):not(.can-desk-full) [data-perm~="desk.full"],
body:not(.can-all):not(.can-studio-join) [data-perm~="studio.join"],
body:not(.can-all):not(.can-listen-stream) [data-perm~="listen.stream"],
body:not(.can-all):not(.can-mic-own) [data-perm~="mic.own"],
body:not(.can-all):not(.can-mix-own) [data-perm~="mix.own"],
body:not(.can-all):not(.can-mic-control) [data-perm~="mic.control"],
body:not(.can-all):not(.can-talkback-use) [data-perm~="talkback.use"],
body:not(.can-all):not(.can-talkback-set) [data-perm~="talkback.set"],
body:not(.can-all):not(.can-lobby-accept) [data-perm~="lobby.accept"],
body:not(.can-all):not(.can-lobby-remove) [data-perm~="lobby.remove"],
body:not(.can-all):not(.can-room-set) [data-perm~="room.set"],
body:not(.can-all):not(.can-playout-control) [data-perm~="playout.control"],
body:not(.can-all):not(.can-music-level) [data-perm~="music.level"],
body:not(.can-all):not(.can-carts-fire) [data-perm~="carts.fire"],
body:not(.can-all):not(.can-record-control) [data-perm~="record.control"],
body:not(.can-all):not(.can-order-edit) [data-perm~="order.edit"],
body:not(.can-all):not(.can-shows-open) [data-perm~="shows.open"],
body:not(.can-all):not(.can-shows-save) [data-perm~="shows.save"],
body:not(.can-all):not(.can-shows-delete) [data-perm~="shows.delete"],
body:not(.can-all):not(.can-adpresets-edit) [data-perm~="adpresets.edit"],
body:not(.can-all):not(.can-carts-edit) [data-perm~="carts.edit"],
body:not(.can-all):not(.can-media-view) [data-perm~="media.view"],
body:not(.can-all):not(.can-media-upload) [data-perm~="media.upload"],
body:not(.can-all):not(.can-media-edit) [data-perm~="media.edit"],
body:not(.can-all):not(.can-media-delete) [data-perm~="media.delete"],
body:not(.can-all):not(.can-media-trash) [data-perm~="media.trash"],
body:not(.can-all):not(.can-media-erase) [data-perm~="media.erase"],
body:not(.can-all):not(.can-rec-view) [data-perm~="rec.view"],
body:not(.can-all):not(.can-rec-edit) [data-perm~="rec.edit"],
body:not(.can-all):not(.can-rec-delete) [data-perm~="rec.delete"],
body:not(.can-all):not(.can-stream-control) [data-perm~="stream.control"],
body:not(.can-all):not(.can-stream-destinations) [data-perm~="stream.destinations"],
body:not(.can-all):not(.can-settings-change) [data-perm~="settings.change"],
body:not(.can-all):not(.can-people-view) [data-perm~="people.view"],
body:not(.can-all):not(.can-people-manage) [data-perm~="people.manage"],
body:not(.can-all):not(.can-roles-manage) [data-perm~="roles.manage"],
body:not(.can-all):not(.can-invites-manage) [data-perm~="invites.manage"],
body:not(.can-all):not(.can-studio-lock) [data-perm~="studio.lock"],
body:not(.can-all):not(.can-mic-self) [data-perm~="mic.self"],
body:not(.can-all):not(.can-audit-view) [data-perm~="audit.view"] { display: none !important; }
@media (max-width: 1180px) { body[data-view="people"] { height: 100vh; height: 100dvh; overflow: hidden; grid-template-rows: auto minmax(0, 1fr); } }

/* guest badge in the lobby, and the account chip in the top bar */
.pbadge { display: inline-block; padding: 1px 8px; border-radius: 999px; background: var(--next-soft); color: var(--next); font-size: 12px; font-weight: 700; }
#whoami[data-account] { cursor: pointer; }
#whoami[data-account]:hover { color: var(--text); }
#whoami[data-account]:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* The buttons the desk builds as it goes (running order rows, the picked-rows bar, the saved shows list) cannot carry data-perm in the page,
 * so they are matched here by what they do. The studio refuses the request anyway; this just keeps them from being offered. */
body:not(.can-all):not(.can-playout-control) #roList .acts [data-act="play"],
body:not(.can-all):not(.can-playout-control) #roList .acts [data-act="done"],
body:not(.can-all):not(.can-playout-control) #roList .acts [data-act="skipspot"],
body:not(.can-all):not(.can-playout-control) #roList .acts [data-act="playcard"],
body:not(.can-all):not(.can-order-edit) #roList .acts [data-act="loop"],
body:not(.can-all):not(.can-order-edit) #roList .acts [data-act="ready"],
body:not(.can-all):not(.can-order-edit) #roBulk [data-act="float"],
body:not(.can-all):not(.can-order-edit) #roBulk [data-act="ready"],
body:not(.can-all):not(.can-order-edit) #roBulk [data-act="who"],
body:not(.can-all):not(.can-order-edit) #roBulk [data-act="duplicate"],
body:not(.can-all):not(.can-order-edit) #roBulk [data-act="remove"],
body:not(.can-all):not(.can-shows-open) .shows-list [data-act="open"],
body:not(.can-all):not(.can-shows-save) .shows-list [data-act="copy"],
body:not(.can-all):not(.can-shows-save) .shows-list [data-act="move"],
body:not(.can-all):not(.can-shows-save) .shows-list [data-act="rename-folder"],
body:not(.can-all):not(.can-shows-save) [data-act="new-folder"],
body:not(.can-all):not(.can-shows-delete) .shows-list [data-act="delete"],
body:not(.can-all):not(.can-shows-delete) .shows-list [data-act="delete-folder"],
body:not(.can-all):not(.can-wall-edit) [data-perm~="wall.edit"],
body:not(.can-all):not(.can-carts-private) [data-perm~="carts.private"],
body:not(.can-all):not(.can-strands-manage) [data-perm~="strands.manage"] { display: none !important; }

/* ---------------------------------------------------------------- stage 10h: the big player stays put
 * The "until the vocal" and "until the outro" countdowns used to come and go beside the big digits, which then slid sideways (and, on a
 * small screen, wrapped onto a new line and pushed everything down). They now sit in a row under the digits that is always there: when a
 * countdown is not showing it is only invisible, so it keeps its place and nothing moves. */
.readout { position: relative; padding-bottom: 22px; }
.readout .cue-boxes { position: absolute; right: 0; bottom: 0; margin: 0; display: flex; justify-content: flex-end; align-items: baseline; gap: 12px; height: 20px; text-align: right; }
.readout .cue-boxes .intro-box { display: inline-flex; align-items: baseline; gap: 5px; margin: 0; white-space: nowrap; }
.readout .cue-boxes .intro-box[hidden] { display: inline-flex !important; visibility: hidden; }
.readout .cue-boxes .intro-box b { display: inline; font-size: 16px; line-height: 20px; font-stretch: 100%; }
.readout .cue-boxes .intro-box span { font-size: 11.5px; }
body[data-view="rundown"] .readout { padding-bottom: 0; }

/* ---------------------------------------------------------------- stage 10i: show strands and cart walls */
.wall-pick { display: inline-flex; align-items: center; gap: 6px; max-width: 180px; margin-bottom: 2px; padding: 0 9px; flex: none; }
.wall-pick .wn { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wall-pick::after { content: "▾"; font-size: 10px; color: var(--muted); }
.wall-pick[data-kind="private"] { border-color: var(--focus); box-shadow: inset 3px 0 0 var(--focus); }
.wall-pick[data-kind="strand"] { box-shadow: inset 3px 0 0 var(--line-strong); }
.wall-pick .dot { display: none; width: 7px; height: 7px; border-radius: 50%; background: var(--play); box-shadow: 0 0 6px var(--play); flex: none; }
.wall-pick[data-playing="true"] .dot { display: inline-block; }
.strand-chip { max-width: 220px; min-height: 22px; padding: 0 9px; border-radius: 999px; border: 1px solid var(--line-strong); background: transparent; color: var(--muted); font-size: 12.5px; font-weight: 600; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; align-self: center; }
.strand-chip[data-set="true"] { color: var(--text); border-color: var(--focus); }
.strand-chip:hover:not(:disabled) { background: var(--key); }
.strand-chip:disabled { cursor: default; opacity: 0.7; }
.strand-chip[hidden] { display: none; }
.strand-list { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
.strand-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--raised); }
.strand-row .txt { display: grid; min-width: 0; flex: 1; }
.strand-row .t { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.strand-row .s { color: var(--muted); font-size: 12.5px; }
.strand-row .acts { display: flex; gap: 6px; flex: none; }

/* ---------------------------------------------------------------- levelling the music (stage 10i) */
#roList li .s .lv { color: var(--muted); white-space: nowrap; }

/* ---------------------------------------------------------------- how songs join (stage 11) */
/* The join button on every song row (stage 13f: short, bordered, always in view). Solid orange = set for this song; dashed grey = the studio's usual. */
#roList li .mixchip { font-size: 12px; font-weight: 700; white-space: nowrap; min-height: 28px; min-width: 62px; justify-content: center; text-align: center; padding: 0 9px; border-radius: 999px; font-variant-numeric: tabular-nums; }
#roList li .mixchip.own { color: var(--hot); border-color: var(--hot); background: transparent; }
#roList li .mixchip.usual { color: var(--muted); font-weight: 600; border-style: dashed; background: transparent; }
#roList li button.mixchip:hover, #roList li button.mixchip:focus-visible { color: var(--text); background: var(--key); }
.mx { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.mx-intro, .mx-help, .mx-read { margin: 0; font-size: 13px; color: var(--muted); }
.mx-read { color: var(--text); font-size: 14px; min-height: 2.7em; }
.mx-warn { margin: 0; padding: 8px 10px; border: 1px solid var(--next); background: var(--next-soft); border-radius: 6px; font-size: 13px; }
.mx-stage { position: relative; border-radius: 6px; box-shadow: 0 0 0 1px var(--line); background: var(--well); overflow: hidden; touch-action: none; user-select: none; -webkit-user-select: none; }
.mx-canvas { display: block; }
.mx-hit { position: absolute; box-sizing: border-box; cursor: grab; border-radius: 3px; background: transparent; }
.mx-hit.mx-a { cursor: default; }
.mx-hit[data-locked="true"] { cursor: default; }
.mx-hit.dragging { cursor: grabbing; }
.mx-hit:focus-visible, .mx-handle:focus-visible, .mx-addj:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.mx-handle { position: absolute; width: 16px; height: 16px; margin: 0 0 0 -8px; border-radius: 50%; background: var(--hot); border: 2px solid var(--well); box-shadow: 0 0 0 1px var(--hot); cursor: ew-resize; z-index: 2; }
.mx-handle[data-locked="true"] { cursor: default; }
.mx-handle.dragging { cursor: grabbing; }
.mx-addj { position: absolute; z-index: 1; min-height: 0; padding: 0 12px; background: transparent; color: var(--muted); border: 1px dashed var(--line-strong); border-radius: 6px; font: inherit; font-size: 13px; cursor: pointer; align-self: center; }
.mx-addj:hover { color: var(--text); border-color: var(--text); }
.mx-picks { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.mx-picks-l { font-size: 12px; color: var(--muted); margin-right: 2px; }
.mx-trim { position: absolute; z-index: 2; box-sizing: border-box; width: 14px; cursor: ew-resize; border-radius: 3px; background: var(--next); opacity: 0.85; touch-action: none; }
.mx-trim::after { content: ""; position: absolute; left: 5px; top: 20%; bottom: 20%; width: 4px; border-left: 1px solid var(--well); border-right: 1px solid var(--well); }
.mx-trim:hover, .mx-trim.dragging { opacity: 1; }
.mx-trim[data-locked="true"] { display: none; }
.mx-trim:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.mx-trimbox { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 14px; align-items: end; }
.mx-trimbox[hidden] { display: none; }
.mx-tools { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.mx-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 14px; align-items: start; }
.mx-block { display: flex; flex-direction: column; gap: 6px; }
.mx-f label { display: block; font-size: 12px; color: var(--muted); margin-bottom: 2px; }
.mx-f input, .mx-f select { width: 100%; min-height: 34px; background: var(--well); color: var(--text); border: 1px solid var(--line-strong); border-radius: 6px; padding: 0 10px; font: inherit; }
.mx-f input:disabled, .mx-f select:disabled { opacity: 0.55; }
.mx-hint { display: block; margin-top: 3px; font-size: 12px; color: var(--muted); }
.mx-nudge { display: flex; flex-wrap: wrap; gap: 4px; }
.mx-jfile { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.mx-jname { font-weight: 600; font-size: 13px; }
.mx-pick { display: flex; flex-direction: column; gap: 4px; max-height: 50vh; overflow: auto; margin-top: 8px; }
.mx-pickrow { display: flex; justify-content: space-between; gap: 12px; text-align: left; width: 100%; }
.mx-pickrow .s { color: var(--muted); font-size: 12.5px; }
.set-note.warn { color: var(--next); }


/* ---------------------------------------------------------------- going on air to other servers (stage 12; the ON AIR window) */
/* The one badge everybody sees, whatever they may do: ON AIR, RECORDING or REHEARSAL MODE (the bar's right-click menu and the title say more). */
.airstate { font-weight: 800; letter-spacing: 0.04em; border-radius: 999px; padding-left: 14px; padding-right: 14px; max-width: 230px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: default; }
.airstate[data-can="1"] { cursor: pointer; }
.airstate[data-state="rehearsal"] { color: var(--muted); border-color: var(--line-strong); background: transparent; }
.airstate[data-state="rec"] { color: var(--air); border-color: var(--air); background: var(--air-soft); }
.airstate[data-state="rec"]::before, .airstate[data-state="live"]::before, .airstate[data-state="problem"]::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; background: currentColor; vertical-align: 0; }
.airstate[data-state="live"] { background: var(--air); border-color: var(--air); color: #fff; box-shadow: 0 0 0 3px var(--air-soft), 0 0 18px var(--air-soft); }
.airstate[data-state="trying"] { border-color: var(--next); color: var(--next); background: var(--next-soft); }
.airstate[data-state="problem"] { border-color: var(--air); color: var(--air); background: var(--air-soft); }
.airstate[data-state="unknown"] { color: var(--faint); }
@media (prefers-reduced-motion: no-preference) {
  .airstate[data-state="live"]::before, .airstate[data-state="rec"]::before { animation: airpulse 1.6s ease-in-out infinite; }
  @keyframes airpulse { 50% { opacity: 0.35; } }
}
dialog.out-sheet .sh-body { min-width: min(640px, 86vw); }
.out-list { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 8px; }
.out-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--raised); }
.out-row .dot { flex: none; width: 12px; height: 12px; border-radius: 50%; background: var(--faint); box-shadow: 0 0 0 3px transparent; }
.out-row[data-state="live"] .dot { background: var(--good); box-shadow: 0 0 0 3px rgba(72, 199, 142, 0.2); }
.out-row[data-state="connecting"] .dot, .out-row[data-state="retrying"] .dot { background: var(--next); }
.out-row[data-state="failed"] .dot { background: var(--air); }
.out-row .txt { display: grid; gap: 1px; min-width: 0; flex: 1; }
.out-row .t { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.out-row .s { color: var(--muted); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.out-row .st { font-size: 12.5px; color: var(--text); line-height: 1.4; }
.out-row .st.warn { color: var(--next); }
.out-row[data-state="failed"] .st.warn { color: var(--air); }
.out-row .acts { display: flex; gap: 6px; flex: none; flex-wrap: wrap; justify-content: flex-end; }
.out-form { gap: 10px; }
.out-form .out-f { display: grid; gap: 3px; }
.out-form .out-f[hidden] { display: none; }
.out-form .out-f input[type="text"], .out-form .out-f input[type="password"], .out-form .out-f select { width: 100%; min-height: 34px; background: var(--well); border: 1px solid var(--line-strong); border-radius: 6px; padding: 0 10px; font: inherit; font-size: 14px; color: var(--text); }
.out-form .out-f select { padding-right: 6px; }
.out-form .hint { color: var(--muted); font-size: 12px; line-height: 1.4; }
.out-form .chk-f .chk { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 13.5px; color: var(--text); cursor: pointer; }
.out-form .chk-f .chk input { width: 18px; height: 18px; margin: 0; }
.out-form .out-more { border: 1px solid var(--line); border-radius: 8px; padding: 6px 10px; }
.out-form .out-more summary { cursor: pointer; font-size: 13px; color: var(--muted); padding: 2px 0; }
.out-form .out-more-body { display: grid; gap: 10px; padding: 8px 0 4px; }
.out-form .out-msg { min-height: 1.4em; }
.out-form .out-msg.warn { color: var(--air); }

/* Stage 13f: the producer's Mute button in the top bar. */
.barmute { font-weight: 700; min-width: 64px; }
.barmute[data-muted="1"] { background: var(--next-soft); border-color: var(--next); color: var(--next); }
.barmute[data-muted="1"]::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; background: currentColor; }

/* ================================================================ stage 15: polish
 * A tidier console. The big changes: the music level is a real vertical fader on its own channel strip beside what is playing; the vocal,
 * outro and bed countdowns are big enough to read at a glance; the running order shows its buttons only where they are needed (the next row,
 * the row under the pointer); Settings is grouped with a list down the side. Colours keep their one meaning each (see the top of this file).
 */

/* ---- now playing, with the music strip on the right ---- */
#p-now { display: grid; grid-template-columns: minmax(0, 1fr) 78px; grid-template-rows: auto auto; }
#p-now > .now { grid-column: 1; grid-row: 1; }
#p-now > .players { grid-column: 1; grid-row: 2; }
#p-now > .music.fstrip { grid-column: 2; grid-row: 1 / span 2; align-self: stretch; overflow: hidden; display: flex; flex-direction: column; align-items: center; flex-wrap: nowrap; gap: 6px; padding: 10px 6px 10px; border-top: 0; border-left: 1px solid var(--line); background: linear-gradient(180deg, var(--raised), var(--panel)); border-radius: 0 var(--radius) var(--radius) 0; min-height: 0; }
.music.fstrip .strip-name { font-size: 12.5px; font-weight: 700; color: var(--muted); letter-spacing: 0.02em; }
.music.fstrip .db { width: 62px; min-width: 0; text-align: center; font-size: 12.5px; color: var(--text); background: var(--well); border: 1px solid var(--line); border-radius: 4px; padding: 2px 0; font-variant-numeric: tabular-nums; }
.music.fstrip .vfader { position: relative; flex: 1 1 0; width: 62px; min-height: 104px; }
.music.fstrip .vscale { position: absolute; left: 0; top: 0; bottom: 0; width: 24px; pointer-events: none; }
.music.fstrip .vscale span { position: absolute; right: 0; bottom: calc(10px + (100% - 20px) * var(--p) / 100); transform: translateY(50%); font-size: 10px; line-height: 1; color: var(--faint); font-variant-numeric: tabular-nums; }
.music.fstrip .vscale span::after { content: ""; position: absolute; left: calc(100% + 3px); top: 50%; width: 5px; border-top: 1px solid var(--line-strong); }
.music.fstrip .vscale span[style*="--p:80"] { color: var(--muted); }
.music.fstrip input[type="range"] { position: absolute; top: 0; bottom: 0; right: 4px; writing-mode: vertical-lr; direction: rtl; -webkit-appearance: none; appearance: none; width: 30px; min-width: 0; height: auto; margin: 0; padding: 0; background: transparent; cursor: ns-resize; }
.music.fstrip input[type="range"]::-webkit-slider-runnable-track { width: 6px; border-radius: 3px; background: var(--well); border: 1px solid var(--line-strong); box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.55); }
.music.fstrip input[type="range"]::-moz-range-track { width: 6px; border-radius: 3px; background: var(--well); border: 1px solid var(--line-strong); }
.music.fstrip input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 30px; height: 20px; margin-left: -13px; border-radius: 3px; border: 1px solid rgba(0, 0, 0, 0.55);
  background: linear-gradient(180deg, #eef1f4 0%, #c3cad2 44%, #20262d 44%, #20262d 56%, #aab3bc 56%, #8b95a0 100%); box-shadow: 0 2px 5px rgba(0, 0, 0, 0.55); }
.music.fstrip input[type="range"]::-moz-range-thumb { width: 30px; height: 20px; border-radius: 3px; border: 1px solid rgba(0, 0, 0, 0.55); background: linear-gradient(180deg, #eef1f4 0%, #c3cad2 44%, #20262d 44%, #20262d 56%, #aab3bc 56%, #8b95a0 100%); }
.music.fstrip input[type="range"]:focus-visible { outline: none; }
.music.fstrip input[type="range"]:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 2px var(--focus), 0 2px 5px rgba(0, 0, 0, 0.55); }
.music.fstrip input[type="range"]:disabled { cursor: default; }
.music.fstrip #duckBtn { width: 62px; padding: 0; justify-content: center; font-size: 12.5px; }
.music.fstrip #duckBtn[aria-pressed="true"] { color: var(--next); border-color: var(--next); background: var(--next-soft); }
.music.fstrip select { width: 62px; min-height: 26px; font-size: 12px; padding: 0 2px; }
.music.fstrip .state { font-size: 11px; text-align: center; line-height: 1.2; min-height: 2.4em; }
:root[data-theme="light"] .music.fstrip input[type="range"]::-webkit-slider-thumb { border-color: rgba(0, 0, 0, 0.35); }

/* ---- the countdowns beside the big digits: until the vocal, until the outro, and (talk segments) the bed ---- */
/* (a fixed slot on the right of the digits, so the digits never move when a countdown comes or goes) */
.readout { padding-bottom: 0; position: relative; padding-right: 92px; min-height: 56px; }
.readout .cue-boxes { position: absolute; right: 0; top: 50%; transform: translateY(-50%); height: auto; margin: 0; display: flex; flex-direction: column; align-items: flex-end; justify-content: center; gap: 2px; }
.readout .cue-boxes .intro-box { display: inline-flex; flex-direction: column; align-items: flex-end; gap: 0; }
.readout .cue-boxes .intro-box[hidden] { display: none !important; }
.readout .cue-boxes .intro-box b { font-size: clamp(24px, 3.6vh, 36px); line-height: 1; font-weight: 600; font-stretch: 85%; font-variant-numeric: tabular-nums; color: var(--next); }
.readout .cue-boxes .intro-box span { font-size: 11.5px; line-height: 1.1; color: var(--muted); }
.readout .cue-boxes .outro-box b { color: #b48cff; }
.readout .cue-boxes .bed-box b { color: var(--talk); }
.readout .cue-boxes .bed-box[data-level="warn"] b { color: var(--hot); }
:root[data-theme="light"] .readout .cue-boxes .outro-box b { color: #6c46a3; }

/* ---- the running order: calmer rows ---- */
.ro li .t { font-size: 15px; font-weight: 650; }
.ro li .s { font-size: 12.5px; }
.ro li .when { font-variant-numeric: tabular-nums; }
.ro li .w-end { color: var(--faint); }
/* the loop and play buttons show on the row under the pointer, the row that plays next, and wherever they are switched on; the menu button always */
.ro li .acts .loopbtn[aria-pressed="false"], .ro li .acts [data-act="play"] { opacity: 0; transition: opacity 120ms; }
.ro li:hover .acts .loopbtn, .ro li:focus-within .acts .loopbtn, .ro li[data-next="true"] .acts .loopbtn,
.ro li:hover .acts [data-act="play"], .ro li:focus-within .acts [data-act="play"], .ro li[data-next="true"] .acts [data-act="play"] { opacity: 1; }
@media (hover: none) { .ro li .acts .loopbtn, .ro li .acts [data-act="play"] { opacity: 1; } }
/* the row that plays next: an amber edge and a small label, so it is the obvious one */
.ro li[data-next="true"]::before { background: var(--next); }
.ro li[data-next="true"] { background: linear-gradient(90deg, var(--next-soft), transparent 60%); }
.ro li[data-next="true"] .when::after { content: "Next"; display: block; margin-top: 2px; font-size: 10.5px; font-weight: 700; color: var(--next); }
.ro li[data-state="playing"] .t { color: var(--text); }
.ro li[data-state="played"] { opacity: 0.72; }
.ro li[data-state="played"]:hover { opacity: 1; }
.ro li:not([data-state="playing"]):not([data-next="true"]):hover { background: rgba(255, 255, 255, 0.025); }
:root[data-theme="light"] .ro li:not([data-state="playing"]):not([data-next="true"]):hover { background: rgba(0, 0, 0, 0.03); }
.ro-foot #roClearPlayedBtn, .ro-foot #roClearAllBtn { color: var(--muted); }

/* ---- My microphone (the host's own mic) ---- */
.mymic iframe { height: 250px; }

/* ---- Settings: grouped, with a list down the side ---- */
dialog.sheet.settings-sheet { width: min(980px, calc(100vw - 24px)); }
dialog.sheet.settings-sheet .sh-body { padding: 0; overflow: hidden; display: flex; min-height: 0; }
.set-layout { display: grid; grid-template-columns: 210px minmax(0, 1fr); width: 100%; height: min(70vh, 680px); }
.set-nav { border-right: 1px solid var(--line); padding: 12px; display: flex; flex-direction: column; gap: 10px; background: var(--well); }
.set-nav input[type="search"] { width: 100%; min-height: 34px; background: var(--panel); border: 1px solid var(--line-strong); border-radius: 6px; padding: 0 10px; color: var(--text); box-sizing: border-box; }
.set-groups { display: flex; flex-direction: column; gap: 2px; }
.set-gbtn { justify-content: flex-start; width: 100%; min-height: 34px; background: transparent; border-color: transparent; font-weight: 600; text-align: left; }
.set-gbtn:hover:not(:disabled) { background: var(--key); }
.set-gbtn[aria-pressed="true"] { background: var(--key); border-color: var(--line-strong); box-shadow: inset 3px 0 0 var(--focus); }
.set-pane { overflow: auto; padding: 4px 20px 16px; }
.set-pane .set-sec[hidden], .set-pane .set-sec[data-off="1"] { display: none; }
.set-none { color: var(--muted); padding: 20px 0; }
@media (max-width: 700px) { .set-layout { grid-template-columns: 1fr; height: auto; } .set-nav { border-right: 0; border-bottom: 1px solid var(--line); } .set-groups { flex-direction: row; flex-wrap: wrap; } .set-gbtn { width: auto; } }

/* ---- the top bar: the pages as one group, the tools after them ---- */
.views { display: inline-flex; border: 1px solid var(--line-strong); border-radius: 7px; overflow: hidden; }
.views .view-btn { border: 0; border-radius: 0; min-height: 28px; }
.views .view-btn + .view-btn { border-left: 1px solid var(--line); }
.views .view-btn[aria-pressed="true"] { background: var(--primary); color: var(--primary-text); }
#roList li .mixchip.usual { opacity: 0.55; }
#roList li:hover .mixchip.usual, #roList li:focus-within .mixchip.usual, #roList li[data-next="true"] .mixchip.usual { opacity: 1; }

/* ---- the cart wall's master level, and a pad's own volume ---- */
.cart-master { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); margin-right: 4px; }
.cart-master[hidden] { display: none; }
.cart-master input[type="range"] { width: 84px; }
.cart-master b { min-width: 36px; font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
.pad-vol { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; }
.pad-vol-v { min-width: 120px; color: var(--muted); font-variant-numeric: tabular-nums; }
@media (min-width: 1181px) { body[data-view="rundown"] #p-now { grid-template-columns: minmax(0, 1fr); } }

/* ---- the keyboard shortcuts list (press ?) ---- */
.keys-list h3 { margin: 14px 0 6px; font-size: 14px; }
.keys-list h3:first-child { margin-top: 0; }
.keys-list dl { display: grid; grid-template-columns: minmax(150px, max-content) minmax(0, 1fr); gap: 6px 16px; margin: 0; }
.keys-list dt { font-weight: 700; font-variant-numeric: tabular-nums; }
.keys-list dt { justify-self: start; padding: 1px 8px; border: 1px solid var(--line-strong); border-bottom-width: 2px; border-radius: 5px; background: var(--raised); font-size: 12.5px; }
.keys-list dd { margin: 0; color: var(--muted); font-size: 13px; align-self: center; }
.set-nav .set-keys { margin-top: auto; justify-content: flex-start; color: var(--muted); }
@media (min-width: 1181px) { body[data-view="rundown"] #p-now .now .readout { padding-right: 0; } }
@media (min-height: 860px) { .music.fstrip .vfader { min-height: 140px; } }
/* the top bar on a laptop screen: a little tighter, the theme and full-screen buttons become small icons, and the meter gets shorter, so
   nothing runs off the edge */
@media (max-width: 1680px) {
  #themeBtn, #fsBtn { font-size: 0; width: 30px; padding: 0; justify-content: center; }
  #themeBtn::before, #fsBtn::before { content: ""; width: 14px; height: 14px; background: currentColor; }
  #themeBtn::before { width: 11px; height: 11px; border-radius: 50%; border: 1.6px solid currentColor; background: linear-gradient(90deg, currentColor 50%, transparent 50%); }
  #fsBtn::before { background: transparent; border: 1.6px solid currentColor; border-radius: 2px; width: 10px; height: 10px; box-shadow: inset 0 0 0 2px var(--key); }
}
@media (max-width: 1500px) {
  .bar { gap: 8px; }
  .master { min-width: 0; }
  .bar .master .bar-track { width: 96px; flex: none; }
}
@media (max-width: 1366px) {
  .bar .master .bar-track { width: 64px; }
  .bar .clock { font-size: 19px; }
  .listen-grp input[type="range"] { width: 48px; }
  .views .view-btn { padding-left: 7px; padding-right: 7px; }
  .bar { gap: 6px; }
}
/* ---- rehearsal mode (stage 15b) ---- */
.rehearse-btn[aria-pressed="true"] { color: var(--next); border-color: var(--next); background: var(--next-soft); }
.rehearse-btn[aria-pressed="false"] { display: none; }
.show-title .rehearse-btn { min-height: 22px; padding: 0 9px; border-radius: 999px; font-size: 12.5px; }

/* ---- the Listen volume beside the Listen button (stage 15b) ---- */
.listen-grp { display: inline-flex; align-items: center; gap: 6px; }
.listen-grp input[type="range"] { width: 78px; }
@media (max-width: 1500px) { .listen-grp input[type="range"] { width: 60px; } }

/* ---- the dropdowns (stage 15b): a flat console style with a drawn arrow, the same everywhere ---- */
select {
  -webkit-appearance: none; appearance: none;
  background-color: var(--key); color: var(--text);
  border: 1px solid var(--line-strong); border-radius: 6px;
  min-height: 30px; padding-left: 10px; font: inherit; font-size: 13px; cursor: pointer;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 1px 2px rgba(0, 0, 0, 0.25);
}
select:not([multiple]) {
  padding-right: 28px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23919ca9' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important; background-position: right 9px center !important; background-size: 10px 6px !important;
}
select:hover:not(:disabled) { background-color: var(--key-hover); border-color: var(--muted); }
select:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
select:disabled { opacity: 0.55; cursor: default; }
select option, select optgroup { background: var(--panel); color: var(--text); }
:root[data-theme="light"] select:not([multiple]) { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23546070' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08); }
.music.fstrip select { padding-left: 6px; padding-right: 18px !important; background-position: right 5px center !important; }
/* ---- the join page's preview volume and ruler playhead (stage 15b) ---- */
.mx-vol { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; font-size: 12.5px; color: var(--muted); }
.mx-vol input[type="range"] { width: 120px; }
.mx-stage { cursor: grab; }
.mx-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }

/* ================================================================ stage 15b: the console look
 * The desk is built like a piece of studio hardware: panels are machined plates with a header strip, the countdown and the clock sit in
 * dark recessed displays, buttons are keys that move when pressed, meters are LED ladders, cart pads are backlit keys and a live mic strip
 * lights up. Colours still mean only one thing each.
 */
.panel { background: linear-gradient(180deg, color-mix(in srgb, var(--panel) 92%, #fff 8%) 0, var(--panel) 46px); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 10px 28px rgba(0, 0, 0, 0.32); }
:root[data-theme="light"] .panel { background: linear-gradient(180deg, #fbfcfd 0, var(--panel) 46px); box-shadow: 0 1px 0 #fff inset, 0 6px 18px rgba(20, 30, 40, 0.10); }
.ph { border-bottom: 1px solid var(--line); }
.ph h2 { letter-spacing: 0.01em; }

/* keys */
.btn { box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06) inset, 0 1px 2px rgba(0, 0, 0, 0.35); transition: transform 60ms, box-shadow 60ms, background-color 120ms; }
.btn:active:not(:disabled) { transform: translateY(1px); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.45) inset; }
.btn.ghost { box-shadow: none; }
:root[data-theme="light"] .btn { box-shadow: 0 1px 0 #fff inset, 0 1px 2px rgba(0, 0, 0, 0.12); }
/* the transport keys under what is playing: bigger, heavier, like the keys on a playout console */
.now-actions .btn { min-height: 34px; font-weight: 700; padding: 0 13px; }
.now-actions #stopBtn, .now-actions #clearDecksBtn { border-width: 1px; }

/* the displays: the countdown and the clock sit in dark recessed windows */
#p-now .readout { background: var(--well); border: 1px solid var(--line); border-radius: 8px; padding: 0 104px 2px 14px; box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.55); }
#p-now .readout .cue-boxes { right: 12px; }
:root[data-theme="light"] #p-now .readout { background: #1a1f25; border-color: #0d1014; }
:root[data-theme="light"] #p-now .readout #digits, :root[data-theme="light"] #p-now .readout .unit { color: #e9edf1; }
:root[data-theme="light"] #p-now .readout[data-idle="true"] #digits { color: #5f6a76; }
:root[data-theme="light"] #p-now .readout .cue-boxes span { color: #919ca9; }
.bar .clock { background: var(--well); border: 1px solid var(--line); border-radius: 6px; padding: 1px 10px 2px; box-shadow: inset 0 1px 5px rgba(0, 0, 0, 0.5); color: var(--text); }
:root[data-theme="light"] .bar .clock { background: #1a1f25; color: #e9edf1; border-color: #0d1014; }
@media (min-width: 1181px) { body[data-view="rundown"] #p-now .now .readout { padding: 2px 12px; } }

/* LED ladders: the master meter and the mic meters are lit in segments */
.master .fill, .strip .mtr > span { -webkit-mask: repeating-linear-gradient(90deg, #000 0 4px, transparent 4px 5px); mask: repeating-linear-gradient(90deg, #000 0 4px, transparent 4px 5px); }
.strip .mtr { height: 7px; }

/* cart pads: backlit keys */
.pad { box-shadow: 0 1px 0 rgba(255, 255, 255, 0.18) inset, 0 -2px 0 rgba(0, 0, 0, 0.22) inset, 0 2px 4px rgba(0, 0, 0, 0.35); }
.pad[data-playing="true"] { outline: 2px solid var(--play); outline-offset: 1px; filter: brightness(1.22) saturate(1.1); box-shadow: 0 0 16px var(--play-soft), 0 1px 0 rgba(255, 255, 255, 0.2) inset; }

/* mic strips: the lamp is an LED, and a live strip is lit */
.strip .lamp { box-shadow: inset 0 -1px 2px rgba(0, 0, 0, 0.4); border: 1px solid rgba(0, 0, 0, 0.35); }
.strip[data-state="off"] .lamp { box-shadow: 0 0 6px rgba(72, 199, 142, 0.45), inset 0 -1px 2px rgba(0, 0, 0, 0.3); }
.strip[data-state="live"] { background: linear-gradient(90deg, var(--air-soft), transparent 70%), var(--panel); }

/* the players: a little more like decks */
.players[data-count] .player { box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset; }

@media (prefers-reduced-motion: reduce) { .btn, .btn:active:not(:disabled) { transition: none; transform: none; } }

/* horizontal sliders (Listen volume, mic faders, cart level, previews): a slim slot and a small fader cap, like the music fader */
input[type="range"]:not(#musicRange) { -webkit-appearance: none; appearance: none; background: transparent; height: 22px; cursor: pointer; }
input[type="range"]:not(#musicRange)::-webkit-slider-runnable-track { height: 5px; border-radius: 3px; background: var(--well); border: 1px solid var(--line-strong); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.5); }
input[type="range"]:not(#musicRange)::-moz-range-track { height: 5px; border-radius: 3px; background: var(--well); border: 1px solid var(--line-strong); }
input[type="range"]:not(#musicRange)::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 12px; height: 18px; margin-top: -7px; border-radius: 2px; border: 1px solid rgba(0, 0, 0, 0.55);
  background: linear-gradient(90deg, #c3cad2 0%, #eef1f4 40%, #20262d 40%, #20262d 60%, #eef1f4 60%, #aab3bc 100%); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); }
input[type="range"]:not(#musicRange)::-moz-range-thumb { width: 12px; height: 18px; border-radius: 2px; border: 1px solid rgba(0, 0, 0, 0.55); background: linear-gradient(90deg, #c3cad2 0%, #eef1f4 40%, #20262d 40%, #20262d 60%, #eef1f4 60%, #aab3bc 100%); }
input[type="range"]:not(#musicRange):focus-visible { outline: none; }
input[type="range"]:not(#musicRange):focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 2px var(--focus); }
input[type="range"]:not(#musicRange):disabled { opacity: 0.5; cursor: default; }
@media (max-width: 1260px) and (min-width: 1181px) { .bar .master { display: none; } .listen-grp input[type="range"] { width: 40px; } }

/* ---- what is playing keeps its words readable at any width (15b): the countdown display scales with the panel, the words never squash ---- */
@media (min-width: 1181px) {
  #p-now .now { container-type: inline-size; grid-template-columns: 84px minmax(140px, 1fr) minmax(0, max-content); }
  #p-now .now .meta > * { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  #p-now .now .meta h2 { white-space: nowrap; }
  #p-now .now .readout { overflow: hidden; padding-right: clamp(66px, 17cqw, 104px); }
  #p-now .now .readout #digits { font-size: clamp(34px, 11.5cqw, 84px); }
  #p-now .now .readout .cue-boxes { right: clamp(6px, 2cqw, 12px); }
  #p-now .now .readout .cue-boxes .intro-box b { font-size: clamp(18px, 5.6cqw, 36px); }
}
@media (min-width: 1181px) { body[data-view="rundown"] #p-now .now { container-type: normal; grid-template-columns: minmax(0, 1fr) auto auto; } body[data-view="rundown"] #p-now .now .readout #digits { font-size: 34px; } }

/* ================================================================ stage 15c */

/* ---- proper meters: the scale is coloured where it belongs (green, then amber, then red), the lit part is cut from it, in LED segments ---- */
.strip .mtr { position: relative; height: 12px; border-radius: 2px; background: linear-gradient(90deg, rgba(72, 199, 142, 0.13) 0 80%, rgba(242, 177, 60, 0.15) 80% 95%, rgba(240, 64, 47, 0.18) 95%); overflow: hidden; }
.strip .mtr > span { position: absolute; inset: 0; width: 100%; background: linear-gradient(90deg, var(--good) 0 80%, var(--next) 80% 95%, var(--air) 95%) !important; transition: clip-path 0.06s linear; }
.strip .mtr > .hold { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--text); opacity: 0.85; }
.strip .mtr > .mdb { position: absolute; right: 3px; top: 50%; transform: translateY(-50%); font-size: 9.5px; font-weight: 700; line-height: 1; color: var(--text); text-shadow: 0 0 3px #000, 0 0 2px #000; font-variant-numeric: tabular-nums; }
.master .bar-track { background: linear-gradient(90deg, rgba(72, 199, 142, 0.12) 0 85%, rgba(242, 177, 60, 0.15) 85% 98%, rgba(240, 64, 47, 0.18) 98%); }
.master .fill { width: 100%; background: linear-gradient(90deg, var(--good) 0 85%, var(--next) 85% 98%, var(--air) 98%) !important; transition: clip-path 0.06s linear; }

/* ---- the whole desk glows: red while on air or recording, yellow in rehearsal mode; a stronger red when your own mic is live ---- */
body::after { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 60; border-radius: 0; transition: box-shadow 0.4s; }
/* 15d: the glow is for a live microphone only (a red edge while any mic is live, stronger and pulsing when it is yours) */
body[data-glow="any"]::after { box-shadow: inset 0 0 0 3px var(--air), inset 0 0 50px rgba(240, 64, 47, 0.35); }
body[data-mymic="live"]::after { box-shadow: inset 0 0 0 5px var(--air), inset 0 0 80px rgba(240, 64, 47, 0.55); }
@media (prefers-reduced-motion: no-preference) {
  body[data-mymic="live"]::after { animation: deskglow 2.4s ease-in-out infinite; }
  @keyframes deskglow { 50% { opacity: 0.6; } }
}
/* the REHEARSAL chip in the top bar, beside ON AIR / OFF AIR */
.rehearsal-chip { background: var(--next); color: #1a1406; border-color: var(--next); font-weight: 800; letter-spacing: 0.06em; box-shadow: 0 0 12px rgba(242, 177, 60, 0.5); }
.rehearsal-chip[hidden] { display: none; }
.rehearsal-chip:hover:not(:disabled) { background: #ffc552; }
body[data-rehearsal="on"] .show-title .rehearse-btn { background: var(--next); color: #1a1406; font-weight: 800; }

/* ---- the talk countdown on a player card: short, and inside the card ---- */
.ppill { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }

/* ================================================================ stage 15d */
/* the music strip's own meter, on the right of the fader: the music after the fader and the dip */
.music.fstrip .vfader { width: 70px; }
.music.fstrip input[type="range"] { right: 10px; }
.music.fstrip .mmeter { position: absolute; right: 0; top: 10px; bottom: 10px; width: 6px; border-radius: 2px; background: linear-gradient(0deg, rgba(72, 199, 142, 0.13) 0 80%, rgba(242, 177, 60, 0.15) 80% 95%, rgba(240, 64, 47, 0.18) 95%), var(--well); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.6); overflow: hidden; }
.music.fstrip .mmeter[hidden] { display: none; }
.music.fstrip .mmeter > span { position: absolute; inset: 0; clip-path: inset(100% 0 0 0); background: linear-gradient(0deg, var(--good) 0 80%, var(--next) 80% 95%, var(--air) 95%); transition: clip-path 0.16s linear;
  -webkit-mask: repeating-linear-gradient(0deg, #000 0 3px, transparent 3px 4px); mask: repeating-linear-gradient(0deg, #000 0 3px, transparent 3px 4px); }
/* while the music is dipped: an amber line on the fader's scale where the music really is, and the level box goes amber */
.music.fstrip .dipline { position: absolute; right: 10px; width: 30px; height: 0; border-top: 2px solid var(--next); box-shadow: 0 0 6px var(--next); bottom: calc(10px + (100% - 20px) * var(--p, 100) / 100); transition: bottom 0.16s linear; pointer-events: none; z-index: 1; }
.music.fstrip .dipline[hidden] { display: none; }
.music.fstrip[data-dipped="true"] .db { color: var(--next); border-color: var(--next); }
.music.fstrip .state:empty { display: none; }
/* Settings: keyboard shortcuts */
.set-keylist { display: grid; gap: 4px; margin: 4px 0 8px; }
.set-keyrow { display: grid; grid-template-columns: minmax(0, 1fr) 128px auto; align-items: center; gap: 10px; min-height: 32px; padding: 2px 0; border-bottom: 1px solid var(--line); }
.set-keyname { font-size: 13.5px; }
.btn.keycap { justify-content: center; font-family: inherit; font-weight: 700; font-variant-numeric: tabular-nums; min-width: 0; }
.btn.keycap.none { color: var(--faint); font-weight: 400; }
.btn.keycap.listening { color: var(--next); border-color: var(--next); background: var(--next-soft); }

/* ================================================================ stage 16: connections */
.netbars { display: inline-flex; align-items: flex-end; gap: 2px; height: 12px; vertical-align: middle; }
.netbars i { width: 3px; border-radius: 1px; background: currentColor; opacity: 0.22; }
.netbars i:nth-child(1) { height: 4px; } .netbars i:nth-child(2) { height: 6px; } .netbars i:nth-child(3) { height: 9px; } .netbars i:nth-child(4) { height: 12px; }
.netbars i[data-on="true"] { opacity: 1; }
.netbars[data-level="good"] { color: var(--good); } .netbars[data-level="fair"] { color: var(--next); } .netbars[data-level="poor"] { color: var(--air); }
.strip .ident { position: relative; }
.strip .ident .net { position: absolute; right: 0; top: 1px; line-height: 0; cursor: help; }
.strip .ident:has(.net:not([hidden])) .nm { padding-right: 20px; }
.net[hidden] { display: none !important; }
.person .phead .net { margin-left: auto; line-height: 0; cursor: help; }
/* QR codes (stage 16) */
.qr-box { display: grid; justify-items: center; gap: 6px; margin: 10px 0 4px; }
.qr-box[hidden] { display: none; }
.qr-pic { width: 200px; height: 200px; padding: 0; border-radius: 6px; overflow: hidden; background: #fff; box-shadow: 0 0 0 1px var(--line), 0 2px 8px rgba(0, 0, 0, 0.35); }
.qr-pic svg { display: block; width: 100%; height: 100%; }
.qr-note { margin: 0; font-size: 12.5px; color: var(--muted); text-align: center; max-width: 34ch; }
.qr-link { margin: 6px 0 0; font-size: 12.5px; color: var(--muted); text-align: center; overflow-wrap: anywhere; user-select: all; }
/* Settings: the go-online checklist (stage 16) */
.golist { list-style: none; margin: 4px 0 10px; padding: 8px 10px; display: grid; gap: 7px; background: var(--well); border: 1px solid var(--line); border-radius: 6px; box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.4); }
.golist li { display: grid; grid-template-columns: 12px minmax(0, 1fr); column-gap: 10px; align-items: start; }
.golist .led { grid-row: span 2; width: 10px; height: 10px; margin-top: 4px; border-radius: 50%; background: var(--line-strong); }
.golist li[data-state="good"] .led { background: var(--good); box-shadow: 0 0 6px var(--good); }
.golist li[data-state="bad"] .led { background: var(--air); box-shadow: 0 0 6px var(--air); }
.golist li[data-state="warn"] .led, .golist li[data-state="busy"] .led { background: var(--next); box-shadow: 0 0 6px var(--next); }
.golist b { font-size: 13.5px; font-weight: 650; }
.golist span { font-size: 12.5px; color: var(--muted); overflow-wrap: anywhere; }
.golist span:empty { display: none; }
.gotest[hidden] { display: none; }
/* the intercom line under the mic strips (stage 16b) */
.ic-note { margin: 6px 12px 0; font-size: 12.5px; color: var(--muted); }
.ic-note[hidden] { display: none; }
.ic-note[data-state="talk"] { color: var(--next); font-weight: 600; }