/* ============================================================================
   Hearing 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 guided step ladder, the free-play frequency
   controls and the brand glyph (an ear with two small soundwave ticks).

   Accent — spring green, measured against base.css surfaces (WCAG relative
   luminance):
     dark  #61efa8  12.99:1 on --bg   11.98:1 on --surface   13.44:1 on --bg-sunk
     light #28774f   5.24:1 on --bg    5.47:1 on --surface    4.80:1 on --bg-sunk
   Both clear the 4.5:1 text floor on all three surfaces in both themes.
   ========================================================================= */
:root { --accent: #61efa8; --accent-dim: rgba(97, 239, 168, 0.14); }
@media (prefers-color-scheme: light) {
  :root { --accent: #28774f; --accent-dim: rgba(40, 119, 79, 0.10); }
}

/* brand mark: filled ear "ring" + two stroked soundwave ticks */
.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);
  stroke-width: 2.4;
  stroke-linecap: round;
}

/* ============================================================================
   Shared tool-bay chrome
   ========================================================================= */

.tool {
  background: var(--bg-sunk);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(1rem, 3vw, 1.5rem);
  margin-bottom: 1.5rem;
}
.tool > h2 {
  margin: 0 0 0.6rem;
  padding-bottom: 0.7rem;
  border-bottom: 1px solid var(--line);
}
.tool-intro { color: var(--text-dim); margin-bottom: 1.1rem; }

/* volume field sits above both modes' controls */
.vol-field { margin-bottom: 1.25rem; }
.vol-field .field-label { display: block; margin-bottom: 0.3rem; }
.vol-field input[type="range"] { display: block; width: 100%; }

/* ============================================================================
   Guided step ladder
   ========================================================================= */

.hearing-step {
  padding-top: 0.25rem;
}

.hearing-step .eyebrow { margin: 0 0 0.4rem; }

.hearing-step .readout {
  display: block;
  margin-bottom: 1rem;
  color: var(--accent);
}

.hearing-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

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

/* result card, shown once the ladder finishes */
.hearing-result h3 { margin-top: 0; }
.hearing-result .result-line { margin-bottom: 0.5rem; }
.hearing-result strong { color: var(--accent); }
.hearing-result .retry-row { margin-top: 1rem; }

/* ============================================================================
   Free-play mode
   ========================================================================= */

.manual-fields {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 1rem 1.25rem;
  margin-bottom: 1rem;
}
.manual-fields .field { flex: 0 1 12rem; min-width: 8rem; }
.manual-fields input[type="range"] { flex: 1 1 16rem; min-width: 10rem; }

#manual-presets { margin-bottom: 1.1rem; }

/* ============================================================================
   Mosquito-tone long-tail demo widget
   ========================================================================= */

.mosquito-demo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1rem;
  margin: 1.25rem 0 1.75rem;
}
.mosquito-demo .note { flex: 1 1 18rem; margin: 0; }

/* ============================================================================
   Article furniture shared with other tools
   ========================================================================= */

.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); }

.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;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0.95rem 1.15rem;
  text-decoration: none;
}
.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; }

.sources { font-size: 0.9375rem; }
.sources li { margin-bottom: 0.6em; }
.source-note { color: var(--text-dim); }

.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;
}