/* Rehearse — chunky & warm identity (light-committed).
   Pastel tile = muscle tint · deep bar = muscle hue · text + faces black. Validated palette. */
:root{
  --paper:#FFFFFF; --ink:#141210; --sec:#8C877C; --gray:#F1EFEA; --line:#ECE9E1; --bg:#EDEAF4;
  --mint:#B9E7BD; --peach:#F6D6A5; --aqua:#B0E5DD; --coral:#F7BEB2; --pink:#F3C6DD; --sky:#BCD9F6; --lav:#DBCCF2; --yellow:#F6E27A;
  --flu:#2F8036; --war:#B4701C; --spe:#0C8F86; --str:#C0432F; --rec:#B62C6E; --pace:#1E74C8; --other:#6A5AB8;
  --good:#3E8E56; --try:#C25A34;
}
*{box-sizing:border-box;}
html,body{margin:0;}
body{
  font-family:-apple-system,"SF Pro Display",ui-sans-serif,system-ui,sans-serif;
  background:var(--bg); color:var(--ink); -webkit-font-smoothing:antialiased;
}
.serif{font-family:ui-serif,"New York",Georgia,serif;}
.huge{font-weight:850; letter-spacing:-.045em; line-height:.99;}

.app{
  max-width:480px; margin:0 auto; background:var(--paper); min-height:100dvh;
  padding:calc(env(safe-area-inset-top) + 20px) 18px calc(env(safe-area-inset-bottom) + 20px);
  display:flex; flex-direction:column; gap:15px;
}

.app-top{display:flex; justify-content:space-between; align-items:center;}
.brand{font-weight:850; letter-spacing:-.02em; font-size:16px; display:flex; align-items:center; gap:8px;}
.brand .s{width:11px; height:11px; border-radius:99px; background:var(--war);}
.tagline{font-size:12px; font-weight:700; color:var(--sec);}

/* ---------- record ---------- */
.hero-h{font-size:38px; margin:6px 0 2px;}
.prompt-card{background:var(--mint); border-radius:24px; padding:18px 19px;}
.prompt-card .q{font-size:11px; letter-spacing:.09em; text-transform:uppercase; color:#2f6a35; font-weight:750;}
.prompt-card .p{font-family:ui-serif,Georgia,serif; font-size:22px; line-height:1.28; margin:8px 0 0; color:#163a1c;}
.prompt-card .hint{font-family:-apple-system,sans-serif; font-size:13px; color:#3f6b44; margin:10px 0 0; font-weight:500;}
.grow{flex:1; min-height:8px;}

.scatter{display:flex; gap:12px; justify-content:center; padding:6px 0;}
.doodle{width:56px; height:56px; display:grid; place-items:center;}
.doodle svg{width:60%; height:60%;}
.fstroke{stroke:var(--ink); stroke-width:5.5; fill:none; stroke-linecap:round;}

.record-btn{
  border:none; cursor:pointer; width:100%; background:var(--ink); color:#fff; border-radius:99px;
  padding:19px; font-size:17px; font-weight:800; display:flex; align-items:center; justify-content:center; gap:11px;
  font-family:inherit; transition:transform .12s ease;
}
.record-btn:active{transform:scale(.98);}
.record-btn .dot{width:12px; height:12px; border-radius:99px; background:#fff; opacity:.55;}
.record-btn .timer{font-variant-numeric:tabular-nums; opacity:.7;}
.recorder.is-recording .record-btn{background:var(--str);}
.recorder.is-recording .record-btn .dot{opacity:1; animation:blink 1.1s ease-in-out infinite;}
@keyframes blink{50%{opacity:.25;}}

.consent{display:flex; gap:11px; align-items:flex-start; font-size:12.5px; color:var(--sec); line-height:1.45; cursor:pointer;}
.consent input{appearance:none; -webkit-appearance:none; width:20px; height:20px; border-radius:6px; flex:none; margin-top:1px;
  border:2px solid var(--ink); background:transparent; position:relative; cursor:pointer;}
.consent input:checked{background:var(--ink);}
.consent input:checked::after{content:""; position:absolute; left:6px; top:2px; width:4px; height:9px; border:solid #fff; border-width:0 2px 2px 0; transform:rotate(42deg);}
.consent input:focus-visible{outline:2px solid var(--war); outline-offset:2px;}

/* ---------- the read ---------- */
.react{background:var(--peach); border-radius:26px; padding:20px; display:flex; flex-direction:column; gap:13px;}
.react .bigface{width:80px; height:80px;}
.react h2{font-size:26px; margin:0; color:#3a2708;}
.pending-note{font-size:12.5px; color:var(--try); background:var(--coral); border-radius:14px; padding:11px 13px; line-height:1.45; font-weight:600;}

.bento{display:grid; grid-template-columns:1fr 1fr; gap:11px;}
.tile{background:var(--tile); border-radius:22px; padding:14px 15px; display:flex; flex-direction:column; gap:11px; min-height:120px;}
.tile .th{display:flex; align-items:center; gap:7px; font-size:13px; font-weight:800;}
.tile .th .di{width:15px; height:15px; border-radius:5px; background:var(--deep);}
.tile .segs{display:flex; gap:4px; margin-top:auto;}
.tile .segs i{height:7px; flex:1; border-radius:99px; background:rgba(20,18,16,.12);}
.tile .segs i.on{background:var(--deep);}
.tile .band{font-size:21px; font-weight:850; letter-spacing:-.03em;}
.m-warmth{--tile:var(--peach);--deep:var(--war);} .m-fluency{--tile:var(--mint);--deep:var(--flu);}
.m-specificity{--tile:var(--aqua);--deep:var(--spe);} .m-structure{--tile:var(--coral);--deep:var(--str);}
.m-reciprocity{--tile:var(--pink);--deep:var(--rec);} .m-pace{--tile:var(--sky);--deep:var(--pace);}
.m-other{--tile:var(--lav);--deep:var(--other);}

.did-well{display:flex; flex-direction:column; gap:9px;}
.section-label{font-size:11px; letter-spacing:.09em; text-transform:uppercase; color:var(--sec); font-weight:800;}
.win{display:flex; gap:10px; align-items:flex-start; font-size:14.5px; line-height:1.45;}
.win .ck{width:22px; height:22px; border-radius:7px; background:var(--good); color:#fff; display:grid; place-items:center; font-size:12px; font-weight:800; flex:none; margin-top:1px;}

.words-card{background:#FBF7EE; border:1px solid var(--line); border-radius:22px; padding:16px;}
.words-card .lbl{font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--sec); font-weight:800; margin-bottom:9px;}
.words{font-family:ui-serif,Georgia,serif; font-size:16px; line-height:1.8;}
.words .g{background:linear-gradient(transparent 60%, #cdeacd 60%);}
.words .t{text-decoration:underline wavy var(--try); text-underline-offset:4px; text-decoration-thickness:2px;}

.try{background:var(--ink); color:#fff; border-radius:22px; padding:16px 17px;}
.try .lbl{font-size:11px; letter-spacing:.08em; text-transform:uppercase; font-weight:800; opacity:.55; margin-bottom:6px;}
.try p{margin:0; font-size:16px; line-height:1.42; font-weight:650;}

.actions{display:flex; gap:10px; margin-top:2px;}
.btn{flex:1; text-align:center; border-radius:99px; padding:16px; font-size:15px; font-weight:800; text-decoration:none; display:block; cursor:pointer;}
.btn.primary{background:var(--ink); color:#fff;} .btn.ghost{background:var(--gray); color:var(--ink);}
.btn:focus-visible{outline:2px solid var(--war); outline-offset:2px;}

/* ---------- analyzing / failed ---------- */
.center-screen{flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:8px;}
.center-screen .bouncy{width:96px; height:96px; margin-bottom:14px; animation:bob 1.8s ease-in-out infinite;}
@keyframes bob{50%{transform:translateY(-10px);}}
.center-screen h2{font-size:28px; margin:0;}
.center-screen p{color:var(--sec); margin:0; font-size:14.5px;}

@media (prefers-reduced-motion:reduce){ .center-screen .bouncy{animation:none;} .recorder.is-recording .record-btn .dot{animation:none;} }