/* /vocal-range-test/ page styles. Built from /assets/polyatic.css tokens only (no new colours or fonts). */
.nojs{margin:1.25rem 0 0;padding:0.875rem 1rem;border:1px solid var(--line);border-left:0.25rem solid var(--accent);border-radius:0.625rem;background:var(--surface);color:var(--ink);font-size:0.9375rem;line-height:1.6}
.vr-head .sub{margin-bottom:1rem}
@media(max-width:520px){.vr-head h1{margin-bottom:0.25rem}.vr-head .sub{font-size:0.9375rem;margin-bottom:0.75rem}}
@media(min-width:920px){.vr-duo{grid-template-columns:minmax(0,1.45fr) minmax(19rem,.75fr)}}

.vr-stage,.vr-card{padding:1rem;display:grid;gap:0.75rem;align-content:start}
.vr-side{display:grid;gap:1.375rem;align-content:start}
@media(max-width:520px){.vr-stage,.vr-card{padding:0.75rem;gap:0.625rem}}
.vr-h{margin:0;font-size:1.0625rem;font-weight:650;letter-spacing:-.01em}
.vr-k{font-family:var(--mono);font-size:0.6875rem;font-weight:500;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}

/* live readout */
.vr-live{display:flex;align-items:center;gap:0.875rem;background:var(--surface-2);border:1px solid var(--line);border-radius:0.625rem;padding:0.5rem 0.875rem;box-shadow:inset 0.1875rem 0 0 var(--signal)}
.vr-note{font-family:var(--mono);font-size:2.25rem;font-weight:600;line-height:1.1;min-width:4.5ch;font-variant-numeric:tabular-nums}
.vr-num{display:grid;gap:0.125rem;flex:1;min-width:0;font-family:var(--mono);font-size:0.875rem;color:var(--ink-2);font-variant-numeric:tabular-nums}
.vr-cents{position:relative;height:0.375rem;border-radius:1px;background:var(--surface);box-shadow:inset 0 0 0 1px var(--line);margin-top:0.25rem}
.vr-cents::after{content:"";position:absolute;left:50%;top:-0.125rem;bottom:-0.125rem;width:1px;background:var(--line-2)}
.vr-needle{position:absolute;top:-0.1875rem;width:0.25rem;height:0.75rem;margin-left:-0.125rem;border-radius:1px;background:var(--accent);left:50%;transition:left .08s linear}
.vr-needle[hidden]{display:block;visibility:hidden}
.vr-hold{display:flex;align-items:center;gap:0.625rem;font-size:0.8125rem;color:var(--muted)}
.vr-hold .track{flex:1;height:0.375rem;border-radius:1px;background:var(--surface-2);box-shadow:inset 0 0 0 1px var(--line);overflow:hidden}
.vr-hold .fill{height:100%;width:0;background:var(--accent)}
.vr-hold .fill.full{background:var(--ok)}

.vr-row{display:flex;flex-wrap:wrap;gap:0.5rem;align-items:center}
.vr-row .btn{min-width:9rem}
.vr-step{margin:0;font-size:0.9375rem;line-height:1.5;color:var(--ink-2)}
.vr-step b{color:var(--ink)}
.vr-msg{margin:0;font-size:0.8125rem;line-height:1.5;color:var(--muted)}
.vr-msg:empty{display:none}
.vr-msg.bad{color:var(--bad)}

/* keyboard */
.vr-kbd{overflow-x:auto;overflow-y:hidden;border:1px solid var(--line);border-radius:0.5rem;background:var(--surface-2);-webkit-overflow-scrolling:touch;scrollbar-width:thin}
.vr-kbd svg{display:block;width:max(100%,46rem);height:auto;user-select:none;-webkit-user-select:none}
.vr-kbd .kw{fill:var(--surface);stroke:var(--line-2);stroke-width:1;cursor:pointer}
.vr-kbd .kb{fill:var(--ink);stroke:var(--ink);stroke-width:1;cursor:pointer}
.vr-kbd .kw:focus-visible,.vr-kbd .kb:focus-visible{outline:none;stroke:var(--accent);stroke-width:3}
.vr-kbd .lab{font-family:var(--mono);font-size:8px;fill:var(--muted);pointer-events:none}
.vr-kbd .lab.on{fill:var(--signal-ink)}
.vr-kbd .bar{fill:var(--surface);stroke:var(--line-2);stroke-width:1}
.vr-kbd .bar.match{fill:var(--accent-soft);stroke:var(--accent);stroke-width:1.5}
.vr-kbd .bar.you{fill:var(--signal);stroke:var(--signal)}
.vr-kbd .bt{font-family:var(--sans);font-size:9px;font-weight:600;fill:var(--ink-2);pointer-events:none}
.vr-kbd .bt.you{fill:var(--signal-ink)}
.vr-kbd .grid{stroke:var(--line);stroke-width:1}
.vr-src{margin:0;font-size:0.75rem;line-height:1.5;color:var(--muted)}
.vr-src a{color:inherit}

/* results */
.vr-range{font-family:var(--mono);font-size:1.75rem;font-weight:600;letter-spacing:-.01em;line-height:1.2}
.vr-range:empty::before{content:"\2013";color:var(--muted)}
.vr-detail{margin:0;font-size:0.875rem;line-height:1.55;color:var(--ink-2)}
.vr-detail:empty{display:none}
.vr-match{margin:0;padding:0.5rem 0.75rem;border-left:0.1875rem solid var(--accent);background:var(--surface-2);border-radius:0.375rem;font-size:0.875rem;line-height:1.5}
.vr-match:empty{display:none}
.vr-sofar{display:grid;grid-template-columns:1fr 1fr;gap:0.5rem}
.vr-hist{list-style:none;margin:0;padding:0;display:grid;gap:0.25rem;font-family:var(--mono);font-size:0.8125rem;color:var(--ink-2)}
.vr-hist li{display:flex;justify-content:space-between;gap:0.5rem;padding:0.3125rem 0;border-bottom:1px dashed var(--line)}
.vr-hist:empty::before{content:"Nothing saved yet.";font-family:var(--sans);color:var(--muted)}
.vr-card .btn.ghost{height:2.25rem;font-size:0.8125rem}
.vr-stage .btn:focus-visible,.vr-card .btn:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
@media(prefers-reduced-motion:reduce){.vr-needle{transition:none}}
/* key states */
.vr-kbd .kw.in{fill:var(--signal)}
.vr-kbd .kb.in{fill:var(--accent)}
/* dark theme: keep a piano a piano (light naturals, dark sharps); :where() keeps these below the state rules */
@media(prefers-color-scheme:dark){
  :where(:root:not([data-theme="light"])) .vr-kbd .kw{fill:var(--ink-2);stroke:var(--bg)}
  :where(:root:not([data-theme="light"])) .vr-kbd .kb{fill:var(--bg);stroke:var(--bg)}
  :where(:root:not([data-theme="light"])) .vr-kbd .lab{fill:var(--surface-2)}
  :where(:root:not([data-theme="light"])) .vr-kbd .kb.in{fill:var(--mat)}
}
:where(:root[data-theme="dark"]) .vr-kbd .kw{fill:var(--ink-2);stroke:var(--bg)}
:where(:root[data-theme="dark"]) .vr-kbd .kb{fill:var(--bg);stroke:var(--bg)}
:where(:root[data-theme="dark"]) .vr-kbd .lab{fill:var(--surface-2)}
:where(:root[data-theme="dark"]) .vr-kbd .kb.in{fill:var(--mat)}
/* live and tapped keys win over every theme */
.vr-kbd .kw.live,.vr-kbd .kb.live{fill:var(--accent-2);stroke:var(--accent-2)}
.vr-kbd .kw.tap,.vr-kbd .kb.tap{fill:var(--s2)}