/* Compose · Tuning · the instrument face: the page's own bits. The kit is face.css; the tokens are styles.css :root. */

/* a mark on the picture selects its ruler (the picture never drags a value: no vertical drag on touch, D-10) */
.fp-tuning .tf-mark { cursor: pointer; }
.fp-tuning .face-pic svg { touch-action: pan-y; }

/* the compact legend's ● ○ */
.face-legend .tf-s { color: var(--surp); }

/* the foot's link to Sequence: quiet, underlined, never the browser's blue */
.fp-tuning .deck-note a { color: var(--text2); text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 3px; }
.fp-tuning .deck-note a:hover { color: var(--text); }
.fp-tuning .deck-note a:focus-visible { outline: 2px solid var(--face-sel); outline-offset: 2px; border-radius: 2px; }

/* How far:the jolt it makes rides between its end words, live as it scrubs (D-27) */
.fp-tuning .ctl[data-key="surpriseTuningDistance"] .ends.after { justify-content: space-between; gap: 6px; }
.fp-tuning .ctl .ends .tf-mid { font-size: 11px; color: var(--text2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.fp-tuning .ctl.inert .ends .tf-mid { color: var(--face-quiet); }

/* ── T2, what it played: a roll of moves (DESIGN-T2, D-46..D-48), flat (D-41), house lights only. The walker light is what
   the notes do; the land light is in-tune (the middle); blue is a jolt. ── */
.fp-tuning .face-pic { position: relative; }
.tm-axw { fill: var(--face-quiet); }
.tm-axn { fill: var(--face-quiet); }
.tm-land { fill: var(--ae-land); }
.tm-row { fill: color-mix(in srgb, var(--text) 2.5%, transparent); }
.tm-row0 { stroke: var(--ae-land-25); stroke-width: 1; }
/* the right scale: the line's own cents (magnified), in the line's light so the two scales never read as one */
.tm-taxis { stroke: var(--ae-walk-25); stroke-width: 1; }
.tm-tlab { fill: var(--ae-walk-60); }
.tm-rb { fill: var(--ae-walk-10); stroke: var(--ae-walk-25); stroke-width: 1; }   /* the background: quiet */
.tm-rb.newest { stroke: var(--ae-walk-60); }
/* where a note could land: the wobble each side, and after a move the most it could miss by */
.tm-env { fill: var(--ae-walk-25); fill-opacity: 0.3; }
.tm-trace { fill: none; stroke: var(--ae-walk-60); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.tm-rl { fill: none; stroke-linecap: round; }
.tm-rl.missed { stroke: var(--ae-walk); stroke-width: 2.6; }
.tm-rl.jolt { stroke: var(--surp); stroke-width: 2.6; }
.tm-rl.jolt.back { stroke-opacity: 0.55; }   /* heard again: quieter, never dashed (dashed means "could have sounded and didn't", FACE §2a) */
.tm-hit { fill: transparent; }