@import url('./funnels.css');

/* The free voice recorder (online-voice-recorder.html): the time recorded in large figures,
   one large Record button (Stop takes its place while recording), and the take's player
   across the panel. Everything else is funnels.css. */
.recorder-clock { display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:4px 16px; margin-bottom:14px; }
.tool-panel .recorder-time { margin:0; color:var(--snow); font:600 clamp(40px,7vw,56px)/1 var(--sans); font-variant-numeric:tabular-nums; letter-spacing:-.02em; }
.tool-panel .recorder-limit { margin:0; color:var(--snow-3); font-size:14px; }
.recorder-controls { justify-content:center; }
.recorder-controls .pill { min-width:220px; min-height:64px; padding:16px 36px; font-size:20px; }
/* The record dot and the stop square are filled shapes, not the pills' usual arrow strokes. */
.recorder-controls .pill svg { width:16px; height:16px; fill:currentColor; stroke:none; }
.tool-panel .recorder-processing:empty { display:none; }
#take-title { margin:0 0 6px; color:var(--snow); font-size:17px; font-weight:650; letter-spacing:-.01em; }
#take-audio { display:block; width:100%; min-height:44px; margin-top:12px; color-scheme:dark; }
#mp3-progress { margin-top:12px; }
#mp3-progress progress { width:100%; }