/* ==========================================================================
   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.
   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); }

/* ---------------------------------------------------------------- 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-photo{ width: 112px; aspect-ratio: 4/3; border-radius: var(--radius-sm); }
.studio .angle-photo img{ object-position: 35% 45%; }
.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; }
.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 .record-btn{ width: min(100%, 320px); min-height: 60px; padding: 0 var(--s-6); font-size: 1.2rem; border-radius: var(--radius-lg);
  box-shadow: 0 16px 40px -14px var(--rec-glow); gap: 14px; }
.studio .record-btn-dot{ width:16px; height:16px; border-radius:50%; background: #fff9f7; flex:none; }
.studio .record-btn[disabled]{ opacity:.4; box-shadow:none; }
.studio .start-btn{ width: min(100%, 320px); }
/* before Remy has joined, "Start with Remy" leads and recording is the quieter option */
.studio .coach-actions:has(#start-btn:not([hidden])) .record-btn{ background: transparent; border-color: var(--line-strong); color: var(--ink); box-shadow:none; min-height:48px; font-size:1rem; }
.studio .coach-actions:has(#start-btn:not([hidden])) .record-btn-dot{ background: var(--rec); width:12px; height:12px; }
.studio .rec-hint{ font-size:.9rem; color: var(--ink-dim); }
.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); }

/* ---------------------------------------------------------------- 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, .studio[data-phase="recording"] .rec-hint{ 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; }
/* 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); }
@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); }
.studio .wrap-btn{ min-height: 46px; padding: 0 var(--s-6); border-radius: var(--radius-pill); }
/* 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); }

/* ---------------------------------------------------------------- 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); }
.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); }