/* ============================================================================
   Microphone Test — tool layer over base.css
   base.css supplies reset, type, forms, buttons, chips, badges, panels, tables,
   header, footer, focus rings. This file adds the accent and only what is
   unique to this tool: the level meter, the device row, and the info readout.

   Accent — red, measured against base.css surfaces (WCAG relative luminance):
     dark  #f87171  6.84:1 on --bg   6.31:1 on --surface   7.08:1 on --bg-sunk
     light #b91c1c  6.20:1 on --bg   6.47:1 on --surface   5.68:1 on --bg-sunk
   Both clear the 4.5:1 text floor on all three surfaces in both themes.
   ========================================================================= */
:root { --accent: #f87171; --accent-dim: rgba(248, 113, 113, 0.14); }
@media (prefers-color-scheme: light) {
  :root { --accent: #b91c1c; --accent-dim: rgba(185, 28, 28, 0.10); }
}

.brand svg .mark-bg  { fill: var(--accent); }
.brand svg .mark-fg  { fill: var(--on-accent); }
.brand svg .mark-line{ fill: none; stroke: var(--on-accent); }

/* ============================================================================
   The instrument bay
   ========================================================================= */

.tool {
  background: var(--bg-sunk);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(1rem, 3vw, 1.5rem);
  margin-bottom: 2.5rem;
}

.tool > h2 {
  margin: 0 0 1.1rem;
  padding-bottom: 0.7rem;
  border-bottom: 1px solid var(--line);
}

.mic-idle-msg {
  color: var(--text-dim);
  max-width: 60ch;
  margin-bottom: 1.1rem;
}

.err {
  display: block;
  min-height: 1.2em;
  margin: 0 0 0.9rem;
  font-size: 0.875rem;
  color: var(--err);
}
.err:empty { margin: 0; min-height: 0; }

.mic-controls { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-bottom: 1.4rem; }

/* ---------------------------------------------------------- device row -- */

.mic-device-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 1rem 1.5rem;
  margin-bottom: 1.5rem;
  padding-bottom: 1.4rem;
  border-bottom: 1px solid var(--line);
}
.mic-device-row .field { flex: 1 1 16rem; min-width: 0; }
.mic-device-row select { background: var(--surface); }

.mic-monitor-toggle {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  flex: 1 1 20rem;
  font-size: 0.875rem;
  color: var(--text-dim);
  cursor: pointer;
}
.mic-monitor-toggle input { margin-top: 0.2rem; flex: 0 0 auto; width: auto; }
.mic-monitor-toggle em { color: var(--text-faint); font-style: normal; }

/* ============================================================================
   Level meter — the core "does my mic work" signal. Value is pushed straight
   into inline width/left every animation frame by mic-test.js; the transition
   below only smooths the paint between frames and is neutralised site-wide by
   base.css under prefers-reduced-motion, so no separate JS branch is needed.
   ========================================================================= */

.meter-wrap { margin-bottom: 1.5rem; }

.meter {
  position: relative;
  height: 2rem;
  background: var(--bg);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.meter-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0%;
  background: linear-gradient(90deg, var(--accent), var(--accent));
  transition: width 0.08s linear;
}

.meter-peak {
  position: absolute;
  top: 0; bottom: 0;
  left: 0%;
  width: 2px;
  background: var(--text);
  opacity: 0.85;
  transition: left 0.08s linear;
}

.meter-scale {
  display: flex;
  justify-content: space-between;
  margin-top: 0.3rem;
  font-family: var(--mono);
  font-size: 0.6875rem;
  color: var(--text-faint);
}

.meter-readout {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin-top: 0.9rem;
}
.meter-readout .readout { color: var(--text); }
.meter-readout .badge { border-radius: var(--radius-sm); }
.meter-readout .badge:empty { display: none; }

/* ------------------------------------------------------------- info dl -- */

.mic-info {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr));
  gap: 0.9rem 1.5rem;
  margin: 1.5rem 0 0;
  padding-top: 1.3rem;
  border-top: 1px solid var(--line);
}
.mic-info div { display: grid; gap: 0.2rem; }
.mic-info dt {
  font-family: var(--mono);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.mic-info dd { margin: 0; font-family: var(--mono); font-size: 0.9375rem; overflow-wrap: anywhere; }

/* ============================================================================
   Article furniture shared with other tools' long-form sections
   ========================================================================= */

.section { max-width: 74ch; }
.section table { max-width: none; }

.callout {
  background: var(--bg-sunk);
  border: 1px solid var(--line);
  border-left: 2px solid var(--accent);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 1rem 1.1rem;
  margin: 0 0 1.2em;
  font-size: 0.9375rem;
  color: var(--text-dim);
}
.callout p:last-child { margin-bottom: 0; }
.callout strong { color: var(--text); }

.checklist { display: grid; gap: 0.6rem; margin: 0 0 1.2em; padding: 0; list-style: none; }
.checklist li {
  display: flex;
  gap: 0.65rem;
  align-items: baseline;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 0.65rem 0.85rem;
}
.checklist .num {
  flex: 0 0 auto;
  font-weight: 700;
  color: var(--accent);
  min-width: 1.3em;
}

.pagelinks {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr));
  gap: 0.75rem;
  margin-top: 1.25rem;
}
.pagelinks a {
  display: block;
  text-decoration: none;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0.95rem 1.15rem;
  transition: border-color 0.12s ease;
}
.pagelinks a:hover { border-color: var(--accent); }
.pagelinks strong { display: block; color: var(--accent); margin-bottom: 0.15rem; }
.pagelinks span   { display: block; color: var(--text-dim); font-size: 0.875rem; }

.noscript {
  background: var(--err-bg);
  border: 1px solid var(--err);
  border-radius: var(--radius);
  padding: 0.9rem 1.1rem;
  color: var(--err);
  font-size: 0.9375rem;
}