/* ============================================================================
   Tone Generator — 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 frequency/note readout, the frequency row and the
   range-slider theming.

   Accent — lime, measured against base.css surfaces (WCAG relative luminance):
     dark  #d8ef61  14.80:1 on --bg   13.66:1 on --surface   15.32:1 on --bg-sunk
     light #636f25   5.25:1 on --bg    5.48:1 on --surface    4.82:1 on --bg-sunk
   Both clear the 4.5:1 text floor on all three surfaces in both themes.
   ========================================================================= */
:root { --accent: #d8ef61; --accent-dim: rgba(216, 239, 97, 0.14); }
@media (prefers-color-scheme: light) {
  :root { --accent: #636f25; --accent-dim: rgba(99, 111, 37, 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); stroke-width: 2; stroke-linecap: round; }

/* ============================================================================
   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);
}

/* ---------------------------------------------------------------- readout -- */

.tone-readout {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem 1rem;
  margin-bottom: 1.5rem;
}

.tone-readout .readout { color: var(--accent); }

.note-readout {
  font-family: var(--mono);
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-dim);
}

/* ------------------------------------------------------------- frequency -- */

.freq-row {
  display: grid;
  grid-template-columns: minmax(6.5rem, 8rem) 1fr;
  gap: 0.75rem;
  align-items: center;
}
@media (max-width: 26rem) {
  .freq-row { grid-template-columns: 1fr; }
}

.freq-row input[type="number"] {
  font-family: var(--mono);
  font-feature-settings: "tnum" 1, "zero" 1;
}

/* -------------------------------------------------------------- controls -- */

.fields-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr));
  gap: 1rem 1.25rem;
  margin-top: 1.1rem;
}

.vol-value {
  font-family: var(--mono);
  font-weight: 400;
  text-transform: none;
  letter-spacing: normal;
  color: var(--text-dim);
}

/* base.css never styles input[type=range] — every tool that needs one adds
   its own minimal theme. accent-color alone gets native thumb/track colour
   in every current engine; the height just gives the thumb a fair touch
   target on mobile. */
input[type="range"] {
  width: 100%;
  accent-color: var(--accent);
  background: transparent;
  height: 1.75rem;
  padding: 0;
}

.chips { margin-top: 1.1rem; }

.hearing-note,
#hearing-note {
  margin-top: 1.25rem;
}

.toolbar { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.25rem; }

#play-btn {
  min-width: 8rem;
}

/* ============================================================================
   Article furniture
   ========================================================================= */

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

.formula {
  overflow-x: auto;
  background: var(--bg-sunk);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1rem 1.1rem;
  margin: 0 0 1.2em;
  font-family: var(--mono);
  font-size: 0.875rem;
  line-height: 1.7;
  white-space: pre;
}

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

td .mono, th .mono { white-space: nowrap; }

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