/* Monitoring surface: one measured pitch, one target, no decorative dashboard. */
pitch-tuner { display:grid; gap:var(--space-3); min-width:0; max-width:100%; }
.tuner-toolbar { display:flex; flex-wrap:wrap; gap:var(--space-3); align-items:end; }
.tuner-toolbar>div { min-width:130px; }
.tuner-target-control { flex:1; max-width:300px; }
.tuner-toolbar select { min-height:var(--target); }
.tuner-toolbar #tuner-listen { margin-left:auto; }
.tuner-strings { display:flex; flex-wrap:wrap; gap:var(--space-2); }
.tuner-strings[hidden] { display:none; }
.tuner-string { flex:1; min-width:75px; display:grid; gap:2px; padding:8px; text-align:left; }
.tuner-string>span { font:var(--text-xs)/1.5 var(--font-sans); color:var(--color-muted); }
.tuner-string strong { font:600 var(--text-lg)/1.2 var(--font-mono); }
.tuner-string[aria-pressed=true] { border-color:var(--color-primary-line); box-shadow:inset 0 0 0 1px var(--color-primary-line); background:var(--color-primary-wash); }
.tuner-string[data-state=in-tune] .tuner-string-state { color:var(--color-ok); font-weight:700; }
.tuner-string[data-state=flat] .tuner-string-state,.tuner-string[data-state=sharp] .tuner-string-state { color:var(--color-danger); font-weight:700; }
.tuner-monitor { display:grid; grid-template-columns:minmax(0,1.5fr) minmax(240px,1fr); align-items:start; gap:var(--space-5); border-block:1px solid var(--color-line); padding-block:var(--space-4); }
.tuner-meter { min-width:0; padding-top:var(--space-2); }
.tuner-note-row { display:flex; align-items:center; justify-content:space-between; gap:var(--space-3); margin-bottom:var(--space-5); }
.tuner-eyebrow { display:block; font:var(--text-xs)/1.5 var(--font-sans); color:var(--color-muted); }
.tuner-note { display:block; font:600 clamp(46px,6vw,68px)/1.15 var(--font-mono); letter-spacing:-3px; }
.tuner-numbers { display:grid; gap:3px; text-align:right; font:var(--text-sm)/1.4 var(--font-mono); font-variant-numeric:tabular-nums; }
.tuner-numbers strong { font-size:var(--text-lg); }
#tuner-target-label { font:var(--text-xs)/1.4 var(--font-sans); color:var(--color-muted); }
.tuner-rail { position:relative; height:28px; margin:0 7px; background:var(--color-wash); border-block:1px solid var(--color-line); }
.tuner-zone { position:absolute; top:0; height:100%; width:10%; left:50%; transform:translateX(-50%); background:var(--color-primary-soft); border-inline:1px solid var(--color-primary-line); }
.tuner-zero { position:absolute; left:50%; top:-6px; bottom:-6px; border-left:2px solid var(--color-muted); }
.tuner-needle { position:absolute; top:-7px; bottom:-7px; width:4px; background:var(--color-ink); transform:translateX(-50%); }
.tuner-needle::before { content:''; position:absolute; top:-5px; left:-4px; width:12px; height:12px; background:inherit; border-radius:50%; }
.tuner-ticks { display:flex; justify-content:space-between; margin-top:9px; color:var(--color-muted); font:var(--text-xs)/1 var(--font-mono); }
.tuner-feedback { margin-top:var(--space-4); font:600 var(--text-lg)/1.4 var(--font-sans); min-height:2.8em; }
#tuner-meter[data-state=in-tune] .tuner-feedback { color:var(--color-ok); }
#tuner-meter[data-state=in-tune] .tuner-needle { background:var(--color-ok); }
#tuner-meter[data-state=flat] .tuner-feedback,#tuner-meter[data-state=sharp] .tuner-feedback { color:var(--color-danger); }
#tuner-meter[data-state=flat] .tuner-needle,#tuner-meter[data-state=sharp] .tuner-needle { background:var(--color-danger); }
.tuner-staff { min-width:0; }
.tuner-staff h2,.tuner-key-section h2,.tuner-guitar-section h2 { font:600 var(--text-md)/1.4 var(--font-sans); margin-bottom:var(--space-2); }
.tuner-staff .score-svg { max-width:400px; min-width:240px; height:228px; }
.tuner-staff .score-scroll { overflow:hidden; }
.tuner-staff .score-status { font-size:var(--text-xs); min-height:20px; }
.tuner-key-section,.tuner-guitar-section { min-width:0; }
.tuner-key-section full-piano { border:1px solid var(--color-line); }
.tuner-details { border-top:1px solid var(--color-line); padding-top:var(--space-2); }
.tuner-details > [data-ui-toggle] { min-height:44px; }
.tuner-settings { display:flex; flex-wrap:wrap; gap:var(--space-4); margin-block:var(--space-3); }
.tuner-settings label { display:block; max-width:200px; }
#tuner-message { min-height:1.5em; }
.tuner-live { margin-block:var(--space-2) var(--space-4); min-width:0; }
.tuner-live-heading,.tuner-scale-heading { display:flex; flex-wrap:wrap; justify-content:space-between; gap:4px 12px; font:var(--text-xs)/1.5 var(--font-sans); color:var(--color-muted); }
.tuner-live-heading { margin-bottom:10px; }
.tuner-live-heading strong { display:inline-block; min-width:34px; margin-left:6px; color:var(--color-ink); font:600 var(--text-md)/1.5 var(--font-mono); }
.tuner-live-rail { position:relative; height:22px; margin-inline:8px; border-block:1px solid var(--color-line); background:var(--color-wash); }
.tuner-live-pointer { position:absolute; left:50%; top:50%; width:18px; height:18px; transform:translate(-50%,-50%); border:2px solid var(--color-surface); border-radius:50%; background:var(--color-primary-text); box-shadow:0 0 0 1px var(--color-primary-text); }
.tuner-live-target { position:absolute; top:-5px; bottom:-5px; border-left:2px dashed var(--color-muted); }
.tuner-live-trail i { position:absolute; top:50%; transform:translate(-50%,-50%); width:9px; height:9px; border-radius:50%; background:var(--color-primary-text); }
.tuner-live-labels { position:relative; height:21px; margin-inline:8px; color:var(--color-muted); font:var(--text-xs)/1.5 var(--font-mono); }
.tuner-live-labels span { position:absolute; top:3px; transform:translateX(-50%); }
.tuner-scale-heading { margin-bottom:10px; }
.tuner-zone { min-width:2px; }
.tuner-needle { width:5px; }
.tuner-needle::before { left:-5px; width:15px; height:15px; }
@media(prefers-reduced-motion:reduce){ .tuner-live-trail { display:none; } }
@media(max-width:760px){
 .tuner-monitor { grid-template-columns:minmax(0,1fr); gap:var(--space-2); }
 .tuner-toolbar { gap:var(--space-2); }
 .tuner-toolbar>div { flex:1; min-width:100px; }
 .tuner-toolbar #tuner-listen { width:100%; margin-left:0; }
 .tuner-note-row { margin-bottom:var(--space-4); }
 .tuner-staff .score-svg { max-width:100%; height:210px; }
 .tuner-string { flex-basis:28%; }
 .tuner-target-control { max-width:none; }
 .tuner-feedback { min-height:1.4em; }
}