/* Keywise: on-screen keyboard, keyboard diagrams and the staff. Colours only from style.css tokens.
   Piano keys stay light/dark in both themes, so two aliases pick the right shared token per theme. */
:root {
  --pn-ivory: var(--nut); --pn-ebony: var(--fg); --pn-tone: var(--dot-tone); --pn-tone-ink: var(--dot-tone-ink);
  --pn-label: var(--muted); --pn-letter: var(--cool); --pn-mid: var(--accent);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --pn-ebony: var(--bg); --pn-tone: var(--bg); --pn-tone-ink: var(--nut);
    --pn-label: var(--surface-2); --pn-letter: var(--cool-soft); --pn-mid: var(--accent-soft);
  }
}
:root[data-theme="dark"] {
  --pn-ebony: var(--bg); --pn-tone: var(--bg); --pn-tone-ink: var(--nut);
  --pn-label: var(--surface-2); --pn-letter: var(--cool-soft); --pn-mid: var(--accent-soft);
}

/* ---------- interactive keyboard ---------- */
.pn-kb { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.pn-kb-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 4px; border-radius: 10px; scrollbar-width: thin; }
.pn-kb-svg { display: block; width: 100%; height: auto; user-select: none; -webkit-user-select: none; touch-action: pan-x; border-radius: 8px; }
.pn-kb-svg:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.pn-key { cursor: pointer; transition: fill .06s; }
.pn-white { fill: var(--pn-ivory); stroke: var(--muted); stroke-width: 0.8; }
.pn-black { fill: var(--pn-ebony); stroke: var(--pn-ebony); stroke-width: 0.8; }
.pn-white:hover { fill: color-mix(in srgb, var(--accent) 12%, var(--pn-ivory)); }
.pn-black:hover { fill: color-mix(in srgb, var(--accent) 30%, var(--pn-ebony)); }
.pn-white.pn-held, .pn-white.pn-down { fill: color-mix(in srgb, var(--cool) 42%, var(--pn-ivory)); }
.pn-black.pn-held, .pn-black.pn-down { fill: color-mix(in srgb, var(--cool) 72%, var(--pn-ebony)); }
.pn-key.pn-focus { stroke: var(--accent); stroke-width: 2.4; }
.pn-key-label { font: 600 8.5px var(--font-mono); fill: var(--pn-label); pointer-events: none; }
.pn-key-label.middle-c { fill: var(--pn-mid); font-weight: 700; }
.pn-key-label.on-black { fill: var(--pn-ivory); font-size: 6.2px; opacity: 0.85; }
.pn-key-letter { font: 700 8.5px var(--font-mono); fill: var(--pn-letter); pointer-events: none; }
.pn-key-letter.on-black { fill: var(--pn-ivory); font-size: 7.5px; }
.pn-dot { pointer-events: none; }
.pn-dot circle { stroke: var(--pn-ivory); stroke-width: 1.4; }
.pn-dot text { font: 700 9.5px var(--font-body); }
.pn-dot text.small { font-size: 7px; }
.pn-dot.tone circle { fill: var(--pn-tone); }
.pn-dot.tone text { fill: var(--pn-tone-ink); }
.pn-dot.root circle { fill: var(--accent); }
.pn-dot.root text { fill: var(--accent-ink); }
.pn-dot.accent circle { fill: var(--cool); }
.pn-dot.accent text { fill: var(--on-strong); }
.pn-dot.hit circle { fill: var(--good); }
.pn-dot.hit text { fill: var(--on-strong); }
.pn-dot.miss circle { fill: var(--bad); }
.pn-dot.miss text { fill: var(--on-strong); }
.pn-dot.ghost circle { fill: transparent; stroke: var(--pn-tone); stroke-width: 1.4; stroke-dasharray: 3 2; }
.pn-dot.ghost text { fill: var(--pn-label); }
.pn-dot.active circle { fill: var(--fg); stroke: var(--accent); stroke-width: 2.2; }
.pn-dot.active text { fill: var(--bg); }
.pn-dot.flash { animation: pn-pop .7s ease-out forwards; transform-box: fill-box; transform-origin: center; }
@keyframes pn-pop { 0% { transform: scale(0.7); opacity: 1; } 70% { opacity: 1; } 100% { transform: scale(1.2); opacity: 0; } }

.pn-kb-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; }
.pn-kb-legend .check { font-size: 14px; min-height: 32px; }
.pn-kb-ck-info kbd { font-size: 10.5px; }

/* ---------- keyboard diagrams (chord tiles) ---------- */
.pn-diag { display: block; width: 100%; }
.pn-diag-svg { display: block; width: 100%; height: auto; }
.pn-diag .pn-key { cursor: inherit; }
.pn-diag .pn-white:hover { fill: var(--pn-ivory); }
.pn-diag .pn-black:hover { fill: var(--pn-ebony); }
.pn-diag .pn-white.pn-mk-tone, .pn-diag .pn-black.pn-mk-tone { fill: var(--cool); }
.pn-diag .pn-white.pn-mk-root, .pn-diag .pn-black.pn-mk-root { fill: var(--accent); }
.pn-diag-label { font: 700 10px var(--font-mono); fill: var(--on-strong); }
.pn-diag-label.on-black { font-size: 8px; }

.pn-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 168px), 1fr)); gap: 10px; }
.pn-tile {
  display: flex; flex-direction: column; align-items: stretch; gap: 6px; min-width: 0; text-align: center;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 12px 12px;
  color: var(--fg); font: inherit; cursor: pointer; transition: border-color .15s, background .15s;
}
.pn-tile:hover { border-color: var(--accent); }
.pn-tile.on, .pn-tile.now { border-color: var(--accent); background: var(--accent-soft); }
.pn-tile b { font: 800 20px/1.1 var(--font-display); }
.pn-tile small { color: var(--muted); font-size: 12.5px; }
.pn-tile .pn-tile-notes { font: 600 12px var(--font-mono); color: var(--muted); }

/* ---------- staff ---------- */
.pn-staff-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
.pn-staff { display: block; height: auto; max-width: none; }
.pn-staff-wrap.center .pn-staff { margin: 0 auto; }
.pn-st-line, .pn-st-ledger { stroke: var(--muted); stroke-width: 1; }
.pn-st-bar { stroke: var(--muted); stroke-width: 1.2; }
.pn-st-final { stroke: var(--fg); stroke-width: 3.2; }
.pn-st-brace { fill: none; stroke: var(--fg); stroke-width: 2; }
.pn-st-clef path { fill: none; stroke: var(--fg); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.pn-st-clef circle { fill: var(--fg); }
.pn-st-time { font: 800 22px var(--font-display); fill: var(--fg); }
.pn-st-acc { fill: none; stroke: var(--fg); stroke-width: 1.2; stroke-linecap: round; }
.pn-st-acc.pn-st-thick { stroke-width: 2.4; stroke-linecap: butt; }
.pn-st-head, .pn-st-dot, .pn-st-flag, .pn-st-rest { fill: var(--fg); }
.pn-st-head.pn-st-open { fill: none; stroke: var(--fg); stroke-width: 1.9; }
.pn-st-stem { stroke: var(--fg); stroke-width: 1.3; }
.pn-st-rest-q, .pn-st-rest-line { fill: none; stroke: var(--fg); stroke-width: 2.4; stroke-linejoin: round; }
.pn-st-label { font: 600 11px var(--font-mono); fill: var(--muted); }
.pn-st-note { transition: opacity .15s; }
.pn-st-now .pn-st-head, .pn-st-now .pn-st-dot, .pn-st-now .pn-st-flag { fill: var(--accent); }
.pn-st-now .pn-st-head.pn-st-open { fill: none; stroke: var(--accent); }
.pn-st-now .pn-st-stem, .pn-st-now .pn-st-acc { stroke: var(--accent); }
.pn-st-now .pn-st-label { fill: var(--accent); }
.pn-st-accent .pn-st-head, .pn-st-accent .pn-st-dot { fill: var(--cool); }
.pn-st-accent .pn-st-head.pn-st-open { fill: none; stroke: var(--cool); }
.pn-st-accent .pn-st-stem, .pn-st-accent .pn-st-acc { stroke: var(--cool); }
.pn-st-good .pn-st-head, .pn-st-good .pn-st-dot, .pn-st-good .pn-st-flag { fill: var(--good); }
.pn-st-good .pn-st-head.pn-st-open { fill: none; stroke: var(--good); }
.pn-st-good .pn-st-stem, .pn-st-good .pn-st-acc { stroke: var(--good); }
.pn-st-bad .pn-st-head, .pn-st-bad .pn-st-dot, .pn-st-bad .pn-st-flag { fill: var(--bad); }
.pn-st-bad .pn-st-head.pn-st-open { fill: none; stroke: var(--bad); }
.pn-st-bad .pn-st-stem, .pn-st-bad .pn-st-acc { stroke: var(--bad); }
.pn-st-ghost { opacity: 0.35; }

/* ---------- input strip ---------- */
.pn-input { display: flex; flex-direction: column; gap: 8px; }
.pn-input-status { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; }
.pn-mic-fold[open] { padding-top: 2px; }

/* ---------- genre pages: how to play it on piano ---------- */
.gn-pn h3 { margin-top: 8px; }
.gn-pn-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 4px; }
.gn-pn-grid {
  display: grid; grid-template-columns: 44px repeat(var(--n, 8), minmax(26px, 1fr)); gap: 3px; align-items: center;
  max-width: 680px; min-width: calc(44px + var(--n, 8) * 29px);
}
.gn-pn-count { font: 600 11px var(--font-mono); color: var(--muted); text-align: center; }
.gn-pn-row { font: 600 12px var(--font-body); color: var(--muted); }
.gn-pn-cell {
  display: flex; align-items: center; justify-content: center; height: 30px; border-radius: 6px;
  background: var(--surface-2); font: 700 12px var(--font-mono); color: var(--muted); white-space: nowrap;
}
.gn-pn-cell.on { background: var(--accent-soft); color: var(--accent); }
.gn-pn-cell.on.lh { background: var(--cool-soft); color: var(--cool); }
.gn-pn-tips { margin: 0; padding-left: 1.2em; display: flex; flex-direction: column; gap: 6px; max-width: 68ch; }