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

/* The spectrum check (/audio-spectrum-check.html). funnels.css draws the panel, the canvas
   and the switch; this adds a frequency scale over the spectrogram, so a cut at 16 or 20 kHz
   can be read off the picture, and the start and end times under it. */
.spectrum-frame { position:relative; margin-top:14px; }
.spectrum-frame .tool-canvas { margin-top:0; }
/* Six equal rows from 24 kHz at the top: each label sits under its own line, 4 kHz apart,
   matching the drawing, which runs evenly from 0 at the bottom to 24 kHz at the top. */
.spectrum-scale { position:absolute; inset:0; display:grid; grid-template-rows:repeat(6,1fr); margin:0; padding:0; list-style:none; pointer-events:none; }
.spectrum-scale li { padding:3px 6px; border-top:1px solid #ffffff2e; font-size:12px; line-height:1.3; font-variant-numeric:tabular-nums; }
.spectrum-scale li:first-child { border-top-color:transparent; }
/* A dark backing keeps the label readable over the brightest parts of the picture. */
.spectrum-scale span { padding:0 4px; border-radius:4px; background:#07080abf; color:var(--snow-2); }
.spectrum-times { display:flex; justify-content:space-between; margin-top:6px; color:var(--snow-3); font-size:12px; font-variant-numeric:tabular-nums; }
.tool-panel .spectrum-reading { margin:14px 0 0; color:var(--snow); font-size:16px; text-wrap:pretty; }
.tool-panel .quick-head p { color:var(--snow-3); font-size:13px; }
.spectrum-music { margin-top:14px; }
#kind-status { margin-top:10px; }
.tool-tabs button[aria-disabled="true"] { cursor:wait; }