/* ============================================================================
   Guitar Tuner — 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 pitch readout, the cents needle/meter, the tuning
   selector and its per-string chips.

   Accent — cyan, measured against base.css surfaces (WCAG relative luminance):
     dark  #61d1ef  10.7:1 on --bg   9.9:1 on --surface   11.1:1 on --bg-sunk
     light #10738e  5.2:1 on --bg    5.4:1 on --surface   4.8:1 on --bg-sunk
   Both clear the 4.5:1 text floor on all three surfaces in both themes.
   ========================================================================= */
:root { --accent: #61d1ef; --accent-dim: rgba(97, 209, 239, 0.14); }
@media (prefers-color-scheme: light) {
  :root { --accent: #10738e; --accent-dim: rgba(16, 115, 142, 0.10); }
}

.brand svg .mark-bg  { fill: var(--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);
}

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

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

/* ---------------------------------------------------------- config row -- */

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

.tuner-strings { flex: 1 1 20rem; }
.tuner-strings .chip { font-family: var(--mono); }
.tuner-strings .chip[aria-pressed="true"] {
  color: var(--on-accent);
  background: var(--accent);
  border-color: var(--accent);
}

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

.tuner-readout { margin-bottom: 1.5rem; }

.tuner-status {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--text-dim);
  margin: 0 0 0.9rem;
}
.tuner-status-in-tune { color: var(--ok); }
.tuner-status-close   { color: var(--warn); }
.tuner-status-off     { color: var(--err); }

.tuner-note-row {
  display: flex;
  align-items: baseline;
  gap: 0.3rem;
  margin-bottom: 1.1rem;
}
.tuner-note {
  font-family: var(--mono);
  font-size: clamp(2.5rem, 10vw, 3.5rem);
  font-weight: 700;
  line-height: 1;
  color: var(--text);
}
.tuner-octave {
  font-family: var(--mono);
  font-size: 1.25rem;
  color: var(--text-faint);
}

/* Needle/meter: -50..+50 cents. Value is pushed straight into inline `left`
   every animation frame by guitar-tuner.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 — the
   needle keeps working, it just stops sliding between positions. */

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

.tuner-meter-zone {
  position: absolute;
  top: 0; bottom: 0;
  left: 45%;
  width: 10%;
  background: var(--ok-bg);
  border-left: 1px solid var(--ok);
  border-right: 1px solid var(--ok);
}

.tuner-meter-tick {
  position: absolute;
  top: 0; bottom: 0;
  width: 1px;
  background: var(--line-strong);
}
.tuner-meter-tick-center { background: var(--text-faint); width: 2px; }

.tuner-needle {
  position: absolute;
  top: 0; bottom: 0;
  width: 3px;
  margin-left: -1.5px;
  background: var(--accent);
  transition: left 0.1s linear;
}

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

/* ------------------------------------------------------------- stats dl -- */

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

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

table.tunings-table th, table.tunings-table td { text-align: left; }