/* The voice-note recorder. Each page sets these:
   --vn-ink (text), --vn-accent (the button), --vn-on-accent (icon on the button), --vn-field (input background),
   --vn-line (input border), --vn-font (body font), --vn-mono (small labels), --vn-radius */
.voicenote{max-width:520px;margin:0 auto;text-align:center;color:var(--vn-ink);font-family:var(--vn-font)}
.vn-stage > *{display:none}
.vn-stage[data-step="idle"] .vn-rec,
.vn-stage[data-step="recording"] .vn-rec,
.vn-stage[data-step="review"] .vn-review,
.vn-stage[data-step="type"] .vn-typed,
.vn-stage:not([data-step="sent"]) .vn-fields,
.vn-stage:not([data-step="sent"]) .vn-actions,
.vn-stage:not([data-step="sent"]) .vn-promise,
.vn-stage:not([data-step="sent"]) .vn-msg,
.vn-stage[data-step="sent"] .vn-done{display:block}
.vn-stage[data-step="idle"] .vn-fields,.vn-stage[data-step="recording"] .vn-fields,
.vn-stage[data-step="recording"] .vn-actions{display:none}

/* record */
.vn-rec{padding:6px 0 4px}
.vn-btn{width:104px;height:104px;border-radius:50%;border:0;cursor:pointer;background:var(--vn-accent);color:var(--vn-on-accent);
  display:grid;place-items:center;margin:0 auto;position:relative;box-shadow:0 10px 0 rgba(0,0,0,.18);transition:transform .15s, box-shadow .15s}
.vn-btn:hover{transform:translateY(3px);box-shadow:0 7px 0 rgba(0,0,0,.18)}
.vn-btn svg{width:42px;height:42px;fill:currentColor}
.vn-btn::after{content:"";position:absolute;inset:-10px;border-radius:50%;border:2px solid var(--vn-accent);opacity:0}
.vn-stage[data-step="recording"] .vn-btn::after{animation:vn-ring 1.6s ease-out infinite}
@keyframes vn-ring{0%{opacity:.7;transform:scale(.9)}100%{opacity:0;transform:scale(1.35)}}
.vn-meter{display:flex;justify-content:center;align-items:center;gap:3px;height:34px;margin:18px auto 6px;opacity:.25;transition:opacity .3s}
.vn-stage[data-step="recording"] .vn-meter{opacity:1}
.vn-meter i{width:4px;height:100%;border-radius:2px;background:var(--vn-accent);transform:scaleY(.15);transition:transform .08s linear}
.vn-time{font:500 12px var(--vn-mono);letter-spacing:.16em;text-transform:uppercase}

/* review */
.vn-review{display:flex!important;align-items:center;gap:12px;background:var(--vn-field);border:1.5px solid var(--vn-line);border-radius:var(--vn-radius);padding:10px 14px}
.vn-stage:not([data-step="review"]) .vn-review{display:none!important}
.vn-play{width:44px;height:44px;flex:none;border-radius:50%;border:0;background:var(--vn-accent);color:var(--vn-on-accent);cursor:pointer;display:grid;place-items:center}
.vn-play svg{width:20px;height:20px;fill:currentColor}
.vn-bar{flex:1;height:6px;border-radius:3px;background:var(--vn-line);overflow:hidden}
.vn-bar i{display:block;height:100%;width:0;background:var(--vn-accent)}
.vn-len{font:500 12px var(--vn-mono)}
.vn-redo{border:0;background:none;color:inherit;font:500 11px var(--vn-mono);letter-spacing:.14em;text-transform:uppercase;text-decoration:underline;cursor:pointer}

/* typing */
.vn-typed span{display:block;font:500 11px var(--vn-mono);letter-spacing:.16em;text-transform:uppercase;margin-bottom:8px}
.vn-typed textarea,.vn-fields input{width:100%;box-sizing:border-box;font:inherit;font-size:17px;color:var(--vn-ink);background:var(--vn-field);
  border:1.5px solid var(--vn-line);border-radius:var(--vn-radius);padding:12px 14px;outline:none}
.vn-typed textarea:focus,.vn-fields input:focus{border-color:var(--vn-accent)}
.vn-fields{margin-top:14px}
.vn-fields input{margin-bottom:10px}
.vn-hp{position:absolute!important;left:-9999px!important;width:1px!important;height:1px!important;opacity:0}

.vn-actions{margin-top:6px}
.vn-send{border:0;cursor:pointer;background:var(--vn-accent);color:var(--vn-on-accent);font:700 18px var(--vn-font);padding:14px 30px;border-radius:999px;box-shadow:0 7px 0 rgba(0,0,0,.18)}
.vn-send:disabled{opacity:.6;cursor:wait}
.vn-switch{display:block;margin:18px auto 0;border:0;background:none;color:inherit;cursor:pointer;font:500 11px var(--vn-mono);letter-spacing:.14em;text-transform:uppercase;text-decoration:underline;opacity:.8}
.vn-stage[data-step="idle"] .vn-actions .vn-send{display:none}
.vn-stage[data-step="idle"] .vn-actions{display:block}
.voicenote p.vn-promise{font-size:15px;font-style:italic;margin:16px auto 0;max-width:none;opacity:.85}
.voicenote p.vn-msg{min-height:1.2em;margin:10px auto 0;max-width:none;font:500 12px/1.5 var(--vn-mono)}
.vn-done{font-size:21px;line-height:1.4;padding:18px 0}
.vn-done strong{font-size:30px;display:block}
@media (prefers-reduced-motion:reduce){.vn-btn::after{animation:none!important}}