/* Mic Test Online — mic-only rules. Shared tokens and components (header bar,
 * stats, readout cards, panels, log table, chips, FAQ/troubleshooting) live in
 * ../base.css, loaded before this file. The canvases cannot read tokens, so
 * app.js re-reads them from the computed style when the theme moves.
 */

.logo-plate { fill: var(--accent); }
.logo-mic { fill: none; stroke: var(--on-accent); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.btn.live { color: var(--accent); border-color: var(--accent); }
.btn.rec-on { color: var(--bad); border-color: var(--bad); }

/* The clipping colour is mic-specific; the rest of the readout card is in base.css. */
.now-value.hot { color: var(--bad); }

/* ---------- scope ---------- */
.scope-wrap { margin: 18px 0 10px; }
.scope {
  position: relative;
  background: var(--panel); border: 1px solid var(--line); border-radius: 14px;
  padding: 16px clamp(12px, 2vw, 20px);
  box-shadow: var(--shadow);
  display: flex; flex-direction: column; gap: 16px;
}

.meter { position: relative; height: 42px; border-radius: 9px; overflow: hidden; border: 1px solid var(--line); background: var(--panel-2); }
.meter-bar {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, var(--accent) 0%, var(--accent) 64%, var(--warn) 84%, var(--bad) 97%);
}
/* The unfilled part is painted over rather than the fill being sized, so the colour ramp
   stays anchored to the dB scale instead of stretching with the level. */
.meter-mask { position: absolute; top: 0; bottom: 0; right: 0; left: var(--level, 0%); background: var(--panel-2); }
.meter-seg {
  position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(90deg, transparent 0 11px, var(--panel) 11px 13px);
  opacity: .5;
}
.meter-peak {
  position: absolute; top: 3px; bottom: 3px; width: 2px; left: var(--peak, 0%);
  background: var(--text); opacity: .7; border-radius: 2px;
}
.meter-scale {
  display: flex; justify-content: space-between; margin-top: 5px;
  font-family: var(--mono); font-size: 0.62rem; color: var(--dim); font-variant-numeric: tabular-nums;
}
.meter-scale b { font-weight: 400; color: var(--accent); }

.viz-row { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 16px; }
@media (max-width: 820px) { .viz-row { grid-template-columns: 1fr; } }
.viz-box { min-width: 0; }
.viz-box h2 { margin-bottom: 7px; }
canvas.viz {
  display: block; width: 100%; height: 168px;
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 10px;
}

.gate {
  position: absolute; inset: 0; z-index: 2; border-radius: 14px;
  display: grid; place-content: center; justify-items: center; gap: 12px;
  padding: 24px; text-align: center;
  background: color-mix(in oklab, var(--panel) 90%, transparent);
  backdrop-filter: blur(2px);
}
.gate[hidden] { display: none; }
.gate p { margin: 0; max-width: 46ch; color: var(--muted); font-size: 0.85rem; line-height: 1.55; }
.gate p.err { color: var(--bad); }

/* ---------- log rows ---------- */
table.log td.t, table.log td.ev { white-space: nowrap; }
table.log td.detail { color: var(--muted); }
table.log tr.warn td.detail { color: var(--warn); }
table.log tr.bad td.detail { color: var(--bad); }

.rec { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.rec-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--bad); animation: pulse 1s ease-in-out infinite; }
.rec-dot[hidden] { display: none; }
@keyframes pulse { 50% { opacity: .2; } }
.rec-time { font-family: var(--mono); font-size: 0.8rem; color: var(--muted); font-variant-numeric: tabular-nums; }
audio { width: 100%; margin-top: 10px; }
.dl { display: inline-block; margin-top: 6px; font-size: 0.76rem; color: var(--accent); }
.dl[hidden] { display: none; }

.chips li.pass { color: var(--good); border-color: color-mix(in oklab, var(--good) 45%, var(--line)); }
.chips li.warn { color: var(--warn); border-color: color-mix(in oklab, var(--warn) 45%, var(--line)); }
.chips li.fail { color: var(--bad); border-color: color-mix(in oklab, var(--bad) 45%, var(--line)); }

@media (prefers-reduced-motion: reduce) {
  .rec-dot { animation: none; }
}