/* Phones must not enlarge text on their own: it made pages jump as they loaded. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
:root {
  --bg: #111214;
  --panel: #18191c;
  --raise: #1f2024;
  --line: #2a2c31;
  --line-strong: #3a3d44;
  --text: #ece9e3;
  --soft: #c9c5bd;
  --dim: #8f8c86;
  --accent: #e8b44a;
  --accent-ink: #17140d;
  --live: #e5484d;
  --ok: #4cc38a;
  --radius: 4px;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  /* Numbers on displays: the text face with fixed-width figures, so a
     running clock or counter does not jitter (never a system monospace). */
  --num: "Barlow", system-ui, sans-serif;
  --label: var(--sans); /* small labels and statuses; a look may give them their own face */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  color-scheme: dark;
  accent-color: var(--accent);
  scrollbar-color: var(--line-strong) transparent;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; background: var(--bg); color: var(--text); font: 15px/1.45 var(--sans); }
::selection { background: rgba(232, 180, 74, 0.32); color: var(--text); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; }
a { color: inherit; text-underline-offset: 3px; text-decoration-color: var(--line-strong); }
a:hover { text-decoration-color: currentColor; }
button, input, select, textarea { font: inherit; color: inherit; }
input, select, textarea {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 7px 9px; min-width: 0; caret-color: var(--accent);
  transition: border-color 150ms var(--ease);
}
input:hover, select:hover, textarea:hover { border-color: var(--line-strong); }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline-offset: 0; border-color: var(--accent); }
input::placeholder, textarea::placeholder { color: var(--dim); }
input:disabled, select:disabled { opacity: 0.55; }
textarea { resize: vertical; width: 100%; }
button { cursor: pointer; }
button:disabled { opacity: 0.45; cursor: default; }
.btn {
  display: inline-block; background: var(--accent); color: var(--accent-ink); border: 0;
  border-radius: var(--radius); padding: 8px 18px; font-weight: 600; text-decoration: none;
  transition: filter 150ms var(--ease), background-color 150ms var(--ease);
}
.btn:hover:not(:disabled) { filter: brightness(1.08); }
.btn:active:not(:disabled) { filter: brightness(0.94); }
.btn.go.stop { background: var(--live); color: #fff; }
.quiet {
  background: none; border: 1px solid var(--line); border-radius: var(--radius); padding: 4px 10px;
  color: var(--dim); font-size: 13px; transition: color 150ms var(--ease), border-color 150ms var(--ease);
}
.quiet:hover:not(:disabled) { color: var(--text); border-color: var(--line-strong); }
.dim { color: var(--dim); }
.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.err { color: var(--live); }

.bar { display: flex; gap: 18px; align-items: center; padding: 10px 20px; border-bottom: 1px solid var(--line); }
.bar .mark { display: inline-flex; align-items: center; gap: 9px; }
.bar .mark img { display: block; flex: none; }
.bar a { text-decoration: none; color: var(--dim); }
.bar a:hover { color: #ffffff; }
.bar .mark { color: var(--text); font-weight: 700; letter-spacing: 0.01em; margin-right: 10px; }
.bar nav.primary { display: flex; gap: 18px; margin-right: auto; }
.bar a[aria-current="page"] { color: var(--text); }
.bar .picker > summary, .picker .drop .t { font-family: var(--sans); text-transform: none; letter-spacing: normal; }

/* The show picker (2026-10-16): the show you are in, on a glass readout in
   the trim, its plan beside it; open, every show with its own. A <details>,
   so it works without script; controls.js closes it on Escape or a click
   elsewhere. The trim is dark in both themes, so these are too. */
.bar .picker { position: relative; flex: none; }
.bar .picker > summary { list-style: none; display: flex; align-items: center; gap: 10px; height: 38px; padding: 0 8px 0 4px; min-width: 220px; max-width: 320px; border-radius: 3px; background: #070b0d; border: 1px solid #000; box-shadow: inset 0 1px 3px #000, 0 0 0 1px #3a3f46, 0 1px 0 rgba(255, 255, 255, 0.08); cursor: pointer; }
.bar .picker > summary::-webkit-details-marker { display: none; }
.bar .picker > summary:focus-visible { outline: 2px solid var(--vfd); outline-offset: 2px; }
.picker .art { width: 28px; height: 28px; flex: none; overflow: hidden; background: #1a1d21; border: 1px solid #000; }
.picker .art img { display: block; width: 100%; height: 100%; object-fit: cover; }
.picker .name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--vfd); font-weight: 600; font-size: 15px; text-shadow: 0 0 8px rgba(113, 242, 223, 0.5); }
.picker .chip { flex: none; font: 9px var(--label); letter-spacing: 0.14em; text-transform: uppercase; color: var(--vfd-dim); border: 1px solid #1d3533; padding: 2px 5px; border-radius: 2px; }
.picker .chip.off { color: #ff6a5f; border-color: #3a1513; }
.picker .knob { position: relative; flex: none; width: 20px; height: 20px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #8a939a, #3a4046 60%, #1d2125); box-shadow: 0 1px 2px #000, inset 0 0 0 1px #000; transition: transform 150ms; }
.picker .knob::after { content: ""; position: absolute; left: 9px; top: 3px; width: 2px; height: 6px; border-radius: 1px; background: var(--vfd); box-shadow: 0 0 4px var(--vfd); }
.picker[open] .knob { transform: rotate(90deg); }
.picker .drop { position: absolute; left: 0; top: calc(100% + 8px); z-index: 20; width: 340px; padding: 8px; border-radius: 4px; background: radial-gradient(120% 90% at 30% 0%, #0f1a1c, #070b0d 70%); border: 6px solid #1a1d21; box-shadow: 0 0 0 1px #6f757c, 0 18px 40px rgba(0, 0, 0, 0.45); }
.picker .drop ul { list-style: none; margin: 0; padding: 0; }
.picker .drop li + li { border-top: 1px solid rgba(113, 242, 223, 0.1); }
.picker .drop li a { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px; border-radius: 2px; color: #e6fff9; }
.picker .drop li a:hover { background: rgba(113, 242, 223, 0.05); color: #ffffff; }
.picker .drop li a[aria-current] { background: rgba(113, 242, 223, 0.07); box-shadow: inset 3px 0 0 var(--vfd); }
.picker .drop .art { width: 36px; height: 36px; }
.picker .drop .t { display: flex; flex-direction: column; min-width: 0; font-weight: 600; font-size: 15px; overflow-wrap: anywhere; }
.picker .drop .s { font-weight: 400; font-size: 12px; color: var(--vfd-dim); }
.picker .drop .new { display: block; margin: 8px 0 2px; padding: 10px; text-align: center; font: 10px var(--label); letter-spacing: 0.14em; text-transform: uppercase; color: var(--vfd); border: 1px dashed #1d3533; border-radius: 2px; }
.picker .drop .new:hover { border-style: solid; color: #e6fff9; }
.settings-page .links { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; }
.settings-page .line .now { margin: 0; }

.gate { min-height: 80vh; display: grid; place-content: center; justify-items: center; gap: 16px; }
.gate .mark { font-weight: 700; font-size: 24px; margin: 0; }
.gate h1 { font-size: 20px; margin: 0; }

.page { max-width: 1040px; margin: 0 auto; padding: 28px 20px 48px; }
.page h1 { font-size: 20px; margin: 0 0 16px; }
.page h2 { font-size: 15px; color: var(--soft); margin: 40px 0 8px; }
.plan { color: var(--dim); font-size: 13px; margin: 0; font-variant-numeric: tabular-nums; }
.new { display: grid; grid-template-columns: 1fr auto; gap: 8px; margin: 16px 0 32px; }
.new textarea { grid-column: 1; }
.new .btn { grid-column: 2; grid-row: 1 / span 2; align-self: start; }
.new.with-show .btn { grid-row: 1 / span 3; }
table { width: 100%; border-collapse: collapse; }
td, th { padding: 9px 12px 9px 0; border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; }
th { color: var(--dim); font-weight: 500; font-size: 13px; }
td img { vertical-align: middle; border-radius: 50%; }
.rooms td:first-child a { text-decoration: none; font-weight: 600; }
.rooms td:first-child a:hover { text-decoration: underline; }
.rooms td.num, .people td.num, .plans td.num, .log td.num { color: var(--soft); }
.live { color: var(--live); font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; margin-left: 8px; }
form.inline { display: inline-flex; gap: 6px; align-items: center; }
form.inline select { padding: 4px 6px; font-size: 13px; }
/* Moderation on /admin (moderation.py): each show with its takedown key. */
.mod-show { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-top: 4px; font-size: 13px; }
form.inline.mod-erase { display: flex; flex-wrap: wrap; margin-top: 6px; max-width: 15ch; }
.mod-erase input { width: 100%; min-width: 0; padding: 4px 6px; font-size: 13px; }

/* The studio: inputs left, the panel right and pinned, transcript underneath. */
.studio {
  display: grid; grid-template-columns: minmax(300px, 380px) minmax(0, 1fr); gap: 28px;
  align-items: start; padding: 24px 20px 40px; max-width: 1400px; margin: 0 auto;
}
.studio h1 { font-size: 18px; margin: 0 0 4px; display: flex; align-items: baseline; gap: 10px; }
.studio[data-live="live"] h1::after {
  content: "Live"; color: var(--live); font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
}
.studio[data-live="connecting"] h1::after, .studio[data-live="retrying"] h1::after {
  content: "…"; color: var(--dim);
}
.inputs { display: flex; flex-direction: column; gap: 14px; }
.inputs > form { margin-top: -6px; }
.mics { display: flex; flex-direction: column; gap: 12px; }
.mic { display: flex; flex-direction: column; gap: 6px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.mic .line { display: flex; gap: 6px; }
.mic .line > :first-child { flex: 1; }
.mic select { min-width: 0; text-overflow: ellipsis; }
.guest .mic { padding-bottom: 0; border: 0; }
.guest > .inputs > input { width: 100%; }
.meter {
  --level: 0; display: block; height: 6px; border-radius: 3px; background: var(--line); position: relative; overflow: hidden;
}
.meter::after {
  content: ""; position: absolute; inset: 0; transform-origin: left; transform: scaleX(var(--level));
  background: var(--dim); transition: transform 80ms linear, background-color 150ms var(--ease);
}
.meter.on::after { background: var(--ok); }
.row { display: flex; gap: 8px; align-items: center; }
.row .go { margin-left: auto; }
.msg { min-height: 1.4em; margin: -4px 0 0; color: var(--soft); font-size: 13px; }
.field { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--dim); }
.copy { display: flex; gap: 6px; }
.copy input { flex: 1; font-family: var(--num); font-size: 12px; color: var(--soft); }
details summary { cursor: pointer; color: var(--dim); font-size: 13px; width: fit-content; }
details summary:hover { color: var(--text); }
.brief form { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.brief .quiet { align-self: flex-start; }

.studio.has-stage:not(.console) { grid-template-columns: minmax(300px, 360px) minmax(0, 1fr) minmax(320px, 400px); max-width: 1800px; }
.studio > .panel, .studio > .stage { position: sticky; top: 16px; }
.inputs .group { display: flex; flex-direction: column; gap: 10px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.inputs h2 { font-size: 13px; font-weight: 600; color: var(--soft); margin: 0; }
.inline-field { display: inline-flex; gap: 6px; align-items: center; font-size: 13px; color: var(--dim); margin-left: auto; }
.cams { display: flex; flex-direction: column; gap: 6px; }
.cam .tag { align-self: center; font-size: 12px; color: var(--dim); min-width: 44px; font-variant-numeric: tabular-nums; }
.cam.line > :first-child { flex: none; }
.cam select { flex: 1; }
.mic .line select[aria-label="Camera"] { flex: none; width: 112px; }
.folder-name { font-size: 13px; color: var(--soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.btn.rec { background: var(--live); color: #fff; }
.studio[data-rec="on"] .btn.rec { background: var(--raise); color: var(--text); box-shadow: inset 0 0 0 1px var(--live); }
.clock { font-family: var(--num); font-variant-numeric: tabular-nums; color: var(--live); font-size: 14px; margin-left: auto; }
.takes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.takes:empty { display: none; }
.take { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; font-size: 13px; }
.take .what { flex: 1 1 100%; color: var(--soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.take .meta { color: var(--dim); margin-right: auto; font-variant-numeric: tabular-nums; }
.take a { flex: 1 1 100%; font-size: 12px; color: var(--accent); }

/* The program: every camera stacked, only the one on air visible, so a cut
   is instant. */
.stage { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.program { position: relative; aspect-ratio: 16 / 9; background: #000; border-radius: 6px; overflow: hidden; }
.program video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; }
.program video.on { opacity: 1; }
.on-air {
  position: absolute; left: 10px; top: 10px; z-index: 1; font-size: 12px; font-weight: 600; color: #fff;
  background: rgba(0, 0, 0, 0.55); padding: 3px 8px; border-radius: 3px; font-variant-numeric: tabular-nums;
}
.on-air:empty { display: none; }
.studio[data-rec="on"] .on-air { background: var(--live); }
.thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.thumb {
  position: relative; padding: 0; border: 1px solid var(--line); border-radius: 4px; overflow: hidden;
  aspect-ratio: 16 / 9; background: #000; transition: border-color 150ms var(--ease);
}
.thumb video { width: 100%; height: 100%; object-fit: cover; display: block; }
.thumb .tag { position: absolute; left: 6px; bottom: 4px; font-size: 12px; font-weight: 600; color: #fff; text-shadow: 0 1px 2px #000; }
.thumb.on { border-color: var(--ok); }
.thumb[aria-pressed="true"] { border-color: var(--accent); }
.thumb:hover { border-color: var(--line-strong); }
.transcript { grid-column: 1 / -1; }
.transcript summary a { margin-left: 6px; }
.lines {
  list-style: none; margin: 10px 0 0; padding: 4px 0 0; max-height: 280px; overflow-y: auto;
  font-size: 13px; color: var(--soft); border-top: 1px solid var(--line);
}
.lines li { display: grid; grid-template-columns: 56px 96px minmax(0, 1fr); gap: 10px; padding: 3px 0; }
.lines .clock { font-family: var(--num); font-size: 12px; color: var(--dim); font-variant-numeric: tabular-nums; padding-top: 1px; }
.lines .who { color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* The panel. Read at a glance, mid-sentence, from a second screen. */
.panel {
  background: var(--panel); border: 1px solid var(--line); border-radius: 8px;
  padding: 16px 22px 22px; min-height: 360px;
}
.panel-head { display: flex; gap: 8px; align-items: center; color: var(--dim); font-size: 12px; min-height: 28px; }
.panel-head .state-word { color: var(--soft); }
.panel-head .ago { font-variant-numeric: tabular-nums; }
.panel-head .ago:not(:empty)::before { content: "·"; margin-right: 8px; }
.panel-head .refresh { margin-left: auto; }
.popped .popout { display: none; }
.state { width: 8px; height: 8px; border-radius: 50%; background: var(--line-strong); flex: none; }
.state[data-state="live"] { background: var(--ok); }
.state[data-state="working"] { background: var(--accent); animation: pulse 1.2s ease-in-out infinite; }
.state[data-state="error"], .state[data-state="limit"] { background: var(--live); }
@keyframes pulse { 50% { opacity: 0.3; } }
.summary { color: var(--dim); margin: 14px 0 4px; font-size: 14px; max-width: 70ch; }
.summary:empty { display: none; }
.topics { list-style: none; margin: 0; padding: 0; }
.topic { padding: 14px 0; border-top: 1px solid var(--line); }
.topic:first-child { border-top: 0; }
.topic .title { display: block; font-size: 22px; line-height: 1.22; font-weight: 650; letter-spacing: -0.01em; text-wrap: balance; }
.topic .hook { margin: 5px 0 0; color: var(--soft); font-size: 16px; line-height: 1.4; max-width: 62ch; }
.news-wrap h2 { font-size: 13px; font-weight: 600; color: var(--soft); margin: 22px 0 2px; }
.news { list-style: none; margin: 0; padding: 0; }
.news .item { padding: 11px 0; border-top: 1px solid var(--line); }
.news .headline { font-weight: 600; font-size: 15px; text-decoration: none; }
.news .headline:hover { text-decoration: underline; }
.news .meta { display: block; font-size: 12px; color: var(--dim); margin-top: 1px; }
.news .angle { margin: 4px 0 0; font-size: 14px; color: var(--soft); max-width: 70ch; }

.fresh > * { animation: arrive 360ms var(--ease) both; }
.fresh > :nth-child(2) { animation-delay: 40ms; }
.fresh > :nth-child(3) { animation-delay: 80ms; }
.fresh > :nth-child(4) { animation-delay: 120ms; }
.fresh > :nth-child(5) { animation-delay: 160ms; }
@keyframes arrive { from { opacity: 0; filter: blur(3px); transform: translateY(4px); } }

@media (prefers-reduced-motion: reduce) {
  .state[data-state="working"] { animation: none; }
  .fresh > * { animation: none; }
}

body.window { background: var(--panel); }
body.window > .bar { display: none; }
body.window .panel { border: 0; border-radius: 0; min-height: 100vh; padding: 14px 18px 20px; }
body.window .topic .title { font-size: 21px; }

@media (max-width: 1280px) {
  .studio.has-stage { grid-template-columns: minmax(300px, 360px) minmax(0, 1fr); }
  .studio.has-stage > .panel { grid-column: 2; position: static; }
  .studio.has-stage > .stage { position: static; }
}

@media (max-width: 860px) {
  .studio, .studio.has-stage { grid-template-columns: minmax(0, 1fr); gap: 22px; padding: 18px 14px 32px; }
  .studio > .panel, .studio.has-stage > .panel { position: static; grid-column: auto; }
  .studio > .stage { position: static; }
  .lines li { grid-template-columns: 48px 72px minmax(0, 1fr); gap: 8px; }
  .bar { padding: 10px 14px; gap: 12px; }
  .page { padding: 20px 14px 40px; }
  .rooms td:nth-child(3), .rooms td:nth-child(4) { display: none; }
}

.present { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.present:empty { display: none; }
.present li {
  font-size: 13px; padding: 2px 10px; border: 1px solid var(--line); border-radius: 999px; color: var(--soft);
}
.present li::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--ok); margin-right: 6px; vertical-align: middle; }
.present li.off { color: var(--dim); }
.present li.off::before { background: var(--line-strong); }
.guest .program { width: 100%; }
.guest[data-rec="on"] h1::after {
  content: "Recording"; color: var(--live); font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
}

/* Shows and episodes. */
.stack { display: flex; flex-direction: column; gap: 8px; }
.stack > .line, .line { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.line > input:not(.short), .line > select { flex: 1 1 180px; }
.short { width: 90px; flex: none; }
.check { display: inline-flex; gap: 6px; align-items: center; font-size: 13px; color: var(--soft); }
.page .group { margin-top: 28px; display: flex; flex-direction: column; gap: 10px; }
.page .group > h2 { margin: 0; }
label.file { cursor: pointer; display: inline-flex; align-items: center; }
progress { width: 100%; height: 6px; accent-color: var(--accent); }
.show-head { display: flex; gap: 20px; align-items: flex-start; }
.show-head h1 { margin: 0 0 10px; }
.show-head .copy { max-width: 560px; }
.show-head .links { font-size: 13px; margin: 8px 0; color: var(--dim); }
.art { width: 132px; height: 132px; object-fit: cover; border: 4px solid #15181d; background: #000; flex: none; }
.art.empty {
  display: grid; place-items: center; font-family: var(--label); text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--dim); font-size: 13px;
}
.episodes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.episode { border: 1px solid var(--line); background: var(--panel); padding: 12px; }
.episode .meta .num { margin-left: auto; color: var(--dim); font-size: 13px; }
.episode .actions { justify-content: flex-start; }
.status {
  font-family: var(--label); text-transform: uppercase; letter-spacing: 0.06em; font-size: 13px;
  padding: 2px 8px; border: 1px solid var(--line-strong); color: var(--soft); flex: none;
}
.status.live { background: var(--live); border-color: var(--live); color: #fff; }
.status.ready { color: var(--ok); border-color: var(--ok); }
.status.failed { color: var(--live); border-color: var(--live); }
.quiet.danger:hover:not(:disabled) { color: var(--live); border-color: var(--live); }
a.quiet { text-decoration: none; display: inline-flex; align-items: center; }
.settings summary { font-family: var(--label); text-transform: uppercase; letter-spacing: 0.06em; }
.settings .stack { margin-top: 12px; }
.danger-zone { margin-top: 18px; padding-top: 12px; border-top: 1px solid var(--line); }
.takes.pick { margin-top: 4px; }
.renders { gap: 14px; margin-top: 12px; }
.renders .take { padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.renders .note { color: var(--dim); font-size: 12px; font-variant-numeric: tabular-nums; }
.renders .done { flex: 1 1 100%; font-size: 12px; }
.renders .done .where { margin-left: 10px; color: var(--soft); }
.renders .done:empty { display: none; }

/* The public show page: the one page a listener sees. */
body.public .bar { display: none; }
.public-show { max-width: 820px; }
.public-show .art { width: 200px; height: 200px; }
.public-show .show-head > div { flex: 1; min-width: 0; }
.public-show .show-head .copy { display: flex; max-width: 520px; }
.public-show .show-head .copy input { flex: 1; min-width: 0; }
.public-show .author { color: var(--accent); font-family: var(--label); text-transform: uppercase; letter-spacing: 0.06em; margin: -4px 0 8px; }
.public-show .desc { color: var(--soft); white-space: pre-line; max-width: 62ch; }
.public-episodes { list-style: none; margin: 32px 0 0; padding: 0; }
.public-episodes > li { border-top: 1px solid var(--line); padding: 18px 0; }
.public-episodes h2 { font-size: 20px; color: var(--text); margin: 0 0 4px; }
.public-episodes .meta { color: var(--dim); font-size: 13px; margin: 0 0 10px; font-variant-numeric: tabular-nums; }
.public-episodes audio { width: 100%; max-width: 560px; }
.public-episodes .notes { color: var(--soft); white-space: pre-line; max-width: 65ch; }

@media (max-width: 640px) {
  .show-head { flex-direction: column; }
  .public-show .art { width: 160px; height: 160px; }
}

/* Whatever a look does to labels, the panel's header wraps whole items, never
   words, and an episode's title on the public page stays a title. */
.panel-head { flex-wrap: wrap; row-gap: 6px; }
.panel-head > * { white-space: nowrap; }
.public-show .public-episodes h2 {
  font-family: var(--sans); font-size: 20px; text-transform: none; letter-spacing: -0.005em; color: var(--text);
}

/* -- Hardware controls (controls.js). Structure here; the look finishes them. */

.dial-src { display: none !important; }
.dial {
  --size: 40px; --r: calc(var(--size) / 2 + 16px);
  display: inline-flex; flex: none; user-select: none; -webkit-user-select: none;
  padding: calc(var(--r) - var(--size) / 2 + 7px) calc(var(--r) - var(--size) / 2 + 14px) 8px;
}
.dial.sm { --size: 26px; --r: calc(var(--size) / 2 + 12px); }
.dial.smooth { padding: 7px; }
.dial[hidden] { display: none; }
.dial .body { position: relative; width: var(--size); height: var(--size); }
.dial .knob {
  position: absolute; inset: 0; border-radius: 50%; cursor: ns-resize; touch-action: none;
  outline-offset: 5px;
}
.dial .knob > span { position: absolute; inset: 0; border-radius: 50%; pointer-events: none; }
.dial .cap { inset: 15%; }
.dial .skirt, .dial .pointer { transform: rotate(var(--angle, 0deg)); transition: transform 90ms cubic-bezier(0.2, 0.8, 0.3, 1); }
.dial .knob.turning > .skirt, .dial .knob.turning > .pointer { transition: none; }
.dial .pointer::after {
  content: ""; position: absolute; left: calc(50% - 1px); top: 7%; width: 2px; height: 32%;
  border-radius: 1px; background: currentColor;
}
.dial .scale { position: absolute; inset: 0; pointer-events: none; }
.dial .pos {
  position: absolute; left: calc(50% + var(--x, 0px)); top: calc(50% + var(--y, 0px));
  pointer-events: auto; cursor: pointer; padding: 1px 2px;
  font-size: 9px; line-height: 1; white-space: nowrap; font-variant-numeric: tabular-nums;
  transform: translate(var(--tx, -50%), var(--ty, -50%));
}
/* A continuous knob: a tick scale and a lit arc on a ring outside it. */
.dial.smooth .body::before, .dial.smooth .body::after {
  content: ""; position: absolute; inset: -7px; border-radius: 50%; pointer-events: none;
  mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px)),
    conic-gradient(from 136deg, transparent 0 88deg, #000 0);
  mask-composite: intersect;
}
/* Notches centred on the angles the pointer stops at: one a step, from -135. */
.dial.smooth .body::before { background: repeating-conic-gradient(from -136deg, var(--tick, #888) 0 2deg, transparent 2deg var(--notch, 27deg)); }
.dial.smooth .body::after { background: conic-gradient(from -135deg, var(--arc, #555) 0 var(--sweep, 0deg), transparent 0); }
.dial.off { opacity: 0.45; }
.dial.off .knob, .dial.off .pos { cursor: default; }

.dials { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 4px 6px; }
.dials[hidden] { display: none; }
.dial-field { display: inline-flex; flex-direction: column; align-items: center; gap: 0; }
.dial-field .legend { font-size: 9px; line-height: 1.2; white-space: nowrap; }
.dial-field output { font-size: 11px; font-variant-numeric: tabular-nums; min-height: 1.2em; }
.dials > .dials { flex-basis: 100%; }

/* A bat-handle toggle. The checkbox stays real and focusable underneath. */
.toggle { position: relative; display: inline-flex; align-items: center; gap: 7px; cursor: pointer; user-select: none; -webkit-user-select: none; }
.toggle > input { position: absolute; left: 50%; top: 50%; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
.toggle .switch { position: relative; width: 28px; height: 28px; flex: none; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.4)); }
.toggle .nut { position: absolute; inset: 2px; clip-path: polygon(25% 6%, 75% 6%, 100% 50%, 75% 94%, 25% 94%, 0 50%); }
.toggle .bush { position: absolute; inset: 9px; border-radius: 50%; }
/* The bat: a lever that widens from the bushing to a rounded tip. */
.toggle .lever {
  position: absolute; left: calc(50% - 4px); bottom: 50%; width: 8px; height: 17px;
  transform-origin: 50% 100%; transform: rotate(-34deg);
  transition: transform 110ms cubic-bezier(0.3, 1.4, 0.5, 1);
}
.toggle .lever::before {
  content: ""; position: absolute; inset: 3px 0 0; background: var(--chrome);
  clip-path: polygon(28% 100%, 72% 100%, 100% 0, 0 0);
}
.toggle .lever::after { content: ""; position: absolute; left: 0; top: 0; width: 8px; height: 8px; border-radius: 50%; }
.toggle > input:checked ~ .switch .lever { transform: rotate(34deg); }
.toggle > input:focus-visible ~ .switch { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 50%; }
.toggle .legend { font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase; }
@media (max-width: 640px) {
  .bar { flex-wrap: wrap; row-gap: 6px; }
  .bar .mark { margin-right: 0; }
  .bar .mark span { display: none; }
  .bar .picker { flex: 1 1 0; min-width: 0; }
  .bar .picker > summary { min-width: 0; max-width: none; width: 100%; }
  .bar .picker .chip { display: none; }
  .bar nav.primary { order: 10; flex: 1 1 100%; margin-right: 0; gap: 16px; overflow-x: auto; }
  .new { grid-template-columns: minmax(0, 1fr); }
  .new .btn, .new.with-show .btn { grid-column: 1; grid-row: auto; justify-self: start; }
  .picker .drop { width: min(340px, calc(100vw - 28px)); }
}
@media (prefers-reduced-motion: reduce) {
  .toggle .lever, .dial .skirt, .dial .pointer { transition: none; }
}


/* -- Site layout (2026-10-15). One spacing scale; every list page shares a
   header; the session is a console with its transport across the top. */

:root { --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; }

.page-head, .section-head {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s2) var(--s4);
}
.page-head { margin: 0 0 var(--s5); padding-bottom: var(--s3); border-bottom: 1px solid var(--line); }
.page-head h1, .section-head h2 { margin: 0; }
.page-head .quiet { align-self: center; }
.section-head { margin-bottom: var(--s2); }
p.empty { color: var(--dim); margin: var(--s5) 0; }
.default-action { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); padding: 0; border: 0; }

/* Sessions. */
.sessions .new { margin: 0 0 var(--s6); }
.rooms thead th { padding-top: 0; }
.rooms td:first-child { width: 60%; }
.rooms .brief-line {
  display: block; color: var(--dim); font-size: 13px; margin-top: 2px; max-width: 60ch;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Takes: what it is on the left, its knobs and Render on the right. */
.renders .take { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--s2) var(--s5); }
.renders .info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.renders .info .what { font-size: 15px; color: var(--text); }
.renders .info .from, .renders .done .from { font-size: 12px; color: var(--dim); width: fit-content; }
.renders .controls { display: flex; align-items: center; gap: var(--s4); }
.renders .controls .dials { flex-wrap: nowrap; }
.renders progress, .renders .note, .renders .done { grid-column: 1 / -1; }
.renders .note:empty { display: none; }
.takes-page > .msg:empty { display: none; }

/* Shows. */
.show-list { list-style: none; margin: 0 0 var(--s6); padding: 0; }
.show-row {
  display: grid; grid-template-columns: 56px minmax(0, 1fr) auto auto; align-items: center; gap: var(--s4);
  padding: var(--s3) 0; border-bottom: 1px solid var(--line); text-decoration: none; color: inherit;
}
.show-row .art { width: 56px; height: 56px; border-width: 3px; }
.show-row .name { font-weight: 600; font-size: 16px; }
.show-row:hover .name { text-decoration: underline; }
.show-row .num { color: var(--dim); font-size: 13px; }
.new-show > summary, .new-ep > summary { list-style: none; display: inline-block; }
.new-show > summary::-webkit-details-marker, .new-ep > summary::-webkit-details-marker { display: none; }
.new-show[open] > summary, .new-ep[open] > summary { margin-bottom: var(--s4); }
.new-ep { margin-bottom: var(--s5); }

/* A show: who it is, then its episodes as rows, each with an Edit drawer. */
.show-head .about { display: flex; flex-direction: column; gap: var(--s2); min-width: 0; flex: 1; }
.show-head h1 { margin: 0; }
.show-head .stats { margin: 0; color: var(--dim); font-size: 13px; font-variant-numeric: tabular-nums; }
.show-head .links { display: flex; align-items: center; gap: var(--s4); margin: 0; }
.show .group { margin-top: var(--s6); }
.episodes { list-style: none; margin: 0; padding: 0; display: block; border-top: 1px solid var(--line); }
.episodes .episode { border: 0; border-bottom: 1px solid var(--line); background: none; padding: var(--s3) 0; }
.ep-row {
  display: grid; grid-template-columns: 2.4em minmax(0, 1fr) 8.5em 9em 15em; align-items: center; gap: var(--s3);
}
.ep-row .status { justify-self: start; }
.ep-row .no { color: var(--dim); font-variant-numeric: tabular-nums; text-align: right; }
.ep-row .name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ep-row .num { color: var(--dim); font-size: 13px; }
.ep-row .acts { display: flex; gap: var(--s2); justify-content: flex-end; min-width: 8em; }
.episode .err { margin: var(--s1) 0 0 calc(2.4em + var(--s3)); font-size: 13px; }
.episode .edit { margin: var(--s1) 0 0 calc(2.4em + var(--s3)); }
.episode .edit > summary { font-size: 12px; }
.episode .edit .stack { margin-top: var(--s2); }
.episode .edit .num { margin-left: auto; color: var(--dim); font-size: 13px; }

/* The session console. */
.studio.console {
  grid-template-columns: minmax(290px, 340px) minmax(0, 1fr) minmax(340px, 440px);
  grid-template-areas: "transport transport transport" "rail center panel";
  gap: var(--s5); padding: 0 20px var(--s7); max-width: 1800px;
}
.studio.console > .transport { grid-area: transport; }
.studio.console > .inputs { grid-area: rail; }
.studio.console > .center { grid-area: center; display: flex; flex-direction: column; gap: var(--s5); min-width: 0; }
.studio.console > .panel { grid-area: panel; position: sticky; top: 92px; }
.studio.console .stage { position: static; }
.studio.console .transcript { grid-column: auto; }
.studio.console .lines { max-height: min(62vh, 680px); }
.studio.console.has-stage .lines { max-height: 360px; }
.transport {
  position: sticky; top: 0; z-index: 4; display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--s3) var(--s5); margin: 0 -20px; padding: var(--s4) 20px; background: var(--bg);
  border-bottom: 1px solid var(--line);
}
.transport h1 { flex: 1 1 240px; min-width: 0; margin: 0; }
.transport .keys { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); min-width: 0; }
.transport .clock { margin-left: var(--s2); min-width: 7.5ch; text-align: center; }
/* Off, the clock is an unlit display, not a blank. */
.transport .clock:empty::before { content: "0:00:00"; opacity: 0.22; }
.transport .dest { display: flex; align-items: center; gap: var(--s2); min-width: 0; max-width: 300px; }
.transport .msg { flex: 1 1 100%; margin: 0; }
.transport .msg:empty { display: none; }
.episode-line { flex: 1 1 100%; display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); font-size: 13px; }
.episode-line[hidden] { display: none; }
.episode-line .what { color: var(--soft); margin-right: auto; }
.transport .takes { flex: 1 1 100%; }

@media (max-width: 1280px) {
  .studio.console, .studio.console.has-stage {
    grid-template-columns: minmax(280px, 330px) minmax(0, 1fr);
    grid-template-rows: auto auto auto 1fr;
    grid-template-areas: "transport transport" "rail panel" "rail center" "rail .";
  }
  .studio.console > .panel { position: static; grid-column: auto; }
}
@media (max-width: 860px) {
  .studio.console, .studio.console.has-stage {
    grid-template-columns: minmax(0, 1fr); grid-template-rows: none;
    grid-template-areas: "transport" "rail" "panel" "center";
    gap: var(--s5); padding: 0 14px var(--s6);
  }
  .transport { position: static; margin: 0 -14px; padding: var(--s3) 14px; }
  .renders .take { grid-template-columns: minmax(0, 1fr); }
  .renders .controls { justify-content: space-between; flex-wrap: wrap; gap: var(--s3); }
  .renders .controls .dials { flex: 1 1 100%; justify-content: space-around; }
  .show-row { grid-template-columns: 56px minmax(0, 1fr); }
  .show-row .num:last-child { display: none; }
  .ep-row { grid-template-columns: 2em minmax(0, 1fr) auto; }
  .ep-row .num { grid-column: 2; text-align: left; }
  .ep-row .acts { grid-column: 2 / -1; justify-content: flex-start; min-width: 0; }
  .ep-row > :empty { display: none; }
  .episode .err, .episode .edit { margin-left: calc(2em + var(--s3)); }
  .rooms thead { display: none; }
  .rooms td:first-child { width: auto; }
}

/* -- The call (call.js): a tile per person, and a lamp on the Call key. */
.call-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: var(--s2); }
.call-tiles[hidden] { display: none; }
.tile {
  position: relative; margin: 0; aspect-ratio: 16 / 9; background: #000; overflow: hidden;
  border: 1px solid var(--line-strong);
}
.tile video { width: 100%; height: 100%; object-fit: cover; display: block; }
.tile[data-video="off"] video { visibility: hidden; }
.tile figcaption {
  position: absolute; left: 6px; bottom: 5px; right: 6px; font-size: 12px; color: #fff;
  text-shadow: 0 1px 2px #000; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tile[data-video="off"] figcaption { inset: 0; display: grid; place-items: center; font-size: 14px; }
.tile:not([data-state="connected"]) video { opacity: 0.4; }
.tile[data-state="failed"] figcaption { color: var(--live); }
.guest .call-tiles .tile[data-role="host"] { grid-column: 1 / -1; }
.call-key::before {
  content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 8px;
  vertical-align: 1px; background: var(--line-strong);
}
.call-key[aria-pressed="true"]::before { background: var(--ok); box-shadow: 0 0 8px var(--ok); }
.call-key[data-status="connecting"]::before, .call-key[data-status="retrying"]::before {
  background: var(--ok); animation: pulse 1.2s ease-in-out infinite;
}

/* The guest link as a QR code: black on white in either theme, with its
   quiet zone, sharp at any size. */
.qr { margin: 0; }
.qr[hidden] { display: none; }
.qr canvas { display: block; width: 100%; max-width: 240px; height: auto; image-rendering: pixelated; background: #fff; }

/* -- Phones as cameras: the pairing panel on the console, the phone's rows,
   and the phone's own page. */
.pair { margin: 0; display: grid; grid-template-columns: minmax(0, 200px) auto; gap: var(--s3); align-items: center; }
.pair .copy, .pair form { grid-column: 1 / -1; }
.pair-side { display: flex; flex-direction: column; gap: var(--s2); }
.pair[hidden] { display: none; }
.pair canvas { width: 100%; height: auto; image-rendering: pixelated; background: #fff; }

.pair .code { font-family: var(--num); font-size: 30px; letter-spacing: 0.25em; font-variant-numeric: tabular-nums; }
.pair .where { font-size: 12px; color: var(--dim); }
.cam.phone .phone-name { flex: 1; font-size: 13px; color: var(--soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cam.phone.offline .phone-name { color: var(--live); }
.thumb.offline video { opacity: 0.25; }

body.cam .bar { display: none; }
main.camera { max-width: 760px; margin: 0 auto; padding: var(--s3) var(--s3) var(--s6); display: flex; flex-direction: column; gap: var(--s3); }
.cam-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3); flex-wrap: wrap; }
.cam-head h1 { margin: 0; font-size: 18px; }
.cam-head .cam-state { margin: 0; font-size: 12px; color: var(--dim); }
main.camera[data-rec="on"] .cam-head .cam-state { color: var(--live); }
.viewfinder { background: #000; display: grid; place-items: center; min-height: 40vh; }
.viewfinder video { width: 100%; max-height: 70vh; object-fit: contain; display: block; }
.cam-controls { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s3); align-items: center; }
.cam-controls input#name { flex: 1 1 140px; min-width: 0; }
.cam-controls .go { margin-left: auto; }
.cam-code .code-form { display: flex; flex-direction: column; gap: var(--s3); align-items: center; }
.cam-code input[name="code"] {
  font-family: var(--num); font-variant-numeric: tabular-nums; font-size: 34px; letter-spacing: 0.4em; text-align: center; width: 6.2em; padding: 8px 4px 8px 16px;
}

/* Labels are engraved on the panel, not text to select: no I-beam over them,
   no accidental highlight when a knob is dragged. Things you press keep the
   pointer; what people say (transcript, suggestions, titles) stays text. */
:is(.inputs h2, .page h2, .page-head h1, .section-head h2, .legend, .dial-field, .dial, .toggle,
  .check, .tag, .clock, .meter, .panel-head, .news-wrap h2, th, .status, .on-air, .thumb,
  .tile figcaption, .plan, .phone-name, .folder-name, .present, .msg, .pair figcaption,
  .cam-state, .bar, .keys, .dest, button, .btn, .quiet, summary) {
  -webkit-user-select: none; user-select: none;
}
:is(.inputs h2, .page h2, .page-head h1, .section-head h2, .legend, .dial-field, .toggle,
  .check, .tag, .clock, .meter, .panel-head, .news-wrap h2, th, .status, .on-air,
  .tile figcaption, .plan, .phone-name, .folder-name, .present, .msg, .pair figcaption,
  .cam-state) {
  cursor: default;
}
.toggle .switch, .dial .pos { cursor: pointer; }

/* A rocker: the rectangular I/O switch of a machine. Flat, and tilted by
   light rather than by perspective: the half that stands proud catches the
   light from above, the half pressed in sits in the bezel's shadow. The
   legends are the IEC marks themselves, a bar for on and a ring for off,
   drawn rather than typed. The checkbox underneath stays real and focusable. */
.rocker { position: relative; display: inline-flex; align-items: center; gap: var(--s2); }
.rocker > input { position: absolute; left: 13px; top: 50%; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
.rocker .housing { position: relative; flex: none; width: 26px; height: 40px; border-radius: 3px; cursor: pointer; }
.rocker .paddle { position: absolute; inset: 3px; border-radius: 2px; display: grid; grid-template-rows: 1fr 1fr; overflow: hidden; }
.rocker .paddle span { position: relative; display: grid; place-items: center; font-size: 0; transition: background 70ms, box-shadow 70ms, color 70ms; }
.rocker .paddle .on::before { content: ""; width: 2px; height: 8px; border-radius: 1px; background: currentColor; }
.rocker .paddle .off::before { content: ""; width: 7px; height: 7px; box-sizing: border-box; border-radius: 50%; border: 1.5px solid currentColor; }
.rocker > input:focus-visible ~ .housing { outline: 2px solid var(--accent); outline-offset: 3px; }
.rocker > input:disabled ~ .housing { opacity: 0.5; cursor: default; }
@media (prefers-reduced-motion: reduce) { .rocker .paddle span { transition: none; } }

/* The client page: where it is, then a rocker for each of mic and camera,
   each with its device beside it. In the room there is no panel to read. */
.client .where { margin: var(--s1) 0; }
.client .source { display: flex; align-items: center; gap: var(--s3); }
.client .device { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--s1); }
.client .device select { width: 100%; }
.client .device:empty { display: none; }
.studio.client[data-mode="room"] { grid-template-columns: minmax(0, 560px); justify-content: center; }

/* Blurred until asked for (see conceal() in studio.js). */
.pair .secret { transition: filter 160ms ease-out; }
.pair[data-shown="0"] .secret { filter: blur(9px); cursor: pointer; -webkit-user-select: none; user-select: none; }
.pair[data-shown="0"] input.secret { color: transparent; text-shadow: 0 0 8px var(--text); filter: blur(3px); }
.pair > .row { grid-column: 1 / -1; }
@media (prefers-reduced-motion: reduce) { .pair .secret { transition: none; } }

/* Plays: three readouts, a month of days, and the apps people listen in. */
.plays-deck { display: grid; grid-template-columns: minmax(150px, auto) minmax(0, 1fr) minmax(180px, 260px); gap: var(--s4); align-items: stretch; }
.readouts { margin: 0; display: grid; gap: var(--s2); align-content: start; }
.readouts div { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s3); }
.readouts dt { font-family: var(--label); text-transform: uppercase; letter-spacing: 0.12em; font-size: 10px; color: var(--dim); user-select: none; }
.readouts dd { margin: 0; font-family: var(--num); font-size: 20px; font-variant-numeric: tabular-nums; }
.chart { margin: 0; min-width: 0; display: flex; flex-direction: column; }
.chart svg { display: block; width: 100%; flex: 1; min-height: 76px; }
.chart rect { fill: var(--accent); }
.chart rect.zero { opacity: 0.3; }
.chart figcaption { display: flex; justify-content: space-between; margin-top: 4px; font-size: 11px; color: var(--dim); font-variant-numeric: tabular-nums; }
.apps { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; font-size: 13px; }
.apps li { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--s2); row-gap: 3px; }
.apps .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.apps .n { font-variant-numeric: tabular-nums; color: var(--soft); }
.apps svg { grid-column: 1 / -1; display: block; width: 100%; height: 3px; background: var(--line); }
.apps rect { fill: var(--accent); }
@media (max-width: 760px) {
  .plays-deck { grid-template-columns: minmax(0, 1fr); }
  .chart svg { flex: none; height: 96px; }
  .readouts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .readouts div { flex-direction: column; gap: 2px; }
}

/* Following a show: its directories, then the apps that add a feed directly. */
.follow { display: flex; flex-wrap: wrap; gap: var(--s2); margin: 2px 0 12px; }
.follow [hidden] { display: none; }
.listen-on { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--s2); }
.listen-on legend { padding: 0; margin-bottom: var(--s2); font-family: var(--label); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--dim); user-select: none; }
.listen-on input:invalid:not(:placeholder-shown) { border-color: var(--live); }

/* A show whose owner has no hosting plan: still theirs, not public. */
.show-head .offline { margin: 0; color: var(--live); font-family: var(--label); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; }

/* The front door: sign in, sign up, confirm, reset. */
.door { width: min(340px, 86vw); }
.door .field { display: grid; gap: 6px; }
.door .field input { width: 100%; box-sizing: border-box; }
.door .btn { justify-self: start; }
.door .hint { margin: -4px 0 0; font-size: 12px; color: var(--dim); }
.door-links { display: flex; gap: var(--s4); font-size: 13px; margin: 0; }
.who-for { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.gate h1 { text-align: center; }
.gate > p { max-width: 40ch; text-align: center; margin: 0; }

/* Account. */
.account .group { margin-bottom: var(--s4); }
.account .now { margin: 0 0 var(--s2); }
.account .line input { min-width: 0; flex: 1 1 180px; }
.keys-list { list-style: none; margin: 0 0 var(--s3); padding: 0; display: grid; gap: var(--s2); }
.keys-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px var(--s3); align-items: center; }
.keys-list .name { font-weight: 600; }
.keys-list .num { color: var(--dim); font-size: 13px; }
.keys-list form { grid-column: 1 / -1; }
a.who { text-decoration: none; color: inherit; }
.key-door { display: grid; justify-items: center; gap: var(--s2); margin-top: var(--s2); }
.key-door .err:empty { display: none; }

/* The Discord key: dark glass, the mark lit in Discord's own blurple. */
.discord-key {
  display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 12px 0 10px; cursor: pointer;
  background: #0d0f14; color: #c9cdfb; border: 1px solid #2b2f55; border-radius: 3px;
  font: 10px var(--label); letter-spacing: 0.14em; text-transform: uppercase;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 1px 0 #000;
}
.discord-key svg { width: 18px; height: 18px; fill: #5865f2; filter: drop-shadow(0 0 5px rgba(88, 101, 242, 0.8)); }
.discord-key:hover { border-color: #5865f2; color: #fff; }
.discord-key:active { transform: translateY(1px); }
.discord-key:focus-visible { outline: 2px solid #5865f2; outline-offset: 2px; }
dialog.support {
  border: 8px solid #1a1d21; border-radius: 4px; padding: 22px 26px; max-width: 340px; text-align: center;
  background: radial-gradient(120% 90% at 50% 0%, #121630, #07080d 70%); color: #c9cdfb;
  box-shadow: 0 0 0 1px #6f757c, 0 20px 50px rgba(0, 0, 0, 0.5);
}
dialog.support::backdrop { background: rgba(10, 12, 16, 0.55); }
.support .support-h { margin: 0 0 8px; font: 12px var(--label); letter-spacing: 0.16em; text-transform: uppercase; color: #fff; text-shadow: 0 0 8px rgba(88, 101, 242, 0.9); }
.support p { margin: 0 0 14px; font-size: 15px; }
.support a { display: block; margin: 0 0 18px; color: #9fa8ff; font-size: 15px; }

/* The editor (static/editor.js): a take as one strip of black glass. */
.editor { --lane-on: #71f2df; grid-column: 1 / -1; display: grid; gap: 10px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.ed-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
/* The picture: the camera the cut is on, in a monitor's black glass. */
.ed-screen { position: relative; width: min(100%, 560px); aspect-ratio: 16 / 9; border-radius: 3px; background: #070b0d; border: 6px solid #1a1d21; box-shadow: 0 0 0 1px #6f757c; overflow: hidden; }
.ed-screen video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.ed-screen video[hidden] { display: none; }
.ed-screen .ed-cam { position: absolute; left: 10px; top: 8px; padding: 2px 7px; border-radius: 2px; font: 10px var(--label); letter-spacing: 0.14em; text-transform: uppercase; color: #070b0d; background: var(--vfd); box-shadow: 0 0 8px rgba(113, 242, 223, 0.6); }
.ed-screen .ed-cam:empty { display: none; }
.ed-screen.blank::after { content: "No picture here"; position: absolute; inset: 0; display: grid; place-items: center; font: 10px var(--label); letter-spacing: 0.14em; text-transform: uppercase; color: #5d666e; }
.ed-time { font-family: var(--num); font-variant-numeric: tabular-nums; font-size: 13px; min-width: 11ch; }
.ed-bar select { max-width: 180px; }
.ed-sum { margin-left: auto; font-size: 13px; color: var(--dim); }
.strip { position: relative; height: 92px; border-radius: 3px; background: #070b0d; border: 6px solid #1a1d21; box-shadow: 0 0 0 1px #6f757c; cursor: crosshair; touch-action: none; user-select: none; }
.strip:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.strip .lanes { position: absolute; inset: 8px 0 auto; width: 100%; height: calc(100% - 16px); image-rendering: pixelated; opacity: 0.85; }
.strip .layer { position: absolute; inset: 0; }
.strip .selection { position: absolute; top: 0; bottom: 0; background: rgba(113, 242, 223, 0.18); box-shadow: inset 0 0 0 1px rgba(113, 242, 223, 0.7); pointer-events: none; }
.strip .cutpiece { position: absolute; top: 0; bottom: 0; padding: 0; border: 0; cursor: pointer; background: repeating-linear-gradient(135deg, rgba(7, 11, 13, 0.88) 0 6px, rgba(201, 205, 210, 0.28) 6px 8px); box-shadow: inset 0 0 0 1px rgba(201, 205, 210, 0.45); }
.strip .cutpiece.picked { box-shadow: inset 0 0 0 2px #fff; }
.strip .mark { position: absolute; top: 0; bottom: 0; width: 0; border-left: 1px solid #ffae42; pointer-events: none; }
.strip .mark::before { content: ""; position: absolute; top: 0; left: -5px; border: 5px solid transparent; border-top-color: #ffae42; }
.strip .playhead { position: absolute; top: -4px; bottom: -4px; width: 2px; margin-left: -1px; background: #fff; box-shadow: 0 0 6px rgba(255, 255, 255, 0.8); pointer-events: none; }
.ed-marks { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.ed-marks li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.ed-marks li > input { flex: 1 1 200px; max-width: 380px; font: 14px var(--sans); letter-spacing: normal; text-transform: none; }
.ed-marks button::before { content: ""; display: inline-block; margin-right: 6px; border: 4px solid transparent; border-top-color: #ffae42; vertical-align: -1px; }
.cut-note { color: var(--accent); }
@media (prefers-reduced-motion: reduce) { .strip .playhead { transition: none; } }

/* Plans: one row per show, its plan and its keys (2026-10-16). */
.plan-rows { list-style: none; margin: 0; padding: 0; }
.plan-rows li { display: grid; grid-template-columns: 44px minmax(180px, 1fr) auto; gap: var(--s2) var(--s4); align-items: center; padding: var(--s3) 0; border-bottom: 1px solid var(--line); }
.plan-rows .art { width: 44px; height: 44px; object-fit: cover; display: block; }
.plan-rows .art.empty { background: var(--glass); }
.plan-rows .name { display: flex; flex-direction: column; min-width: 0; font-weight: 600; overflow-wrap: anywhere; }
.plan-rows .plan-state { font-weight: 400; font-size: 13px; color: var(--soft); }
.plan-rows .plan-state.off { color: var(--live); }
.plan-rows .acts { display: flex; flex-wrap: wrap; gap: var(--s2); justify-content: flex-end; }
@media (max-width: 640px) {
  .plan-rows li { grid-template-columns: 44px minmax(0, 1fr); }
  .plan-rows .acts .btn, .plan-rows .acts .quiet { flex: 1 1 auto; }
  .plan-rows .acts { grid-column: 1 / -1; justify-content: flex-start; }
}

/* The tiers side by side; yearly or monthly prices by the billing switch,
   in CSS alone (:has), so the keys carry the interval they will charge. */
/* The billing switch: two latching keys, the chosen one sunk with its lamp
   lit; real radios underneath keep the keyboard and the form behaviour. */
.billing { display: inline-flex; width: max-content; justify-self: start; margin: 0 0 var(--s3); border-radius: 3px; box-shadow: 0 0 0 1px var(--line-strong); }
.billing label { position: relative; display: block; cursor: pointer; }
.billing input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.billing span { display: flex; align-items: center; gap: 7px; padding: 7px 14px; font: 10px var(--label); letter-spacing: 0.14em; text-transform: uppercase; color: var(--soft); background: linear-gradient(180deg, var(--raise), var(--panel)); }
.billing label + label span { border-left: 1px solid var(--line-strong); }
.billing span::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--line-strong); }
.billing input:checked + span { color: var(--text); background: var(--panel); box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.25); }
.billing input:checked + span::before { background: var(--vfd); box-shadow: 0 0 6px var(--vfd); }
.billing input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: -2px; }
.bill-month { display: none; }
body:has(#bill-month:checked) .bill-month { display: inline-flex; }
body:has(#bill-month:checked) .bill-year { display: none; }
.tiers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s4); margin-bottom: var(--s6); }
.tier.card { display: flex; flex-direction: column; gap: var(--s2); padding: var(--s4); border: 1px solid var(--line); border-radius: 3px; background: var(--raise); }
.tier.card h2 { margin: 0; }
.tier.card .price { margin: 0; font-weight: 600; font-size: 17px; }
.tier.card .gets { margin: 0; padding-left: 18px; flex: 1; }
.tier.card .acts { display: flex; flex-wrap: wrap; gap: var(--s2); }
@media (max-width: 860px) { .tiers { grid-template-columns: minmax(0, 1fr); } }
.start-page .group { justify-items: start; }
.start-page .group > .btn { width: auto; }

/* Where the show is listed: a row per directory and its popup (2026-10-16). */
.listed { list-style: none; margin: 0; padding: 0; }
.listed li { display: grid; grid-template-columns: minmax(120px, 180px) minmax(0, 1fr) auto; gap: var(--s2) var(--s4); align-items: center; padding: var(--s2) 0; border-bottom: 1px solid var(--line); }
.listed .name { font-weight: 600; }
.listed .where { color: var(--soft); font-size: 14px; overflow-wrap: anywhere; display: flex; flex-wrap: wrap; gap: 4px var(--s3); }
.listed .lack { color: var(--live); }
/* Popups are panels of the same hardware (James: "look more stylized like
   its apart of the site"): a brushed plate in a black bezel with four
   screws, its name lit on a strip of black glass across the top. */
dialog.panel-dialog { width: min(560px, calc(100vw - 24px)); max-height: calc(100dvh - 32px); padding: 0 22px 18px; border: 8px solid #1a1d21; border-radius: 6px; color: var(--text); overflow: auto;
  background: repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.07) 0 1px, transparent 1px 3px), linear-gradient(180deg, #e4e7ea, #c4c9ce);
  box-shadow: 0 0 0 1px #6f757c, inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 24px 60px rgba(0, 0, 0, 0.45); }
[data-theme="dark"] dialog.panel-dialog { background: linear-gradient(180deg, #48525a, #363e44); box-shadow: 0 0 0 1px #0d0f10, inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 24px 60px rgba(0, 0, 0, 0.6); }
dialog.panel-dialog::backdrop { background: rgba(8, 10, 12, 0.6); backdrop-filter: blur(2px); }
dialog.panel-dialog > h2:first-child, dialog.panel-dialog > .panel-title { position: sticky; top: 0; z-index: 1; margin: 0 -22px 16px; padding: 13px 22px 12px; font: 12px var(--label); letter-spacing: 0.16em; text-transform: uppercase; color: var(--vfd); text-shadow: 0 0 8px rgba(113, 242, 223, 0.6);
  background: radial-gradient(120% 140% at 30% 0%, #12201f, #070b0d 70%); border-bottom: 1px solid #000; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5); }
[data-theme="dark"] dialog.panel-dialog > h2:first-child, [data-theme="dark"] dialog.panel-dialog > .panel-title { box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08); }
/* The Discord note keeps Discord's own colour on its lit strip. */
dialog.support.panel-dialog { width: min(380px, calc(100vw - 24px)); text-align: center; }
dialog.support .panel-title { color: #e3e6ff; text-shadow: 0 0 8px rgba(88, 101, 242, 0.9); }
dialog.support.panel-dialog p { font-size: 15px; }
dialog.support.panel-dialog a { color: var(--text); }
dialog.panel-dialog p { margin: 0 0 var(--s3); }
dialog.dir .account { color: var(--soft); }
dialog.dir .video-note { padding: var(--s2) var(--s3); border-left: 2px solid var(--vfd); background: rgba(113, 242, 223, 0.08); }
dialog.dir .copy { display: flex; gap: var(--s2); margin-bottom: var(--s3); }
dialog.dir .open { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; }
dialog.dir .steps { margin: 0 0 var(--s3); padding-left: 20px; display: grid; gap: 6px; }
dialog.dir .lacking { border: 1px solid var(--live); border-radius: 3px; padding: var(--s3); margin-bottom: var(--s3); background: rgba(227, 52, 47, 0.06); }
dialog.dir .lacking ul { margin: 0; padding-left: 18px; }
dialog.dir .manual { display: grid; gap: var(--s2); margin: var(--s4) 0 var(--s2); padding-top: var(--s3); border-top: 1px solid var(--line); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.4) inset; }
dialog.dir .manual .line { display: flex; gap: var(--s2); }
dialog.dir .manual input { flex: 1; min-width: 0; }
dialog.dir .manual input:invalid:not(:placeholder-shown):not(:focus) { border-color: var(--live); }
dialog.panel-dialog .close { margin: var(--s2) 0 0; text-align: right; }
/* Artwork cropped to its square (art-crop.js): the square is the picture. */
dialog.art-crop { width: min(440px, calc(100vw - 24px)); }
.crop-stage { display: block; width: min(360px, 100%); aspect-ratio: 1; margin: 0 auto var(--s3); cursor: grab; touch-action: none; border-radius: 2px; background: #070b0d; box-shadow: 0 0 0 1px #000, 0 0 0 4px #1a1d21, 0 2px 10px rgba(0, 0, 0, 0.4); }
.crop-stage:active { cursor: grabbing; }
.crop-stage:focus-visible { outline: 2px solid var(--vfd); outline-offset: 6px; }
.crop-keys { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); margin-bottom: var(--s3); }
.crop-zoom { display: flex; align-items: center; gap: var(--s2); flex: 1 1 100%; font: 10px var(--label); letter-spacing: 0.14em; text-transform: uppercase; color: var(--soft); }
.crop-zoom input[type=range] { flex: 1; min-width: 0; height: 24px; padding: 0; border: 0; background: none; box-shadow: none; accent-color: var(--vfd-dim); }
dialog.panel-dialog .crop-size { color: var(--soft); font-size: 14px; }
dialog.panel-dialog .crop-size.soft { color: var(--text); padding: var(--s2) var(--s3); border-left: 2px solid var(--live); background: rgba(227, 52, 47, 0.08); }
.crop-end { display: flex; justify-content: flex-end; gap: var(--s2); }
@media (max-width: 640px) {
  .listed li { grid-template-columns: minmax(0, 1fr) auto; }
  .listed .where { grid-column: 1 / -1; grid-row: 2; }
}

/* The account menu: the right of the trim folded under the person's name. */
.bar .menu { position: relative; flex: none; }
.bar details.menu > summary { list-style: none; display: flex; align-items: center; gap: 8px; padding: 6px 4px; color: #b9c0c7; cursor: pointer; font: 14px var(--sans); letter-spacing: normal; text-transform: none; text-shadow: none; }
.bar .menu > summary::-webkit-details-marker { display: none; }
.bar .menu > summary.here, .bar .menu > summary:hover { color: #e6ecef; }
.bar .menu > summary:focus-visible { outline: 2px solid var(--vfd); outline-offset: 2px; }
.bar .menu .short { display: none; }
.bar .menu .caret { width: 0; height: 0; border: 4px solid transparent; border-top-color: currentColor; margin-top: 4px; }
.bar .menu .drop { position: absolute; right: 0; top: calc(100% + 10px); z-index: 20; min-width: 190px; display: grid; padding: 6px; border-radius: 4px; background: #15181a; border: 1px solid #000; box-shadow: 0 0 0 1px #3a3f46, 0 18px 40px rgba(0, 0, 0, 0.45); }
.bar .menu .drop a, .bar .menu .drop button { display: block; width: 100%; padding: 10px 12px; text-align: left; font: 14px var(--sans); letter-spacing: normal; text-transform: none; color: #d5dbe0; background: none; border: 0; border-radius: 2px; box-shadow: none; cursor: pointer; }
.bar .menu .drop a:hover, .bar .menu .drop button:hover { background: #23282c; color: #fff; }
.bar .menu .drop a[aria-current] { color: var(--vfd); }
.bar .menu .drop form { margin: 0; border-top: 1px solid #2a2f33; margin-top: 4px; padding-top: 4px; }

/* Plan on a show's page, Billing in Account (2026-10-16). */
.plan-box .now.off { color: var(--live); }
.offers { list-style: none; margin: 0 0 var(--s3); padding: 0; display: grid; gap: var(--s2); }
.offers li { display: grid; grid-template-columns: minmax(140px, 180px) minmax(0, 1fr) auto; grid-template-areas: "name price acts" "what what acts"; gap: 4px var(--s4); align-items: center; padding: var(--s3); border: 1px solid var(--line); border-radius: 3px; background: var(--raise); }
.offers .tier-name { grid-area: name; font: 12px var(--label); letter-spacing: 0.12em; text-transform: uppercase; }
.offers .tier-price { grid-area: price; font-weight: 600; }
.offers .tier-what { grid-area: what; color: var(--soft); font-size: 14px; }
.offers .acts { grid-area: acts; display: flex; gap: var(--s2); }
.pro-box { padding: var(--s3); border: 1px solid var(--line); border-radius: 3px; background: var(--raise); margin: var(--s3) 0; display: grid; gap: var(--s2); justify-items: start; }
.pro-box p { margin: 0; }
.pro-box .line { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); }
.billing-box .code-line { margin-top: var(--s3); flex-wrap: wrap; }
/* Changing a running plan: when each move would happen, on its own line. */
.offers .tier-when { color: var(--text); }
.offers .tier-when::before { content: ""; display: block; height: 4px; }
.plan-box > p { margin: 0; }
.plan-box > .msg:empty { display: none; }
.plan-box > button { align-self: flex-start; }
.change-plan .offers { margin-bottom: 0; }
.change-plan > summary { list-style: none; display: inline-block; }
.change-plan > summary::-webkit-details-marker { display: none; }
.change-plan[open] > summary { margin-bottom: var(--s3); }
.next-plan { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); margin: 0; padding: var(--s2) var(--s3); border-left: 2px solid var(--vfd); background: var(--raise); }
@media (max-width: 640px) {
  .offers li { grid-template-columns: minmax(0, 1fr); grid-template-areas: "name" "price" "what" "acts"; }
  .bar .menu .full { display: none; }
  .bar .menu .short { display: inline; }
}

/* A wide table scrolls inside its own box on a phone, not the whole page. */
.table-scroll { max-width: 100%; overflow-x: auto; }
.page-head { flex-wrap: wrap; row-gap: var(--s2); }
.page-head form { flex-wrap: wrap; }

/* Phones (2026-10-16). iOS zooms the page into any field under 16px when it
   is tapped, so fields are 16px on touch screens; keys get a finger-sized
   height; and the page always fills the screen, so a short one has no band
   of another shade under it. */
body { min-height: 100vh; min-height: 100svh; }
@media (pointer: coarse) {
  input, select, textarea { font-size: 16px; }
  .btn, .quiet, button, summary.btn { min-height: 40px; }
  .bar .menu .drop a, .bar .menu .drop button { padding: 12px; }
}

/* The gates (sign in, sign up, the rest) carry the mark above the name. */
.gate .mark::before { content: ""; display: block; width: 56px; height: 56px; margin: 0 auto 14px; background: url("/static/brand/mark-light.svg") center / contain no-repeat; }
[data-theme="dark"] .gate .mark::before { background-image: url("/static/brand/mark-dark.svg"); }

/* The cut's knobs say what they do, in a line under them. */
.dial-help { flex: 1 1 100%; margin: 4px 0 0; font-size: 12px; line-height: 1.45; color: var(--dim); }
.dial-help b { font-weight: 600; color: var(--soft); }
.bar .mark.logo { margin-right: 4px; }
.bar .mark.logo img { width: 28px; height: 28px; }
.ed-help { margin: 0; font-size: 12px; color: var(--dim); }

/* A key's other words, drawn invisibly under the visible ones: the key is
   as wide as the wider and never resizes when its words change (ui.reserve). */
button[data-alt] { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; }
button[data-alt]::after { content: attr(data-alt); height: 0; overflow: hidden; visibility: hidden; }

/* Home: every show at once (2026-10-16). */
.dashboard .page-head { display: flex; align-items: center; justify-content: space-between; }
.dashboard .totals { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s3); margin: 0 0 var(--s6); padding: var(--s4); border-radius: 4px; background: radial-gradient(120% 140% at 30% 0%, #12201f, #070b0d 70%); border: 6px solid #1a1d21; box-shadow: 0 0 0 1px #6f757c; }
.dashboard .totals div { display: grid; gap: 4px; }
.dashboard .totals dt { font: 10px var(--label); letter-spacing: 0.14em; text-transform: uppercase; color: var(--vfd-dim); }
.dashboard .totals dd { margin: 0; font: 600 26px var(--num); font-variant-numeric: tabular-nums; color: var(--vfd); text-shadow: 0 0 8px rgba(113, 242, 223, 0.5); }
.show-cards { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s3); }
.show-card { display: grid; grid-template-columns: 88px minmax(0, 1fr) auto; gap: var(--s4); align-items: center; padding: var(--s3); border: 1px solid var(--line); border-radius: 3px; background: var(--raise); }
.show-card .art { display: block; width: 88px; height: 88px; object-fit: cover; }
.show-card .art.empty { background: var(--glass); }
.show-card h3 { margin: 0 0 4px; font-size: 18px; }
.show-card h3 a { color: inherit; text-decoration: none; }
.show-card .facts { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; color: var(--soft); font-size: 14px; }
.show-card .chip { font: 9px var(--label); letter-spacing: 0.14em; text-transform: uppercase; padding: 3px 6px; border-radius: 2px; color: var(--vfd); background: #070b0d; }
.show-card .chip.off { color: #ff6a5f; }
.show-card .todo { margin: 8px 0 0; font-size: 14px; }
.show-card .acts { display: flex; flex-wrap: wrap; gap: var(--s2); justify-content: flex-end; }
@media (max-width: 760px) {
  .dashboard .totals { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .show-card { grid-template-columns: 64px minmax(0, 1fr); }
  .show-card .art { width: 64px; height: 64px; }
  .show-card .acts { grid-column: 1 / -1; justify-content: flex-start; }
}

/* Terms, Privacy, Copyright and Report a show (legal.py): reading pages. */
.legal { max-width: 760px; }
.legal p, .legal li { line-height: 1.6; }
.legal li + li { margin-top: 4px; }
.legal .updated { color: var(--dim); font-size: 13px; margin-top: -8px; }
.legal .agent { font-style: normal; padding: var(--s3); border-left: 2px solid var(--vfd); background: var(--raise); margin: 0 0 var(--s3); line-height: 1.6; }
.legal-nav { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0 0 var(--s4); font: 10px var(--label); letter-spacing: 0.14em; text-transform: uppercase; }
.legal-nav a { color: var(--soft); text-decoration: none; }
.legal-nav a[aria-current] { color: var(--text); text-decoration: underline; text-underline-offset: 4px; }
.legal-foot { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; padding: 22px 20px 30px; font-size: 13px; color: var(--dim); }
.legal-foot a { color: var(--soft); }
.gate .fine { font-size: 13px; color: var(--dim); margin: 0; }
/* The report form shows what the chosen kind needs, without script. */
.report-form .kinds { display: grid; gap: 6px; border: 0; padding: 0; margin: 0; }
.report-form .kinds legend { font: 10px var(--label); letter-spacing: 0.14em; text-transform: uppercase; color: var(--soft); margin-bottom: 6px; }
.report-form .kind { display: flex; gap: 8px; align-items: center; cursor: pointer; }
.report-form .line > .field { flex: 1 1 220px; }
.report-form .sworn { display: none; gap: 8px; border: 1px solid var(--line); border-radius: 3px; padding: var(--s3); margin: 0; }
.report-form .sworn .check { align-items: flex-start; gap: 10px; font: 14px/1.5 var(--sans); letter-spacing: normal; text-transform: none; text-shadow: none; color: var(--text); }
.report-form .sworn input { width: 18px; height: 18px; flex: none; accent-color: var(--vfd-dim); }
.report-form .field input, .report-form .field textarea, .legal-form .field input { font: 15px/1.4 var(--sans); letter-spacing: normal; text-transform: none; text-shadow: none; }
.report-form .kind span { font: 15px var(--sans); }
.legal-form > button { align-self: flex-start; }
.report-form .sworn input { margin-top: 2px; }
.report-form .for-copyright, .report-form .for-legal, .report-form .for-signed { display: none; }
.report-form:has([value=copyright]:checked) .for-copyright,
.report-form:has([value=intimate]:checked) .sworn.for-intimate,
.report-form:has([value=counter]:checked) .sworn.for-counter { display: grid; }
.report-form:has([value=copyright]:checked) .for-legal,
.report-form:has([value=counter]:checked) .for-legal { display: flex; }
.report-form:has([value=copyright]:checked) .for-signed,
.report-form:has([value=intimate]:checked) .for-signed,
.report-form:has([value=counter]:checked) .for-signed { display: grid; }
.report-form > .btn { align-self: flex-start; }
/* /admin/reports. */
.reports { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s3); }
.report-item { padding: var(--s3); border: 1px solid var(--line); border-radius: 3px; background: var(--raise); }
.report-item.urgent { border-left: 3px solid var(--live); }
.report-item.done { opacity: 0.6; }
.report-item .head { margin: 0 0 var(--s2); display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; }
.report-item .due { color: var(--live); font-weight: 600; }
.report-item dl { display: grid; grid-template-columns: 80px minmax(0, 1fr); gap: 4px 12px; margin: 0 0 var(--s2); font-size: 14px; }
.report-item dt { color: var(--dim); }
.report-item dd { margin: 0; overflow-wrap: anywhere; }
.report-item .text, .report-item .urls { white-space: pre-wrap; }
.report-item .show-hit { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0 0 var(--s2); }
.report-item .done-form input { flex: 1 1 240px; }
.legal-form { max-width: 520px; }

/* Support (support.py): a conversation, theirs on the left, ours lit. */
.tickets { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.tickets li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 3px; background: var(--raise); }
.tickets li a { font-weight: 600; flex: 1 1 200px; }
.tickets .when { color: var(--dim); font-size: 13px; }
.t-state { font: 10px var(--label); letter-spacing: 0.12em; text-transform: uppercase; color: var(--soft); }
.t-state.staff { color: var(--text); }
.t-state.user { color: var(--ok); }
.support-form { max-width: 640px; }
.support-form > .btn, .reply-form .btn { align-self: flex-start; }
.ticket-state { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: baseline; margin: -8px 0 var(--s3); }
.thread { list-style: none; padding: 0; margin: 0 0 var(--s4); display: grid; gap: var(--s3); max-width: 760px; }
.thread li { padding: var(--s3); border: 1px solid var(--line); border-radius: 3px; background: var(--raise); }
.thread li.staff { border-left: 3px solid var(--vfd-dim); }
.thread .who { margin: 0 0 6px; font-weight: 600; font-size: 14px; }
.thread .body { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.55; }
.reply-form { max-width: 760px; }
.reply-form textarea, .support-form textarea, .support-form input { font: 15px/1.45 var(--sans); letter-spacing: normal; text-transform: none; text-shadow: none; }
.ticket-state .close-form { margin-left: auto; }
.danger-zone { border-top: 1px solid var(--line); padding-top: var(--s3); }

/* Chapters under a public episode: each time plays from there. */
.public-episodes .chapters { list-style: none; padding: 0; margin: 10px 0 0; display: grid; gap: 4px; }
.public-episodes .chapters li { display: flex; align-items: baseline; gap: 10px; }
.public-episodes .chapters button { min-width: 64px; font-variant-numeric: tabular-nums; }