/* mic-test.css : mic test. Hard-coded colours only inside the .display panel. */
#mic-test .mic-top .mic-start { flex: 2 1 170px; }
#mic-test .mic-top .mic-rec { flex: 1 1 130px; white-space: nowrap; padding-left: 12px; padding-right: 12px; }
#mic-test .mic-privacy { margin: 10px 0; }
#mic-test [data-notice] { margin: 0 0 12px; }
#mic-test .mic-display { padding: 16px 16px 14px; margin-top: 4px; }
#mic-test .mic-verdict { margin-bottom: 12px; color: #e7e5e4; }
#mic-test .mic-display[data-verdict="good"] .mic-verdict { color: #4ade80; }
#mic-test .mic-display[data-verdict="quiet"] .mic-verdict { color: #fbbf24; }
#mic-test .mic-display[data-verdict="loud"] .mic-verdict,
#mic-test .mic-display[data-verdict="none"] .mic-verdict { color: #f87171; }
#mic-test .mic-meter { position: relative; height: 28px; border-radius: 14px; background: #292524; overflow: hidden; }
#mic-test .mic-bar { position: absolute; inset: 0; transform-origin: left center; transform: scaleX(0);
  background: linear-gradient(90deg, #4ade80 0%, #4ade80 75%, #fbbf24 88%, #f87171 100%); background-size: 100% 100%; }
#mic-test .mic-hold { position: absolute; top: 0; bottom: 0; left: 0; width: 3px; margin-left: -1px; background: #ffffff; }
#mic-test .mic-scale { display: flex; justify-content: space-between; margin: 4px 2px 0; font-size: 12px; font-variant-numeric: tabular-nums; }
#mic-test .mic-level { margin-top: 10px; }
#mic-test .mic-unit { margin-left: 6px; font-size: 16px; }
#mic-test .mic-display .big { font-size: 56px; }
#mic-test .mic-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
#mic-test .mic-stats .panel { padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
#mic-test .mic-stats b { font-size: 16px; font-variant-numeric: tabular-nums; color: var(--ink); overflow-wrap: anywhere; }
#mic-test .mic-note { margin: 6px 0 0; }
#mic-test .mic-scopes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
#mic-test .mic-scope { border: 1px solid var(--line); border-radius: 12px; padding: 8px 10px; background: var(--card); min-width: 0; }
#mic-test .mic-scope canvas { display: block; width: 100%; height: 96px; margin-top: 4px; }
#mic-test .mic-devrow { margin-top: 14px; }
#mic-test .mic-dev { flex: 1 1 240px; min-width: 0; }
#mic-test .mic-dev select { flex: 1; min-width: 0; max-width: 100%; min-height: 44px; }
#mic-test .mic-devrow .chip { min-height: 44px; }
#mic-test [data-dev-note] { margin: 6px 0 0; overflow-wrap: anywhere; }
#mic-test .mic-recrow { margin-top: 10px; }
#mic-test .mic-recrow .chip { min-height: 44px; }
#mic-test [data-rec-note] { margin: 6px 0 0; }
#mic-test .mic-rec[aria-pressed="true"] { border-color: var(--bad); color: var(--bad); }
#mic-test .mic-keys { margin: 10px 0 0; }
@media (max-width: 640px) {
  #mic-test .mic-stats { grid-template-columns: 1fr 1fr; }
  #mic-test .mic-scopes { grid-template-columns: 1fr; }
  #mic-test .mic-scope canvas { height: 72px; }
  #mic-test .mic-display .big { font-size: 44px; }
}
@media (hover: none) { #mic-test .mic-keys { display: none; } }