/* ==========================================================================
   SIGILLITE REELS — production console
   Aesthetic: illuminated manuscript meets Departmento cogitator. Iron & bone,
   candle-gold leaf, one arterial red. Cinzel (imperial display) /
   Alegreya Sans + SC (humanist UI, true small caps) / Spectral (manuscript
   body for the script itself) / JetBrains Mono (machine data).
   Signature moves: dossier corner-brackets on plates, chamfered controls,
   diamond pipeline seals, the artwork ON the board, and a vox dock that is
   always within reach.
   ========================================================================== */

:root {
  --bg: #090807;
  --bg2: #100e0b;
  --panel: #151210;
  --panel2: #1b1713;
  --inset: #0a0908;
  --line: #292420;
  --line2: #3b342b;
  --ink: #ece5d3;
  --ink-dim: #bcb2a0;
  --muted: #8d8371;
  --faint: #5d5548;
  --red: #c8402f;
  --red-hi: #e05a45;
  --red-dim: #59241c;
  --gold: #c9a22e;
  --gold-hi: #ecd07c;
  --gold-dim: #4d4015;
  --gold-leaf: linear-gradient(160deg, #ecd07c, #c9a22e 45%, #8a6d17);
  --ok: #9cb06a;
  --warn: #d99a2b;
  --font-display: 'Cinzel', 'Times New Roman', serif;
  --font-ui: 'Alegreya Sans', 'Segoe UI', sans-serif;
  --font-sc: 'Alegreya Sans SC', 'Alegreya Sans', sans-serif;
  --font-script: 'Spectral', Georgia, serif;
  --font-mono: 'JetBrains Mono', ui-monospace, Consolas, monospace;
  --chamfer: polygon(7px 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%, 0 7px);
  --r: 2px;
  --shadow: 0 14px 40px rgba(0, 0, 0, .5);
  --vox-h: 46px;
}

* { box-sizing: border-box; }
/* the hidden ATTRIBUTE must always win: any author display (e.g. .row's
   flex) beats the UA's [hidden] rule regardless of specificity, which kept
   #bc-yt-barrow's stop-render button permanently visible (vox.html carried
   a page-local patch for the same trap on .vox-live) */
[hidden] { display: none !important; }
::selection { background: var(--red); color: var(--ink); }

html { scrollbar-color: var(--line2) var(--bg); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--line2); border: 2px solid var(--bg); }

body {
  margin: 0;
  color: var(--ink);
  font: 400 15px/1.55 var(--font-ui);
  background:
    radial-gradient(1100px 640px at 78% -12%, rgba(200, 64, 47, .06), transparent 60%),
    radial-gradient(860px 560px at -8% 108%, rgba(201, 162, 46, .05), transparent 55%),
    radial-gradient(1600px 900px at 50% 40%, rgba(236, 208, 124, .015), transparent 70%),
    linear-gradient(var(--bg2), var(--bg) 380px);
  background-attachment: fixed;
  min-height: 100vh;
}

/* film grain + gentle vignette over everything */
.grain {
  position: fixed; inset: 0; z-index: 2000; pointer-events: none; opacity: .05;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='140' height='140' filter='url(%23n)'/></svg>");
}
.grain::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(140% 120% at 50% 30%, transparent 62%, rgba(0, 0, 0, .55));
  opacity: .9;
}

/* --------------------------------------------------------------------------
   masthead — a thin gold filament crowns the console
   -------------------------------------------------------------------------- */
.masthead {
  position: sticky; top: 0; z-index: 100;
  display: flex; justify-content: space-between; align-items: center;
  padding: 0 26px; height: 58px;
  background: rgba(9, 8, 7, .9);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.masthead::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold-dim) 18%, var(--gold) 50%, var(--gold-dim) 82%, transparent);
  opacity: .8;
}
.brand { display: flex; align-items: baseline; gap: 10px; text-decoration: none; }
.brand .seal {
  color: var(--gold); font-size: 16px; align-self: center;
  text-shadow: 0 0 16px rgba(201, 162, 46, .55);
}
.brand-word {
  font-family: var(--font-display); font-weight: 700; font-size: 17px;
  letter-spacing: .3em; color: var(--ink);
}
.brand-sub {
  font-family: var(--font-sc); font-weight: 700; font-size: 11.5px;
  letter-spacing: .32em; color: var(--gold); padding-bottom: 1px;
}
.nav { display: flex; gap: 4px; align-items: center; }
.nav a {
  font-family: var(--font-sc); font-weight: 700; font-size: 13.5px;
  letter-spacing: .16em; text-decoration: none;
  color: var(--muted); padding: 8px 14px; border-bottom: 2px solid transparent;
  transition: color .15s, border-color .15s;
}
.nav a:hover { color: var(--ink); }
.nav a.on { color: var(--gold-hi); border-bottom-color: var(--gold); }
.nav a.nav-out { opacity: .7; }
.nav a.nav-out:hover { color: var(--red-hi); opacity: 1; }

main { max-width: 1280px; margin: 0 auto; padding: 32px 28px 170px; }

/* --------------------------------------------------------------------------
   type
   -------------------------------------------------------------------------- */
h1.display {
  font-family: var(--font-display); font-weight: 900;
  font-size: clamp(28px, 4vw, 44px); letter-spacing: .07em;
  text-transform: uppercase; margin: 0; line-height: 1.08;
  background: linear-gradient(178deg, var(--ink) 60%, #c9bda4);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
h1.display::after {
  content: ""; display: block; width: 72px; height: 3px; margin-top: 12px;
  background: var(--red);
  box-shadow: 92px 1px 0 -1px var(--gold-dim), 100px 1px 0 -1px var(--gold-dim);
}
.crumb {
  font-family: var(--font-sc); font-weight: 500; font-size: 13px;
  letter-spacing: .18em; color: var(--muted); margin-bottom: 8px;
}
.crumb-sep { margin: 0 7px; color: var(--faint); }
.crumb a { color: var(--muted); text-decoration: none; border-bottom: 1px solid var(--line2); transition: color .14s; }
.crumb a:hover { color: var(--gold); border-color: var(--gold-dim); }
.sub { color: var(--muted); font-size: 13.5px; margin-top: 6px; }
a { color: var(--gold); }
.muted { color: var(--muted); text-decoration: none; }
.small { font-size: 12.5px; }
.right { text-align: right; }
.mono { font-family: var(--font-mono); }
code {
  font-family: var(--font-mono); font-size: 12px;
  background: var(--inset); border: 1px solid var(--line);
  padding: 1px 6px; border-radius: var(--r); color: var(--ink-dim);
}

/* --------------------------------------------------------------------------
   plates — dossier sheets with corner brackets
   -------------------------------------------------------------------------- */
.plate {
  position: relative;
  background: linear-gradient(178deg, var(--panel2), var(--panel) 80px);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 22px 24px;
  margin-bottom: 22px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .03), 0 10px 30px rgba(0, 0, 0, .38);
  animation: rise-in .45s ease-out backwards;
}
.plate::before, .plate::after {
  content: ""; position: absolute; width: 14px; height: 14px; pointer-events: none;
  border-color: var(--gold-dim); border-style: solid; opacity: .9;
}
.plate::before { top: 5px; left: 5px; border-width: 1px 0 0 1px; }
.plate::after { bottom: 5px; right: 5px; border-width: 0 1px 1px 0; }
.workbench > .plate, .workbench .plate { animation-delay: .06s; }
main > .plate:nth-of-type(2) { animation-delay: .12s; }
main > .plate:nth-of-type(3) { animation-delay: .18s; }
@keyframes rise-in { from { opacity: 0; transform: translateY(12px); } }

.plate-title {
  display: flex; align-items: baseline; gap: 12px;
  font-family: var(--font-sc); font-weight: 700; font-size: 14px;
  letter-spacing: .24em; color: var(--gold);
  margin: 0 0 18px;
}
.plate-title::before { content: "◆"; font-size: 8px; color: var(--red); align-self: center; }
.plate-title::after {
  content: ""; flex: 1; height: 1px; align-self: center;
  background: linear-gradient(90deg, var(--line2), transparent);
}
.plate-title .hint {
  font-family: var(--font-ui); font-size: 12px; letter-spacing: .04em;
  color: var(--muted); font-weight: 400;
}

/* --------------------------------------------------------------------------
   controls
   -------------------------------------------------------------------------- */
input, textarea, select {
  font: 500 14px/1.4 var(--font-ui);
  color: var(--ink); background: var(--inset);
  border: 1px solid var(--line2); border-radius: var(--r);
  padding: 9px 12px; transition: border-color .15s, box-shadow .15s;
}
input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: none; border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(201, 162, 46, .14);
}
::placeholder { color: var(--faint); }
textarea { width: 100%; resize: vertical; }
textarea.mono, textarea.editor {
  font-family: var(--font-mono); font-size: 12.5px; line-height: 1.6;
  white-space: pre; min-height: 380px;
}
select {
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='9' height='6'><path d='M0 0l4.5 6L9 0z' fill='%238d8371'/></svg>");
  background-repeat: no-repeat; background-position: right 11px center;
  padding-right: 30px;
}

.btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-sc); font-weight: 700; font-size: 13.5px;
  letter-spacing: .14em;
  color: var(--ink); background: var(--panel2);
  border: 1px solid var(--line2);
  clip-path: var(--chamfer);
  padding: 10px 18px; cursor: pointer; text-decoration: none;
  transition: transform .1s, border-color .15s, background .15s, color .15s, filter .15s;
}
.btn:hover { border-color: var(--muted); background: #241f19; }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.btn.quiet { background: transparent; color: var(--ink-dim); border-color: var(--line2); }
.btn.quiet:hover { color: var(--ink); background: rgba(255, 255, 255, .025); }
.btn.primary {
  color: #f6ece6;
  background: linear-gradient(180deg, var(--red-hi), var(--red) 55%);
  border-color: #8f2d20;
}
.btn.primary:hover { filter: brightness(1.1); }
.btn.gold {
  color: #171204;
  background: var(--gold-leaf);
  border-color: #8a6d17;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .25);
}
.btn.gold:hover { filter: brightness(1.07); }
.btn.busy, .card-act.busy { pointer-events: none; opacity: .65; }

/* render progress bar (Broadcast § YouTube; fed by SSE progress events) */
.bc-bar {
  position: relative; height: 18px; margin-top: 10px;
  border: 1px solid var(--gold); border-radius: 4px;
  overflow: hidden; background: var(--panel);
}
.bc-bar-fill {
  display: block; height: 100%; width: 0;
  background: var(--gold); opacity: .45;
  transition: width .6s ease;
}
.bc-bar-pct {
  position: absolute; inset: 0; display: flex;
  align-items: center; justify-content: center;
  font-style: normal; font-size: 11px; color: var(--ink);
}
.btn.busy::after {
  content: ""; width: 11px; height: 11px; border-radius: 50%;
  border: 2px solid currentColor; border-top-color: transparent;
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.row { display: flex; gap: 12px; align-items: center; }
.row.between { justify-content: space-between; align-items: flex-end; }
.row.inline { flex-wrap: wrap; }
.field-label {
  display: block; font-family: var(--font-sc); font-weight: 700;
  font-size: 12px; letter-spacing: .18em;
  color: var(--muted); margin: 0 0 6px;
}

/* --------------------------------------------------------------------------
   page head + pipeline — five wax-seal stations
   -------------------------------------------------------------------------- */
.page-head {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 26px; flex-wrap: wrap; margin-bottom: 30px;
}
.pipeline { display: flex; list-style: none; margin: 0 0 4px; padding: 0; }
.pipeline li {
  position: relative; display: flex; flex-direction: column; align-items: center;
  padding: 0 20px; min-width: 100px;
}
.pipeline li + li::before {
  content: ""; position: absolute; left: calc(-50% + 20px); right: calc(50% + 20px);
  top: 17px; height: 1px; background: var(--line2);
}
.pipeline li.done + li.done::before {
  background: linear-gradient(90deg, var(--gold-dim), var(--gold), var(--gold-dim));
}
.node-mark {
  display: flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; margin-top: 2px;
  transform: rotate(45deg);
  color: var(--muted); background: var(--panel);
  border: 1px solid var(--line2); z-index: 1;
  transition: all .25s;
}
.node-mark span {
  transform: rotate(-45deg);
  font-family: var(--font-display); font-weight: 700; font-size: 11.5px;
}
.pipeline li.done .node-mark {
  color: #171204; background: var(--gold-leaf); border-color: var(--gold-hi);
  box-shadow: 0 0 18px rgba(201, 162, 46, .35);
}
.node-label {
  margin-top: 10px; font-family: var(--font-sc); font-weight: 700;
  font-size: 12px; letter-spacing: .2em; color: var(--ink-dim);
}
.pipeline li.done .node-label { color: var(--gold); }
.node-detail { font-size: 10.5px; color: var(--muted); margin-top: 2px; font-family: var(--font-mono); }

/* --------------------------------------------------------------------------
   workbench — board + operations rail
   -------------------------------------------------------------------------- */
.workbench { display: grid; grid-template-columns: minmax(0, 7fr) minmax(320px, 5fr); gap: 22px; align-items: start; }
.ops-rail { position: sticky; top: 72px; }
@media (max-width: 1020px) {
  .workbench { grid-template-columns: 1fr; }
  .ops-rail { position: static; }
}

/* ---- the board: script beats with their art ---- */
.cut-head {
  display: flex; align-items: baseline; gap: 12px; margin: 26px 0 12px;
  font-family: var(--font-sc); font-weight: 700; font-size: 13.5px;
  letter-spacing: .2em; color: var(--ink-dim);
}
.cut-head:first-of-type { margin-top: 0; }
.cut-head .cut-name::first-letter { color: var(--gold); }
.cut-head .cap { color: var(--muted); font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .05em; }

.beat {
  display: flex; gap: 16px; padding: 14px 10px;
  border-top: 1px solid var(--line);
  transition: background .15s;
}
.beat:hover { background: rgba(255, 255, 255, .014); }
.beats-short .beat { padding: 10px 10px; }

.beat-fig { margin: 0; flex: 0 0 88px; display: flex; flex-direction: column; gap: 6px; }
.beat-fig a { display: block; line-height: 0; }
.beat-fig img {
  width: 88px; aspect-ratio: 9 / 16; object-fit: cover; display: block;
  border: 1px solid var(--line2); border-radius: var(--r);
  filter: saturate(.92);
  transition: transform .18s ease, border-color .18s, box-shadow .18s, filter .18s;
}
.beat-fig a:hover img {
  transform: scale(1.03); border-color: var(--gold);
  box-shadow: 0 6px 22px rgba(0, 0, 0, .55), 0 0 0 1px var(--gold-dim);
  filter: saturate(1);
}
.fig-empty {
  width: 88px; aspect-ratio: 9 / 16;
  display: flex; align-items: center; justify-content: center;
  border: 1px dashed var(--line2); border-radius: var(--r);
  color: var(--faint); font-size: 18px; background: var(--inset);
}
.beat-n {
  font-family: var(--font-display); font-weight: 700; font-size: 13px;
  color: var(--red-hi); text-align: center; opacity: .9;
}
.beat-n.bare { min-width: 30px; padding-top: 3px; text-align: right; }
.beat-body { flex: 1; min-width: 0; }

.beat-text {
  margin: 0 0 8px; font-family: var(--font-script); font-size: 15px;
  line-height: 1.55; color: var(--ink-dim);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.beat-text.empty { color: var(--red-hi); font-style: italic; font-size: 13.5px; }
.beat-meta { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.beat-tools { display: inline-flex; gap: 6px; flex-wrap: wrap; opacity: .45; transition: opacity .15s; }
.beat:hover .beat-tools, .beat:focus-within .beat-tools { opacity: 1; }

.chip {
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .12em;
  text-transform: uppercase; padding: 2.5px 8px;
  clip-path: polygon(4px 0, 100% 0, 100% calc(100% - 4px), calc(100% - 4px) 100%, 0 100%, 0 4px);
  border: 1px solid var(--line2); color: var(--muted); text-decoration: none;
}
.chip.ok { color: var(--gold); border-color: var(--gold-dim); background: rgba(201, 162, 46, .07); }
a.chip.ok { cursor: pointer; transition: border-color .12s, background .12s, color .12s; }
a.chip.ok:hover { color: var(--gold-hi); border-color: var(--gold); background: rgba(201, 162, 46, .16); }
.chip.no { color: var(--faint); border-style: dashed; }
.chip.ref { color: var(--ink-dim); }
.wc { font-family: var(--font-mono); font-size: 10px; color: var(--muted); margin-left: auto; }
.wc.over { color: var(--warn); }
.beat-edit {
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .08em;
  text-transform: uppercase; padding: 2.5px 8px;
  border: 1px dashed var(--line2); border-radius: var(--r);
  background: transparent; color: var(--muted);
  cursor: pointer; transition: color .12s, border-color .12s;
}
.beat-edit:hover { color: var(--gold-hi); border-color: var(--gold-dim); border-style: solid; }
.beat-editor { width: 100%; font-size: 13.5px; line-height: 1.5; margin: 0 0 4px; }
.beat-editor-bar { margin: 6px 0 4px; }
.beat-editor-bar .btn { padding: 6px 14px; font-size: 12px; }

/* prompt rows under each beat */
.beat-art, .beat-video {
  margin: 0 0 6px; font-family: var(--font-mono); font-size: 11px;
  line-height: 1.5; color: var(--muted);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.beat-art::before { content: 'art · '; color: var(--gold-dim); letter-spacing: .08em; }
.beat-video::before { content: 'video · '; color: var(--gold-dim); letter-spacing: .08em; }
.beat-art.empty, .beat-video.empty { opacity: .5; font-style: italic; }

/* reference-image panel */
button.chip.ref { background: transparent; cursor: pointer; transition: color .12s, border-color .12s; }
button.chip.ref:hover { color: var(--gold-hi); border-color: var(--gold-dim); }
.refs-panel {
  margin-top: 8px; padding: 10px 12px; border: 1px solid var(--line);
  border-radius: var(--r); background: var(--inset);
}
.refs-label {
  font-family: var(--font-sc); font-weight: 700; font-size: 11px;
  letter-spacing: .18em; color: var(--muted); margin: 8px 0 6px;
}
.refs-label:first-child { margin-top: 0; }
.refs-row { display: flex; flex-wrap: wrap; gap: 8px; }
.refs-none { font-size: 11.5px; color: var(--muted); font-style: italic; }
.ref-cell { position: relative; display: inline-block; }
.ref-cell img {
  height: 70px; width: auto; display: block; border: 1px solid var(--line2);
  border-radius: var(--r); background: var(--bg2);
}
.ref-cell.pool img { cursor: pointer; opacity: .55; transition: opacity .12s, border-color .12s; }
.ref-cell.pool img:hover { opacity: 1; border-color: var(--gold-dim); }
.ref-x {
  position: absolute; top: -7px; right: -7px; width: 18px; height: 18px;
  padding: 0; line-height: 16px; font-size: 10px; text-align: center;
  border: 1px solid var(--line2); border-radius: 50%;
  background: var(--panel2); color: var(--ink-dim); cursor: pointer;
}
.ref-x:hover { color: var(--red-hi); border-color: var(--red-dim); }
.refs-panel input[type=file] { font-size: 11px; color: var(--muted); }

details.advanced { margin-top: 20px; border-top: 1px solid var(--line); padding-top: 14px; }
details.advanced summary {
  cursor: pointer; font-family: var(--font-sc); font-weight: 700;
  font-size: 12.5px; letter-spacing: .18em;
  color: var(--muted); list-style: none; user-select: none;
}
details.advanced summary::before { content: "▸ "; color: var(--red); }
details.advanced[open] summary::before { content: "▾ "; }
details.advanced summary:hover { color: var(--ink-dim); }
details.advanced form { margin-top: 12px; }

/* ---- operations rail: the numbered ritual ---- */
.ops { padding-left: 0; }
.ops .plate-title { padding-left: 24px; }
.ops-stage {
  position: relative; padding: 18px 0 18px 56px;
  border-top: 1px solid var(--line);
}
.ops-stage:first-of-type { border-top: none; padding-top: 4px; }
.ops-stage:last-of-type { padding-bottom: 4px; }
.ops-stage::before {
  content: ""; position: absolute; left: 24px; top: 0; bottom: 0; width: 1px;
  background: var(--line);
}
.ops-stage:first-of-type::before { top: 10px; }
.ops-stage:last-of-type::before { bottom: auto; height: 28px; }
/* the stage seal: the span is the rotated diamond (its own text hidden),
   the gold numeral is painted unrotated over it from data-stage */
.stage-n {
  position: absolute; left: 11px; top: 16px;
  width: 27px; height: 27px; transform: rotate(45deg);
  background: var(--panel); border: 1px solid var(--line2);
  color: transparent; overflow: hidden;
}
.ops-stage:first-of-type .stage-n { top: 2px; }
.ops-stage[data-stage]::after {
  content: attr(data-stage); position: absolute; left: 11px; top: 16px;
  width: 27px; height: 27px; display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 700; font-size: 10.5px;
  color: var(--gold); pointer-events: none;
}
.ops-stage:first-of-type[data-stage]::after { top: 2px; }
.ops-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  font-family: var(--font-sc); font-weight: 700; font-size: 13.5px;
  letter-spacing: .18em; color: var(--ink);
  margin-bottom: 10px;
}
.ops-head .tag { font-family: var(--font-mono); font-size: 9.5px; color: var(--muted); letter-spacing: .08em; text-transform: uppercase; }
.ops-note { font-size: 12.5px; color: var(--muted); margin: 8px 0 0; line-height: 1.5; }
.ops-note a { color: var(--gold); }

/* scriptorium campaign cards — website piece + FB companion side by side */
.campaign-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 360px); gap: 24px; align-items: start; }
@media (max-width: 900px) { .campaign-grid { grid-template-columns: 1fr; } }
.fb-panel { border-left: 1px solid var(--line); padding-left: 24px; }
@media (max-width: 900px) { .fb-panel { border-left: none; padding-left: 0; border-top: 1px solid var(--line); padding-top: 14px; } }
.fb-preview {
  width: 100%; max-width: 280px; aspect-ratio: 4 / 5; object-fit: cover;
  display: block; border: 1px solid var(--line2); border-radius: var(--r);
  margin-bottom: 10px; filter: saturate(.94);
  transition: border-color .15s, filter .15s;
}
.fb-preview:hover { border-color: var(--gold-dim); filter: saturate(1); }
.cover-preview {
  width: 100%; max-width: 460px; aspect-ratio: 16 / 9; object-fit: cover;
  display: block; border: 1px solid var(--line2); border-radius: var(--r);
  margin-bottom: 12px; filter: saturate(.94);
  transition: border-color .15s, filter .15s;
}
.cover-preview:hover { border-color: var(--gold-dim); filter: saturate(1); }

/* related-website-page picker (publish panel) */
.site-results { display: flex; flex-direction: column; gap: 4px; margin-bottom: 8px; }
.site-result {
  text-align: left; font: 500 13px var(--font-ui); color: var(--ink-dim);
  background: var(--inset); border: 1px solid var(--line2); border-radius: var(--r);
  padding: 7px 11px; cursor: pointer; transition: color .12s, border-color .12s;
}
.site-result:hover { color: var(--gold-hi); border-color: var(--gold-dim); }

/* proposed lore fixes — diff cards awaiting approval */
.fixes-panel { margin-top: 4px; }
.fix-card {
  display: block; margin: 8px 0; padding: 10px 12px;
  border: 1px solid var(--line2); border-left: 3px solid var(--warn);
  border-radius: var(--r); background: var(--inset);
  cursor: pointer; font-size: 13px;
}
.fix-card:hover { border-color: var(--muted); border-left-color: var(--warn); }
.fix-card strong { font-family: var(--font-sc); font-weight: 700; letter-spacing: .1em; }
.fix-card input { margin-right: 8px; accent-color: var(--gold); }
.fix-old { margin-top: 7px; opacity: .55; text-decoration: line-through; font-family: var(--font-script); }
.fix-new { margin-top: 4px; color: var(--ink); font-family: var(--font-script); }

.status-line {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .03em;
  color: var(--muted); margin-bottom: 10px;
}
.status-line .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); }
.status-line.good { color: var(--ok); }
.status-line.good .dot { background: var(--ok); box-shadow: 0 0 8px rgba(156, 176, 106, .5); }
.status-line.bad { color: var(--warn); }
.status-line.bad .dot { background: var(--warn); }

/* --------------------------------------------------------------------------
   vox dock — the console is always at hand
   -------------------------------------------------------------------------- */
.vox {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 500;
  background: rgba(10, 9, 8, .94);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--line2);
  box-shadow: 0 -14px 40px rgba(0, 0, 0, .5);
  transition: transform .2s ease;
}
.vox::before {
  content: ""; position: absolute; top: -1px; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-dim) 30%, var(--gold) 50%, var(--gold-dim) 70%, transparent);
}
.vox-bar {
  display: flex; align-items: center; gap: 12px; width: 100%;
  height: var(--vox-h); padding: 0 22px;
  background: transparent; border: none; cursor: pointer; text-align: left;
  font: inherit; color: inherit;
}
.vox-bar:focus-visible { outline: 2px solid var(--gold); outline-offset: -3px; }
.vox-title {
  font-family: var(--font-sc); font-weight: 700; font-size: 13px;
  letter-spacing: .26em; color: var(--gold); white-space: nowrap;
}
.vox-tick {
  flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-family: var(--font-mono); font-size: 11px; color: var(--muted);
}
#jstatus { font-family: var(--font-mono); font-size: 11px; color: var(--muted); white-space: nowrap; }
.vox-chev { color: var(--faint); font-size: 11px; transition: transform .2s; }
.vox.open .vox-chev { transform: rotate(180deg); }
.lamp {
  flex: 0 0 auto; width: 9px; height: 9px; border-radius: 50%; background: #4a443a;
  transition: background .2s, box-shadow .2s;
}
.lamp.running { background: var(--red-hi); box-shadow: 0 0 10px rgba(224, 90, 69, .7); animation: pulse 1.1s ease-in-out infinite; }
.lamp.done { background: var(--gold); box-shadow: 0 0 8px rgba(201, 162, 46, .5); }
.lamp.failed { background: var(--red-hi); box-shadow: 0 0 8px rgba(224, 90, 69, .7); }
@keyframes pulse { 50% { opacity: .45; } }

.vox .log {
  margin: 0; padding: 0 22px; height: 0; overflow: auto;
  background:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, .012) 0 1px, transparent 1px 3px),
    var(--inset);
  font-family: var(--font-mono); font-size: 12px; line-height: 1.65;
  white-space: pre-wrap; word-break: break-word;
  border-top: 1px solid transparent;
  transition: height .22s ease, padding .22s ease;
}
.vox.open .log { height: min(42vh, 380px); padding: 14px 22px; border-top-color: var(--line); }
.log:empty::before {
  content: "— console idle · start a job to stream its output here —";
  color: var(--faint);
}
.log .l { display: block; animation: log-rise .18s ease-out; }
.log .l-sec { color: var(--gold); }
.log .l-err { color: var(--red-hi); }
.log .l-ok { color: var(--ok); }
.log .l-end { color: var(--muted); }
.log .l-warn { color: var(--warn); }

/* NSFW block → suggested safer prompt, shown on the beat */
.nsfw-suggest {
  margin: 2px 0 8px; padding: 9px 11px;
  border: 1px solid var(--red-dim); border-left: 2px solid var(--warn);
  background: rgba(217, 154, 43, .06);
}
.nsfw-suggest-head {
  font-family: var(--font-label, var(--font-mono)); font-size: 10px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--warn);
  margin-bottom: 6px;
}
.nsfw-suggest-prompt {
  margin: 0 0 5px; font-family: var(--font-mono); font-size: 11px;
  line-height: 1.5; color: var(--ink);
}
.nsfw-suggest-note { margin: 0 0 7px; font-size: 11px; color: var(--muted); font-style: italic; }
.nsfw-suggest-actions { display: flex; gap: 8px; }
@keyframes log-rise { from { opacity: 0; transform: translateY(2px); } }

/* --------------------------------------------------------------------------
   deliverables / publish
   -------------------------------------------------------------------------- */
.deliver-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 420px); gap: 26px; align-items: start; }
@media (max-width: 900px) { .deliver-grid { grid-template-columns: 1fr; } }
.finals { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; }
.final {
  border: 1px solid var(--line); border-radius: var(--r);
  background: var(--panel2); padding: 14px 16px;
}
.final .fk {
  font-family: var(--font-display); font-weight: 700; font-size: 13px;
  letter-spacing: .18em; text-transform: uppercase; color: var(--ink);
}
.final .fo { font-family: var(--font-mono); font-size: 10.5px; color: var(--muted); margin: 4px 0 10px; word-break: break-all; }
video { width: 100%; max-width: 230px; border-radius: var(--r); background: #000; border: 1px solid var(--line2); display: block; }
.pill {
  display: inline-block; font-family: var(--font-mono); font-size: 10px;
  letter-spacing: .12em; text-transform: uppercase;
  padding: 2px 9px; border: 1px solid var(--line2); color: var(--muted);
  clip-path: polygon(4px 0, 100% 0, 100% calc(100% - 4px), calc(100% - 4px) 100%, 0 100%, 0 4px);
}
.pill.ok { color: var(--gold); border-color: var(--gold-dim); background: rgba(201, 162, 46, .08); }
.pill.live { color: var(--ok); border-color: #3c4a26; background: rgba(156, 176, 106, .08); }
.publish { border-left: 1px solid var(--line); padding-left: 26px; }
@media (max-width: 900px) { .publish { border-left: none; padding-left: 0; border-top: 1px solid var(--line); padding-top: 18px; } }

/* --------------------------------------------------------------------------
   assets
   -------------------------------------------------------------------------- */
.warnbox {
  border: 1px solid rgba(217, 154, 43, .45); border-left: 3px solid var(--warn);
  background: rgba(217, 154, 43, .06); border-radius: var(--r);
  padding: 10px 14px; margin-bottom: 14px; font-size: 12.5px; color: var(--ink-dim);
  line-height: 1.9;
}
table.assets { width: 100%; border-collapse: collapse; margin-top: 14px; }
table.assets td { padding: 6px 8px; border-bottom: 1px solid var(--line); font-size: 12.5px; }
table.assets td.t {
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--faint); width: 52px;
}
table.assets tr:hover td { background: rgba(255, 255, 255, .015); }
table.assets a { color: var(--ink-dim); text-decoration: none; font-family: var(--font-mono); font-size: 12px; }
table.assets a:hover { color: var(--gold); }

input[type=file] {
  font-size: 12.5px; color: var(--muted); padding: 7px;
  border-style: dashed; max-width: 100%;
}
input[type=file]::file-selector-button {
  font: 700 12px var(--font-sc); letter-spacing: .14em;
  color: var(--ink); background: var(--panel2); border: 1px solid var(--line2);
  border-radius: var(--r); padding: 6px 12px; margin-right: 12px; cursor: pointer;
}

/* --------------------------------------------------------------------------
   index — the slate is a gallery of the work itself
   -------------------------------------------------------------------------- */
.slate-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
  gap: 20px; margin-top: 26px;
}
.slate-card {
  position: relative; display: flex; flex-direction: column;
  background: var(--panel);
  border: 1px solid var(--line); border-radius: var(--r);
  overflow: hidden;
  transition: transform .18s ease, border-color .18s, box-shadow .18s;
  animation: rise-in .45s ease-out backwards;
}
.slate-card:nth-child(2) { animation-delay: .05s; }
.slate-card:nth-child(3) { animation-delay: .1s; }
.slate-card:nth-child(4) { animation-delay: .15s; }
.slate-card:nth-child(5) { animation-delay: .2s; }
.slate-card:nth-child(n+6) { animation-delay: .25s; }
.slate-card:hover {
  transform: translateY(-4px); border-color: var(--gold-dim);
  box-shadow: 0 16px 36px rgba(0, 0, 0, .5), 0 0 0 1px var(--gold-dim);
}
.slate-card .slate-link { display: block; text-decoration: none; }
.slate-cover {
  position: relative; aspect-ratio: 4 / 5; background: var(--inset); overflow: hidden;
}
.slate-cover img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  filter: saturate(.9) brightness(.94);
  transition: transform .35s ease, filter .25s;
}
.slate-card:hover .slate-cover img { transform: scale(1.045); filter: saturate(1) brightness(1); }
.slate-cover-empty {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: var(--faint); font-size: 30px;
  background: radial-gradient(80% 60% at 50% 40%, rgba(201, 162, 46, .05), transparent);
}
.slate-cover-veil {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, transparent 45%, rgba(9, 8, 7, .88) 88%);
}
.slate-cover h3 {
  position: absolute; left: 14px; right: 14px; bottom: 10px; margin: 0;
  font-family: var(--font-display); font-weight: 700;
  font-size: 16px; letter-spacing: .09em; text-transform: uppercase; color: var(--ink);
  text-shadow: 0 2px 10px rgba(0, 0, 0, .8);
}
.slate-body { padding: 11px 14px 12px; }
.slate-body .meta { font-family: var(--font-mono); font-size: 10.5px; color: var(--muted); margin-bottom: 9px; }
.slate-body .cuts { display: flex; gap: 6px; flex-wrap: wrap; }

.card-actions {
  display: flex; gap: 10px; justify-content: flex-end;
  padding: 8px 14px 10px; border-top: 1px solid var(--line);
  opacity: .3; transition: opacity .15s; margin-top: auto;
}
.slate-card:hover .card-actions, .slate-card:focus-within .card-actions { opacity: 1; }
.card-act {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .12em;
  text-transform: uppercase; padding: 3px 10px; border-radius: var(--r);
  border: 1px solid var(--line2); background: transparent; color: var(--muted);
  cursor: pointer; transition: color .12s, border-color .12s;
}
.card-act:hover { color: var(--ink); border-color: var(--muted); }
.card-act.danger:hover { color: var(--red-hi); border-color: var(--red-dim); }
.archived-row { padding: 9px 0; border-top: 1px solid var(--line); align-items: center; }
.archived-row:first-of-type { border-top: none; }
.empty {
  border: 1px dashed var(--line2); border-radius: var(--r);
  padding: 54px 20px; text-align: center; color: var(--muted); margin-top: 24px;
  font-size: 14px;
}
.empty .glyph { display: block; font-size: 28px; color: var(--gold-dim); margin-bottom: 10px; }

/* --------------------------------------------------------------------------
   login — the seal
   -------------------------------------------------------------------------- */
.gate { max-width: 380px; margin: 10vh auto 0; text-align: center; animation: rise-in .5s ease-out backwards; }
.gate .sigil {
  display: inline-flex; align-items: center; justify-content: center;
  width: 92px; height: 92px; border-radius: 50%;
  border: 1px solid var(--gold-dim);
  box-shadow: inset 0 0 0 6px var(--bg), inset 0 0 0 7px var(--line2), 0 0 48px rgba(201, 162, 46, .14);
  font-size: 30px; color: var(--gold); margin-bottom: 28px;
  animation: seal-glow 4s ease-in-out infinite;
}
@keyframes seal-glow {
  50% { box-shadow: inset 0 0 0 6px var(--bg), inset 0 0 0 7px var(--line2), 0 0 66px rgba(201, 162, 46, .25); }
}
.gate h1 {
  font-family: var(--font-display); font-weight: 900; font-size: 31px;
  letter-spacing: .3em; margin: 0 0 6px; text-transform: uppercase;
}
.gate .motto {
  font-family: var(--font-sc); font-weight: 700; font-size: 12px;
  letter-spacing: .38em; color: var(--muted); margin-bottom: 36px;
}
.gate form { display: flex; flex-direction: column; gap: 12px; }
.gate input { text-align: center; font-size: 15px; padding: 12px; }
.gate .btn { justify-content: center; padding: 12px; }

/* --------------------------------------------------------------------------
   toasts / flash
   -------------------------------------------------------------------------- */
.toasts { position: fixed; top: 70px; right: 22px; z-index: 1000; display: flex; flex-direction: column; gap: 8px; }
.toast {
  background: var(--panel2); border: 1px solid var(--line2);
  border-left: 3px solid var(--gold);
  border-radius: var(--r); padding: 11px 16px; font-size: 13px; color: var(--ink-dim);
  box-shadow: var(--shadow); max-width: 340px;
  animation: toast-in .25s ease-out;
}
@keyframes toast-in { from { opacity: 0; transform: translateX(14px); } }
.toast.leaving { opacity: 0; transform: translateX(14px); transition: all .3s; }

/* --------------------------------------------------------------------------
   misc / responsive
   -------------------------------------------------------------------------- */
hr.rule { border: none; border-top: 1px solid var(--line); margin: 18px 0; }
@media (max-width: 700px) {
  main { padding: 20px 14px 150px; }
  .masthead { padding: 0 14px; }
  .pipeline { width: 100%; justify-content: space-between; }
  .pipeline li { padding: 0 6px; min-width: 0; flex: 1; }
  .node-detail { display: none; }
  .beat { gap: 12px; padding: 12px 4px; }
  .beat-fig, .beat-fig img, .fig-empty { width: 64px; flex-basis: 64px; }
  .ops-stage { padding-left: 46px; }
  .vox-tick { display: none; }
}
/* --------------------------------------------------------------------------
   theme switch
   -------------------------------------------------------------------------- */
.mast-right { display: flex; align-items: center; gap: 10px; }
.theme-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; padding: 0; font-size: 14px; line-height: 1;
  color: var(--muted); background: transparent;
  border: 1px solid var(--line2); border-radius: 50%;
  cursor: pointer; transition: color .15s, border-color .15s, transform .3s;
}
.theme-btn:hover { color: var(--gold); border-color: var(--gold-dim); transform: rotate(40deg); }
.theme-btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* --------------------------------------------------------------------------
   light mode — the parchment codex. The variable palette + generic fixups
   come from the SHARED kit (sigil-theme.css, loaded after this file); below
   are only the reels-specific overrides.
   -------------------------------------------------------------------------- */
:root[data-theme="light"] .grain::after {
  background: radial-gradient(140% 120% at 50% 30%, transparent 66%, rgba(90, 70, 35, .18));
}
:root[data-theme="light"] .masthead { background: rgba(240, 233, 216, .92); }
:root[data-theme="light"] h1.display {
  background: linear-gradient(178deg, var(--ink) 60%, #55482f);
  -webkit-background-clip: text; background-clip: text;
}
:root[data-theme="light"] .plate {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 10px 30px rgba(70, 55, 25, .14);
}
:root[data-theme="light"] .btn:hover { background: #ece5d0; }
:root[data-theme="light"] .btn.quiet:hover { background: rgba(70, 55, 25, .05); }
:root[data-theme="light"] .vox { background: rgba(244, 239, 225, .95); box-shadow: 0 -14px 40px rgba(70, 55, 25, .2); }
:root[data-theme="light"] .vox .log {
  background:
    repeating-linear-gradient(0deg, rgba(70, 55, 25, .02) 0 1px, transparent 1px 3px),
    var(--inset);
}
:root[data-theme="light"] .lamp { background: #b3a88e; }
:root[data-theme="light"] .lamp.running { background: var(--red-hi); }
:root[data-theme="light"] .lamp.done { background: var(--gold); }
/* card titles sit over the artwork's dark veil — keep them bone in both themes */
:root[data-theme="light"] .slate-cover h3 { color: #ece5d3; }
:root[data-theme="light"] .slate-cover img { filter: saturate(.92) brightness(.97); }
:root[data-theme="light"] .pipeline li.done .node-mark { box-shadow: 0 0 14px rgba(138, 109, 23, .3); }
:root[data-theme="light"] table.assets tr:hover td { background: rgba(70, 55, 25, .035); }
:root[data-theme="light"] .beat:hover { background: rgba(70, 55, 25, .03); }
:root[data-theme="light"] .gate .sigil {
  box-shadow: inset 0 0 0 6px var(--bg), inset 0 0 0 7px var(--line2), 0 0 48px rgba(138, 109, 23, .2);
}

/* ==========================================================================
   OPUS — long-form project page. Five stacked stage plates, each locked
   until its prerequisite is met. Built entirely on the house variables so
   both themes work with no parallel ruleset (matches the Vox section below).
   ========================================================================== */
.opus-stages { display: flex; flex-direction: column; }
.atlas-cell { display: inline-flex; flex-direction: column; align-items: center; gap: 3px; }
.lock-note { color: var(--warn); font-style: italic; }
.save-warn {
  color: var(--warn); font-family: var(--font-mono); font-size: 12px;
  margin: -14px 0 18px; padding: 8px 12px;
  border: 1px solid rgba(217, 154, 43, .4); border-left: 2px solid var(--warn);
  background: rgba(217, 154, 43, .06); border-radius: var(--r);
}

/* a locked stage stays fully legible (title, lock note) but its controls
   dim and stop accepting input — pointer-events off + disabled attributes
   on the actual controls cover both mouse and keyboard access */
.stage-locked { opacity: .45; pointer-events: none; user-select: none; }

/* chapter editor */
.chapter-block {
  border: 1px solid var(--line); border-radius: var(--r);
  background: var(--inset); padding: 12px 14px; margin: 0 0 12px;
}
.chapter-block .ch-title {
  width: 100%; margin-bottom: 8px;
  font-family: var(--font-sc); font-weight: 700; letter-spacing: .03em;
}
.chapter-block .ch-text { width: 100%; }
/* prose fields — the .mono pre/380px editor defaults are for code-like
   prompts; chapter narration must wrap and size to its rows */
.chapter-block .ch-text, .chapter-block .ch-vo-text {
  white-space: pre-wrap; overflow-wrap: break-word; min-height: 0;
}
.chapter-block .phonetic-toggle {
  display: flex; align-items: center; gap: 7px; margin-top: 9px; cursor: pointer;
}
.chapter-block .ch-vo-text { width: 100%; margin-top: 7px; }
.chapter-times { margin: 8px 0; padding-left: 20px; color: var(--ink-dim); }
.chapter-times li { margin: 2px 0; }

/* asset picker — reuses .ref-cell/.refs-row from the beat reference panel.
   The thumbnail is a real <button> (keyboard-focusable, Enter/Space
   activates) wrapping the <img>, not an onclick'd image. */
.asset-cell { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.asset-thumb-btn {
  display: block; padding: 0; margin: 0; border: none; background: none; cursor: pointer;
}
.asset-thumb-btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: var(--r); }
.asset-cell img { cursor: pointer; opacity: .55; transition: opacity .12s, border-color .12s; }
.asset-cell img:hover { opacity: .85; }
.asset-cell.selected img { opacity: 1; border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold-dim); }
.asset-cell .asset-cat { width: 78px; font-size: 10.5px; padding: 4px 6px; }

/* submit / status strip */
.opus-status-strip {
  display: inline-flex; align-items: center; gap: 10px; margin-top: 14px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .03em;
  color: var(--muted);
}
.opus-status-strip #opus-requeue-btn { margin-left: 4px; }
.opus-status-strip .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); }
.opus-status-strip[data-state="rendering"] { color: var(--gold); }
.opus-status-strip[data-state="rendering"] .dot {
  background: var(--gold); box-shadow: 0 0 8px rgba(201, 162, 46, .5);
  animation: pulse 1.1s ease-in-out infinite;
}
.opus-status-strip[data-state="rendered"] { color: var(--ok); }
.opus-status-strip[data-state="rendered"] .dot { background: var(--ok); box-shadow: 0 0 8px rgba(156, 176, 106, .5); }
.opus-status-strip[data-state="failed"] { color: var(--red-hi); }
.opus-status-strip[data-state="failed"] .dot { background: var(--red-hi); box-shadow: 0 0 8px rgba(224, 90, 69, .6); }

.kit-pre {
  white-space: pre-wrap; font-size: 12px; line-height: 1.6;
  background: var(--inset); border: 1px solid var(--line); border-radius: var(--r);
  padding: 12px 14px; max-height: 420px; overflow-y: auto;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ==========================================================================
   VOX — the lore & ideation terminal.
   Built entirely on the house variables so both themes work without a
   parallel set of rules; only the few hardcoded washes need light overrides.
   ========================================================================== */
.vox-index-state { display: flex; gap: 8px; align-items: center; }

/* -- tabs ---------------------------------------------------------------- */
.vox-tabs {
  display: flex; gap: 2px; margin: 0 0 18px;
  border-bottom: 1px solid var(--line);
}
.tab {
  font: 700 12px/1 var(--font-sc); letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted); background: transparent; cursor: pointer;
  border: 1px solid transparent; border-bottom: none;
  padding: 11px 20px; margin-bottom: -1px;
  clip-path: var(--chamfer); transition: color .14s, background .14s;
}
.tab:hover { color: var(--ink); }
.tab.on {
  color: var(--gold); background: var(--panel);
  border-color: var(--line); border-bottom-color: var(--panel);
}
.tab:focus-visible { outline: 2px solid var(--gold); outline-offset: -3px; }
.tab-n {
  font-family: var(--font-mono); font-size: 10px; color: var(--faint);
  margin-left: 6px;
}

/* -- mode selector ------------------------------------------------------- */
.vox-modes {
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
  margin: 0 0 16px;
}
.mode-pill {
  font: 700 11px/1 var(--font-sc); letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-dim); background: var(--inset);
  border: 1px solid var(--line2); padding: 9px 15px;
  clip-path: var(--chamfer); cursor: pointer; transition: all .14s;
}
.mode-pill:hover:not(:disabled) { color: var(--ink); border-color: var(--muted); }
.mode-pill.on {
  color: var(--bg); background: var(--gold-leaf); border-color: var(--gold);
}
.mode-pill:disabled { opacity: .38; cursor: not-allowed; }
.mode-pill:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.mode-badge {
  font-size: 9px; letter-spacing: .08em; opacity: .8; margin-left: 5px;
}
.vox-modehint { font-size: 12.5px; color: var(--muted); flex: 1; min-width: 220px; }

/* -- transcript ---------------------------------------------------------- */
.vox-transcript {
  display: flex; flex-direction: column; gap: 16px;
  max-height: 60vh; overflow-y: auto;
  padding: 4px 2px; margin-bottom: 14px;
}
.vox-transcript:empty { display: none; }

.vox-user {
  align-self: flex-end; max-width: 76%;
  background: var(--panel2); border: 1px solid var(--line2);
  border-left: 2px solid var(--gold-dim);
  padding: 10px 15px; clip-path: var(--chamfer);
}
.vox-user p { margin: 0; color: var(--ink); }

.vox-answer { margin: 0; padding: 20px 22px; }
.vox-answer p { margin: 0 0 11px; font-family: var(--font-script); font-size: 15.5px; }
.vox-answer p:last-child { margin-bottom: 0; }
.vox-answer-mode {
  font: 700 10px/1 var(--font-sc); letter-spacing: .16em; text-transform: uppercase;
  color: var(--faint); margin-bottom: 10px;
}
.vox-queries {
  font-family: var(--font-mono); font-size: 11px; color: var(--faint);
  margin-top: 12px; padding-top: 9px; border-top: 1px solid var(--line);
}

/* -- passages (the receipts) --------------------------------------------- */
.vox-passages { margin-top: 10px; }
.vox-passages > summary {
  font: 700 11px/1 var(--font-sc); letter-spacing: .12em; text-transform: uppercase;
  color: var(--gold); cursor: pointer; padding: 7px 0;
  list-style: none;
}
.vox-passages > summary::-webkit-details-marker { display: none; }
.vox-passages > summary::before { content: "▸ "; color: var(--faint); }
.vox-passages[open] > summary::before { content: "▾ "; }
.vox-passage {
  border-left: 2px solid var(--line2); padding: 2px 0 2px 13px;
  margin: 11px 0;
}
.vox-passage cite {
  display: block; font: 600 11px/1.4 var(--font-mono); font-style: normal;
  color: var(--gold); margin-bottom: 5px;
}
.vox-passage p {
  margin: 0; font-family: var(--font-script); font-size: 14px;
  color: var(--ink-dim); white-space: pre-wrap;
}

/* -- idea cards ---------------------------------------------------------- */
.vox-idea {
  border: 1px solid var(--line2); background: var(--inset);
  padding: 16px 18px; margin: 14px 0; clip-path: var(--chamfer);
}
.vox-idea-label {
  font: 700 10px/1 var(--font-sc); letter-spacing: .15em; text-transform: uppercase;
  color: var(--faint); margin: 12px 0 5px;
}
.vox-idea-label:first-child { margin-top: 0; }
.vox-idea p { margin: 0; font-family: var(--font-script); font-size: 14.5px; }
.vox-idea-hook {
  font-family: var(--font-display) !important; font-size: 17px !important;
  color: var(--ink); line-height: 1.35;
}
.vox-idea-hook.rewrite { color: var(--gold-hi); }
.vox-idea-foot {
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
  margin-top: 15px; padding-top: 13px; border-top: 1px solid var(--line);
}
.vox-idea-foot .btn { margin-left: auto; }

.hook-badge {
  display: flex; gap: 9px; align-items: baseline; flex-wrap: wrap;
  margin-top: 8px; font-size: 12px;
}
.hook-verdict {
  font: 700 10px/1 var(--font-sc); letter-spacing: .14em;
  padding: 4px 9px; border: 1px solid currentColor;
}
.hook-badge.ok { color: var(--ok); }
.hook-badge.warn { color: var(--warn); }
.hook-badge.grey { color: var(--muted); }
.hook-secs { font-family: var(--font-mono); font-size: 11px; color: var(--faint); }
.hook-notes { color: var(--muted); font-size: 12.5px; }

/* -- ideas options row ---------------------------------------------------- */
.vox-ideaopts {
  display: flex; gap: 15px; align-items: center; flex-wrap: wrap;
  padding: 11px 14px; margin: 0 0 16px;
  background: var(--inset); border: 1px solid var(--line);
  clip-path: var(--chamfer);
}
.vox-ideaopts label { display: flex; gap: 7px; align-items: center; }
.vox-ideaopts .hint { flex: 1; min-width: 200px; margin: 0; font-size: 11.5px; }
.vox-ideaopts em { color: var(--gold); font-style: normal; }

/* -- listicle entries ----------------------------------------------------- */
.vox-list { margin: 0; padding-left: 26px; }
.vox-list li {
  margin: 0 0 11px; padding-left: 5px;
  font-family: var(--font-script); font-size: 14.5px;
}
.vox-list li::marker { color: var(--gold); font-family: var(--font-mono); font-size: 12px; }
.vox-list-name {
  display: block; font-family: var(--font-sc); font-weight: 700;
  font-size: 13px; letter-spacing: .04em; color: var(--ink);
}
.vox-list-beat { display: block; color: var(--ink-dim); margin-top: 2px; }
.vox-list cite {
  display: block; margin-top: 3px; font-style: normal;
  font-family: var(--font-mono); font-size: 10.5px; color: var(--gold);
}
.vox-shortfall {
  font-size: 12.5px; color: var(--warn); margin-top: 10px;
  border-left: 2px solid var(--warn); padding-left: 11px;
}
.vox-angle {
  font: 500 11px/1 var(--font-sc); letter-spacing: .06em;
  color: var(--muted); text-transform: lowercase;
}

/* -- web sources (always marked secondary) -------------------------------- */
.vox-answer-mode.secondary { color: var(--warn); }
.vox-secondary-warn {
  font-size: 12.5px; color: var(--warn); line-height: 1.5;
  border-left: 2px solid var(--warn); padding: 7px 0 7px 12px;
  margin-bottom: 13px;
}
.vox-sources { margin-top: 13px; padding-top: 11px; border-top: 1px solid var(--line); }
.vox-sources-label {
  font: 700 10px/1 var(--font-sc); letter-spacing: .15em; text-transform: uppercase;
  color: var(--warn); margin-bottom: 8px;
}
.vox-sources ul { margin: 0; padding-left: 17px; }
.vox-sources li { margin: 4px 0; }
.vox-sources a {
  font-family: var(--font-mono); font-size: 11.5px; color: var(--gold);
  word-break: break-all; text-decoration: none;
  border-bottom: 1px solid var(--gold-dim);
}
.vox-sources a:hover { color: var(--gold-hi); }

/* -- trace + prompt ------------------------------------------------------ */
.vox-trace {
  font-family: var(--font-mono); font-size: 11.5px; line-height: 1.65;
  color: var(--muted); background: var(--inset);
  border: 1px solid var(--line); border-left: 2px solid var(--gold-dim);
  padding: 11px 14px; margin: 0 0 14px;
  max-height: 190px; overflow-y: auto; white-space: pre-wrap;
}
.vox-prompt textarea {
  width: 100%; resize: vertical; min-height: 62px;
  font-family: var(--font-ui); font-size: 14.5px;
}
.vox-prompt-actions { margin-top: 11px; }

/* -- history rows -------------------------------------------------------- */
.thread-row {
  display: flex; align-items: center; gap: 14px;
  padding: 13px 4px; border-bottom: 1px solid var(--line);
}
.thread-row:last-child { border-bottom: none; }
.thread-open {
  flex: 1; display: flex; flex-direction: column; gap: 4px;
  text-decoration: none; min-width: 0;
}
.thread-title {
  color: var(--ink); font-size: 15px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.thread-open:hover .thread-title { color: var(--gold); }
.thread-meta {
  display: flex; gap: 8px; align-items: center;
  font-size: 12px; color: var(--muted);
}

/* -- the Vox brief on a project's Script stage ---------------------------- */
.vox-brief {
  border: 1px solid var(--gold-dim); background: rgba(201, 162, 46, .05);
  padding: 12px 14px; margin-bottom: 14px; clip-path: var(--chamfer);
}
.vox-brief-src {
  font: 700 9.5px/1 var(--font-sc); letter-spacing: .16em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 9px;
}
.vox-brief dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 4px 11px; }
.vox-brief dt {
  font: 700 9.5px/1.6 var(--font-sc); letter-spacing: .12em; text-transform: uppercase;
  color: var(--faint);
}
.vox-brief dd { margin: 0; font-size: 13px; color: var(--ink-dim); }
.vox-brief-hook { color: var(--ink) !important; font-family: var(--font-script); }
.vox-brief .hint { display: block; margin: 9px 0 0; font-size: 11px; }

/* -- light parchment overrides ------------------------------------------- */
:root[data-theme="light"] .vox-user { background: rgba(120, 96, 30, .07); }
:root[data-theme="light"] .vox-brief { background: rgba(150, 116, 20, .08); }
/* The active mode pill sits on the gold leaf in BOTH themes, so it needs dark
   ink in both. In dark mode var(--bg) is already near-black (7.9:1). In light
   mode var(--bg) is the parchment wash, which would put pale text on gold at
   1.82:1 — illegible. Pin it to the light theme's ink instead (7.0:1). */
:root[data-theme="light"] .mode-pill.on { color: var(--ink); }

@media (max-width: 900px) {
  .vox-user { max-width: 92%; }
  .vox-transcript { max-height: none; }
  .vox-idea-foot .btn { margin-left: 0; }
}

/* --- Broadcast (audio-only Spotify episodes; vox tab + broadcast.html) --- */
.pill.bc-draft    { opacity: .65; }
.pill.bc-scripted { border-color: var(--gold); }
.pill.bc-gated    { border-color: var(--gold); color: var(--gold); }
.pill.bc-voiced   { border-color: var(--gold); color: var(--gold); }
.pill.bc-mixed    { background: var(--gold); color: #14100a; }
.bc-fix { border-left: 3px solid var(--gold); padding: 8px 0 8px 12px;
          margin-top: 8px; }
.bc-problems { border-left: 3px solid #b3453f; padding: 8px 0 8px 12px;
               margin-top: 8px; }
.bc-problem  { opacity: .85; }
.bc-diff { line-height: 1.7; }
.bc-diff .bc-del { text-decoration: line-through; opacity: .55; }
.bc-diff .bc-add { color: var(--gold, #b8912f); font-weight: 600; }
.bc-claim-contradicted { color: #b3453f; }
.bc-claim-unsupported  { color: var(--gold, #b8912f); }
.bc-claim-waived       { opacity: .5; text-decoration: line-through; }
.bc-claim-waived .card-act, .bc-claim-waived em {
  text-decoration: none; }   /* the (ignored) tag + restore stay legible */

/* Readability of the spoken prose — measured from the CURRENT section text
   on every page render, so an edit re-measures with no job re-run */
.bc-prose { margin: 4px 2px 0; }
.bc-prose-warn {
  display: inline-block; margin-left: 8px; padding: 0 6px;
  border: 1px solid var(--gold, #b8912f); border-radius: 3px;
  color: var(--gold, #b8912f);
}

/* Disabled controls must LOOK disabled — a gate-locked Synthesise VO
   button previously rendered identical to a live one */
.btn:disabled, .btn[disabled], .card-act:disabled {
  opacity: .4; cursor: not-allowed; filter: saturate(.4);
}

/* scriptorium — excerpt review card: the verbatim passage, read-only */
.sc-passage {
  margin: 0; padding: 10px 14px; border-left: 3px solid var(--gold-dim);
  background: var(--inset); border-radius: var(--r);
  font-style: italic; white-space: pre-wrap; color: var(--ink);
}

/* scriptorium — site history panel (pull an already-shipped post for edit) */
.sc-hist-row {
  display: flex; align-items: center; gap: 14px;
  padding: 9px 0; border-top: 1px solid var(--line);
}
.sc-hist-row:first-child { border-top: none; }
.sc-hist-thumb {
  flex: 0 0 72px; height: 44px; display: flex; align-items: center;
  justify-content: center; overflow: hidden;
  border: 1px solid var(--line2); border-radius: var(--r);
  color: var(--gold-dim); text-decoration: none; background: var(--inset);
}
.sc-hist-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sc-hist-thumb.bare { border-style: dashed; }
.sc-hist-main { flex: 1; min-width: 0; }
.sc-hist-title {
  color: var(--ink); text-decoration: none; font-size: 14px;
  display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
a.sc-hist-title:hover { color: var(--gold-hi); }
.sc-hist-meta { font-size: 12px; color: var(--muted); margin-top: 2px; }
.sc-hist-noart {
  margin-left: 8px; padding: 1px 7px; font-size: 10.5px; letter-spacing: .08em;
  color: var(--red-hi); border: 1px dashed var(--red-dim); border-radius: 3px;
}

/* Canon atlas — derived-look proposal card (propose-and-approve) */
.atlas-proposal {
  margin-top: 12px; padding: 12px;
  border: 1px solid var(--gold-dim); border-left: 3px solid var(--gold);
  border-radius: 4px;
}
.atlas-proposal-head {
  color: var(--gold); margin-bottom: 8px;
  letter-spacing: .06em;
}