/* Tuner component (feat-044). Mobile first: one column, large touch targets. Colours carry state, and every state also
   has text (the action line), so the needle is never the only signal. */
.tuner {
  --tuner-ink: #1c2330; --tuner-muted: #5b6676; --tuner-line: #d7dde6; --tuner-surface: #ffffff; --tuner-soft: #f3f5f8;
  --tuner-good: #1f8a4c; --tuner-warn: #b86a00; --tuner-accent: #2457d6;
  color: var(--tuner-ink); background: var(--tuner-surface); border: 1px solid var(--tuner-line); border-radius: 16px;
  padding: 20px 16px; max-width: 560px; margin: 0 auto; box-sizing: border-box;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
.tuner *, .tuner *::before, .tuner *::after { box-sizing: border-box; }
.tuner-dial { text-align: center; padding: 8px 0 4px; }
.tuner-note { font-size: 72px; line-height: 1; font-weight: 700; letter-spacing: -0.02em; min-height: 72px; }
.tuner-scale { position: relative; height: 96px; margin: 8px auto 0; max-width: 320px; overflow: hidden; border-bottom: 2px solid var(--tuner-line); }
.tuner-zone { position: absolute; left: 50%; bottom: 0; width: 28px; height: 100%; transform: translateX(-50%); background: linear-gradient(to top, rgba(31, 138, 76, 0.18), rgba(31, 138, 76, 0)); }
.tuner-needle { position: absolute; left: 50%; bottom: 0; width: 4px; height: 88px; border-radius: 2px; background: var(--tuner-muted); transform-origin: 50% 100%; transform: translateX(-50%) rotate(0deg); transition: transform 90ms linear, background-color 120ms linear, opacity 120ms linear; opacity: 0.25; }
.tuner-needle[data-visible="true"] { opacity: 1; }
.tuner-dial[data-state="flat"] .tuner-needle, .tuner-dial[data-state="sharp"] .tuner-needle { background: var(--tuner-warn); }
.tuner-dial[data-state="in_tune"] .tuner-needle { background: var(--tuner-good); }
.tuner-dial[data-state="in_tune"] .tuner-note { color: var(--tuner-good); }
.tuner-cents { min-height: 22px; margin-top: 6px; font-size: 15px; color: var(--tuner-muted); font-variant-numeric: tabular-nums; }
.tuner-action { min-height: 28px; margin: 4px 0 10px; text-align: center; font-size: 18px; font-weight: 600; }
.tuner-strings { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.tuner-string { display: grid; grid-template-columns: 1fr 52px; gap: 8px; }
.tuner-string-pick, .tuner-tone, .tuner-start, .tuner-reset { font: inherit; color: inherit; cursor: pointer; border: 1px solid var(--tuner-line); border-radius: 12px; background: var(--tuner-soft); min-height: 52px; }
.tuner-string-pick { display: grid; grid-template-columns: 28px auto 1fr; align-items: center; gap: 10px; padding: 6px 14px; text-align: left; }
.tuner-string-number { color: var(--tuner-muted); font-size: 14px; }
.tuner-string-note { font-size: 24px; font-weight: 700; min-width: 34px; }
.tuner-string-hz { justify-self: end; color: var(--tuner-muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.tuner-string-pick[aria-pressed="true"] { border-color: var(--tuner-accent); background: #eaf0ff; box-shadow: inset 0 0 0 1px var(--tuner-accent); }
.tuner-string[data-tuned="true"] .tuner-string-pick { border-color: var(--tuner-good); }
.tuner-string[data-tuned="true"] .tuner-string-number::after { content: " ✓"; color: var(--tuner-good); font-weight: 700; }
.tuner-tone { font-size: 22px; }
.tuner-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 4px; }
.tuner-start { flex: 1 1 180px; background: var(--tuner-accent); border-color: var(--tuner-accent); color: #fff; font-weight: 700; font-size: 18px; padding: 0 18px; }
.tuner-reset { padding: 0 16px; }
.tuner-auto { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; min-height: 44px; }
.tuner-auto input { width: 20px; height: 20px; }
.tuner-status { min-height: 22px; margin: 10px 0 14px; font-size: 15px; color: var(--tuner-muted); }
.tuner button:focus-visible, .tuner input:focus-visible { outline: 3px solid var(--tuner-accent); outline-offset: 2px; }
@media (min-width: 520px) { .tuner { padding: 28px; } .tuner-note { font-size: 88px; min-height: 88px; } }
@media (prefers-reduced-motion: reduce) { .tuner-needle { transition: none; } }
@media (prefers-color-scheme: dark) {
  .tuner { --tuner-ink: #eef1f6; --tuner-muted: #a3adbb; --tuner-line: #364152; --tuner-surface: #161b24; --tuner-soft: #1f2632; --tuner-good: #4cc37f; --tuner-warn: #f0a23b; --tuner-accent: #6c93ff; }
  .tuner-string-pick[aria-pressed="true"] { background: #1c2a4d; }
  .tuner-start { color: #0c1220; }
}