/* ── The free scan ────────────────────────────────────────────────────────
   The scanner has its own page now (/test-voice/), so this stylesheet only
   has to describe the instrument itself. Reuses that page's tokens and .btn
   — a second button style would read as a second product. */

.scan-head{font-family:var(--display);font-weight:700;font-size:16px;margin:0 0 4px}
.scan-sub{font-size:13.5px;color:var(--faint);margin:0 0 16px}

/* ── The passage ── */
.passage{
  background:var(--surface-2);border:1px solid var(--line);border-radius:12px;
  padding:15px 16px;margin:0 0 16px;
}
.passage p{
  font-size:15px;line-height:1.62;color:var(--muted);margin:0 0 9px;
  transition:color .3s;
}
.passage p:last-child{margin-bottom:0}
.passage p.lit{color:var(--ink)}

/* ── Live trace. Level, deliberately not pitch: a live pitch number that
     lands a few hertz off the measured one would discredit the measured
     one, and the trace is here for nerve, not for data. ── */
.trace-wrap{position:relative;height:64px;margin:0 0 14px}
#trace{width:100%;height:64px;display:block;border-radius:8px;background:var(--surface-2)}
.trace-time{
  position:absolute;right:9px;top:8px;font-size:12px;color:var(--faint);
  font-variant-numeric:tabular-nums;letter-spacing:.02em;
}
.trace-time b{color:var(--brass);font-weight:600}

.trace-warn{
  display:none;font-size:12.5px;color:#E8907A;margin:-6px 0 12px;
  text-align:center;line-height:1.45;
}
.scan-note{font-size:12.5px;color:var(--faint);margin:11px 0 0;line-height:1.5;text-align:center}
.scan-err{font-size:13.5px;color:#E8907A;margin:12px 0 0;line-height:1.5}

/* ── The mic check ── */
.meter{
  height:12px;border-radius:7px;background:var(--surface-2);
  border:1px solid var(--line);overflow:hidden;margin:4px 0 2px;
}
.meter i{
  display:block;height:100%;width:0;background:var(--gain);
  border-radius:7px;transition:width .06s linear,background .2s;
}

/* ── The countdown ── */
.countdown{
  font-family:var(--display);font-weight:700;font-size:64px;line-height:1;
  color:var(--brass);text-align:center;margin:18px 0 6px;
  font-variant-numeric:tabular-nums;
}

/* What the microphone actually delivered. A failure that shows its working
   is the only kind that belongs on this page. */
.scan-diag{
  font-size:12px;color:var(--faint);margin:9px 0 0;line-height:1.5;
  font-variant-numeric:tabular-nums;
}

/* ── Working ── */
.working{text-align:center;padding:26px 0}
.working .spin{
  width:26px;height:26px;margin:0 auto 13px;border-radius:50%;
  border:2px solid var(--line-lift);border-top-color:var(--brass);
  animation:spin .8s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}
.working p{font-size:13.5px;color:var(--muted);margin:0}

/* ── The result ── */
.res-hz{
  font-family:var(--display);font-weight:700;
  font-size:clamp(46px,13vw,62px);line-height:1;letter-spacing:-.02em;
  color:var(--ink);margin:0;font-variant-numeric:tabular-nums;
}
.res-hz span{font-size:.32em;color:var(--faint);margin-left:5px;letter-spacing:0;font-weight:600}
.res-pct{font-size:15px;color:var(--muted);margin:9px 0 3px;line-height:1.5}
.res-pct b{color:var(--brass);font-weight:700}
.res-meta{font-size:12.5px;color:var(--faint);margin:0 0 16px}

/* Population curve with the marker. */
.curve{height:76px;margin:2px 0 8px}
.curve svg{width:100%;height:100%;display:block;overflow:visible}
.curve-ax{display:flex;justify-content:space-between;font-size:11px;color:var(--faint);
  font-variant-numeric:tabular-nums;margin-bottom:14px}

/* The comparison toggle. One tap, client-side, no re-record. Sits ABOVE the
   number: it changes what the number means, so it reads first. */
.cmp{display:flex;gap:7px;align-items:center;margin:0 0 16px;flex-wrap:wrap}
.cmp-label{font-size:12.5px;color:var(--faint)}
.cmp-btn{
  background:var(--surface-2);border:1px solid var(--line);color:var(--muted);
  font-family:var(--body);font-size:12.5px;font-weight:600;
  padding:5px 11px;border-radius:999px;cursor:pointer;transition:.15s;
}
.cmp-btn[aria-pressed="true"]{background:rgba(232,201,160,.13);border-color:var(--brass-deep);color:var(--brass)}

.res-cta{margin-top:20px}
.res-cta .btn{width:100%}
.res-bridge{
  font-size:13.5px;color:var(--muted);line-height:1.55;margin:14px 0 0;text-align:center;
}
.res-bridge b{color:var(--ink);font-weight:700}

.share-row{display:flex;gap:9px;margin-top:13px}
.share-btn{
  flex:1;height:42px;border-radius:10px;cursor:pointer;
  background:transparent;border:1px solid var(--line-lift);color:var(--muted);
  font-family:var(--body);font-weight:600;font-size:13.5px;transition:.15s;
}
.share-btn:hover{border-color:var(--brass-deep);color:var(--brass)}

/* Shared-link view: someone else's result, with a mic under it. */
.res-owner{
  font-size:12.5px;color:var(--faint);margin:0 0 10px;
  letter-spacing:.05em;text-transform:uppercase;font-weight:700;
}

@media (prefers-reduced-motion:reduce){
  .working .spin{animation:none}
  .passage p{transition:none}
}