/* ==========================================================================
   NoShotList design system — "Studio at night"
   Deep charcoal ground, warm off-white type, ONE signal color (recording red),
   a calm secondary (sage) for success. Instrument Serif for display, Inter for
   UI, a monospace face for the timecode/HUD motif that runs through the whole
   product (every word you say gets a timestamp — the UI says so, visually).
   Shared by: index.html (landing), app.html (SPA), cam.html (phone).
   ========================================================================== */

:root{
  /* ---- color tokens ---- */
  --bg: #15141b;
  --bg-raised: #1d1b24;
  --bg-sunken: #0f0e13;
  --bg-glass: rgba(29,27,36,.72);
  --ink: #f4efe6;
  --ink-dim: rgba(244,239,230,.64);
  --ink-faint: rgba(244,239,230,.4);
  --line: rgba(244,239,230,.09);
  --line-strong: rgba(244,239,230,.18);
  --rec: #ff4b3e;
  --rec-ink: #2a0d0a;
  --rec-dim: rgba(255,75,62,.16);
  --rec-glow: rgba(255,75,62,.45);
  --sage: #8fb8a8;
  --sage-ink: #0d1b16;
  --sage-dim: rgba(143,184,168,.16);
  --sage-glow: rgba(143,184,168,.45);
  --amber: #e0a75e;
  --amber-dim: rgba(224,167,94,.16);

  /* ---- type ---- */
  --font-display: 'Instrument Serif', Georgia, 'Iowan Old Style', serif;
  --font-ui: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* ---- scale ---- */
  --s-1: .25rem; --s-2: .5rem; --s-3: .75rem; --s-4: 1rem; --s-5: 1.5rem;
  --s-6: 2rem; --s-7: 3rem; --s-8: 4rem; --s-9: 6rem;
  --radius-sm: 10px; --radius-md: 16px; --radius-lg: 24px; --radius-pill: 999px;
  --container: 1160px;
  --shadow-card: 0 1px 0 rgba(244,239,230,.04) inset, 0 20px 60px -30px rgba(0,0,0,.7);
  --ease: cubic-bezier(.22,.61,.36,1);
}

/* prefers-color-scheme: light stays reserved for later — dark is the brand, always on */

*,*::before,*::after{ box-sizing: border-box; }
html{ color-scheme: dark; -webkit-text-size-adjust: 100%; }
body{
  margin:0; background: var(--bg); color: var(--ink);
  font-family: var(--font-ui); font-size: 16px; line-height: 1.5;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img,svg,video,canvas{ display:block; max-width:100%; }
a{ color: inherit; text-decoration: none; }
button{ font: inherit; color: inherit; }
input,textarea,select{ font: inherit; color: inherit; }
h1,h2,h3,h4,p,figure,blockquote{ margin: 0; }
ul,ol{ margin:0; padding:0; list-style:none; }

/* visible focus everywhere, mouse users don't get the ring */
:focus{ outline: none; }
:focus-visible{ outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 6px; }

.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
/* The [hidden] attribute must always win over any class's own `display` rule (a class selector
   loaded after the UA stylesheet otherwise beats the browser's own [hidden]{display:none}). */
[hidden]{ display: none !important; }

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

/* ---------------------------------------------------------------- layout */
.container{ width:100%; max-width: var(--container); margin: 0 auto; padding: 0 var(--s-5); }
.stack > * + *{ margin-top: var(--s-4); }
.cluster{ display:flex; align-items:center; gap: var(--s-3); flex-wrap: wrap; }
.spread{ display:flex; align-items:center; justify-content:space-between; gap: var(--s-3); }
.grid{ display:grid; gap: var(--s-5); }
.hide-mobile{ display:none; }
@media (min-width: 900px){ .hide-mobile{ display: revert; } }
.show-mobile-only{ display: revert; }
@media (min-width: 900px){ .show-mobile-only{ display:none; } }
/* Mobile nav drawer: closed by default at every width; only opens (.is-open) under 900px, so
   growing the window back to desktop always wins regardless of open/closed state. */
.mobile-nav-drawer{ display:none; padding: 0 var(--s-5); gap:4px; flex-direction:column; }
@media (max-width: 899px){ .mobile-nav-drawer.is-open{ display:flex; } }

/* ---------------------------------------------------------------- type */
.eyebrow{
  font-family: var(--font-mono); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-faint);
}
.eyebrow--rec{ color: var(--rec); }
.eyebrow--sage{ color: var(--sage); }
.h-hero{ font-family: var(--font-display); font-weight: 400; line-height: .98; letter-spacing: -.01em;
  font-size: clamp(2.6rem, 6.6vw, 5.4rem); }
.h1{ font-family: var(--font-display); font-weight: 400; line-height: 1.04; letter-spacing: -.01em; font-size: clamp(1.9rem, 3.4vw, 2.8rem); }
.h2{ font-family: var(--font-display); font-weight: 400; line-height: 1.08; font-size: clamp(1.5rem, 2.4vw, 2rem); }
.h3{ font-family: var(--font-ui); font-weight: 600; font-size: 1.05rem; letter-spacing: -.005em; }
.lede{ font-size: clamp(1.05rem, 1.6vw, 1.25rem); color: var(--ink-dim); line-height: 1.55; max-width: 40em; }
.muted{ color: var(--ink-dim); }
.faint{ color: var(--ink-faint); }
.mono{ font-family: var(--font-mono); }
.italic-serif{ font-family: var(--font-display); font-style: italic; }

/* ---------------------------------------------------------------- buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap: var(--s-2);
  min-height: 44px; padding: 0 var(--s-5); border-radius: var(--radius-md);
  font-family: var(--font-ui); font-weight: 600; font-size: .95rem; letter-spacing: -.002em;
  border: 1px solid transparent; background: transparent; cursor: pointer;
  transition: transform .15s var(--ease), background-color .15s var(--ease), border-color .15s var(--ease), opacity .15s var(--ease);
  white-space: nowrap;
}
.btn:active{ transform: scale(.98); }
.btn[disabled]{ opacity:.45; cursor:not-allowed; }
.btn-primary{ background: var(--rec); color: #fff9f7; box-shadow: 0 10px 30px -12px var(--rec-glow); }
.btn-primary:hover{ background:#ff5b4f; }
.btn-sage{ background: var(--sage); color: var(--sage-ink); box-shadow: 0 10px 30px -12px var(--sage-glow); }
.btn-sage:hover{ background:#9dc6b6; }
.btn-outline{ border-color: var(--line-strong); color: var(--ink); }
.btn-outline:hover{ border-color: var(--ink-dim); background: rgba(244,239,230,.04); }
.btn-ghost{ color: var(--ink-dim); }
.btn-ghost:hover{ color: var(--ink); background: rgba(244,239,230,.05); }
.btn-lg{ min-height: 56px; padding: 0 var(--s-6); font-size: 1.05rem; border-radius: var(--radius-lg); }
.btn-sm{ min-height: 36px; padding: 0 var(--s-4); font-size: .85rem; border-radius: var(--radius-sm); }
.btn-block{ width:100%; }
.btn-icon{ width:44px; padding:0; flex-shrink:0; }
.btn .spinner{ margin-right:2px; }

/* ---------------------------------------------------------------- forms */
.field{ display:block; }
.field + .field{ margin-top: var(--s-4); }
.field-label{ display:block; font-size: .82rem; font-weight:600; color: var(--ink-dim); margin-bottom: var(--s-2); }
.input, .textarea, .select{
  width:100%; background: var(--bg-sunken); border: 1px solid var(--line-strong); color: var(--ink);
  border-radius: var(--radius-sm); padding: 0 var(--s-4); min-height: 48px;
  font-size: 1rem; transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.textarea{ padding: var(--s-3) var(--s-4); min-height: 100px; resize: vertical; line-height:1.5; }
.input::placeholder,.textarea::placeholder{ color: var(--ink-faint); }
.input:focus,.textarea:focus,.select:focus{ border-color: var(--ink-dim); box-shadow: 0 0 0 3px rgba(244,239,230,.08); }
.field-help{ margin-top: var(--s-2); font-size: .82rem; color: var(--ink-faint); }
.field-error{ margin-top: var(--s-2); font-size: .82rem; color: var(--rec); }
.input--error{ border-color: var(--rec); }
.checkbox-row{ display:flex; align-items:flex-start; gap: var(--s-3); cursor:pointer; }
.checkbox-row input{ margin-top: 4px; width:18px; height:18px; accent-color: var(--rec); }

/* ---------------------------------------------------------------- cards */
.card{
  background: var(--bg-raised); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: var(--s-5); box-shadow: var(--shadow-card);
}
.card--tight{ padding: var(--s-4); }
.card--interactive{ cursor:pointer; transition: border-color .15s var(--ease), transform .15s var(--ease); }
.card--interactive:hover{ border-color: var(--line-strong); transform: translateY(-2px); }
.card--current{ border-color: var(--rec); box-shadow: 0 0 0 1px var(--rec) inset, var(--shadow-card); }
.divider{ height:1px; background: var(--line); border:0; margin: var(--s-5) 0; }
.hairline-top{ border-top: 1px solid var(--line); }

/* ---------------------------------------------------------------- pills / badges */
.pill{
  display:inline-flex; align-items:center; gap: var(--s-2); padding: var(--s-1) var(--s-3);
  border-radius: var(--radius-pill); font-size: .76rem; font-weight:600; letter-spacing:.01em;
  font-family: var(--font-mono); text-transform: uppercase; background: rgba(244,239,230,.06); color: var(--ink-dim);
  border: 1px solid var(--line);
}
.pill--rec{ background: var(--rec-dim); color: var(--rec); border-color: transparent; }
.pill--sage{ background: var(--sage-dim); color: var(--sage); border-color: transparent; }
.pill--amber{ background: var(--amber-dim); color: var(--amber); border-color: transparent; }
.pill--dot::before{ content:''; width:6px; height:6px; border-radius:50%; background: currentColor; }

/* ---------------------------------------------------------------- REC / timecode HUD (signature motif) */
.rec-dot{ width:9px; height:9px; border-radius:50%; background: var(--rec); flex-shrink:0; }
.rec-dot--live{ animation: rec-pulse 1.1s ease-in-out infinite; }
@keyframes rec-pulse{ 0%,100%{ opacity:1; box-shadow: 0 0 0 0 var(--rec-dim); } 50%{ opacity:.55; box-shadow: 0 0 0 6px transparent; } }
.timecode{
  display:inline-flex; align-items:center; gap: var(--s-2); font-family: var(--font-mono); font-size: .82rem;
  letter-spacing: .03em; color: var(--ink-dim); padding: var(--s-1) var(--s-3); border-radius: var(--radius-sm);
  background: rgba(0,0,0,.28); border: 1px solid var(--line);
}
.timecode--rec{ color: var(--ink); border-color: var(--rec-dim); }
.timecode .rec-dot{ margin-right: 2px; }

/* ---------------------------------------------------------------- the orb (voice producer) */
.orb-wrap{ position:relative; display:flex; align-items:center; justify-content:center; }
.orb-wrap:has(.orb-label){ margin-bottom: 2.4rem; }
.orb{
  --orb-size: 120px; width: var(--orb-size); height: var(--orb-size); border-radius:50%; position:relative;
  background: radial-gradient(circle at 32% 28%, rgba(244,239,230,.5), rgba(143,184,168,.5) 45%, rgba(21,20,27,0) 72%);
  filter: saturate(1.1);
  animation: orb-breathe 4.2s ease-in-out infinite;
}
.orb::after{
  content:''; position:absolute; inset:-14px; border-radius:50%;
  border: 1px solid var(--line-strong); opacity:.6;
}
@keyframes orb-breathe{ 0%,100%{ transform: scale(1); } 50%{ transform: scale(1.045); } }
.orb--agent{ background: radial-gradient(circle at 32% 28%, #fff6ee, var(--sage) 45%, rgba(21,20,27,0) 74%); box-shadow: 0 0 60px -6px var(--sage-glow); animation: orb-talk 1s ease-in-out infinite; }
.orb--user{ background: radial-gradient(circle at 32% 28%, #fff2ef, var(--rec) 45%, rgba(21,20,27,0) 74%); box-shadow: 0 0 60px -6px var(--rec-glow); animation: orb-talk .82s ease-in-out infinite; }
@keyframes orb-talk{ 0%,100%{ transform: scale(1); } 50%{ transform: scale(1.09); } }
.orb--sm{ --orb-size: 40px; }
.orb--lg{ --orb-size: 180px; }
.orb-label{ position:absolute; bottom:-2rem; left:50%; transform:translateX(-50%); white-space:nowrap;
  font-family: var(--font-mono); font-size: .74rem; color: var(--ink-faint); letter-spacing:.06em; text-transform:uppercase; }

.waveform{ display:flex; align-items:center; gap:3px; height: 22px; }
.waveform span{ width:3px; border-radius:2px; background: var(--ink-dim); height: 30%; transition: height .12s var(--ease); }
.waveform--agent span{ background: var(--sage); }
.waveform--user span{ background: var(--rec); }
.waveform--live span{ animation: wave-bounce 1s ease-in-out infinite; }
.waveform span:nth-child(2){ animation-delay:.1s; } .waveform span:nth-child(3){ animation-delay:.2s; }
.waveform span:nth-child(4){ animation-delay:.3s; } .waveform span:nth-child(5){ animation-delay:.15s; }
@keyframes wave-bounce{ 0%,100%{ height:22%; } 50%{ height:90%; } }

/* ---------------------------------------------------------------- transcript */
.transcript{ display:flex; flex-direction:column; gap: var(--s-3); max-height: 100%; overflow-y:auto; }
.transcript-line{ display:flex; gap: var(--s-3); align-items:flex-start; }
.transcript-line .who{ font-family: var(--font-mono); font-size:.7rem; text-transform:uppercase; letter-spacing:.08em;
  color: var(--ink-faint); width: 4.4em; flex-shrink:0; padding-top:.2em; text-align:right; }
.transcript-line--agent .who{ color: var(--sage); }
.transcript-line--user .who{ color: var(--rec); }
.transcript-line .text{ color: var(--ink-dim); line-height:1.5; }
.transcript-line--user .text{ color: var(--ink); }
.transcript-line .text .cursor{ display:inline-block; width:2px; height:1em; background: var(--ink-dim); vertical-align:-2px; animation: caret-blink 1s step-end infinite; }
@keyframes caret-blink{ 50%{ opacity:0; } }

/* ---------------------------------------------------------------- checklist (producer items) */
.checklist{ display:flex; flex-direction:column; gap: var(--s-2); }
.checklist-item{
  display:flex; align-items:flex-start; gap: var(--s-3); padding: var(--s-3) var(--s-4); border-radius: var(--radius-md);
  border: 1px solid transparent; transition: background-color .2s var(--ease), border-color .2s var(--ease);
}
.checklist-item .mark{
  width:22px; height:22px; border-radius:50%; border: 1.5px solid var(--line-strong); flex-shrink:0; margin-top:1px;
  display:flex; align-items:center; justify-content:center; font-size:.7rem;
}
.checklist-item--done .mark{ background: var(--sage); border-color: var(--sage); color: var(--sage-ink); }
.checklist-item--done .label{ color: var(--ink-dim); text-decoration: line-through; text-decoration-color: var(--line-strong); }
.checklist-item--partial .mark{ border-color: var(--amber); color: var(--amber); }
.checklist-item--current{ background: rgba(255,75,62,.08); border-color: var(--rec-dim); }
.checklist-item--current .mark{ border-color: var(--rec); }
.checklist-item .label{ font-weight:600; font-size:.92rem; }
.checklist-item .gist{ font-size:.84rem; color: var(--ink-dim); margin-top:2px; }
.checklist-item .video-tag{ font-family: var(--font-mono); font-size:.68rem; color: var(--ink-faint); text-transform:uppercase; letter-spacing:.05em; }

/* ---------------------------------------------------------------- toast */
.toast-stack{ position:fixed; top: var(--s-5); right: var(--s-5); display:flex; flex-direction:column; gap: var(--s-3); z-index:400; max-width: min(360px, calc(100vw - 2 * var(--s-5))); }
.toast{
  background: var(--bg-raised); border:1px solid var(--line-strong); border-radius: var(--radius-md);
  padding: var(--s-3) var(--s-4); box-shadow: var(--shadow-card); font-size:.9rem;
  animation: toast-in .25s var(--ease);
}
.toast--error{ border-color: var(--rec); }
.toast--success{ border-color: var(--sage); }
@keyframes toast-in{ from{ opacity:0; transform: translateY(-6px); } to{ opacity:1; transform: translateY(0); } }

/* ---------------------------------------------------------------- modal / sheet */
.modal-backdrop{ position:fixed; inset:0; background: rgba(10,9,13,.72); backdrop-filter: blur(4px); display:flex; align-items:center; justify-content:center; padding: var(--s-5); z-index:500; animation: fade-in .18s var(--ease); }
@keyframes fade-in{ from{ opacity:0; } to{ opacity:1; } }
.modal{ background: var(--bg-raised); border:1px solid var(--line-strong); border-radius: var(--radius-lg); padding: var(--s-6); max-width: 460px; width:100%; box-shadow: 0 30px 90px -20px rgba(0,0,0,.8); }

/* ---------------------------------------------------------------- accordion (FAQ) */
.accordion-item{ border-bottom: 1px solid var(--line); }
.accordion-item:first-child{ border-top: 1px solid var(--line); }
.accordion-trigger{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap: var(--s-4);
  padding: var(--s-5) 0; background:none; border:0; text-align:left; cursor:pointer; min-height:44px;
  font-family: var(--font-ui); font-weight:600; font-size:1.02rem; color: var(--ink);
}
.accordion-trigger .plus{ font-family: var(--font-mono); color: var(--ink-faint); transition: transform .2s var(--ease); flex-shrink:0; }
.accordion-item[data-open="true"] .plus{ transform: rotate(45deg); color: var(--rec); }
.accordion-panel{ max-height:0; overflow:hidden; transition: max-height .25s var(--ease); }
.accordion-panel .inner{ padding: 0 0 var(--s-5); color: var(--ink-dim); max-width: 42em; line-height:1.6; }

/* ---------------------------------------------------------------- chips */
.chip-row{ display:flex; flex-wrap:wrap; gap: var(--s-2); }
.chip{ font-size:.78rem; padding: var(--s-1) var(--s-3); border-radius: var(--radius-pill); background: rgba(244,239,230,.06); border:1px solid var(--line); color: var(--ink-dim); }
.chip--must{ background: var(--rec-dim); color: var(--rec); border-color: transparent; font-weight:600; }

/* ---------------------------------------------------------------- skeleton / loading */
.skel{ background: linear-gradient(90deg, var(--bg-raised) 25%, rgba(244,239,230,.06) 37%, var(--bg-raised) 63%); background-size: 400% 100%; animation: skel-shimmer 1.6s ease-in-out infinite; border-radius: var(--radius-sm); }
@keyframes skel-shimmer{ 0%{ background-position: 100% 50%; } 100%{ background-position: 0 50%; } }
.spinner{ width:16px; height:16px; border-radius:50%; border: 2px solid rgba(244,239,230,.25); border-top-color: currentColor; animation: spin .7s linear infinite; display:inline-block; }
@keyframes spin{ to{ transform: rotate(360deg); } }

/* ==========================================================================
   Marketing site (index.html)
   ========================================================================== */
.site-header{ position:sticky; top:0; z-index:100; background: var(--bg); border-bottom: 1px solid transparent; padding: var(--s-4) 0; transition: border-color .2s var(--ease); }
.site-header.is-scrolled{ border-bottom-color: var(--line); }
.brand-lockup{ display:flex; align-items:center; gap: var(--s-2); font-family: var(--font-display); font-size:1.3rem; letter-spacing:-.01em; }
.brand-lockup .rec-dot{ animation: rec-pulse 2.6s ease-in-out infinite; }

.hero{ position:relative; padding: var(--s-9) 0 var(--s-8); overflow:hidden; }
.hero-grain{ position:absolute; inset:0; pointer-events:none; opacity:.5;
  background-image: radial-gradient(circle at 20% 20%, rgba(143,184,168,.08), transparent 40%), radial-gradient(circle at 80% 0%, rgba(255,75,62,.08), transparent 45%); }
.hero-inner{ position:relative; display:grid; gap: var(--s-7); }
@media (min-width: 900px){ .hero-inner{ grid-template-columns: 1.1fr .9fr; align-items:center; } }
.hero-cta-row{ display:flex; gap: var(--s-3); flex-wrap:wrap; margin-top: var(--s-6); }
.hero-stage{ position:relative; aspect-ratio: 1/1; max-width: 380px; margin: 0 auto; display:flex; align-items:center; justify-content:center; }
.hero-stage .timecode{ position:absolute; bottom: 6%; left:50%; transform:translateX(-50%); }

.steps{ padding: var(--s-8) 0; }
.steps-scrubber{ position:relative; display:grid; gap: var(--s-6); }
@media (min-width: 900px){ .steps-scrubber{ grid-template-columns: repeat(3,1fr); gap: var(--s-5); } }
.step{ position:relative; padding-top: var(--s-5); border-top: 2px solid var(--line-strong); }
.step .step-tc{ font-family: var(--font-mono); font-size:.82rem; color: var(--rec); letter-spacing:.04em; }
.step h3{ margin-top: var(--s-3); }
.step p{ margin-top: var(--s-2); color: var(--ink-dim); line-height:1.55; }

.proof-strip{ padding: var(--s-6) 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }

.faq{ padding: var(--s-8) 0; max-width: 46em; }

.cta-band{ padding: var(--s-8) 0 var(--s-9); text-align:center; }
.cta-band .h1{ margin-bottom: var(--s-3); }

.site-footer{ padding: var(--s-6) 0 var(--s-8); border-top: 1px solid var(--line); color: var(--ink-faint); font-size:.85rem; }

/* ==========================================================================
   App shell (app.html)
   ========================================================================== */
.app-shell{ display:flex; min-height:100vh; }
.app-sidebar{
  width: 240px; flex-shrink:0; background: var(--bg-sunken); border-right:1px solid var(--line);
  padding: var(--s-5); display:flex; flex-direction:column; gap: var(--s-6); position:sticky; top:0; height:100vh;
}
.app-nav{ display:flex; flex-direction:column; gap: var(--s-1); }
.app-nav-link{
  display:flex; align-items:center; gap: var(--s-3); padding: var(--s-3) var(--s-3); border-radius: var(--radius-sm);
  color: var(--ink-dim); font-weight:500; min-height:44px; transition: background-color .15s var(--ease), color .15s var(--ease);
}
.app-nav-link:hover{ background: rgba(244,239,230,.05); color: var(--ink); }
.app-nav-link[aria-current="page"]{ background: rgba(255,75,62,.1); color: var(--ink); }
.app-nav-link .dot{ width:6px; height:6px; border-radius:50%; background: var(--line-strong); }
.app-nav-link[aria-current="page"] .dot{ background: var(--rec); }
.app-main{ flex:1; min-width:0; padding: var(--s-6) var(--s-7); }
.app-topbar{ display:flex; align-items:center; justify-content:space-between; margin-bottom: var(--s-6); gap: var(--s-4); flex-wrap:wrap; }
.minutes-hud{ font-family: var(--font-mono); font-size:.78rem; color: var(--ink-faint); }
.minutes-hud strong{ color: var(--ink-dim); font-weight:600; }

.mobile-topbar{ display:none; align-items:center; justify-content:space-between; padding: var(--s-4) var(--s-5); border-bottom:1px solid var(--line); position:sticky; top:0; background: var(--bg); z-index:50; }
@media (max-width: 899px){
  .app-shell{ flex-direction:column; }
  .app-sidebar{ display:none; }
  .mobile-topbar{ display:flex; }
  .app-main{ padding: var(--s-5); }
}

/* desktop-required notice (studio on small screens) */
.desktop-only-note{ display:none; }
@media (max-width: 1023px){ .desktop-only-note{ display:block; } .desktop-only-note ~ .studio-grid{ display:none; } }

/* ---------------------------------------------------------------- onboarding */
.onboard-shell{ max-width: 640px; margin: 0 auto; padding: var(--s-7) var(--s-5) var(--s-9); min-height:100vh; display:flex; flex-direction:column; }
.onboard-progress{ display:flex; gap: var(--s-2); margin-bottom: var(--s-7); }
.onboard-progress .seg{ height:3px; flex:1; border-radius:2px; background: var(--line-strong); }
.onboard-progress .seg--done{ background: var(--sage); }
.onboard-progress .seg--active{ background: var(--rec); }
.choice-grid{ display:grid; gap: var(--s-4); }
@media (min-width: 560px){ .choice-grid{ grid-template-columns: 1fr 1fr; } }
.choice-card{
  display:flex; flex-direction:column; gap: var(--s-2); text-align:left; padding: var(--s-6); border-radius: var(--radius-lg);
  background: var(--bg-raised); border: 1px solid var(--line); cursor:pointer; min-height:150px;
  transition: border-color .15s var(--ease), transform .15s var(--ease);
}
.choice-card:hover{ border-color: var(--line-strong); transform: translateY(-2px); }
.choice-card[aria-pressed="true"]{ border-color: var(--rec); box-shadow: 0 0 0 1px var(--rec) inset; }
.choice-card .icon{ font-size:1.6rem; }

.research-list{ display:flex; flex-direction:column; gap: var(--s-3); }
.research-row{ display:flex; align-items:center; gap: var(--s-3); font-size:.92rem; color: var(--ink-dim); }
.research-row .status-dot{ width:16px; height:16px; border-radius:50%; border: 1.5px solid var(--line-strong); flex-shrink:0; display:flex; align-items:center; justify-content:center; }
.research-row--done .status-dot{ background: var(--sage); border-color: var(--sage); }
.research-row--done{ color: var(--ink); }
.research-row--active .status-dot{ border-color: var(--rec); }
.research-row--active{ color: var(--ink); }

.type-instead{ display:inline-flex; align-items:center; gap: var(--s-2); color: var(--ink-dim); font-size:.85rem; background:none; border:0; padding: var(--s-2) var(--s-3); min-height:44px; cursor:pointer; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--line-strong); }
.type-instead:hover{ color: var(--ink); text-decoration-color: currentColor; }

.brief-card-grid{ display:grid; gap: var(--s-4); }
@media (min-width: 720px){ .brief-card-grid{ grid-template-columns: 1fr 1fr; } }
.brief-card .field-label{ margin-bottom: var(--s-1); }
.brief-card textarea, .brief-card .input{ background: transparent; border: 1px dashed var(--line-strong); }
.brief-card textarea:focus, .brief-card .input:focus{ border-style: solid; }

.accent-swatches{ display:flex; gap: var(--s-3); flex-wrap:wrap; }
.swatch{ width:44px; height:44px; border-radius:50%; border:2px solid transparent; cursor:pointer; position:relative; }
.swatch[aria-pressed="true"]{ border-color: var(--ink); }
.swatch[aria-pressed="true"]::after{ content:'✓'; position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:#fff; font-size:.9rem; text-shadow: 0 1px 3px rgba(0,0,0,.6); }

/* ---------------------------------------------------------------- home / formats */
.section-head{ display:flex; align-items:baseline; justify-content:space-between; gap: var(--s-4); margin-bottom: var(--s-4); flex-wrap:wrap; }
.format-grid{ display:grid; gap: var(--s-4); grid-template-columns: repeat(auto-fill, minmax(260px,1fr)); }
.format-card{ display:flex; flex-direction:column; gap: var(--s-3); }
.format-card .hook-pattern{ font-family: var(--font-display); font-size:1.15rem; line-height:1.3; color: var(--ink); }
.format-card .example{ font-size:.82rem; color: var(--ink-faint); font-style: italic; }
.format-card .meta-row{ margin-top:auto; display:flex; align-items:center; justify-content:space-between; gap: var(--s-3); }

.video-grid{ display:grid; gap: var(--s-4); grid-template-columns: repeat(auto-fill, minmax(280px,1fr)); }
.video-card{ display:flex; flex-direction:column; gap: var(--s-3); }
.video-card[data-selected="true"]{ border-color: var(--rec); box-shadow: 0 0 0 1px var(--rec) inset, var(--shadow-card); }
.video-card .pick{ position:absolute; top: var(--s-4); right: var(--s-4); }
.video-card{ position:relative; }
.plan-points{ display:flex; flex-direction:column; gap: var(--s-3); }
.plan-point-row{ display:flex; gap: var(--s-3); align-items:flex-start; padding: var(--s-3); border-radius: var(--radius-sm); background: rgba(244,239,230,.03); }
.plan-point-row .idx{ font-family: var(--font-mono); color: var(--ink-faint); font-size:.8rem; padding-top:2px; }

.paste-link-row{ display:flex; gap: var(--s-3); flex-wrap:wrap; }
.paste-link-row .input{ flex:1; min-width: 220px; }

.selection-bar{
  position: sticky; bottom: var(--s-5); display:flex; align-items:center; justify-content:space-between;
  gap: var(--s-4); background: var(--bg-glass); backdrop-filter: blur(10px); border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg); padding: var(--s-4) var(--s-5); margin-top: var(--s-6); box-shadow: var(--shadow-card);
}

/* ---------------------------------------------------------------- studio */
.studio-grid{ display:grid; gap: var(--s-5); grid-template-columns: 320px 1fr; align-items:start; }
.phone-frame{
  width:100%; aspect-ratio: 9/16; border-radius: var(--radius-lg); background: var(--bg-sunken);
  border: 1px solid var(--line-strong); overflow:hidden; position:relative; display:flex; align-items:center; justify-content:center;
}
.phone-frame img, .phone-frame video{ width:100%; height:100%; object-fit:cover; }
.phone-frame .thirds{ position:absolute; inset:0; pointer-events:none; opacity:.35; }
.phone-frame .thirds::before, .phone-frame .thirds::after{ content:''; position:absolute; background: var(--ink); }
.phone-frame .thirds::before{ left:33.33%; top:0; bottom:0; width:1px; box-shadow: 66.66% 0 0 var(--ink); }
.phone-frame .thirds::after{ top:33.33%; left:0; right:0; height:1px; box-shadow: 0 66.66% 0 0 var(--ink); }
.phone-frame .frame-hud{ position:absolute; top: var(--s-3); left: var(--s-3); right: var(--s-3); display:flex; justify-content:space-between; }
.phone-frame .empty{ text-align:center; color: var(--ink-faint); font-size:.85rem; padding: var(--s-5); }
.pair-card{ margin-top: var(--s-4); text-align:center; }
.pair-card .code{ font-family: var(--font-mono); font-size: 2.4rem; letter-spacing:.14em; color: var(--ink); margin: var(--s-3) 0; }
.pair-card canvas, .pair-card img.qr{ margin: 0 auto var(--s-3); border-radius: var(--radius-sm); background:#fff; padding:8px; }

.studio-center{ display:flex; flex-direction:column; gap: var(--s-5); }
.producer-row{ display:flex; align-items:center; gap: var(--s-5); }
.point-card{ min-height: 120px; }
.point-card .must-say{ margin-top: var(--s-3); }
.mode-voice-row{ display:flex; gap: var(--s-5); flex-wrap:wrap; align-items:center; }
.segmented{ display:inline-flex; background: var(--bg-sunken); border:1px solid var(--line-strong); border-radius: var(--radius-pill); padding:3px; }
.segmented button{ padding: var(--s-2) var(--s-4); border-radius: var(--radius-pill); background:none; border:0; color: var(--ink-dim); font-weight:600; font-size:.85rem; cursor:pointer; min-height:38px; }
.segmented button[aria-pressed="true"]{ background: var(--ink); color: var(--bg-sunken); }
.voice-picker{ display:flex; gap: var(--s-2); }
.voice-chip{ padding: var(--s-2) var(--s-3); border-radius: var(--radius-pill); border:1px solid var(--line-strong); background:none; color: var(--ink-dim); font-size:.82rem; cursor:pointer; text-transform:capitalize; min-height:36px; }
.voice-chip[aria-pressed="true"]{ border-color: var(--sage); color: var(--sage); background: var(--sage-dim); }
.record-controls{ display:flex; justify-content:center; padding: var(--s-4) 0; }
.record-btn{ min-height:64px; padding: 0 var(--s-7); border-radius: var(--radius-pill); font-size:1.05rem; }
.uploading-note{ text-align:center; color: var(--ink-dim); }

/* ---------------------------------------------------------------- clips */
.clip-grid{ display:grid; gap: var(--s-5); grid-template-columns: repeat(auto-fill, minmax(220px,1fr)); }
.clip-card{ display:flex; flex-direction:column; gap: var(--s-3); }
.clip-thumb{ aspect-ratio: 9/16; border-radius: var(--radius-md); overflow:hidden; background: var(--bg-sunken); position:relative; }
.clip-thumb video, .clip-thumb img{ width:100%; height:100%; object-fit:cover; }
.clip-thumb .status-overlay{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; flex-direction:column; gap: var(--s-2); background: rgba(15,14,19,.75); }
.progress-track{ width: 70%; height:4px; border-radius:2px; background: var(--line-strong); overflow:hidden; }
.progress-fill{ height:100%; background: var(--rec); transition: width .3s var(--ease); }
.caption-row{ display:flex; align-items:flex-start; gap: var(--s-2); }
.caption-row p{ flex:1; font-size:.85rem; color: var(--ink-dim); line-height:1.4; max-height: 4.2em; overflow:hidden; }
.clip-actions{ display:flex; gap: var(--s-2); }

/* ---------------------------------------------------------------- settings */
.settings-card{ max-width: 480px; }

/* ---------------------------------------------------------------- start / auth */
.auth-shell{ min-height:100vh; display:flex; align-items:center; justify-content:center; padding: var(--s-5); }
.auth-card{ width:100%; max-width: 420px; }
.auth-card .brand-lockup{ margin-bottom: var(--s-6); justify-content:center; }

/* ---------------------------------------------------------------- empty states */
.empty-state{ text-align:center; padding: var(--s-8) var(--s-5); color: var(--ink-dim); }
.empty-state .h3{ color: var(--ink); margin-bottom: var(--s-2); }

/* ---------------------------------------------------------------- misc */
.center-col{ max-width: 720px; margin:0 auto; }
.two-col{ display:grid; gap: var(--s-6); }
@media (min-width: 1024px){ .two-col{ grid-template-columns: 1fr 1fr; } }

.clip-thumb{ position:relative; overflow:hidden; }
.clip-thumb-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }