/* Voice-call layout on a light classroom palette: pale sage ground, deep board-green ink, chalk-yellow for the voice
   (ring, wave), coral only while recording. Karantina for names and the big moments, Assistant for everything read. */
:root{
  --bg:#f2f5f1; --surface:#ffffff; --ink:#1d3329; --dim:#5d7065; --line:#d5ded7; --soft:#e6ede7;
  --chalk:#e3b23c; --chalk-ink:#7d5a0c; --rec:#d2553d; --good:#2f7a55; --bad:#b4472f;
  --f-disp:"Karantina","Assistant",sans-serif; --f-body:"Assistant","Arial Hebrew",Arial,sans-serif;
  --r:14px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:400 17px/1.55 var(--f-body);-webkit-tap-highlight-color:transparent}
button{font:inherit;color:inherit;cursor:pointer}
button:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid #3f7fd8;outline-offset:2px}
[hidden]{display:none!important}
.page{max-width:720px;margin:0 auto;min-height:100%;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));padding-block:max(18px,env(safe-area-inset-top,0px)) 32px;display:flex;flex-direction:column;gap:22px}

/* brand */
.brand{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.brand h1{font:700 44px/0.95 var(--f-disp);margin:0;letter-spacing:.01em}
.brand p{margin:4px 0 0;color:var(--dim);font-size:15px}
.link{background:none;border:none;color:var(--dim);font-size:14px;text-decoration:underline;text-underline-offset:3px;padding:4px}

/* setup */
.q{display:flex;flex-direction:column;gap:10px}
.q h2{font-size:15px;font-weight:700;margin:0;color:var(--dim);letter-spacing:.02em}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{border:1.5px solid var(--line);background:var(--surface);border-radius:999px;padding:7px 15px;font-size:16px;font-weight:600}
.chip[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
.field{width:100%;border:1.5px solid var(--line);background:var(--surface);border-radius:10px;padding:11px 13px;font:inherit;color:var(--ink)}
textarea.field{min-height:84px;resize:vertical}
.people{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.person{text-align:right;border:1.5px solid var(--line);background:var(--surface);border-radius:var(--r);padding:12px 14px;display:flex;flex-direction:column;gap:2px;min-width:0}
.person b{font:700 28px/1 var(--f-disp)}
.person .meta{font-size:13px;color:var(--dim)}
.person .pq{font-weight:700;font-size:15px;margin-top:4px}
.person .short{font-size:14px;color:var(--dim);line-height:1.4}
.person[aria-pressed="true"]{border-color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink);background:#fbfcf8}
.person.alt{justify-content:center;border-style:dashed}
.startbar{position:sticky;bottom:0;padding-block:12px calc(12px + env(safe-area-inset-bottom,0px));background:linear-gradient(transparent,var(--bg) 30%);display:flex;flex-direction:column;gap:6px}
.primary{border:none;background:var(--ink);color:#fff;border-radius:999px;padding:15px 22px;font-size:18px;font-weight:700}
.primary:disabled{opacity:.45;cursor:default}
.note{font-size:13px;color:var(--dim);margin:0;text-align:center}
.err{color:var(--bad);font-weight:600;margin:0}

/* call */
.call{min-height:100%;display:flex;flex-direction:column;align-items:center;text-align:center;gap:12px}
.call .top{align-self:stretch;display:flex;justify-content:space-between;align-items:center;font-size:14px;color:var(--dim)}
.who{display:flex;flex-direction:column;align-items:center;gap:4px;margin-top:4px}
.ring{position:relative;width:148px;height:148px}
.ring svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.ring .track{stroke:var(--soft)}
.ring .arc{stroke:var(--chalk);transition:stroke-dashoffset .9s cubic-bezier(.3,.7,.2,1)}
.ring .face{position:absolute;inset:16px;border-radius:50%;background:var(--surface);border:1.5px solid var(--line);display:grid;place-items:center;font:700 54px/1 var(--f-body)}
.call.listening .ring .face{border-color:var(--rec)}
.name{font:700 52px/0.9 var(--f-disp);margin:6px 0 0}
.role{margin:0;color:var(--dim);font-size:15px}
.meter{font-size:14px;color:var(--chalk-ink);font-weight:700;display:flex;gap:8px;align-items:center;justify-content:center;flex-wrap:wrap}
.delta{font-weight:600;color:var(--dim);font-size:13px;max-width:36ch}
.delta.up{color:var(--good)} .delta.down{color:var(--bad)}
.wave{display:flex;align-items:center;justify-content:center;gap:4px;height:48px}
.wave i{display:block;width:5px;height:6px;border-radius:3px;background:var(--chalk);transition:height .08s}
.call.listening .wave i{background:var(--rec)}
.now{max-width:30ch;font-size:23px;line-height:1.5;margin:0;text-wrap:balance;min-height:1.5em}
.now.wait{color:var(--dim);font-size:18px}
.tone{font-size:14px;color:var(--dim);margin:-6px 0 0;min-height:1.2em}
.row{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.pill{display:inline-flex;align-items:center;gap:6px;background:var(--surface);border:1.5px solid var(--line);border-radius:999px;padding:6px 14px;font-size:14px;font-weight:600}
.pill svg{width:16px;height:16px}
.pill:disabled{opacity:.45;cursor:default}
.heard{align-self:stretch;text-align:right;font-size:15px;color:var(--dim);background:var(--surface);border-radius:10px;padding:8px 12px;border:1px solid var(--line)}
.heard b{color:var(--ink)}
.hint{align-self:stretch;text-align:right;border:1.5px dashed var(--chalk);background:#fdf8ea;border-radius:12px;padding:10px 14px;font-size:16px}
.hint b{color:var(--chalk-ink)}
details.hist{align-self:stretch;text-align:right;border-top:1px solid var(--line);padding-top:10px}
details.hist summary{cursor:pointer;color:var(--dim);font-size:14px}
.lines{display:flex;flex-direction:column;gap:8px;margin-top:10px;font-size:16px}
.lines p{margin:0}
.lines .me{color:var(--chalk-ink)}
.controls{align-self:stretch;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:8px;padding-block:14px calc(10px + env(safe-area-inset-bottom,0px))}
.side{background:none;border:none;color:var(--ink);font-weight:700;font-size:16px;padding:12px 6px}
.side:disabled{opacity:.4}
.hold{width:108px;height:108px;border-radius:50%;border:3px solid var(--ink);background:var(--surface);color:var(--ink);display:grid;place-items:center;justify-self:center;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;transition:transform .15s}
.hold svg{width:40px;height:40px;pointer-events:none}
.hold.rec{border-color:var(--rec);background:var(--rec);color:#fff;transform:scale(1.06);box-shadow:0 0 0 12px rgba(210,85,61,.14)}
.hold:disabled{opacity:.4}
.holdcap{grid-column:1/-1;font-size:16px;font-weight:600;color:var(--ink);min-height:1.4em;font-variant-numeric:tabular-nums}
.call.listening .holdcap{color:var(--rec)}
.dock{position:sticky;bottom:0;align-self:stretch;margin-top:auto;display:flex;flex-direction:column;gap:12px;padding-top:16px;background:linear-gradient(rgba(242,245,241,0),var(--bg) 22px)}
.coach{position:relative;background:var(--ink);color:#fff;border-radius:12px;padding:10px 14px;font-size:16px;text-align:right}
.coach b{color:var(--chalk)}
.coach::after{content:"";position:absolute;bottom:-8px;left:50%;margin-left:-8px;border:8px solid transparent;border-bottom:0;border-top-color:var(--ink)}
body.typing .startbar{position:static;background:none}
.typebox{align-self:stretch;display:flex;gap:8px}
.typebox .field{flex:1;min-width:0}
.typebox .primary{padding:10px 18px;font-size:16px}
.dots::after{content:"";display:inline-block;width:1.2em;text-align:right;animation:dots 1.2s steps(4) infinite}
@keyframes dots{0%{content:""}25%{content:"."}50%{content:".."}75%{content:"..."}}

/* report */
.report h2{font:700 40px/1 var(--f-disp);margin:0}
.report h3{font-size:16px;margin:0 0 8px;color:var(--dim);letter-spacing:.02em}
.report section{display:flex;flex-direction:column;gap:8px}
.summary{font-size:19px;line-height:1.6;margin:0;max-width:60ch}
.chart{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:12px 14px}
.chart svg{width:100%;height:110px;display:block}
.chart .lbl{display:flex;justify-content:space-between;font-size:13px;color:var(--dim);font-variant-numeric:tabular-nums}
.skills{display:flex;flex-direction:column;gap:12px}
.skill{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 12px;align-items:center}
.skill b{font-size:16px}
.skill .dots5{display:flex;gap:4px}
.skill .dots5 i{width:14px;height:14px;border-radius:50%;background:var(--soft)}
.skill .dots5 i.on{background:var(--ink)}
.skill p{grid-column:1/-1;margin:0;font-size:15px;color:var(--dim)}
.quote{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:12px 14px;display:flex;flex-direction:column;gap:4px}
.quote q{font-weight:700}
.quote .better{color:var(--good);font-weight:600}
.quote span{font-size:15px;color:var(--dim)}
.actions{display:flex;flex-wrap:wrap;gap:10px}
.secondary{border:1.5px solid var(--ink);background:none;border-radius:999px;padding:12px 18px;font-weight:700}

/* login */
.login{max-width:420px;justify-content:center;min-height:100%}
.login form{display:flex;flex-direction:column;gap:12px}

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