/* ==========================================================================
   Studio (/app/studio) — 9/24 redesign, Billy's picks: 5A for setup, 3B for recording.
   SETUP: a stepper (Pair phone · Angle · Light · Record), then one stage card with three columns — the live camera
   (HUD above it), the step card (example angle + live checklist) and Remy as a coach (speech bubble + Start recording).
   RECORDING: calm focus — Remy large with his current line as a big caption and the turn cue as a big chip; the camera
   becomes a card on the right with the REC clock over it. Plan + transcript are rows below in both.
   THE RECORDING CONTROLS (9/26): Start recording / ● Recording + End recording live in the top bar, which is pinned
   (sticky) — the phone films them from beside the screen with its back camera facing them, so every control is here, always in view.
   Loaded after app.css (tokens + the shared .phone-frame / .frame-guide / .orb rules live there).
   ========================================================================== */

.app-main:has(> .studio){ padding: var(--s-5) clamp(24px, 3vw, 48px) var(--s-6); }
.studio{
  --remy: #a992ff;
  --remy-line: rgba(155,92,255,.55);
  --remy-glow: rgba(155,92,255,.4);
  /* the camera frame is 9:16 (the phone films portrait): its height sets its width. Tall windows keep the plan +
     transcript rows on screen too; short laptops give the frame the room and the rows sit below the fold. */
  --frame-h: clamp(300px, calc(100vh - 610px), 620px);
  --frame-w: calc(var(--frame-h) * 9 / 16);
  max-width: 1560px;
}
@media (max-height: 959px){ .studio{ --frame-h: clamp(260px, calc(100vh - 300px), 620px); } }
.studio[data-phase]:not([data-phase="setup"]){ --frame-h: clamp(420px, calc(100vh - 560px), 640px); }
@media (max-height: 959px){ .studio[data-phase]:not([data-phase="setup"]){ --frame-h: clamp(420px, calc(100vh - 200px), 640px); } }

.studio .studio-topbar{ margin-bottom: var(--s-2); }
.studio .studio-title-row{ display:flex; align-items:center; gap: var(--s-3); }

/* ---------------------------------------------------------------- the recording controls (pinned top bar) */
/* Billy, 9/26: "every button that I need to press to start recording, stop recording, etc., needs to be visible on the
   computer screen. And it needs to be very clear when you click it." Sticky at the top of the window (the page scrolls
   under it), so it's never below the fold on a laptop and nothing (the big caption, the cue) ever covers it. */
.studio .studio-topbar{ position: sticky; top: 0; z-index: 40; align-items: center; row-gap: var(--s-2);
  margin-top: calc(-1 * var(--s-3)); padding: var(--s-3) 0; background: var(--bg); box-shadow: 0 16px 18px -18px rgba(0,0,0,.95); }
.studio .studio-title{ display:flex; flex-direction:column; gap: 4px; min-width: 0; }
.studio .rec-dock{ display:flex; align-items:center; justify-content:flex-end; gap: var(--s-4); margin-left:auto; min-width:0; }
.studio .rec-dock .rec-hint{ margin:0; max-width: 30ch; text-align:right; font-size:.92rem; line-height:1.35; color: var(--ink-dim); }
.studio .rec-dock .rec-hint[data-tone="alert"]{ max-width: 30ch; color: #ffb4ab; font-weight:600; font-size: 1.02rem; }
/* mid-recording, leaving for onboarding would stop the camera: the founder "Just talk instead" link is for setup only */
.studio[data-phase]:not([data-phase="setup"]) .studio-title-row .btn-ghost{ display:none; }
.studio .rec-live{ display:inline-flex; align-items:center; gap: 12px; min-height: 60px; padding: 0 24px; flex:none; border-radius: var(--radius-pill);
  border: 1.5px solid var(--rec); background: rgba(255,75,62,.16); color: var(--ink); font-weight:700; font-size: 1.2rem; white-space:nowrap; }
.studio .rec-live-dot{ width:18px; height:18px; border-radius:50%; background: var(--rec); flex:none; animation: rec-live-pulse 1.2s ease-in-out infinite; }
.studio .rec-live-time{ font-weight:500; font-variant-numeric: tabular-nums; }
.studio .rec-live[data-state="lost"]{ border-color: var(--amber); background: var(--amber-dim); }
.studio .rec-live[data-state="lost"] .rec-live-dot{ background: var(--amber); animation:none; }
@keyframes rec-live-pulse{ 0%,100%{ opacity:1; box-shadow: 0 0 0 0 var(--rec-glow); } 50%{ opacity:.45; box-shadow: 0 0 0 9px transparent; } }
@media (prefers-reduced-motion: reduce){ .studio .rec-live-dot{ animation:none; } }
.studio .record-btn, .studio .end-btn{ flex:none; min-height: 60px; padding: 0 var(--s-6); gap: 12px; font-size: 1.2rem; border-radius: var(--radius-lg); }
.studio .record-btn{ min-width: 250px; box-shadow: 0 16px 40px -14px var(--rec-glow); }
.studio .record-btn-dot{ width:16px; height:16px; border-radius:50%; background: #fff9f7; flex:none; }
.studio .record-btn[disabled]:not([aria-busy]){ opacity:.4; box-shadow:none; }
/* busy ("Starting…", "Ending…", "Saving from your phone…") is not unavailable: it stays fully legible */
.studio .record-btn[aria-busy], .studio .end-btn[aria-busy]{ opacity:1; cursor: progress; }
.studio .record-btn .spinner, .studio .end-btn .spinner{ width:20px; height:20px; }
/* End recording: filled (never an outline), light on the dark page so it reads apart from the red Recording light */
.studio .end-btn{ min-width: 230px; background: var(--ink); border-color: var(--ink); color: #15141b; box-shadow: 0 16px 40px -18px rgba(244,239,230,.35); }
.studio .end-btn:hover:not([disabled]){ background: #fffaf2; }
.studio .end-btn-square{ width:16px; height:16px; border-radius:3px; background: var(--rec); flex:none; }
.studio .end-btn[aria-busy]{ background: var(--bg-raised); border-color: var(--line-strong); color: var(--ink); box-shadow:none; }
/* before Remy has joined, "Start with Remy" leads and recording is the quieter option */
.studio:has(#start-btn:not([hidden])) .rec-dock[data-rec="idle"] .record-btn{ background: transparent; border-color: var(--line-strong); color: var(--ink); box-shadow:none; }
.studio:has(#start-btn:not([hidden])) .rec-dock[data-rec="idle"] .record-btn-dot{ background: var(--rec); }
/* narrower desktops: the title gives way, the controls keep their size */
@media (max-width: 1279px){
  .studio .rec-dock .rec-hint{ max-width: 22ch; font-size:.86rem; }
  .studio .record-btn{ min-width: 220px; padding: 0 var(--s-5); }
  .studio .end-btn{ min-width: 210px; padding: 0 var(--s-5); }
  .studio .rec-live{ padding: 0 18px; }
}
@media (max-width: 1023px){ .studio .rec-dock{ display:none; } }
/* toasts open at the top right, right where the controls are: in the studio they rise from the bottom instead */
body:has(.studio) .toast-stack{ top:auto; bottom: var(--s-5); }

/* ---------------------------------------------------------------- stepper */
.studio .studio-steps{ display:flex; align-items:stretch; margin: 0 0 var(--s-4); padding-left: clamp(0px, 8vw, 110px); border-bottom: 1px solid var(--line); counter-reset: none; }
.studio .studio-step{ flex: 1 1 0; display:flex; align-items:center; min-width:0; color: var(--ink-dim); }
.studio .studio-step::after{ content:''; flex: 1 1 auto; height:1px; background: var(--line-strong); margin: 0 var(--s-4); min-width: 16px; }
.studio .studio-step-head{ display:inline-flex; align-items:center; gap: var(--s-3); padding: var(--s-3) 0; margin-bottom:-1px; border-bottom: 3px solid transparent; white-space:nowrap; font-weight:500; }
.studio .studio-step-n{ width:34px; height:34px; border-radius:50%; flex:none; display:grid; place-items:center; border:1.5px solid var(--line-strong);
  background: var(--bg-raised); color: var(--ink); font-size:.95rem; font-weight:600; transition: background-color .3s var(--ease), border-color .3s var(--ease); }
.studio .studio-step-n svg{ display:none; }
.studio .studio-step[data-state="current"]{ color: var(--rec); }
.studio .studio-step[data-state="current"] .studio-step-head{ border-bottom-color: var(--rec); }
.studio .studio-step[data-state="current"] .studio-step-n{ background: var(--rec); border-color: var(--rec); color: #fff9f7; box-shadow: 0 6px 20px -8px var(--rec-glow); }
.studio .studio-step[data-state="done"]{ color: var(--ink); }
.studio .studio-step[data-state="done"] .studio-step-n{ background: var(--sage); border-color: var(--sage); color: var(--sage-ink); }
.studio .studio-step[data-state="done"] .studio-step-n .num{ display:none; }
.studio .studio-step[data-state="done"] .studio-step-n svg{ display:block; }
.studio[data-phase]:not([data-phase="setup"]) .studio-steps{ display:none; }
@media (max-width: 1023px){ .studio .desktop-only-note ~ .studio-steps{ display:none; } }

/* ---------------------------------------------------------------- the stage */
.studio .studio-stage{ display:grid; grid-template-columns: auto minmax(0, 1.1fr) minmax(0, 1fr); grid-template-areas: "cam step coach";
  background: var(--bg-raised); border:1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); }
.studio .studio-stage > *{ min-width:0; padding: var(--s-5); }
.studio .cam-col{ grid-area: cam; }
.studio .step-col{ grid-area: step; border-left:1px solid var(--line); border-right:1px solid var(--line); }
.studio .coach-col{ grid-area: coach; }

/* camera column: status + HUD tools above the frame (setup), the pairing code below */
.studio .cam-col{ display:flex; flex-direction:column; align-items:center; gap: var(--s-3); width: calc(max(var(--frame-w), 300px) + 2 * var(--s-5)); }
.studio .phone-frame{ width: var(--frame-w); min-width:0; margin:0; flex:none; }
.studio .frame-hud{ align-self:stretch; display:flex; align-items:center; justify-content:space-between; gap: var(--s-2); z-index:3; }
.studio .frame-hud-tools{ display:flex; gap: 6px; flex:none; }
.studio .frame-hud .btn-icon{ width:38px; min-height:38px; border-radius: var(--radius-sm); background: rgba(15,14,19,.55); border:1px solid var(--line-strong);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); color: var(--ink-dim); }
.studio .frame-hud .btn-icon:hover{ color: var(--ink); background: rgba(15,14,19,.75); }
.studio .frame-hud .btn-icon[aria-pressed="true"]{ color: var(--rec); border-color: rgba(255,75,62,.6); }
.studio .frame-hud .btn-icon svg{ display:block; }
.studio .cam-status, .studio .rec-clock{ display:inline-flex; align-items:center; gap: 8px; min-width:0; min-height:36px; padding: 0 14px; border-radius: var(--radius-pill);
  font-size:.88rem; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; border:1px solid var(--line-strong); color: var(--ink-dim); background: rgba(15,14,19,.55); }
.studio .cam-status::before{ content:''; width:9px; height:9px; border-radius:50%; background: var(--ink-faint); flex:none; }
.studio .cam-status[data-state="ok"]{ color: var(--sage); border-color: rgba(143,184,168,.6); background: rgba(143,184,168,.08); }
.studio .cam-status[data-state="ok"]::before{ background: #5fd08f; box-shadow: 0 0 10px rgba(95,208,143,.7); }
.studio .cam-status[data-state="rec"]::before{ background: var(--rec); }
.studio .rec-clock{ background: var(--rec); border-color: var(--rec); color: #fff9f7; letter-spacing:.04em; box-shadow: 0 8px 24px -10px var(--rec-glow); }
.studio .rec-clock .rec-dot{ background: #fff9f7; width:10px; height:10px; }
.studio .rec-clock .mono{ font-weight:500; }
.studio[data-phase="recording"] .cam-status{ display:none; }
.studio .pair-card{ margin:0; font-size:.9rem; }
.studio .pair-card .mono{ font-size:1rem; color: var(--ink); }

/* step column */
.studio .step-col{ display:flex; flex-direction:column; gap: var(--s-3); }
.studio .step-count{ font-size:.85rem; color: var(--ink-dim); }
.studio .step-title{ font-family: var(--font-ui); font-weight:600; font-size: clamp(1.45rem, 1rem + 1vw, 2rem); letter-spacing:-.015em; line-height:1.15; }
.studio .step-lede{ color: var(--ink); opacity:.86; font-size: clamp(.98rem, .9rem + .25vw, 1.1rem); line-height:1.45; max-width: 40ch; }
.studio .angle-card{ display:flex; gap: var(--s-4); align-items:center; margin: var(--s-2) 0 0; padding: var(--s-3); border-radius: var(--radius-md);
  border:1px solid var(--line-strong); background: rgba(15,14,19,.35); }
.studio .angle-diagram{ width: 132px; }
.studio .angle-title{ font-weight:600; font-size:.98rem; color: var(--ink); }
.studio .angle-copy p{ font-size:.88rem; color: var(--ink-dim); line-height:1.45; }
.studio .check-list{ margin-top: var(--s-2); padding: var(--s-1) var(--s-4); border-radius: var(--radius-md); border:1px solid var(--line-strong); background: rgba(15,14,19,.35); }
.studio .check-row{ display:flex; gap: var(--s-3); align-items:flex-start; padding: var(--s-3) 0; }
/* the Microphone control (docs/AUDIO-SOURCE.md §4): setup only — the step column is hidden once the camera rolls */
.studio .mic-field{ margin-top: var(--s-2); max-width: 44ch; }
.studio .mic-field .field-label{ margin-bottom: var(--s-1); }
.studio .mic-field .field-help{ line-height:1.4; }
.studio .mic-field[hidden]{ display:none; }
/* the filming style (Script mode, docs/SCRIPT-AND-DELIVERY.md §2): two cards side by side, one of them picked */
.studio .film-mode{ margin-top: var(--s-2); max-width: 44ch; }
.studio .film-mode[hidden]{ display:none; }
.studio .film-mode .field-label{ display:block; margin-bottom: var(--s-1); }
.studio .film-mode-options{ display:grid; grid-template-columns: 1fr 1fr; gap: var(--s-2); }
.studio .film-mode-option{ display:flex; flex-direction:column; align-items:flex-start; gap: 4px; text-align:left; padding: 12px 14px; border-radius: 14px;
  border: 1.5px solid var(--line-strong); background: var(--bg-raised); color: var(--ink); cursor:pointer; font: inherit; transition: border-color .2s var(--ease), background-color .2s var(--ease); }
.studio .film-mode-option:hover{ border-color: var(--ink-faint); }
.studio .film-mode-option:focus-visible{ outline: 2px solid var(--sage); outline-offset: 2px; }
.studio .film-mode-option[aria-checked="true"]{ border-color: var(--sage); background: linear-gradient(rgba(143,184,168,.12), rgba(143,184,168,.12)), var(--bg-raised); }
.studio .film-mode-name{ font-weight:700; }
.studio .film-mode-sub{ font-size:.82rem; line-height:1.35; color: var(--ink-dim); }
.studio .film-mode-pill{ display:inline-flex; }
.studio .check-row + .check-row{ border-top:1px solid var(--line); }
.studio .check-mark{ width:26px; height:26px; border-radius:50%; flex:none; display:grid; place-items:center; border:1.5px solid var(--ink-dim); margin-top:1px; transition: background-color .3s var(--ease), border-color .3s var(--ease); }
.studio .check-row[data-status="ok"] .check-mark{ background: #5fd08f; border-color: #5fd08f; color: #0d1b16; }
.studio .check-row[data-status="fix"] .check-mark{ border-color: var(--amber); box-shadow: inset 0 0 0 4px rgba(224,167,94,.16); color: var(--amber); font-weight:700; font-size:.9rem; line-height:1; }
.studio .check-copy{ display:flex; flex-direction:column; gap: 2px; min-width:0; }
.studio .check-label{ font-weight:500; color: var(--ink); }
.studio .check-sub{ font-size:.86rem; color: var(--ink-dim); line-height:1.4; }
.studio .check-row[data-status="fix"] .check-sub{ color: #edc591; }

/* coach column: Remy, his speech bubble (what he wants right now), Start recording */
.studio .coach-col{ display:flex; flex-direction:column; align-items:center; text-align:center; gap: var(--s-3); padding-top: var(--s-4); }
.studio .session-orb{ margin:0; }
.studio .orb--lg{ --orb-size: clamp(118px, 19vh, 200px); }
.studio .coach-bubble{ position:relative; width:100%; max-width: 380px; margin-top: 6px; padding: var(--s-4) var(--s-5); border-radius: var(--radius-md);
  border:1px solid var(--remy-line); background: linear-gradient(180deg, rgba(155,92,255,.10), rgba(155,92,255,.03)), var(--bg-sunken);
  box-shadow: 0 0 34px -10px var(--remy-glow), inset 0 0 22px -14px var(--remy-glow); }
.studio .coach-bubble::before{ content:''; position:absolute; top:-8px; left: calc(50% - 7px); width:14px; height:14px; transform: rotate(45deg);
  background: rgb(33,27,50); border-left:1px solid var(--remy-line); border-top:1px solid var(--remy-line); }
.studio .session-status{ margin:0; font-weight:600; font-size: clamp(1.02rem, .9rem + .35vw, 1.2rem); color: var(--ink); }
.studio .session-sub{ margin-top: 6px; font-size: .98rem; line-height:1.45; color: rgba(244,239,230,.82); max-width:none; }
.studio .coach-name{ font-size:.85rem; color: var(--ink-faint); margin-top: -4px; }
.studio .coach-actions{ display:flex; flex-direction:column; align-items:center; gap: var(--s-3); width:100%; margin-top: var(--s-3); }
.studio .start-btn{ width: min(100%, 320px); }
.studio .focus-eyebrow, .studio .remy-caption{ display:none; }
.studio[data-phase="setup"] .turn-cue{ display:none; }
.studio .uploading-note{ width:100%; max-width: 420px; padding: var(--s-4); border-radius: var(--radius-md); border:1px solid var(--line); background: var(--bg-sunken); }

/* "Show it" (Founder decision 9/27): the "Show something" control — visible only while recording, never during
   setup (CSS-gated on the phase attribute, like the other recording-only controls above). */
.studio .show-it-bar{ display:none; }
.studio[data-phase="recording"] .show-it-bar{ display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap: var(--s-3); width:100%; padding: var(--s-2); border-radius: var(--radius-md); transition: background .3s var(--ease), box-shadow .3s var(--ease); }
.studio .show-media-label input[type="file"]{ position:absolute; width:1px; height:1px; opacity:0; }
.studio .show-it-status{ font-size:.95rem; color: var(--ink); display:inline-flex; align-items:center; flex-wrap:wrap; justify-content:center; gap: var(--s-3); }
/* Billy 9/26: every control on the computer is obvious and clearly changes state — full-size buttons, and a live pill while
   sharing (sage, not the recording red, so the two states never read as one) */
.studio .show-it-label{ width:100%; text-align:center; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color: var(--ink-dim); }
.studio .show-it-btn{ min-height:44px; display:inline-flex; align-items:center; gap:8px; }
.studio .show-it-btn svg{ width:18px; height:18px; fill:none; stroke: currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; flex:none; }
.studio .show-live{ display:inline-flex; align-items:center; gap:10px; min-height:44px; padding: 0 18px; border-radius: var(--radius-pill); border:1px solid var(--sage, #8fb8a8); background: var(--sage-dim, rgba(143,184,168,.15)); font-weight:600; }
.studio .show-live .mono{ font-variant-numeric: tabular-nums; font-weight:500; }
.studio .show-live-dot{ width:12px; height:12px; border-radius:50%; background: var(--sage, #8fb8a8); flex:none; animation: rec-live-pulse 1.2s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce){ .studio .show-live-dot{ animation:none; } }
.studio .show-it-status .link-btn{ background:none; border:0; padding:0; margin:0; font:inherit; color: var(--accent, var(--ink)); text-decoration: underline; cursor:pointer; }
/* Remy asking for it (slice 2): the control highlights and shows his exact ask while the "show" checklist item is the
   one live right now — drops the moment it's covered or he moves on (web/js/app/studio.js renderShowAsk). */
.studio .show-it-bar.show-it-bar--active{ background: var(--sage-dim); box-shadow: 0 0 0 1px rgba(143,184,168,.4); }
.studio .show-it-ask{ width:100%; text-align:center; font-size:.92rem; color: var(--sage, var(--ink)); font-weight:600; }

/* ---------------------------------------------------------------- recording (3B): Remy centre stage, camera card right */
.studio[data-phase]:not([data-phase="setup"]) .studio-stage{ grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "coach cam";
  background:none; border:0; box-shadow:none; gap: var(--s-6); }
.studio[data-phase]:not([data-phase="setup"]) .step-col{ display:none; }
.studio[data-phase]:not([data-phase="setup"]) .studio-stage > *{ padding: 0; }
.studio[data-phase]:not([data-phase="setup"]) .cam-col{ width:auto; align-self:start; }
.studio[data-phase]:not([data-phase="setup"]) .cam-col .phone-frame{ border-radius: var(--radius-md); }
.studio[data-phase]:not([data-phase="setup"]) .cam-col{ position:relative; padding: 8px; border-radius: calc(var(--radius-md) + 8px); border:1px solid var(--line-strong);
  background: var(--bg-raised); box-shadow: var(--shadow-card); gap: 0; }
.studio[data-phase]:not([data-phase="setup"]) .frame-hud{ position:absolute; top: 18px; left: 18px; right: 18px; align-items:flex-start; }
/* the camera card is narrow (portrait): the tools stack down the right edge so the REC clock keeps the top row */
.studio[data-phase]:not([data-phase="setup"]) .frame-hud-tools{ flex-direction:column; }
.studio[data-phase]:not([data-phase="setup"]) .frame-hud .btn-icon{ width:36px; min-height:36px; }
.studio[data-phase]:not([data-phase="setup"]) .pair-card{ position:absolute; left:0; right:0; top: calc(100% + 10px); }
.studio[data-phase]:not([data-phase="setup"]) .cam-col:has(> .pair-card:not([hidden])){ margin-bottom: 36px; }
.studio[data-phase]:not([data-phase="setup"]) .coach-col{ justify-content:flex-start; align-self:stretch; gap: var(--s-3); padding: 0 0 var(--s-2); }
.studio[data-phase]:not([data-phase="setup"]) .orb--lg{ --orb-size: clamp(150px, 27vh, 300px); }
.studio[data-phase="recording"] .coach-bubble{ display:none; }
.studio[data-phase]:not([data-phase="setup"]) .coach-bubble::before{ display:none; }
.studio[data-phase]:not([data-phase="setup"]) .coach-name{ margin-top: -2px; }
.studio[data-phase="recording"] .focus-eyebrow{ display:block; font-family: var(--font-mono); font-size:.76rem; letter-spacing:.1em; text-transform:uppercase; color: var(--ink-faint);
  max-width: 52ch; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.studio .focus-eyebrow .session-topic:not([hidden]) + .rec-status{ display:none; }
.studio[data-phase="recording"] .remy-caption{ display:block; max-width: 30ch; font-size: clamp(1.35rem, .85rem + 1.25vw, 2.1rem); line-height:1.25; font-weight:500;
  letter-spacing:-.01em; color: var(--ink); text-wrap: balance; min-height: 2.5em; }
.studio[data-phase="recording"] .remy-caption[data-kind="note"]{ font-size: clamp(1.05rem, .9rem + .4vw, 1.3rem); color: var(--ink-dim); font-weight:400; max-width: 40ch; }
/* Script mode: the canonical line, the words to hit in bold, and how to say it under it */
.studio[data-phase="recording"] .remy-caption[data-kind="script"] strong{ font-weight:800; color: var(--rec); }
.studio .script-chip{ display:none; }
.studio[data-phase="recording"] .script-chip:not([hidden]){ display:inline-block; margin-top: var(--s-1); padding: 4px 12px; border-radius: var(--radius-pill); border: 1px solid var(--line-strong);
  font-family: var(--font-mono); font-size:.8rem; letter-spacing:.06em; text-transform: uppercase; color: var(--ink-dim); }
/* the cue: the one big thing to act on */
.studio .turn-cue{ margin: var(--s-2) 0 0; display:inline-flex; align-items:center; justify-content:center; gap: 14px; min-height: 64px; min-width: min(100%, 340px); padding: 0 var(--s-6);
  border-radius: var(--radius-pill); font-weight:700; font-size: 1.2rem; letter-spacing:.07em; text-transform: uppercase; border: 1.5px solid var(--line-strong);
  background: var(--bg-raised); color: var(--ink); transition: background-color .25s var(--ease), border-color .25s var(--ease), box-shadow .25s var(--ease); }
.studio .turn-cue svg{ flex:none; width:26px; height:26px; }
.studio .turn-cue[data-mode="say"]{ background: var(--rec); border-color: var(--rec); color: #fff9f7; box-shadow: 0 18px 44px -14px var(--rec-glow); }
.studio .turn-cue[data-mode="ask"]{ background: linear-gradient(rgba(143,184,168,.13), rgba(143,184,168,.13)), var(--bg-raised); border-color: var(--sage); color: var(--ink); box-shadow: 0 14px 40px -18px var(--sage-glow); }
.studio .turn-cue[data-mode="ask"] svg{ color: var(--sage); }
.studio .turn-cue[data-mode="repeat"]{ background: var(--rec); border-color: var(--rec); color: #fff9f7; box-shadow: 0 18px 44px -14px var(--rec-glow); }
@media (prefers-reduced-motion: no-preference){
  .studio .turn-cue:not([hidden]){ animation: cue-in .35s var(--ease); }
}
@keyframes cue-in{ from{ transform: scale(.96); opacity:.4; } to{ transform:none; opacity:1; } }
.studio[data-phase]:not([data-phase="setup"]) .coach-actions{ margin-top: var(--s-1); }
/* after the wrap: the status reads as a plain card (no bubble tail) with the upload progress */
.studio[data-phase="uploading"] .coach-bubble, .studio[data-phase="done"] .coach-bubble{ border-color: var(--line-strong); box-shadow:none; background: var(--bg-raised); }

/* ---------------------------------------------------------------- "Here's what I heard" (setup only, full width) */
.studio .heard-card{ grid-column: 1 / -1; }
.studio .heard-card[hidden], .studio[data-phase]:not([data-phase="setup"]) .heard-card{ display:none; }
.studio .heard-facts{ display:grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--s-3) var(--s-5); margin: var(--s-3) 0 0; }
.studio .heard-fact{ min-width:0; }
.studio .heard-fact--wide{ grid-column: 1 / -1; }
.studio .heard-fact dt{ font-size:.78rem; color: var(--ink-faint); text-transform:uppercase; letter-spacing:.06em; }
.studio .heard-fact dd{ margin: 2px 0 0; font-size:.9rem; line-height:1.45; color: var(--ink); overflow-wrap:anywhere; }
.studio .heard-unknown{ margin-top: var(--s-3); font-size:.85rem; color: var(--ink-dim); }
.studio .heard-form{ display:grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--s-3) var(--s-4); margin-top: var(--s-3); }
.studio .heard-actions{ grid-column: 1 / -1; }

/* ---------------------------------------------------------------- rows: what you'll talk about + live transcript */
.studio .studio-rows{ display:grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: var(--s-4); margin-top: var(--s-4); align-items:stretch; }
.studio[data-phase]:not([data-phase="setup"]) .studio-rows{ margin-top: var(--s-4); }
.studio .studio-rows > .card{ padding: var(--s-4) var(--s-5); display:flex; flex-direction:column; min-width:0; }
.studio .row-head{ display:flex; justify-content:space-between; align-items:flex-start; gap: var(--s-3); padding-bottom: var(--s-3); border-bottom:1px solid var(--line); }
.studio .row-sub{ font-size:.85rem; color: var(--ink-dim); margin-top: 2px; }
.studio .plan-progress{ font-size:.85rem; color: var(--ink-dim); white-space:nowrap; padding-top: 2px; }
.studio .plan-list{ display:flex; flex-direction:column; max-height: 232px; overflow-y:auto; }
.studio .plan-row{ display:flex; align-items:center; gap: var(--s-4); padding: 10px var(--s-2); border-radius: var(--radius-sm); }
.studio .plan-row + .plan-row{ border-top: 1px solid var(--line); }
.studio .plan-mark{ width:34px; height:34px; border-radius:50%; flex:none; display:grid; place-items:center; font-weight:600; font-size:.95rem;
  background: rgba(244,239,230,.07); border:1px solid var(--line-strong); color: var(--ink); }
.studio .plan-mark svg{ display:none; }
.studio .plan-copy{ min-width:0; flex:1; }
.studio .plan-title{ font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.studio .plan-sub{ font-size:.82rem; color: var(--ink-dim); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; margin-top:1px; }
.studio .plan-ref{ flex:none; padding: 0 var(--s-3); color: var(--ink-dim); }
.studio[data-phase]:not([data-phase="setup"]) .plan-mark{ background:none; border:2px solid var(--ink-faint); width:28px; height:28px; margin: 0 3px; }
.studio[data-phase]:not([data-phase="setup"]) .plan-mark .num{ display:none; }
.studio .plan-row[data-status="done"] .plan-mark{ background: #5fd08f; border-color: #5fd08f; color: #0d1b16; }
.studio .plan-row[data-status="done"] .plan-mark .num{ display:none; }
.studio .plan-row[data-status="done"] .plan-mark svg{ display:block; }
.studio .plan-row[data-status="current"]{ background: rgba(244,239,230,.05); border-top-color: transparent; }
.studio .plan-row[data-status="current"] + .plan-row{ border-top-color: transparent; }
.studio .plan-row[data-status="current"] .plan-mark{ border-color: var(--rec); box-shadow: inset 0 0 0 5px var(--bg-raised), inset 0 0 0 12px var(--rec); }
.studio .transcript-state{ display:inline-flex; align-items:center; gap: 8px; font-size:.85rem; color: var(--ink-dim); white-space:nowrap; padding-top: 2px; }
.studio .transcript-state::before{ content:''; width:8px; height:8px; border-radius:50%; background:#5fd08f; }
.studio .transcript-state[data-state="rec"]{ color: var(--rec); }
.studio .transcript-state[data-state="rec"]::before{ background: var(--rec); animation: rec-pulse 1.1s ease-in-out infinite; }
.studio .transcript-state[data-state="done"]::before{ background: var(--ink-faint); }
.studio .transcript-card .transcript{ flex:1; max-height: 232px; min-height: 150px; margin-top: var(--s-3); padding-right: 4px; gap: var(--s-3); }
/* Billy's rule (handoff 3.4, 9/25): while the camera rolls, nothing on screen shows Remy's "Say this your way" line once
   it's their turn — the big caption hides, and so does the transcript (it would sit there readable on any tall screen).
   The card collapses to a note; everything is back once the recording stops. */
.studio .transcript-hidden-note{ display:none; }
.studio[data-phase="recording"] .transcript-card .transcript{ display:none; }
.studio[data-phase="recording"] .transcript-hidden-note{ display:block; margin-top: var(--s-3); font-size:.88rem; color: var(--ink-dim); }
.studio .transcript-empty{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap: var(--s-3); text-align:center; color: var(--ink-faint);
  font-size:.9rem; border:1px solid var(--line); border-radius: var(--radius-md); background: rgba(15,14,19,.3); padding: var(--s-5); }
.studio .transcript-card .transcript-line{ gap: var(--s-4); }
.studio .transcript-card .transcript-line .who{ font-family: var(--font-ui); font-size:.92rem; text-transform:none; letter-spacing:0; width: 4.2em; text-align:left; padding-top:0; color: var(--ink); }
.studio .transcript-card .transcript-line--agent .who{ color: var(--remy); }
.studio .transcript-card .transcript-line .text{ font-size:.95rem; color: var(--ink); }
.studio .transcript-card .transcript-line--agent .text{ color: var(--ink-dim); }

/* ---------------------------------------------------------------- narrower desktops (1024–1279) */
@media (max-width: 1279px){
  .studio .studio-stage{ grid-template-columns: auto minmax(0, 1fr) minmax(0, .95fr); }
  .studio .studio-stage > *{ padding: var(--s-4); }
  .studio .cam-col{ width: calc(max(var(--frame-w), 256px) + 2 * var(--s-4)); }
  .studio .studio-steps{ padding-left: 0; }
}

/* memory joggers on a say-it-your-way turn: key words to remember, not the line to read */
.studio .remy-bullets{ display:none; }
.studio[data-phase="recording"] .remy-bullets:not([hidden]){ display:flex; flex-direction:column; gap: 10px; margin: 14px 0 0; padding:0; list-style:none; max-width: 36ch; text-align:left; }
.studio[data-phase="recording"] .remy-bullets li{ position:relative; padding: 10px 14px 10px 36px; border-radius: 12px; background: var(--bg-raised); border: 1px solid var(--line-strong);
  font-size: clamp(1.05rem, .9rem + .45vw, 1.35rem); font-weight: 600; line-height: 1.3; color: var(--ink); }
.studio[data-phase="recording"] .remy-bullets li::before{ content:''; position:absolute; left: 15px; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%; background: var(--rec); }