/* ==========================================================================
   KEYBOARD PAGE
   ========================================================================== */

:root { --tool-rgb: var(--keyboard-rgb); --tool-light-rgb: var(--keyboard-light-rgb); }

/* ── Match the bass page's panel width behavior: full-bleed inside
   .tool-panel (no 24px side padding) and the same responsive max-width
   scaling from 720p laptops up to 4K, so the Scale Explorer and Chord
   Finder cards are exactly as wide as the bass page's cards at every
   breakpoint instead of being boxed in by tool.css's default 1200px /
   24px-padding panel. ──────────────────────────────────────────────── */
:root { --kb-panel-maxw: 1200px; }
@media (min-width: 601px) and (max-width: 1099px) { :root { --kb-panel-maxw: 100%; } }
@media (min-width: 1920px) { :root { --kb-panel-maxw: 1200px; } }
@media (min-width: 2560px) { :root { --kb-panel-maxw: 1440px; } }
@media (min-width: 3840px) { :root { --kb-panel-maxw: 1800px; } }
.tool-panel { width: 100%; max-width: var(--kb-panel-maxw); padding-left: 0; padding-right: 0; }

.piano-panel {
    position: relative;
    background:
        linear-gradient(160deg, rgba(var(--tool-rgb), .14), rgba(var(--tool-rgb), .02)),
        linear-gradient(165deg, rgba(24, 21, 46, .58), rgba(10, 8, 22, .66));
    backdrop-filter: blur(24px) saturate(150%);
    -webkit-backdrop-filter: blur(24px) saturate(150%);
    border: 1px solid rgba(var(--tool-light-rgb), .26);
    border-radius: var(--radius-lg);
    padding: 18px 16px 20px;
    box-shadow:
        0 6px 0 rgba(0, 0, 0, .35),
        0 22px 54px rgba(0, 0, 0, .45),
        0 2px 8px rgba(0, 0, 0, .25),
        inset 0 1px 0 rgba(255, 255, 255, .10),
        0 0 34px rgba(var(--tool-rgb), .10);
    overflow: hidden;
}
.piano-panel::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(120% 90% at 6% -12%, rgba(255, 255, 255, .12), transparent 55%);
    z-index: 0;
}
.piano-panel::after {
    content: "";
    position: absolute;
    left: 0; right: 0; top: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .35), transparent);
    pointer-events: none;
    z-index: 0;
}
.piano-panel > * {
    position: relative;
    z-index: 1;
}

.piano-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}
.toolbar-left { flex: 0 0 auto; display: flex; }
.toolbar-center {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: center;
    min-width: 0;
}
.toolbar-row-1 {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    row-gap: 8px;
}
.toolbar-row-1-end { margin-left: auto; }
.piano-toolbar-right {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
}
.toolbar-right-top {
    display: flex;
    align-items: center;
    gap: 8px;
}

@media (pointer: coarse) {
    /* Mobile has no room for a centered 3-zone layout — fall back to the
       stacked flex-wrap arrangement instead. */
    .piano-toolbar { flex-wrap: wrap; align-items: flex-start; }
    .toolbar-left { flex-basis: 100%; }
    .toolbar-center { flex: 0 0 auto; justify-content: flex-start; }
    .toolbar-break { flex-basis: 100%; height: 0; }
    .toolbar-row-1 { width: 100%; }
    .piano-toolbar-right { margin-left: auto; }
}

@media (pointer: coarse) {
    /* Cleaner, flatter pill styling on touch devices — thinner borders,
       muted resting state, accent fill only when active. */
    .pill-group { border-radius: 999px; }
    .piano-toolbar-right { flex-direction: column; align-items: flex-end; }
    .pill-btn {
        border: 0.5px solid rgba(255, 255, 255, .14);
        background: rgba(255, 255, 255, .04);
        color: rgba(255, 255, 255, .75);
    }
    .pill-btn.active {
        background: var(--tool-accent, #4f8ef7);
        border-color: var(--tool-accent, #4f8ef7);
        color: #05121f;
    }
    #chord-clear-btn {
        margin-left: auto;
        color: rgba(255, 255, 255, .55);
        background: transparent;
    }

    /* Row 1 was previously tight (Play, speed, octave, sharp/flat all in
       one line) — the "Play" text label still drops to icon-only to save
       space, but the sharp/flat toggle now lives in row 2 next to
       Sustain with plenty of room, so it keeps the normal pill look. */
    .keyboard-play-btn .btn-label-text { display: none; }
    .keyboard-play-btn { padding-left: 12px; padding-right: 12px; }
    .piano-toolbar { gap: 6px; }
}

/* ── Play button — runs the currently highlighted scale or chord back
   through the piano samples. Gold accent to match the pk--root key
   highlight, so it visually reads as "hear what's lit up". Disabled
   (greyed, no pointer) whenever no scale/chord root is selected. ───── */
.keyboard-play-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: linear-gradient(160deg, #ffe49a 0%, var(--gold) 55%, #e0a838 100%);
    border-color: transparent;
    color: #4a3300;
}
.keyboard-play-btn:hover {
    color: #4a3300;
    background: linear-gradient(160deg, #ffeab0 0%, #ffd980 55%, #e6ae3f 100%);
    border-color: transparent;
}
.keyboard-play-btn:disabled {
    background: var(--glass-md);
    border-color: rgba(var(--tool-light-rgb), .22);
    color: var(--text2);
    opacity: .45;
    cursor: not-allowed;
}
.keyboard-play-btn.is-playing { animation: kb-play-pulse 0.6s var(--ease) infinite; }
@keyframes kb-play-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

.piano-scroll { overflow: visible; border-radius: 10px; width: 100%; }

@media (pointer: coarse) {
    /* Desktop has room to shrink-to-fit any octave count comfortably;
       touch devices don't — below a comfortable per-key width (enforced
       via #piano's min-width, set in keyboard.js) the keyboard scrolls
       horizontally instead of squeezing keys down to unusable slivers. */
    .piano-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .piano, .piano-felt { width: auto; }
}

/* ── Felt rail — the strip of color real upright pianos show just above
   the keytops. Spans the full width of the keybed (same width as
   .piano at every octave count) and grounds the sky-cyan brand accent
   at the top of the instrument instead of leaving the keys to float in
   the glass panel on their own. ─────────────────────────────────────── */
.piano-felt {
    height: 10px;
    width: 100%;
    border-radius: 5px 5px 0 0;
    background: linear-gradient(180deg, rgba(var(--tool-light-rgb), .95), rgba(var(--tool-rgb), .85));
    box-shadow: 0 2px 6px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .35);
    position: relative;
}
.piano-felt::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 2px;
    background: rgba(0, 0, 0, .35);
}

.piano {
    position: relative;
    height: 182px;
    display: flex;
    width: 100%;
    padding-top: 4px;
    background: linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.15) 8px, transparent 8px);
    border-radius: 0 0 8px 8px;
}
/* More octaves packed into the same panel width means each key gets
   narrower — trim the key height to match so the keys don't end up
   tall and pin-thin at 5 octaves. */
.piano[data-octaves="3"] { height: 182px; }
.piano[data-octaves="5"] { height: 182px; }

.pk {
    border: none;
    cursor: pointer;
    font-family: var(--font-display);
    padding: 0;
    transition: background .1s var(--ease), transform .06s var(--ease), box-shadow .1s var(--ease), filter .1s var(--ease);
}

/* ── White keys — layered gradient for a glossy ivory look, a hairline
   seam between neighboring keys, and a soft inner shadow that reads as
   keybed depth rather than a flat rectangle. ───────────────────────── */
.pk--white {
    position: relative;
    height: 100%;
    background:
        linear-gradient(180deg, #ffffff 0%, #f4f1ff 55%, #e6e0fa 100%);
    border: 1px solid rgba(20, 14, 40, .55);
    border-right: 1px solid rgba(20, 14, 40, .30);
    border-radius: 0 0 8px 8px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding-bottom: 11px;
    z-index: 1;
    box-shadow: inset 0 -14px 16px -12px rgba(120, 105, 180, .35), inset 0 1px 0 rgba(255, 255, 255, .9);
}
.pk--white:last-child { border-right: 1px solid rgba(20, 14, 40, .55); }
.pk--white:hover { background: linear-gradient(180deg, #ffffff 0%, #ffffff 55%, #efe9ff 100%); filter: brightness(1.02); }
.pk--white.pk--pressed,
.pk--white:active {
    background: linear-gradient(180deg, rgba(var(--tool-light-rgb), .95) 0%, rgba(var(--tool-rgb), 1) 100%);
    color: #062a3d;
    transform: translateY(2px);
    box-shadow: 0 0 10px rgba(var(--tool-rgb), .5);
}

.pk-label {
    font-size: 11px;
    font-weight: 700;
    color: #8a7fb0;
    letter-spacing: .02em;
    pointer-events: none;
}
.pk--white .pk-label { color: #1a1a1a; }

/* ── Black keys — deep glossy gradient with a sheen highlight near the
   top (like polished ebony catching light), matching depth cues to the
   white keys' inset shadow. ─────────────────────────────────────────── */
.pk--black {
    position: absolute;
    top: 0;
    height: 66.5%;
    background: linear-gradient(180deg, #3a3350 0%, #1c1730 45%, #0d0a18 100%);
    border: 1px solid #000;
    border-radius: 0 0 6px 6px;
    z-index: 2;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding-bottom: 8px;
    box-shadow: inset 0 2px 3px rgba(255, 255, 255, .18), inset 0 -10px 14px -8px rgba(0, 0, 0, .8), 0 4px 8px rgba(0, 0, 0, .5);
}
.pk--black .pk-label {
    color: #b8b0d6;
    position: absolute;
    left: 50%;
    bottom: 8px;
    transform: translateX(-50%);
}
.pk--black:hover { background: linear-gradient(180deg, #4a4266 0%, #241d3c 45%, #100c1d 100%); }
.pk--black.pk--pressed,
.pk--black:active {
    background: rgba(3, 105, 161, .95);
    border-color: rgba(var(--tool-rgb), 1);
    transform: translateY(2px);
    box-shadow: 0 0 10px rgba(var(--tool-rgb), .6);
}

.pk--highlight.pk--white {
    background: #2381b3;
    color: #fff;
    box-shadow: inset 0 -4px 10px rgba(35, 129, 179, .35), 0 0 8px rgba(39, 158, 222, .3);
    border-bottom-color: #279ede;
}
.pk--highlight.pk--black {
    background: #2381b3;
    border-color: #279ede;
    color: #e3f4ff;
    box-shadow: 0 0 8px rgba(35, 129, 179, .45), inset 0 0 4px rgba(255, 255, 255, .12);
}
.pk--highlight-scale.pk--white {
    background: #135577;
    color: #fff;
    box-shadow: inset 0 -4px 10px rgba(19, 85, 119, .45), 0 0 8px rgba(24, 114, 163, .35);
    border-bottom-color: #1d6f9c;
}
.pk--highlight-scale.pk--black {
    background: #135577;
    border-color: #1d6f9c;
    color: #cfe9fb;
    box-shadow: 0 0 8px rgba(19, 85, 119, .55), inset 0 0 4px rgba(255, 255, 255, .1);
}
.pk--root.pk--white {
    border-bottom: 7px solid var(--gold);
    box-shadow: inset 0 -4px 10px rgba(19, 85, 119, .45), 0 6px 10px -6px rgba(255, 209, 102, .8);
}
.pk--root.pk--black {
    border-bottom: 5px solid var(--gold);
    box-shadow: 0 0 8px rgba(19, 85, 119, .55), inset 0 0 4px rgba(255, 255, 255, .1), 0 5px 8px -5px rgba(255, 209, 102, .85);
}




/* ── Octave toggle — exact copy of the bass page's pill-group/pill-btn
   fret-count toggle, reused here for switching the piano between a
   2, 3, or 5 octave range. ─────────────────────────────────────────── */
.pill-group {
    display: inline-flex;
    background: var(--glass);
    border: 1px solid var(--glass-border);
    border-radius: 8px;
    overflow: hidden;
    backdrop-filter: var(--blur-sm);
    -webkit-backdrop-filter: var(--blur-sm);
    box-shadow: none;
}
.pill-btn {
    background: transparent;
    border: none;
    color: var(--text2);
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    padding: 6px 14px;
    cursor: pointer;
    transition: background .15s var(--ease), color .15s var(--ease);
}
.pill-btn:hover { color: #fff; background: rgba(var(--tool-rgb), .16); }
.pill-btn.active {
    background: linear-gradient(160deg, rgba(190, 235, 255, .40) 0%, rgba(var(--tool-rgb), .80) 45%, rgba(15, 110, 165, .92) 100%);
    border-bottom: none;
    color: #fff;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .40), 0 3px 12px rgba(var(--tool-rgb), .45);
    text-shadow: 0 1px 1px rgba(0, 0, 0, .25);
}
.pill-btn.active:hover {
    background: linear-gradient(160deg, rgba(190, 235, 255, .40) 0%, rgba(var(--tool-rgb), .80) 45%, rgba(15, 110, 165, .92) 100%);
}

/* Speed toggle — always shown toggled-in (never a blank/off state),
   reusing the page's own pill-btn.active (sky-cyan) theme so it
   matches the other pills in this section. */
#keyboard-speed-toggle,
#keyboard-speed-toggle.active {
    background: linear-gradient(160deg, rgba(190, 235, 255, .40) 0%, rgba(var(--tool-rgb), .80) 45%, rgba(15, 110, 165, .92) 100%);
    border-bottom: none;
    color: #fff;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .40), 0 3px 12px rgba(var(--tool-rgb), .45);
    text-shadow: 0 1px 1px rgba(0, 0, 0, .25);
}

/* ── Global sharp/flat note-display toggle in the piano toolbar —
   one switch that drives accidental spelling everywhere on the page
   (black keys, root pills, chord name). Blue = sharp, amber = flat,
   matching the accent colors already used by the per-row toggles. ── */
/* Sharp/flat colors for #bass-note-display-toggle / #keyboard-note-display-toggle now live centrally in
   tool.css (shared by every tool page) rather than duplicated here. */
/* Sharp/flat centering now lives centrally in tool.css (shared by
   every tool page) rather than duplicated here. */

/* ── Sharp/flat spelling toggle for the Scale Explorer's root picker —
   ported 100% from the Bass page's Scale Explorer. Cycles
   natural → sharp → flat, revealing the accidental pills (C#/D♭ etc.)
   alongside the naturals. Sharp = blue, flat = amber. ──────────────── */
.sf-sep {
    display: inline-block;
    width: 1.5px;
    height: 22px;
    background: var(--border2);
    border-radius: 2px;
    align-self: center;
    flex-shrink: 0;
    margin: 0 2px;
}
.sf-toggle {
    flex-shrink: 0;
    background: rgba(255, 255, 255, .045);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, .10);
    border-radius: 20px;
    color: var(--text2);
    font-family: inherit;
    font-size: 12px;
    font-weight: 700;
    padding: 4px 12px;
    cursor: pointer;
    line-height: 1.6;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
    transition: background .12s var(--ease), border-color .12s var(--ease), color .12s var(--ease), box-shadow .12s var(--ease);
    white-space: nowrap;
    margin-left: 4px;
}
.sf-toggle:hover {
    background: rgba(255, 209, 102, .14);
    border-color: rgba(255, 209, 102, .40);
    color: #fff;
}
/* Sharp/flat colors for .sf-toggle and .sf-acc-pill now live centrally
   in tool.css (shared by every tool page) rather than duplicated here. */

/* ==========================================================================
   CHORD INVERSIONS PANEL — one card per usable inversion of the current
   chord (Root/1st/2nd/3rd), each showing a mini keyboard with the chord
   tones lit up (bass note of that voicing in a lighter blue, the rest in
   a deeper blue) and the note order printed underneath. Hidden until a
   chord root is selected; clicking a card jumps the main Chord Finder's
   inversion picker to match, which re-highlights the full-size keyboard
   below. ────────────────────────────────────────────────────────────── */
.inversions-panel {
    display: none;
    background:
        radial-gradient(120% 140% at 50% -10%, rgba(var(--tool-rgb), .10), transparent 60%),
        var(--glass);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    padding: 16px 16px 18px;
    box-shadow: var(--shadow-card);
    margin-bottom: 16px;
}
.inversions-panel.is-visible { display: block; }

.inversions-panel-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}
.inversions-panel-title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 14px;
    color: rgb(var(--tool-light-rgb));
    display: flex;
    align-items: center;
    gap: 8px;
}
.inversions-panel-hint {
    font-size: 11.5px;
    color: var(--text3);
}

.inversion-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
}

.inversion-card {
    background: var(--bg2);
    border: 1px solid var(--border2);
    border-radius: var(--radius-md);
    padding: 12px 14px 14px;
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    transition: border-color .15s var(--ease), background .15s var(--ease), box-shadow .15s var(--ease), transform .1s var(--ease);
}
.inversion-card:hover {
    border-color: rgba(var(--tool-light-rgb), .40);
    background: rgba(var(--tool-rgb), .08);
}
.inversion-card:active { transform: scale(0.98); }
.inversion-card.active {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.10) 0%, rgba(255, 255, 255, 0.02) 100%),
        rgba(var(--tool-rgb), 0.16);
    backdrop-filter: blur(10px) saturate(160%);
    -webkit-backdrop-filter: blur(10px) saturate(160%);
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-bottom: 2px solid rgba(var(--tool-light-rgb), 0.9);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.3),
        0 3px 10px rgba(var(--tool-rgb), 0.25);
}

.inversion-card-label {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--text3);
}
.inversion-card.active .inversion-card-label { color: rgb(var(--tool-light-rgb)); }
.inversion-card-name {
    font-size: 14.5px;
    font-weight: 800;
    color: var(--text);
    margin: 2px 0 10px;
}

/* Mini keyboard — a single illustrative octave (7 white + 5 black keys)
   showing pitch-class highlights for the voicing's notes. Not tied to
   the real piano's audio range; purely a diagram. */
.mini-piano {
    position: relative;
    height: 60px;
    display: flex;
    width: 100%;
}
.mini-pk {
    border: none;
    padding: 0;
}
.mini-pk--white {
    position: relative;
    height: 100%;
    flex: 1 0 auto;
    background: linear-gradient(180deg, #efe9ff 0%, #ded5f5 100%);
    border: 1px solid rgba(20, 14, 40, .5);
    border-right: none;
    border-radius: 0 0 4px 4px;
    z-index: 1;
}
.mini-pk--white:last-child { border-right: 1px solid rgba(20, 14, 40, .5); }
.mini-pk--black {
    position: absolute;
    top: 0;
    height: 60%;
    width: 9.5%;
    background: linear-gradient(180deg, #2c2640 0%, #100c1d 100%);
    border: 1px solid #000;
    border-radius: 0 0 3px 3px;
    z-index: 2;
}
.mini-pk--highlight-bass {
    background: linear-gradient(180deg, rgba(var(--tool-light-rgb), .95) 0%, rgba(var(--tool-light-rgb), .70) 100%) !important;
    box-shadow: 0 0 10px rgba(var(--tool-light-rgb), .55);
}
.mini-pk--highlight-tone {
    background: linear-gradient(180deg, rgba(var(--tool-rgb), 1) 0%, rgba(15, 110, 165, .95) 100%) !important;
    box-shadow: 0 0 10px rgba(var(--tool-rgb), .55);
}
.mini-pk--black.mini-pk--highlight-bass,
.mini-pk--black.mini-pk--highlight-tone { box-shadow: 0 0 8px rgba(var(--tool-light-rgb), .6); }

.inversion-card-notes {
    margin-top: 9px;
    font-size: 11.5px;
    color: var(--text2);
    letter-spacing: .02em;
}

/* ── Computer-keyboard MIDI hint — sits under the piano, explains the
   ASDF/QWERTY + Z/X mapping used by the physical-keyboard input added
   in js/keyboard.js. Hidden on touch-only screens since it's not
   relevant there. ─────────────────────────────────────────────────── */
.kb-computer-hint {
    margin: 14px 2px;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--text2);
    letter-spacing: .01em;
    text-align: center;
}
.kb-computer-hint b {
    color: var(--text);
    font-weight: 600;
}
@media (pointer: coarse) {
    .kb-computer-hint { display: none; }
}

/* ── Computer-keyboard key-mapping badges — sit right above each key's
   note label (instead of up at the top of the key) so the two read as
   one connected label instead of two separate things fighting for
   attention. White keys get a small round chip with just the letter,
   sitting right above their existing note-name label. Black keys are
   too short for two separate labels, so their chip carries both lines
   (letter + note name) and the plain note label underneath is hidden
   to avoid repeating it. ─────────────────────────────────────────── */
.pk--white[data-kbkey]::after {
    content: attr(data-kbkey);
    position: absolute;
    bottom: 29px;
    left: 50%;
    transform: translateX(-50%);
    width: 16px;
    height: 16px;
    line-height: 16px;
    text-align: center;
    border-radius: 50%;
    font-family: var(--font-display);
    font-size: 9.45px;
    font-weight: 800;
    letter-spacing: .01em;
    pointer-events: none;
    z-index: 3;
    background: rgba(20, 16, 30, .88);
    color: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .4), inset 0 0 0 1px rgba(255, 255, 255, .15);
}

.pk--black[data-kbkey]::after {
    content: attr(data-kbkey);
    position: absolute;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    width: 16px;
    height: 16px;
    line-height: 16px;
    text-align: center;
    border-radius: 50%;
    font-family: var(--font-display);
    font-size: 9.45px;
    font-weight: 800;
    letter-spacing: .01em;
    pointer-events: none;
    z-index: 4;
    background: rgba(16, 12, 30, .85);
    color: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .35);
}


/* 5-oct keys are narrower than 2/3-oct (36 white keys in the same
   panel width), so the badges shrink to match rather than the piano
   scrolling or the keys being forced wider than the panel. */
.piano[data-octaves="5"] .pk--white[data-kbkey]::after {
    width: 13px;
    height: 13px;
    line-height: 13px;
    font-size: 9px;
    bottom: 25px;
}
.piano[data-octaves="5"] .pk--black[data-kbkey]::after {
    width: 13px;
    height: 13px;
    line-height: 13px;
    font-size: 9px;
}
.piano[data-octaves="5"] .pk-label { font-size: 9px; }

@media (pointer: coarse) {
    .pk[data-kbkey]::after { display: none; }
}

/* Arpeggio toggle — re-themed from the shared purple to this page's own
   sky-cyan identity, matching .pill-btn.active's look/feel. */
#keyboard-single-note-toggle {
    border-radius: 12px;
}
#keyboard-single-note-toggle:hover {
    background: rgba(var(--tool-rgb), .16);
    border-color: rgba(var(--tool-light-rgb), .40);
    color: #fff;
}
#keyboard-single-note-toggle[aria-pressed="true"] {
    background: linear-gradient(160deg, rgba(190, 235, 255, .40) 0%, rgba(var(--tool-rgb), .80) 45%, rgba(15, 110, 165, .92) 100%);
    border-color: rgba(var(--tool-light-rgb), .55);
    color: #fff;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .40), 0 3px 12px rgba(var(--tool-rgb), .45);
    text-shadow: 0 1px 1px rgba(0, 0, 0, .25);
}

@media (pointer: coarse) {
    /* Most touch/handheld devices don't have a physical keyboard, so the
       "computer-keyboard input" toggle is dead weight there — hide it by
       default. If a real hardware keydown is ever detected at runtime
       (e.g. a Bluetooth keyboard paired with a tablet), keyboard.js adds
       .hw-kbd-detected to <html> and this rule backs off. */
    #kb-midi-toggle-group { display: none; }
    html.hw-kbd-detected #kb-midi-toggle-group { display: flex; }
}

@media (max-width: 768px) {
    /* Mobile-only 5% font-size reduction (auto-generated). Desktop keeps
       the original sizes; this block only fires under 768px. */
    .pk-label { font-size: 10.5px; }
    .pill-btn { font-size: 12.5px; padding-left: 10px; padding-right: 10px; }
    /* Sharp/flat glyph centering nudge now lives centrally in tool.css
       (shared by every tool page) rather than duplicated here. */
    .sf-toggle { font-size: 11.5px; }
    .inversions-panel-title { font-size: 13.5px; }
    .inversions-panel-hint { font-size: 11px; }
    .inversion-card-label { font-size: 10px; }
    .inversion-card-name { font-size: 14px; }
    .inversion-card-notes { font-size: 11px; }
    /* ── Computer-keyboard MIDI hint — sits under the piano, explains the
   ASDF/QWERTY + Z/X mapping used by the physical-keyboard input added
   in js/keyboard.js. Hidden on touch-only screens since it's not
   relevant there. ─────────────────────────────────────────────────── */
.kb-computer-hint { font-size: 12px; }
    /* ── Computer-keyboard key-mapping badges — sit right above each key's
   note label (instead of up at the top of the key) so the two read as
   one connected label instead of two separate things fighting for
   attention. White keys get a small round chip with just the letter,
   sitting right above their existing note-name label. Black keys are
   too short for two separate labels, so their chip carries both lines
   (letter + note name) and the plain note label underneath is hidden
   to avoid repeating it. ─────────────────────────────────────────── */
.pk--white[data-kbkey]::after { font-size: 9px; }
    .pk--black[data-kbkey]::after { font-size: 9px; }
    /* 5-oct keys are narrower than 2/3-oct (36 white keys in the same
   panel width), so the badges shrink to match rather than the piano
   scrolling or the keys being forced wider than the panel. */
.piano[data-octaves="5"] .pk--white[data-kbkey]::after { font-size: 8.5px; }
    .piano[data-octaves="5"] .pk--black[data-kbkey]::after { font-size: 8.5px; }
    .piano[data-octaves="5"] .pk-label { font-size: 8.5px; }
}

/* -- Keyboard toolbar on touch devices -------------------------------------
   Two rows. The octave range and Piano/Synth are single tap-to-cycle buttons
   (js/keyboard-toolbar-cycle.js builds them and hides the originals), so every
   control is one small pill:
       row 1: Play . speed . Arpeggio . octave range ........ sharp/flat
       row 2: Piano/Synth . Sustain . Notes ................ Clear Keys
   The wrappers are flattened so every pill is a direct flex item with a fixed
   order; flex-wrap breaks the rows by itself, so it follows the screen width. */
@media (pointer: coarse) {
    .piano-toolbar { flex-wrap: wrap; align-items: center; gap: 4px 5px; }
    .piano-toolbar > .toolbar-break { display: none; }
    /* Forced line break between the two rows (a zero-height full-width item;
       the row gap is paid on both sides of it, hence the small row-gap). */
    .piano-toolbar::before { content: ""; order: 6; flex: 0 0 100%; height: 0; }
    /* (not .toolbar-row-1-end: the inline script also puts that class on the
       Clear Keys button, which must stay a real box) */
    .piano-toolbar .toolbar-left,
    .piano-toolbar .toolbar-row-1,
    .piano-toolbar .toolbar-right-top { display: contents; }

    html.kb-cycle .piano-toolbar #toolbar-octave-group,
    html.kb-cycle .piano-toolbar #kb-sound-group { display: none; }

    .piano-toolbar #keyboard-play-btn { order: 1; }
    .piano-toolbar .pill-group:has(#keyboard-speed-toggle) { order: 2; }
    .piano-toolbar #keyboard-single-note-toggle { order: 3; }
    .piano-toolbar #kb-octave-cycle { order: 4; }
    .piano-toolbar .pill-group:has(#keyboard-note-display-toggle) { order: 5; margin-left: auto; }
    .piano-toolbar #kb-sound-cycle { order: 7; }
    .piano-toolbar .pill-group:has(#sustain-toggle) { order: 8; }
    .piano-toolbar .pill-group:has(#label-mode-toggle) { order: 9; }
    .piano-toolbar #chord-clear-btn { order: 10; margin-left: auto; padding-left: 8px; padding-right: 8px; }
    /* Slightly snugger pills so the whole second row fits on a phone. */
    .piano-toolbar .pill-btn { padding-left: 9px; padding-right: 9px; }

    .kb-cycle-btn { white-space: nowrap; }
    .kb-cycle-icon { margin-right: 5px; }
}
/* Very narrow phones: drop the little Piano/Synth icon so row 2 still fits. */
@media (pointer: coarse) and (max-width: 380px) {
    .kb-cycle-icon { display: none; }
    .piano-toolbar { column-gap: 4px; }
}