/* voice-recorder: styles only it uses, split out of site.css by scripts/split-css.mjs. */
.meter-weak { background: var(--bad); }
.meter-fair { background: var(--warn); }
.meter-strong { background: var(--good); }
.meter-very-strong { background: linear-gradient(90deg, var(--good), #0BB37A); }
.recorder-live { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 14px; padding: 12px 16px; border: 1px solid var(--line); border-radius: var(--r-panel); background: var(--mist); }
.recorder-live[hidden] { display: none; }
.recorder-live strong { font-family: var(--display); font-size: 1.5rem; font-variant-numeric: tabular-nums; min-width: 4ch; }
.rec-dot { width: 14px; height: 14px; border-radius: 50%; background: var(--bad); animation: rec-blink 1.2s infinite; }
.rec-dot[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { .rec-dot { animation: none; } }
#vr-options.is-disabled { opacity: 0.55; pointer-events: none; }
.vr-meter-wrap { margin-top: 14px; padding: 12px; border: 1px solid var(--line); border-radius: var(--r-panel); background: var(--ink); }
.vr-wave { display: block; width: 100%; height: 90px; }
.vr-level { height: 6px; margin-top: 8px; border-radius: 3px; background: rgb(255 255 255 / 0.15); overflow: hidden; }
.vr-level span { display: block; width: 0; height: 100%; background: var(--good); transition: width 0.08s linear; }
.vr-level span.is-hot { background: var(--bad); }
.vr-takes { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 12px; }
.vr-take { padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-panel); background: var(--paper); }
.vr-take-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px; font-weight: 600; }
.vr-take audio { display: block; width: 100%; margin: 8px 0; }