/* Voice recorder: the microphone choice, the recording deck (waveform,
   clock, level, buttons) and the list of takes. Site tokens only. */
.vr-setup { display: flex; flex-wrap: wrap; align-items: end; gap: 12px 24px; }
.vr-mic { flex: 1 1 260px; max-width: 460px; }
.vr-proc { flex: 1 1 260px; align-self: center; }
.vr-proc small { display: block; }

.vr-deck { display: grid; gap: 14px; }
.vr-wave { height: 140px; }
.vr-readings { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 24px; }
.vr-clock { display: flex; align-items: center; gap: 12px; margin: 0; font: 600 clamp(40px, 7vw, 56px)/1 var(--f-display); font-variant-numeric: tabular-nums; }
.vr-clock .led { width: 14px; height: 14px; }
.vr-max { font: 500 16px/1 var(--f-body); color: var(--muted); }
.vr-level { display: grid; gap: 6px; flex: 1 1 220px; max-width: 420px; }
.vr-k { font-size: 14px; font-weight: 500; color: var(--muted); }
.vr-buttons button { min-width: 130px; }
.vr-status { margin: 0; font-weight: 500; }

.vr-takes-wrap { display: grid; gap: 10px; padding-top: 16px; border-top: 1px dashed var(--line); }
.vr-h { font-size: 19px; }
.vr-empty { margin: 0; color: var(--muted); }
.vr-takes { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.vr-take { display: grid; gap: 10px; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--sunk); }
.vr-take-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; }
.vr-facts { font-family: var(--f-mono); font-size: 13px; }
.vr-take audio { width: 100%; max-width: 560px; }
.vr-take-level { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 15px; }
.vr-take-level .led { margin: 0 2px; }

@media (max-width: 520px) {
  .vr-buttons { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); }
  .vr-buttons button { min-width: 0; padding-inline: 10px; }
}