/* ==========================================================================
   AXI-x Sound v0.1 — the score.                       (extension; not SNX core)
   sound.js tunes, plucks and writes numbers; everything visible about a
   sounding stage is here: the strings, the sounding block, the pulse.
   ========================================================================== */
.snd{position:relative}
.snd-stage{cursor:pointer;outline:none}
.snd-stage:focus-visible{outline:2px solid var(--snx-signal);outline-offset:2px}
/* the strings: one per base column, a line down the column's centre with its note at the foot */
.snd-strings{position:absolute;inset:0;z-index:5;pointer-events:none;display:grid;grid-template-columns:repeat(var(--snx-base),1fr)}
.snd-string{position:relative;grid-column:var(--c);display:block}
.snd-string::before{content:'';position:absolute;left:50%;top:0;bottom:0;width:1px;background:var(--snx-ink-18);transition:background-color var(--snx-t-fast) ease,width var(--snx-t-fast) ease}
.snd-string::after{content:attr(data-note) ' ' attr(data-hz);position:absolute;left:50%;bottom:4px;transform:translateX(-50%);font-family:var(--snx-mono);font-size:9px;letter-spacing:.08em;color:var(--snx-ink-60);background:var(--snx-chalk);padding:1px 4px;white-space:nowrap}
.snd-string.snd-buzz::before{width:3px;margin-left:-1px;background:repeating-linear-gradient(to bottom,var(--snx-signal) 0 4px,transparent 4px 8px);opacity:.6}
.snd-string.snd-buzz::after{content:'~ ' attr(data-hz) ' · beats ' attr(data-beat) ' Hz';color:var(--snx-ai-deep)}
.snd-string[data-sounding]::before{background:var(--snx-signal);width:3px;margin-left:-1px;opacity:1}
/* law 6: the sounding block carries the signal while it rings */
.snd-stage [data-sounding]{outline:3px solid var(--snx-signal);outline-offset:-3px;z-index:7}
/* law 5: the pulse — a square 3/16 of a row, on the row line, stepping a column a beat */
.snd-pulse{position:absolute;z-index:8;width:calc(var(--snx-row)*.1875);height:calc(var(--snx-row)*.1875);background:var(--snx-signal);
  top:calc(var(--r,1)*var(--snx-row) - var(--snx-row)*.09375);left:calc((var(--x,0) + .5)*100%/var(--snx-base));transform:translateX(-50%);
  transition:left 220ms linear}
/* sound off: the strings are drawn faint, and the controls say so */
.snd[data-sound=off] .snd-string::before{opacity:.5}
.snd[data-sound=off] .snd-string::after{opacity:.6}
/* the score of a play, as text */
.snd-score{font-family:var(--snx-mono);font-size:var(--snx-s3);letter-spacing:.06em;color:var(--snx-navy);font-weight:600;min-height:1.4em;margin-top:10px;overflow-wrap:anywhere}
.snd-score:empty::before{content:'—';color:var(--snx-ink-40)}
@media (prefers-reduced-motion:reduce){.snd-pulse{transition:none}.snd-string::before{transition:none}}