/* PG Studio, "Green Room" design.
   Walnut ground, cream paper surfaces, marigold accent. Rounded and calm, with
   labels written as short sentences.

   Type follows the Presenter Group brand kit: Outfit Light headlines, Inter for
   everything else, and Besley Italic for emphasis only. Emphasis means the one
   word a speaker would stress: a headline word, a stress mark in the script, and
   "Studio" beside the logo. It is marigold on dark and ember on cream, and it is
   never used for body text, notes, or labels. */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Outfit:wght@300;400;500;600&display=swap');

/* The emphasis face, served from this app so it is there on any network. */
@font-face {
  font-family: 'Besley';
  font-style: italic;
  font-weight: 400 900;
  font-display: swap;
  src: url('/fonts/Besley-Italic.ttf') format('truetype');
}

:root {
  --walnut: #1a1411;
  --walnut-2: #241c18;
  --walnut-3: #2e2520;
  --stage: #0f0c0a;
  --band: #211a16;
  --line: #6b5e50;
  --line-soft: #3a302a;
  --cream: #f2e9da;
  --cream-dim: #c9beac;
  --muted: #9a8f80;
  --paper: #f2e9da;
  --paper-2: #eadfcb;
  --paper-line: #d6c8b1;
  --ink: #2a211b;
  --ink-soft: #4a3f35;
  --ink-muted: #6b5e50;
  --ink-line: #8c7f70;
  --accent: #e39a3a;
  --accent-ink: #1a1208;
  --accent-deep: #8a5a1e; /* Ember: emphasis, links, and labels on cream */
  --accent-wash: #f6d9a8;
  --rec: #c8363b;
  --rec-soft: #ff9a9d;
  --ok: #8fd193;
  --ok-deep: #2f6b34;
  --warn: #e3b23a;
  --r-panel: 28px;
  --r-card: 22px;
  --r-inner: 14px;
  --sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --display: 'Outfit', 'Inter', system-ui, sans-serif;
  --emphasis: 'Besley', Georgia, serif;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--walnut);
  color: var(--cream);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { font-family: var(--display); font-weight: 300; margin: 0; letter-spacing: -0.015em; }
h1 { font-size: 46px; line-height: 1.08; }
h2 { font-size: 26px; line-height: 1.15; }
h3 { font-family: var(--sans); font-size: 13px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--cream-dim); }
/* The stressed word. 94% because Besley runs large beside Outfit. */
h1 em, h2 em, .pg-em { font-family: var(--emphasis); font-style: italic; font-weight: 400; font-size: 94%; letter-spacing: 0; color: var(--accent); }
.paper h1 em, .paper h2 em, .paper-panel h1 em, .paper-panel h2 em, .overlay .card h2 em { color: var(--accent-deep); }
p { margin: 0 0 12px; }
a { color: var(--accent); text-underline-offset: 3px; }
.paper a:not(.btn), .paper-panel a:not(.btn) { color: var(--accent-deep); }
.muted { color: var(--muted); }
.dim { color: var(--cream-dim); }
.small { font-size: 13px; }
.mono { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum'; }
.hidden { display: none !important; }
.grow { flex: 1; min-width: 0; }
.eyebrow { font-size: 13px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); }
.paper .eyebrow, .paper-panel .eyebrow, .note-card .eyebrow, .overlay .card .eyebrow { color: var(--accent-deep); }
.quiet { font-size: 14px; color: var(--muted); margin: 0; }
.paper .quiet, .paper-panel .quiet, .paper .muted, .paper-panel .muted { color: var(--ink-muted); }
.paper .dim, .paper-panel .dim { color: var(--ink-soft); }
/* Words from the director: the headline face, light, never italic. */
.serif-note { font-family: var(--display); font-weight: 300; }

.wordmark { font-family: var(--display); font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; font-size: 13px; color: var(--cream-dim); white-space: nowrap; text-decoration: none; }
.wordmark b { color: var(--accent); font-weight: 500; }
/* The brand in the header: the primary lockup (cream on dark, unchanged from the
   brand kit) with "Studio" in the emphasis italic beside it. The gap is wider than the
   lockup's clear space, which equals the height of its small tile. */
.brand { display: inline-flex; align-items: center; gap: 18px; text-decoration: none; flex: none; }
.brand img { display: block; height: 40px; width: auto; }
.brand-studio { font-family: var(--emphasis); font-style: italic; font-weight: 400; font-size: 35px; line-height: 1; color: var(--accent); }
.d-head .brand img { height: 34px; }
.d-head .brand-studio { font-size: 29px; }
.d-head .brand { gap: 15px; }

/* ---------- controls ---------- */

button, .btn {
  font: 500 15px var(--sans);
  color: var(--cream);
  background: transparent;
  border: 1.5px solid var(--line);
  border-radius: 999px;
  min-height: 44px;
  padding: 0 20px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.05s;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  justify-content: center;
  white-space: nowrap;
}
button:hover:not(:disabled), .btn:hover { border-color: var(--cream-dim); background: rgba(243, 234, 217, 0.06); }
button:active:not(:disabled) { transform: translateY(1px); }
button:disabled { opacity: 0.45; cursor: not-allowed; }
button.primary, .btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 600; }
button.primary:hover:not(:disabled), .btn.primary:hover { background: #edab52; border-color: #edab52; }
button.rec { background: var(--rec); border-color: var(--rec); color: #fff; font-weight: 600; }
button.rec:hover:not(:disabled) { background: #d6454a; border-color: #d6454a; }
button.on { background: var(--cream); border-color: var(--cream); color: var(--ink); }
button.on:hover:not(:disabled) { background: #fff7e8; border-color: #fff7e8; }
button.primary.on { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
button.danger-on { background: rgba(200, 54, 59, 0.24); border-color: var(--rec-soft); color: var(--rec-soft); }
button.tiny, .btn.tiny { min-height: 36px; padding: 0 14px; font-size: 13px; }
button.big, .btn.big { min-height: 62px; padding: 0 30px; font: 600 19px var(--display); }
button.linklike { border: 0; padding: 0 8px; color: var(--muted); text-decoration: underline; text-underline-offset: 3px; background: none; }
button.linklike:hover:not(:disabled) { color: var(--cream); background: none; }

/* Controls sitting on cream paper */
.paper button, .paper-panel button, .paper .btn, .paper-panel .btn { color: var(--ink); border-color: var(--ink-line); }
.paper button:hover:not(:disabled), .paper-panel button:hover:not(:disabled), .paper .btn:hover, .paper-panel .btn:hover { border-color: var(--ink); background: rgba(42, 33, 27, 0.06); }
.paper button.on, .paper-panel button.on, .paper button.on:hover:not(:disabled), .paper-panel button.on:hover:not(:disabled) { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.paper button.primary, .paper-panel button.primary, .paper .btn.primary, .paper-panel .btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.paper button.primary:hover:not(:disabled), .paper-panel button.primary:hover:not(:disabled), .paper .btn.primary:hover, .paper-panel .btn.primary:hover { background: #edab52; border-color: #edab52; }
.paper button.linklike, .paper-panel button.linklike { color: var(--ink-muted); border: 0; }
.paper button.linklike:hover:not(:disabled), .paper-panel button.linklike:hover:not(:disabled) { color: var(--ink); background: none; }

input[type='text'], input[type='number'], input[type='datetime-local'], textarea, select {
  font: inherit;
  color: var(--cream);
  background: var(--stage);
  border: 1.5px solid var(--line-soft);
  border-radius: var(--r-inner);
  padding: 10px 14px;
  width: 100%;
  min-height: 44px;
}
textarea { resize: vertical; line-height: 1.5; }
input::placeholder, textarea::placeholder { color: var(--muted); }
.paper input[type='text'], .paper-panel input[type='text'], .paper input[type='datetime-local'], .paper-panel input[type='datetime-local'], .paper textarea, .paper-panel textarea, .paper select, .paper-panel select {
  color: var(--ink); background: #fbf6ec; border-color: var(--paper-line);
}
.paper input::placeholder, .paper-panel input::placeholder, .paper textarea::placeholder, .paper-panel textarea::placeholder { color: var(--ink-muted); }
input:focus-visible, textarea:focus-visible, select:focus-visible, button:focus-visible, a:focus-visible, summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.paper :focus-visible, .paper-panel :focus-visible { outline-color: var(--accent-deep); }
label { display: block; font-size: 13px; color: var(--cream-dim); margin-bottom: 6px; }
.paper label, .paper-panel label { color: var(--ink-soft); }
input[type='range'] { width: 100%; accent-color: var(--accent); min-height: 24px; padding: 0; background: none; border: 0; }
input[type='checkbox'] { accent-color: var(--accent); width: 18px; height: 18px; flex: none; }
.check { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--cream); margin: 0; cursor: pointer; min-height: 32px; }
.check select, .check input[type='number'] { width: auto; min-height: 36px; padding: 4px 10px; }

.card { background: var(--walnut-2); border-radius: var(--r-card); padding: 18px 20px; }
.card > h3 { margin-bottom: 12px; }
.paper { background: var(--paper); color: var(--ink); border-radius: var(--r-panel); }
.paper h3, .paper-panel h3 { color: var(--ink-muted); }
.row { display: flex; gap: 10px; align-items: center; }
.row.wrap { flex-wrap: wrap; }
.stack > * + * { margin-top: 14px; }
.field + .field { margin-top: 14px; }

.pill { display: inline-flex; align-items: center; gap: 7px; padding: 5px 12px; border-radius: 999px; font-size: 13px; font-weight: 500; background: var(--walnut-2); color: var(--cream-dim); white-space: nowrap; }
.card .pill, .take .pill, .session-card .pill { background: var(--walnut-3); }
.pill.ok { color: var(--ok); }
.pill.warn { color: var(--warn); }
.pill.bad { color: var(--rec-soft); }
.pill.live, .take .pill.live { color: #fff; background: var(--rec); }
.paper .pill, .paper-panel .pill { background: var(--paper-2); color: var(--ink-soft); }
.paper .pill.ok, .paper-panel .pill.ok { color: var(--ok-deep); }
.paper .pill.warn, .paper-panel .pill.warn { color: var(--accent-deep); }
.dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; display: inline-block; flex: none; }
.pill.live .dot { animation: pulse 1.1s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: 0.25; } }

.meter { height: 8px; background: var(--line-soft); border-radius: 999px; overflow: hidden; }
.paper .meter, .paper-panel .meter { background: var(--paper-line); }
.meter > i { display: block; height: 100%; width: 0%; background: var(--ok); border-radius: 999px; transition: width 0.08s linear; }
.paper .meter > i, .paper-panel .meter > i { background: var(--ok-deep); }
.progress { height: 6px; background: var(--line-soft); border-radius: 999px; overflow: hidden; }
.paper .progress, .paper-panel .progress, .side-card .progress { background: var(--paper-line); }
.progress > i { display: block; height: 100%; width: 0%; background: var(--accent); border-radius: 999px; transition: width 0.3s; }

.seg { display: flex; gap: 8px; flex-wrap: wrap; }

details > summary { cursor: pointer; font-size: 14px; color: var(--cream-dim); list-style: none; display: inline-flex; align-items: center; gap: 8px; min-height: 36px; }
details > summary::-webkit-details-marker { display: none; }
details > summary::before { content: ''; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); transition: transform 0.15s; margin-right: 2px; flex: none; }
details[open] > summary::before { transform: rotate(45deg); }
.paper details > summary, .paper-panel details > summary { color: var(--ink-soft); }

/* ---------- video frames ---------- */

.frame { position: relative; background: #3a302a; border-radius: var(--r-card); overflow: hidden; aspect-ratio: 16 / 9; }
.frame video { width: 100%; height: 100%; object-fit: contain; display: block; background: #3a302a; }
video.mirror { transform: scaleX(-1); }
.frame .guides { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.frame .label { position: absolute; left: 14px; bottom: 12px; font-size: 13px; font-weight: 500; background: rgba(26, 20, 17, 0.82); padding: 5px 13px; border-radius: 999px; color: var(--cream); }
.frame .placeholder { position: absolute; inset: 0; display: grid; place-items: center; color: var(--cream-dim); font-size: 16px; text-align: center; padding: 24px; }

/* ---------- teleprompter ---------- */

.prompter { position: relative; overflow: hidden; background: var(--stage); color: #fff; }
.prompter-flip { position: absolute; inset: 0; z-index: 1; }
.prompter-content { position: absolute; left: 50%; top: 0; transform: translate(-50%, 0); font-family: var(--sans); font-weight: 500; line-height: 1.36; will-change: transform; }
.prompter-content p { margin: 0 0 0.5em; }
.pr-gap { height: 0.6em; }
.pr-heading { font-family: var(--sans); font-size: 0.34em; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); margin: 1.6em 0 0.8em; }
.pr-w { transition: opacity 0.25s, color 0.25s; }
.pr-read { opacity: 0.36; }
.pr-cue { color: var(--accent); font-style: italic; font-weight: 400; }
.pr-stress { font-family: var(--emphasis); font-style: italic; font-weight: 400; font-size: 94%; color: var(--accent); }
.pr-breath, .pr-smile { font-style: normal; font-weight: 400; }
.pr-breath { padding: 0 0.06em; }
.pr-changed { background: rgba(227, 154, 58, 0.3); border-radius: 0.16em; box-shadow: 0 0 0 0.08em rgba(227, 154, 58, 0.3); }
.prompter-seekable .pr-w { cursor: pointer; }
.prompter-seekable .pr-w:hover { color: var(--accent); }
/* The reading band: a soft bar behind the line being read. */
.prompter-marker { position: absolute; left: 0; right: 0; height: 0; border-radius: 20px; background: var(--band); pointer-events: none; z-index: 0; }
/* Scrollbar for a view that can be browsed (the director's copy). */
.prompter-scroll { position: absolute; top: 8px; bottom: 8px; right: 6px; width: 10px; border-radius: 5px; background: rgba(42, 33, 27, 0.08); z-index: 3; cursor: pointer; touch-action: none; }
.prompter-thumb { width: 100%; border-radius: 5px; background: rgba(42, 33, 27, 0.34); }
.prompter-scroll:hover .prompter-thumb { background: rgba(42, 33, 27, 0.55); }
.prompter-empty { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; color: var(--muted); font-size: 18px; pointer-events: none; text-align: center; padding: 24px; }
.prompter-points .prompter-marker { display: none; }
.prompter-points .prompter-content { transition: transform 0.35s ease; }
.prompter-points .prompter-content p { position: relative; padding: 0.16em 0.5em 0.16em 1.1em; margin-bottom: 0.5em; border-radius: 0.45em; opacity: 0.42; transition: opacity 0.3s, background 0.3s; }
.prompter-points .prompter-content p::before { content: ''; position: absolute; left: 0.4em; top: 0.72em; width: 0.3em; height: 0.3em; border-radius: 50%; background: var(--accent); }
.prompter-points .prompter-content p.pr-current { opacity: 1; background: var(--band); }
.prompter-points .prompter-content p.pr-done { opacity: 0.2; }
.prompter-points .pr-read { opacity: 1; }

/* The director's copy of the script: ink on cream paper. */
.prompter-paper { background: #fbf6ec; color: var(--ink); }
.prompter-paper .prompter-marker { background: var(--accent-wash); border-radius: 12px; }
.prompter-paper .prompter-content { font-weight: 400; line-height: 1.5; }
.prompter-paper .pr-read { opacity: 1; color: #746758; }
.prompter-paper .pr-heading { color: var(--accent-deep); font-size: 0.6em; }
.prompter-paper .pr-cue { color: var(--accent-deep); font-weight: 600; }
.prompter-paper .pr-stress { font-family: inherit; font-size: inherit; font-style: normal; font-weight: 500; color: inherit; text-decoration: underline; text-decoration-color: #b8730f; text-decoration-thickness: 0.14em; text-underline-offset: 0.2em; }
.prompter-paper .pr-changed { background: #f3c77f; box-shadow: 0 0 0 0.08em #f3c77f; }
.prompter-paper.prompter-seekable .pr-w:hover { color: var(--accent-deep); }
.prompter-paper .prompter-empty { color: var(--ink-muted); font-size: 16px; }
.prompter-paper.prompter-points .prompter-content p.pr-current { background: var(--accent-wash); }
.prompter-paper.prompter-points .prompter-content p::before { background: var(--accent-deep); }

/* ---------- toasts, overlays, count-in ---------- */

.toasts { position: fixed; right: 22px; top: 78px; display: flex; flex-direction: column; gap: 10px; z-index: 50; max-width: 400px; }
.toast { background: var(--paper); color: var(--ink); border-radius: 18px; padding: 12px 18px; font-size: 15px; box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45); animation: rise 0.2s ease-out; }
.toast.bad { background: #f6d5d2; color: #5d1a1d; }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } }
.toast { animation-name: drop; }
@keyframes drop { from { opacity: 0; transform: translateY(-8px); } }

.overlay { position: fixed; inset: 0; z-index: 45; display: none; place-items: center; background: rgba(15, 12, 10, 0.86); padding: 24px; }
.overlay.on { display: grid; }
.overlay .card { background: var(--paper); color: var(--ink); border-radius: var(--r-panel); padding: 34px 38px; max-width: 480px; text-align: center; }
.overlay .card .dim { color: var(--ink-soft); font-size: 16px; }
.overlay .card button { color: var(--ink); border-color: var(--ink-line); }
.overlay .card button:hover:not(:disabled) { border-color: var(--ink); background: rgba(42, 33, 27, 0.06); }
.overlay .card button.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.overlay .card.summary-card { text-align: left; max-width: 520px; }
.summary-card .figure { font-family: var(--display); font-size: 44px; line-height: 1.1; }

.countdown { position: fixed; inset: 0; z-index: 40; display: none; place-items: center; background: rgba(15, 12, 10, 0.6); font-family: var(--display); font-size: 220px; font-weight: 500; color: var(--cream); pointer-events: none; }
.countdown.on { display: grid; }
.countdown > div { text-align: center; line-height: 1; }
.countdown-cap { font-family: var(--display); font-weight: 300; font-size: 30px; color: var(--accent); margin-top: 18px; }
/* Pickup count-in: a cream badge under the lens, clear of the line to be read. */
.countdown.soft { background: none; place-items: start center; padding-top: 74px; font-size: 50px; color: var(--ink); }
.countdown.soft > div { display: flex; flex-direction: row-reverse; align-items: center; gap: 18px; background: var(--paper); border-radius: 999px; padding: 8px 30px; box-shadow: 0 14px 44px rgba(0, 0, 0, 0.6); }
.countdown.soft .countdown-cap { margin: 0; font-size: 24px; color: var(--accent-deep); }

/* ---------- speaker: welcome and checks (cream panel on walnut) ---------- */

.stage { min-height: 100vh; padding: 28px 44px 40px; display: flex; flex-direction: column; gap: 22px; }
.stage-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.paper-panel { flex: 1; background: var(--paper); color: var(--ink); border-radius: var(--r-panel); padding: 40px 52px; }

.welcome { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 34px; }
.welcome-step { width: 100%; max-width: 780px; display: flex; flex-direction: column; gap: 24px; animation: rise 0.25s ease-out; }
.welcome-step h1 { font-size: 56px; }
.welcome-step .lede { font-size: 19px; line-height: 1.5; color: var(--ink-soft); margin: 0; max-width: 58ch; }
.welcome-note { background: var(--paper-2); border-radius: var(--r-card); padding: 20px 24px; display: flex; flex-direction: column; gap: 6px; }
.welcome-note .serif-note { font-size: 24px; line-height: 1.3; }
.welcome-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 22px; counter-reset: step; }
.welcome-list li { display: flex; gap: 18px; align-items: flex-start; counter-increment: step; }
.welcome-list li::before { content: counter(step); flex: none; width: 36px; height: 36px; border-radius: 50%; background: var(--ink); color: var(--paper); display: grid; place-items: center; font: 500 16px var(--display); }
.welcome-list.ticks li::before { content: ''; background: var(--ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'%3E%3Cpath d='M8 14.5l4 4 8-9' fill='none' stroke='%23f3ead9' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 28px no-repeat; }
.welcome-list strong { display: block; font-size: 19px; font-weight: 500; }
.welcome-list span { display: block; font-size: 15px; color: var(--ink-muted); max-width: 60ch; }
.welcome-nav { width: 100%; max-width: 780px; display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.dots { flex: 1; display: flex; gap: 8px; min-width: 120px; }
.dots i { width: 28px; height: 6px; border-radius: 3px; background: var(--paper-line); display: block; transition: background 0.2s; }
.dots i.on { background: var(--ink); }

.checks { display: flex; flex-wrap: wrap; align-items: center; gap: 40px 56px; }
.checks-picture { flex: 999 1 520px; min-width: 0; display: flex; flex-direction: column; gap: 18px; }
.checks-list { flex: 1 1 400px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.checks-list h1 { margin-top: -8px; font-size: 40px; }
.framing { margin: 0; font-family: var(--display); font-weight: 300; font-size: 26px; line-height: 1.25; color: var(--ink); }
.framing.good { color: var(--ok-deep); }
.check-row { display: flex; align-items: flex-start; gap: 16px; }
.check-mark { flex: none; width: 28px; height: 28px; margin-top: 1px; border-radius: 50%; border: 2px solid var(--ink-line); display: block; position: relative; transition: background 0.2s, border-color 0.2s; }
.check-row[data-state='ok'] .check-mark { border-color: var(--ink); background: var(--ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'%3E%3Cpath d='M8 14.5l4 4 8-9' fill='none' stroke='%23f3ead9' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 28px no-repeat; }
.check-row[data-state='adjust'] .check-mark { border: 3px solid #b8730f; }
.check-row[data-state='adjust'] .check-mark::after { content: ''; position: absolute; inset: 5px; border-radius: 50%; background: #b8730f; }
.check-title { font-size: 18px; font-weight: 500; }
.check-sub { font-size: 14px; color: var(--ink-muted); }
.check-row .meter { margin-top: 8px; max-width: 260px; }
.check-row .seg { margin-top: 10px; }
.devices { border-top: 1px solid var(--paper-line); padding-top: 8px; }
.devices .fields { display: flex; flex-direction: column; gap: 12px; padding: 10px 0 4px; }
.check-count { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--display); font-size: 140px; color: var(--cream); background: rgba(15, 12, 10, 0.5); }
.check-prompt { font-family: var(--display); font-weight: 300; font-size: 26px; line-height: 1.3; color: var(--ink); margin: 0; }
.side-card { display: flex; flex-direction: column; gap: 16px; }
.error-line { color: #9c2b30; font-size: 14px; }

.rec-badge { display: none; align-items: center; gap: 10px; background: var(--rec); color: #fff; font-weight: 600; padding: 9px 18px; border-radius: 999px; font-size: 15px; white-space: nowrap; }
.rec-badge.on { display: inline-flex; }
.rec-badge .dot { background: #fff; animation: pulse 1.1s ease-in-out infinite; }
.frame .rec-badge { position: absolute; top: 14px; right: 14px; }

/* ---------- speaker: studio ---------- */

.studio { height: 100vh; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; background: var(--stage); }
.studio-head { display: flex; align-items: center; gap: 16px; padding: 16px 36px 6px; }
.studio-head .side { flex: 1; display: flex; align-items: center; gap: 14px; min-width: 0; }
.studio-head .side.end { justify-content: flex-end; }
.lens { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 13px; color: var(--accent); white-space: nowrap; }
.lens i { width: 10px; height: 10px; border-radius: 50%; background: var(--accent); display: block; }
.studio-prompter { position: relative; min-height: 0; }
.studio-prompter .prompter { position: absolute; inset: 0; }
.studio-prompter::before, .studio-prompter::after { content: ''; position: absolute; left: 0; right: 0; z-index: 4; pointer-events: none; }
.studio-prompter::before { top: 0; height: 60px; background: linear-gradient(var(--stage), rgba(15, 12, 10, 0)); }
.studio-prompter::after { bottom: 0; height: 80px; background: linear-gradient(rgba(15, 12, 10, 0), var(--stage)); }
.studio-foot { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 16px 28px; padding: 14px 36px 26px; }
.me { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; background: var(--band); border-radius: 48px; padding: 10px 18px 10px 10px; }
.me-view { flex: none; width: 76px; height: 76px; border-radius: 50%; overflow: hidden; background: #3a302a; }
.me-view video { width: 100%; height: 100%; object-fit: cover; display: block; }
.me-view.off video { visibility: hidden; }
.studio-mid { flex: 1 1 240px; min-width: 0; display: flex; flex-direction: column; gap: 8px; padding-bottom: 4px; }
.studio-mid .meter { max-width: 200px; height: 4px; }
.studio-status { display: flex; flex-wrap: wrap; gap: 6px; }
.upload-line { font-size: 14px; color: var(--muted); margin-bottom: 4px; }
#upload-wrap { max-width: 360px; }
/* The director's note sits at the top of the script, close to the lens, so a
   glance at it barely moves the speaker's eyes. */
.note-card { position: absolute; top: 2px; left: 50%; transform: translateX(-50%); z-index: 6; width: max-content; max-width: min(780px, 60%); background: var(--paper); color: var(--ink); border-radius: var(--r-card); padding: 12px 28px 16px; display: flex; flex-direction: column; gap: 4px; text-align: center; box-shadow: 0 14px 44px rgba(0, 0, 0, 0.6); }
.note-text { font-family: var(--display); font-weight: 400; font-size: 28px; line-height: 1.22; }
/* The pickup count-in uses the same spot for a few seconds. */
body:has(.countdown.soft.on) .note-card { visibility: hidden; }
/* The director's camera, when it is on: a circle at the top left, under the logo. */
.director-view { position: absolute; top: 4px; left: 36px; z-index: 6; width: 124px; height: 124px; border-radius: 50%; overflow: hidden; background: #3a302a; box-shadow: 0 0 0 4px var(--band); }
.director-view video { width: 100%; height: 100%; object-fit: cover; display: block; }
.me-view.small { width: 44px; height: 44px; }
.note-now { display: flex; align-items: center; gap: 12px; background: var(--walnut-3); border-radius: 16px; padding: 10px 14px; }
.note-now .serif-note { font-size: 17px; line-height: 1.3; color: var(--cream); }
.note-card.flash { animation: flash 1.4s ease-out; }
@keyframes flash { from { background: var(--accent); } }

/* ---------- pace ---------- */

.pace { display: flex; flex-direction: column; gap: 8px; }
.pace-segs { display: flex; gap: 8px; }
.pace-segs i { width: 34px; height: 6px; border-radius: 3px; background: var(--line-soft); display: block; transition: background 0.3s; }
.pace[data-zone='slow'] .pace-segs i:nth-child(1), .pace[data-zone='fast'] .pace-segs i:nth-child(3) { background: var(--warn); }
.pace[data-zone='good'] .pace-segs i:nth-child(2) { background: var(--ok); }
.pace-word { font-size: 16px; color: var(--cream-dim); min-height: 24px; }
.pace.big { gap: 6px; }
.pace-figure { font-size: 16px; font-weight: 500; color: var(--cream); display: flex; align-items: baseline; gap: 8px; }
.pace-figure .pace-num { font-family: var(--display); font-size: 30px; line-height: 1; }
.pace-track { position: relative; height: 8px; border-radius: 4px; background: var(--line-soft); margin: 4px 0; }
/* The middle band is the target, give or take 15% (the track spans 40% either way). */
.pace-zone { position: absolute; top: 0; bottom: 0; left: 31.25%; right: 31.25%; border-radius: 4px; background: #40623f; }
.pace-dot { position: absolute; top: 50%; left: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; background: var(--muted); transition: left 0.5s ease, background 0.3s; }
.pace[data-zone='good'] .pace-dot { background: var(--ok); }
.pace[data-zone='slow'] .pace-dot, .pace[data-zone='fast'] .pace-dot { background: var(--warn); }
.pace.big .pace-word { font-size: 14px; color: var(--cream-dim); min-height: 0; }

/* ---------- director ---------- */

.director { height: 100vh; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; }
.d-head { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 14px; padding: 16px 28px 12px; }
.d-head h1 { font-size: 22px; letter-spacing: -0.01em; }
.menu { position: relative; }
.menu > summary { border: 1.5px solid var(--line); border-radius: 999px; padding: 0 18px; min-height: 40px; color: var(--cream); font-weight: 500; }
.menu > summary::before { display: none; }
.menu-list { position: absolute; right: 0; top: 48px; z-index: 30; background: var(--paper); color: var(--ink); border-radius: 20px; padding: 14px; display: flex; flex-direction: column; gap: 8px; width: 300px; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5); }
.menu-list button, .menu-list .btn { color: var(--ink); border-color: var(--ink-line); justify-content: flex-start; }
.menu-list button:hover:not(:disabled), .menu-list .btn:hover { background: rgba(42, 33, 27, 0.06); border-color: var(--ink); }
.menu-list p { color: var(--ink-muted); font-size: 13px; margin: 0; padding: 0 6px 2px; }
.menu-list label { color: var(--ink-soft); }
.menu-list select { color: var(--ink); background: #fbf6ec; border-color: var(--paper-line); }
.menu.up .menu-list { top: auto; bottom: 66px; right: auto; left: 0; }

.d-main { display: flex; gap: 20px; padding: 4px 28px 14px; min-height: 0; }
.d-col { display: flex; flex-direction: column; gap: 16px; min-height: 0; overflow-y: auto; padding-bottom: 6px; scrollbar-width: thin; scrollbar-color: var(--line-soft) transparent; }
.d-left { flex: 1 1 300px; min-width: 250px; max-width: 360px; }
.d-center { flex: 999 1 560px; min-width: 0; }
.d-right { flex: 1 1 290px; min-width: 250px; max-width: 370px; }
@media (max-width: 1100px) { .d-main { flex-wrap: wrap; overflow-y: auto; } .d-col { overflow: visible; max-width: none; flex-basis: 100%; } }
.d-col > * { flex: none; }
/* The whole frame, uncropped, so the director can judge the edges. */
.portrait { position: relative; aspect-ratio: 16 / 9; border-radius: var(--r-card); overflow: hidden; background: #3a302a; }
.portrait video { width: 100%; height: 100%; object-fit: contain; display: block; }
.portrait .label { position: absolute; left: 14px; bottom: 12px; background: rgba(26, 20, 17, 0.82); border-radius: 999px; padding: 6px 14px; font-size: 14px; font-weight: 500; }
.portrait-tools { position: absolute; top: 10px; right: 10px; z-index: 2; display: flex; gap: 6px; }
.portrait-tools button { background: rgba(26, 20, 17, 0.82); border-color: transparent; min-height: 32px; padding: 0 12px; }
.portrait-tools button:hover:not(:disabled) { background: rgba(26, 20, 17, 0.95); border-color: var(--cream-dim); }
.portrait-tools button.on, .portrait-tools button.on:hover:not(:disabled) { background: var(--cream); color: var(--ink); }
/* Larger: the speaker column takes more of the console. */
.d-main.monitor-large .d-left { flex: 3 1 560px; max-width: 46%; }
/* Full view: the picture fills the window, over everything but toasts. */
.portrait.full { position: fixed; inset: 18px; z-index: 44; aspect-ratio: auto; background: var(--stage); box-shadow: 0 0 0 100vmax rgba(15, 12, 10, 0.94); }
.portrait .placeholder { position: absolute; inset: 0; display: grid; place-items: center; color: var(--cream-dim); text-align: center; padding: 24px; background: #3a302a; font-size: 16px; }
.kv { display: grid; grid-template-columns: auto 1fr; gap: 5px 14px; font-size: 14px; margin: 0; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; color: var(--cream); overflow-wrap: anywhere; }
.paper .kv dt { color: var(--ink-muted); }
.paper .kv dd { color: var(--ink); }
.book { padding: 22px 28px 20px; display: flex; flex-direction: column; gap: 14px; }
.tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.preview-prompter { height: 400px; border-radius: 16px; }
.preview-prompter[data-tool='stress'] .pr-w, .preview-prompter[data-tool='breath'] .pr-w, .preview-prompter[data-tool='smile'] .pr-w, .preview-prompter[data-tool='pause'] .pr-w { cursor: copy; }
.preview-prompter[data-tool='erase'] .pr-w { cursor: not-allowed; }
.preview-prompter[data-tool='edit'] .pr-w { cursor: text; }
.line-editor { background: var(--paper-2); border-radius: 18px; padding: 16px 18px; }
.line-editor textarea { margin-bottom: 10px; }
.book-note { font-size: 14px; color: var(--accent-deep); }
.sections { display: flex; flex-wrap: wrap; gap: 8px; }
.quick-tips { display: flex; flex-wrap: wrap; gap: 8px; }
.quick-tips button { white-space: normal; text-align: left; justify-content: flex-start; padding: 7px 14px; border-radius: 18px; line-height: 1.3; }
.settings { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 14px 24px; }
.changes { margin-top: 10px; max-height: 240px; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; }
.change .was { color: #e2a0a3; text-decoration: line-through; font-size: 14px; white-space: pre-wrap; }
.change .now { color: var(--ok); font-size: 14px; white-space: pre-wrap; }
.paper .change .was { color: #9c3a3e; }
.paper .change .now { color: var(--ok-deep); }

.take { background: var(--walnut-2); border-radius: 20px; padding: 16px 18px; }
.take + .take { margin-top: 12px; }
.take-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.take-head strong { font-size: 17px; font-weight: 500; }
.take-label { color: var(--cream-dim); font-size: 14px; margin-top: 2px; }
.take-files { margin-top: 8px; display: flex; flex-direction: column; gap: 8px; font-size: 14px; }
.take-file { display: flex; flex-direction: column; gap: 3px; }
.take-file .top { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.take-file .name { font-weight: 500; min-width: 58px; }
.take-file .detail { color: var(--cream-dim); line-height: 1.45; font-size: 13px; }
.star { color: var(--muted); border: 0; min-height: 32px; padding: 0 4px; background: none; font-size: 19px; line-height: 1; }
.star.on { color: var(--accent); background: none; }
.star:hover:not(:disabled), .star.on:hover:not(:disabled) { background: none; color: var(--accent); }
.keeper { font-size: 13px; font-weight: 500; color: var(--accent); }
.check-video { width: 100%; border-radius: 14px; background: #000; display: block; margin-top: 10px; }
.empty-note { border: 1.5px dashed var(--line); border-radius: 20px; padding: 18px 20px; color: var(--cream-dim); font-size: 14px; margin: 0; }

.d-dock { display: flex; justify-content: center; padding: 0 28px 18px; }
.dock { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; background: var(--walnut-2); border-radius: 40px; padding: 10px; max-width: 100%; }
.dock button { min-height: 56px; padding: 0 22px; }
.dock button.rec, .dock button.primary { padding: 0 28px; font: 600 17px var(--display); }
.dock .timer { font-family: var(--display); font-size: 24px; min-width: 76px; text-align: center; }
.dock input[type='text'] { width: 200px; min-height: 56px; border-radius: 999px; padding: 0 20px; background: var(--walnut-3); border-color: transparent; }
.dock .sep { width: 1px; align-self: stretch; background: var(--line-soft); margin: 6px 4px; }
.dock .menu > summary { min-height: 56px; border-color: transparent; color: var(--cream-dim); padding: 0 14px; }

/* ---------- rehearsal ---------- */

.rehearse { height: 100vh; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; background: var(--stage); }
.rehearse-foot { display: flex; justify-content: center; padding: 12px 28px 22px; }
.rehearse-foot .dock { background: var(--band); }
.rehearse-foot .dock button { min-height: 48px; padding: 0 16px; }
.rehearse-foot .dock button.primary { padding: 0 24px; }
.rehearse-foot .value { min-width: 78px; text-align: center; font-size: 14px; color: var(--cream-dim); }
.rehearse-foot .pace { flex-direction: row; align-items: center; gap: 12px; padding: 0 10px; }
.rehearse-foot .pace-word { font-size: 14px; min-height: 0; }
.rehearse-foot .group { display: flex; align-items: center; gap: 8px; }

/* ---------- sessions home and session record ---------- */

.home { max-width: 1120px; margin: 0 auto; padding: 36px 32px 80px; display: flex; flex-direction: column; gap: 30px; }
.home-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px; }
.home-head h1 { font-size: 52px; margin-top: 16px; }
.new-session { padding: 32px 36px; display: flex; flex-direction: column; gap: 18px; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 16px; }
.form-grid .wide { grid-column: 1 / -1; }
.session-group { display: flex; flex-direction: column; gap: 12px; }
.session-card { background: var(--walnut-2); border-radius: var(--r-card); padding: 20px 24px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; }
.session-card .when { flex: none; width: 132px; }
.session-card .when .day { font-family: var(--display); font-size: 22px; line-height: 1.15; }
.session-card .when .time { font-size: 14px; color: var(--cream-dim); }
.session-card .what { flex: 1 1 260px; min-width: 0; }
.session-card .what .title { font-size: 19px; font-weight: 500; }
.session-card .facts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.session-card .actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.session-card.past { background: transparent; border: 1.5px solid var(--line-soft); }
.linkbox { display: flex; gap: 8px; align-items: center; }
.linkbox input { font-size: 13px; }

.record { max-width: 1000px; margin: 0 auto; padding: 36px 32px 80px; display: flex; flex-direction: column; gap: 24px; }
.record .paper { padding: 36px 40px; display: flex; flex-direction: column; gap: 20px; }
.record h1 { font-size: 46px; }
.record-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(120px, 100%), 1fr)); gap: 18px; }
.record .check-video { max-width: 440px; }
.record-facts span { display: block; font-size: 13px; color: var(--ink-muted); }
.record-facts strong { font-family: var(--display); font-size: 24px; font-weight: 500; }
.timeline { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.timeline.card { padding: 8px 24px; }
.timeline li { display: flex; gap: 18px; padding: 11px 0; border-top: 1px solid var(--line-soft); font-size: 15px; }
.timeline li:first-child { border-top: 0; }
.timeline time { flex: none; width: 170px; color: var(--muted); font-size: 14px; }
.script-box { white-space: pre-wrap; font-size: 15px; line-height: 1.6; background: #fbf6ec; border-radius: 16px; padding: 18px 20px; max-height: 420px; overflow-y: auto; margin: 0; font-family: var(--sans); }

@media (max-width: 760px) {
  .stage { padding: 18px 16px 24px; }
  .paper-panel { padding: 28px 22px; }
  .welcome-step h1 { font-size: 40px; }
  h1, .home-head h1, .record h1 { font-size: 36px; }
}