/* Tuner page styles (loaded after site.css; uses its tokens). */

.tuner-layout { display: grid; gap: var(--s-5); grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 1100px) { .tuner-layout { grid-template-columns: minmax(0, 1.5fr) minmax(24rem, 1fr); gap: var(--s-6); } }
.tuner-side { display: grid; gap: var(--s-5); min-width: 0; }

/* stage */
.tuner-stage { transition: border-color var(--t-slow) var(--ease-out), box-shadow var(--t-slow) var(--ease-out); }
.tuner-stage.is-tuned { border-color: var(--teal); box-shadow: 0 0 0 3px var(--teal); }
.tuner-stage.is-tuned { box-shadow: 0 0 0 3px var(--teal), 0 0 28px 4px color-mix(in srgb, var(--teal) 35%, transparent); }

/* gauge: needle pivots at the peg (200, 214 in the 400 x 236 view box) */
.gauge-wrap { margin: 0 auto; width: 100%; max-width: 440px; }
.gauge { display: block; width: 100%; height: auto; overflow: visible; }
.gauge .gauge-band { fill: none; stroke: var(--surface-2); stroke-width: 16; stroke-linecap: round; }
.gauge .zone { fill: none; stroke: var(--teal); stroke-width: 16; opacity: .35; transition: opacity var(--t-slow) var(--ease-out); }
.tuner-stage.is-tuned .gauge .zone { opacity: .95; }
.gauge .tick { stroke: var(--line-strong); stroke-width: 2; }
.gauge .tick.major { stroke: var(--text); stroke-width: 3; }
.gauge .label, .gauge .side-label { fill: var(--muted); font: 600 13px var(--font-body); }
.gauge .needle { transform-origin: 200px 214px; transform-box: view-box; transition: transform 150ms var(--ease-out); }
.gauge .needle line { stroke: var(--indigo); stroke-width: 4; stroke-linecap: round; }
.gauge .needle-tip { fill: var(--saffron); }
.gauge .needle.idle line { stroke: var(--line-strong); }
.gauge .needle.idle .needle-tip { fill: var(--line-strong); }
.tuner-stage.is-tuned .gauge .needle-tip { fill: var(--teal); }
.gauge .peg-rim { fill: var(--surface-2); stroke: var(--saffron-edge); stroke-width: 3; }
.gauge .peg-core { fill: var(--saffron); }
.gauge #peg-knurl { transform-origin: 200px 214px; transform-box: view-box; transition: transform 150ms var(--ease-out); }
.gauge #peg-knurl line { stroke: var(--line-strong); stroke-width: 2.5; stroke-linecap: round; }

/* readout */
.tuner-readout { text-align: center; margin-top: var(--s-2); transition: opacity var(--t-slow) var(--ease-out); }
.tuner-stage.is-quiet .tuner-readout { opacity: .55; }
.tuner-note { font-family: var(--font-num); font-size: var(--step-num); /* round 5: was clamp(3.25rem, 2.4rem + 3vw, 6rem) */ font-weight: 800; line-height: 1; min-height: 1.1em; letter-spacing: -.01em; }
.tuner-note small { font-size: .35em; font-weight: 700; color: var(--muted); margin-left: 4px; letter-spacing: 0; }
.tuner-deva { font-size: var(--step-1); color: var(--saffron-text); }
.tuner-deva:empty { display: none; }
.tuner-cents { font-size: 1.3rem; font-weight: 700; font-variant-numeric: tabular-nums; min-height: 1.6em; }
.tuner-cents.in-tune { color: var(--teal); }
.tuner-cents.off { color: var(--rose); }
.tuner-sub { color: var(--muted); min-height: 1.6em; font-variant-numeric: tabular-nums; }

/* strings of the chosen instrument */
.strings { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-2); padding: 0; margin: var(--s-3) 0 0; }
.strings li { display: flex; flex-direction: column; align-items: center; min-width: 68px; padding: 6px 12px; border: 2px solid var(--line-strong); border-radius: var(--r-md); background: var(--surface); transition: background-color var(--t-fast), border-color var(--t-fast); }
.strings .s-name { font-family: var(--font-num); font-weight: 750; font-size: 1.25rem; line-height: 1.2; }
.strings .s-hz { font-size: .8125rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.strings li.on { background: var(--indigo); border-color: var(--indigo); color: var(--indigo-ink); }
.strings li.on .s-hz { color: inherit; }
.strings li.tuned { background: var(--teal); border-color: var(--teal); color: var(--bg); }

/* live string */
.tuner-string { margin-top: var(--s-2); }
.tuner-string-box { height: 56px; }
@media (min-width: 768px) { .tuner-string-box { height: 72px; } }
.mic-short { margin: var(--s-3) 0 0; }

/* settings column */
.tuner-settings { display: grid; gap: var(--s-4); }
.tuner-settings h2, .mic-panel h2 { margin: 0; font-size: var(--step-1); }
.tuner-settings .chips { gap: 6px; }
.tuner-settings .chip span { min-width: 44px; padding: 8px 12px; }
.sa-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); }
.sa-actions p { margin: 0; flex: 1 1 14em; }
.a4-row { display: grid; grid-template-columns: 7.5em 1fr; gap: var(--s-3); align-items: center; }
.mic-steps { padding-left: 1.2em; margin: var(--s-3) 0; }
.mic-steps li + li { margin-top: var(--s-2); }
.mic-panel { display: grid; gap: var(--s-2); }
.mic-help summary { cursor: pointer; font-weight: 650; min-height: 44px; display: flex; align-items: center; }
.mic-panel p { margin: 0; }

/* twelve-note wheel */
.wheel-box { margin: 0 auto; width: 100%; max-width: 340px; }
.wheel { display: block; width: 100%; height: auto; }
.wheel .wedge-bg { fill: var(--surface-2); stroke: var(--surface); stroke-width: 2; transition: fill var(--t-fast); }
.wheel .wedge-text { fill: var(--text); font: 600 12px var(--font-body); }
.wheel .wt-main { font-size: 13px; font-weight: 750; }
.wheel .wt-sub, .wheel .wt-west { font-size: 10.5px; font-weight: 600; fill: var(--muted); }
.wheel .wedge.on .wedge-bg { fill: var(--saffron); }
.wheel .wedge.on tspan { fill: var(--saffron-ink); }
.wheel .wedge.tuned .wedge-bg { fill: var(--teal); }
.wheel .wedge.tuned tspan { fill: var(--bg); }
.wheel .wedge.is-sa .wedge-bg { stroke: var(--indigo); stroke-width: 4; }
.wheel .wheel-centre { fill: var(--muted); font: 700 14px var(--font-num); }

/* the stage is tighter on phones so Start is on the first screen */
.tuner-stage { padding-top: var(--s-4); padding-bottom: var(--s-4); }
.tuner-stage .start-row { margin-top: var(--s-3); }
@media (max-width: 639px) {
  .tuner-stage { padding-left: var(--s-3); padding-right: var(--s-3); }
  .segmented { margin-bottom: var(--s-2); }
  .tuner-cents { font-size: 1.15rem; min-height: 1.4em; }
  .tuner-sub { min-height: 1.3em; font-size: .9375rem; }
}