/* ============================================================
   Voice Lab · simple mode
   One card. One action. The teleprompter is the signature —
   the ten seconds of recording ARE the sentence lighting up.
   ============================================================ */

:root{
  --paper:#ECEEF1;
  --card:#FFFFFF;
  --ink:#171A20;
  --mute:#6C7480;
  --line:#DDE1E7;
  --rec:#E5326B;          /* rose — you speaking */
  --sig:#FFB020;          /* amber — the machine speaking */
  --deck:#10141C;
  --ok:#127A54;

  --r:18px;
  --shadow:0 1px 0 rgba(23,26,32,.04), 0 12px 34px -18px rgba(23,26,32,.28);
  --ease:cubic-bezier(.2,.7,.2,1);
}

*{box-sizing:border-box;margin:0;padding:0}

[hidden]{display:none!important}

html{-webkit-text-size-adjust:100%}

body{
  font-family:"Archivo",system-ui,sans-serif;
  background:var(--paper);
  color:var(--ink);
  min-height:100svh;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  padding:24px 18px 40px;
}

button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
a{color:var(--ink)}

:focus-visible{outline:2.5px solid var(--rec);outline-offset:3px;border-radius:6px}

/* ─────────────────────────────── buttons ─────────────────────────────── */
.btn{
  border-radius:999px;
  padding:14px 26px;
  font-weight:600;
  font-size:16px;
  letter-spacing:-.01em;
  transition:transform .12s var(--ease), background .15s, opacity .15s;
}
.btn:active:not(:disabled){transform:translateY(1px) scale(.99)}
.btn:disabled{opacity:.4;cursor:not-allowed}

.btn--go{background:var(--ink);color:#fff}
.btn--go:hover:not(:disabled){background:#2A2F38}

.btn--ghost{border:1.5px solid var(--line);background:var(--card)}
.btn--ghost:hover{border-color:var(--ink)}

.btn--wide{width:100%;padding:16px 26px;font-size:17px}
.btn--small{padding:10px 18px;font-size:14.5px}

.link{
  font-size:14.5px;color:var(--mute);text-decoration:underline;
  text-underline-offset:3px;text-decoration-thickness:1px;
  text-decoration-color:#C3C8D0;
}
.link:hover{color:var(--ink);text-decoration-color:var(--ink)}
.link--back{display:block;margin:16px auto 0;text-align:center}

/* ═══════════════════════════ 0 · permission gate ═══════════════════════ */
.gate{
  min-height:calc(100svh - 64px);
  display:grid;place-items:center;
}
.gate__card{
  background:var(--card);
  border-radius:var(--r);
  box-shadow:var(--shadow);
  padding:40px 36px 32px;
  max-width:620px;width:100%;
  animation:rise .5s var(--ease) both;
}
.gate__card--small{text-align:center;max-width:460px}

.gate__eyebrow{
  font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--rec);margin-bottom:14px;
}
.gate__h{
  font-family:"Source Serif 4",Georgia,serif;
  font-size:clamp(28px,5.4vw,38px);
  font-weight:600;line-height:1.15;letter-spacing:-.015em;
  margin-bottom:14px;
}
.gate__lede{color:var(--mute);font-size:16.5px;margin-bottom:28px;max-width:46ch}

.check{
  display:flex;gap:14px;align-items:flex-start;
  padding:16px 18px;margin-bottom:10px;
  border:1.5px solid var(--line);border-radius:14px;
  cursor:pointer;font-size:15.5px;line-height:1.45;
  transition:border-color .15s,background .15s;
}
.check:hover{border-color:#B9C0C9}
.check:has(:checked){border-color:var(--ink);background:#FAFBFC}
.check input{
  appearance:none;-webkit-appearance:none;
  width:22px;height:22px;flex:0 0 22px;margin-top:1px;
  border:2px solid #B9C0C9;border-radius:7px;
  transition:all .15s;cursor:pointer;
}
.check input:checked{
  background:var(--ink);border-color:var(--ink);
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>");
  background-size:15px;background-repeat:no-repeat;background-position:center;
}

.terms{margin:20px 0 26px}
.terms summary{
  font-size:14.5px;color:var(--mute);cursor:pointer;
  list-style:none;display:inline-flex;align-items:center;gap:7px;
  text-decoration:underline;text-underline-offset:3px;text-decoration-color:#C3C8D0;
}
.terms summary::-webkit-details-marker{display:none}
.terms summary::before{content:"+";font-weight:700;font-size:15px;text-decoration:none}
.terms[open] summary::before{content:"−"}
.terms summary:hover{color:var(--ink)}

.terms__list{
  font-family:"Source Serif 4",Georgia,serif;
  font-size:14.5px;line-height:1.6;color:#40464F;
  margin:18px 0 0;padding:20px 22px;
  background:#F7F8FA;border-radius:12px;
  list-style:decimal;list-style-position:outside;
}
.terms__list li{margin:0 0 12px 18px;padding-left:4px}
.terms__list li:last-child{margin-bottom:0}
.terms__list strong{font-weight:600;color:var(--ink)}
.terms__foot{
  font-size:13px;color:var(--mute);margin-top:14px;line-height:1.55;
}

.gate__actions{display:flex;gap:10px;flex-wrap:wrap}

/* ═══════════════════════════ app shell ═══════════════════════════ */
.app{max-width:640px;margin:0 auto}

.top{
  display:flex;align-items:center;justify-content:space-between;
  gap:16px;margin-bottom:22px;padding:0 4px;
}
.mark{
  font-family:"Source Serif 4",Georgia,serif;
  font-size:22px;font-weight:600;letter-spacing:-.02em;
}
.mark__dot{color:var(--rec)}

.dots{display:flex;gap:6px;list-style:none}
.dot{
  display:flex;align-items:center;gap:6px;
  font-size:12.5px;font-weight:600;color:#AFB6BF;
  padding:5px 11px;border-radius:999px;
  transition:color .3s, background .3s;
}
.dot::before{
  content:"";width:6px;height:6px;border-radius:50%;
  background:#CBD0D7;transition:background .3s, transform .3s;
}
.dot.is-on{color:var(--ink);background:#fff}
.dot.is-on::before{background:var(--rec);transform:scale(1.25)}
.dot.is-done{color:var(--mute)}
.dot.is-done::before{background:var(--ok)}
@media(max-width:460px){ .dot span{display:none} .dot{padding:6px} }

/* ═══════════════════════════ the card ═══════════════════════════ */
.card{
  background:var(--card);
  border-radius:var(--r);
  box-shadow:var(--shadow);
  padding:32px 30px 30px;
  text-align:center;
  animation:rise .42s var(--ease) both;
}
.card__step{
  font-size:11.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:#AFB6BF;margin-bottom:10px;
}
.card__h{
  font-family:"Source Serif 4",Georgia,serif;
  font-size:clamp(26px,5vw,33px);
  font-weight:600;letter-spacing:-.015em;line-height:1.18;
  margin-bottom:8px;
}
.card__sub{color:var(--mute);font-size:15.5px;max-width:44ch;margin:0 auto 26px}

/* ─────── SIGNATURE · the teleprompter ─────── */
.prompt{
  font-family:"Source Serif 4",Georgia,serif;
  font-size:clamp(19px,3.6vw,24px);
  line-height:1.5;font-weight:400;
  max-width:30ch;margin:0 auto 30px;
  text-wrap:balance;
  min-height:3.5em;
  display:flex;flex-wrap:wrap;justify-content:center;gap:0 .32em;
}
.prompt .w{
  color:#C6CBD2;
  transition:color .25s var(--ease);
}
.prompt .w.lit{color:var(--ink)}
.prompt .w.now{color:var(--rec)}

/* ─────── the ten-second ring ─────── */
.ringwrap{display:grid;place-items:center;gap:14px;margin-bottom:22px}
.ring{
  position:relative;
  width:140px;height:140px;
  display:grid;place-items:center;
  border-radius:50%;
  transition:transform .15s var(--ease);
}
.ring:hover{transform:scale(1.03)}
.ring:active{transform:scale(.97)}

.ring__svg{position:absolute;inset:0;width:140px;height:140px;transform:rotate(-90deg)}
.ring__track{fill:none;stroke:#E6E9ED;stroke-width:5}
.ring__fill{
  fill:none;stroke:var(--rec);stroke-width:5;stroke-linecap:round;
  stroke-dasharray:389.56;
  stroke-dashoffset:389.56;   /* empty */
}

/* the live-level halo: JS scales this with mic amplitude */
.ring__glow{
  position:absolute;width:112px;height:112px;border-radius:50%;
  background:var(--rec);opacity:0;transform:scale(.8);
  transition:opacity .2s;
  pointer-events:none;
  filter:blur(14px);
}
.ring[data-rec="1"] .ring__glow{opacity:.22}

/* the core: dot when idle, square when recording */
.ring__core{
  position:relative;z-index:1;
  width:46px;height:46px;border-radius:50%;
  background:var(--rec);
  transition:width .25s var(--ease), height .25s var(--ease), border-radius .25s var(--ease);
}
.ring[data-rec="1"] .ring__core{width:30px;height:30px;border-radius:7px}

.ring__hint{font-size:14.5px;color:var(--mute);font-weight:500}

/* ─────── what we heard ─────── */
.heard{animation:rise .35s var(--ease) both;margin-bottom:18px}
.heard__row{display:flex;gap:8px;justify-content:center;margin-bottom:14px}

.alt{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}
.alt__hint{
  font-size:12.5px;color:#AFB6BF;line-height:1.5;
  max-width:42ch;margin:10px auto 0;
}

/* ─────── the quiet setup line ─────── */
.setup{
  margin-top:26px;padding-top:20px;border-top:1px solid var(--line);
  display:flex;align-items:center;gap:12px;
  font-size:13px;color:var(--mute);text-align:left;
}
.setup[data-done="1"]{opacity:.55}
.setup__bar{
  flex:0 0 68px;height:4px;border-radius:99px;background:#E6E9ED;overflow:hidden;
}
.setup__fill{
  display:block;height:100%;width:0%;border-radius:99px;
  background:var(--ink);transition:width .3s var(--ease);
}
.setup__text{flex:1}

/* ═══════════════════════════ step 2 ═══════════════════════════ */
textarea{
  width:100%;
  font-family:"Source Serif 4",Georgia,serif;
  font-size:19px;line-height:1.5;
  padding:18px 20px;
  border:1.5px solid var(--line);border-radius:14px;
  background:#FAFBFC;color:var(--ink);
  resize:vertical;min-height:120px;
  transition:border-color .15s,background .15s;
}
textarea:focus{outline:none;border-color:var(--ink);background:#fff}
textarea::placeholder{color:#B4BAC2}

.count{font-size:12.5px;color:#B4BAC2;text-align:right;margin:8px 2px 18px}

.chips{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-bottom:24px}
.chip{
  font-size:13.5px;color:var(--mute);
  padding:9px 14px;border-radius:999px;
  border:1.5px solid var(--line);background:#fff;
  text-align:left;line-height:1.35;
  transition:all .15s;
}
.chip:hover{border-color:var(--ink);color:var(--ink)}

/* ═══════════════════════════ step 3 ═══════════════════════════ */
.wave{
  width:100%;height:120px;
  background:var(--deck);border-radius:14px;
  margin-bottom:18px;display:block;
}
audio{width:100%;margin-bottom:22px}

.done__actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.fineprint{font-size:12.5px;color:#AFB6BF;margin-top:16px}
.fineprint em{font-style:normal;font-weight:600;color:var(--mute)}

.clips{margin-top:30px;padding-top:24px;border-top:1px solid var(--line);text-align:left}
.clips__h{font-size:14px;font-weight:700;letter-spacing:.02em;margin-bottom:12px}
.clips__note{font-weight:400;color:#AFB6BF;font-size:13px}
.clips__list{list-style:none;display:grid;gap:8px}
.clip{
  display:flex;align-items:center;gap:12px;
  padding:12px 14px;border:1.5px solid var(--line);border-radius:12px;
  background:#FAFBFC;
}
.clip__play{
  flex:0 0 34px;height:34px;border-radius:50%;
  background:var(--sig);display:grid;place-items:center;
  font-size:12px;color:var(--deck);
}
.clip__text{
  flex:1;min-width:0;font-size:14px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.clip__meta{font-size:12px;color:#AFB6BF;flex:0 0 auto}
.clip__x{font-size:18px;color:#C3C8D0;line-height:1;padding:0 2px}
.clip__x:hover{color:var(--rec)}

/* ═══════════════════════════ footer ═══════════════════════════ */
.foot{margin-top:26px;padding:0 6px;text-align:center}
.foot__claim{
  font-size:14px;color:var(--mute);
  max-width:46ch;margin:0 auto 14px;line-height:1.5;
}
.foot__claim strong{color:var(--ink);font-weight:600}
.foot__row{display:flex;gap:10px;justify-content:center;align-items:center;margin-bottom:18px}
.foot__sep{color:#C3C8D0}
.foot__legal{
  font-size:11.5px;line-height:1.65;color:#A8AFB8;
  max-width:60ch;margin:0 auto;
}
.foot__legal a{color:#8A929C}
.foot__legal .link{font-size:11.5px}

/* ═══════════════════════════ toast ═══════════════════════════ */
.toast{
  position:fixed;left:50%;bottom:24px;transform:translateX(-50%);
  background:var(--deck);color:#fff;
  padding:12px 20px;border-radius:999px;
  font-size:14px;font-weight:500;
  box-shadow:0 12px 30px -8px rgba(16,20,28,.5);
  z-index:99;max-width:90vw;text-align:center;
  animation:rise .3s var(--ease) both;
}
.toast[data-kind="err"]{background:var(--rec)}

@keyframes rise{
  from{opacity:0;transform:translateY(10px)}
  to{opacity:1;transform:none}
}
.toast{animation-name:rise}

/* ═══════════════════════════ small screens ═══════════════════════════ */
@media(max-width:520px){
  body{padding:16px 12px 32px}
  .gate__card{padding:30px 22px 24px}
  .card{padding:26px 20px 24px}
  .btn{padding:13px 22px}
  .done__actions .btn{flex:1}
  .gate__actions .btn{flex:1}
}

@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}