/* ==========================================================================
   GUITAR PAGE — CAGED picker, chord library, capo results
   ========================================================================== */

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

/* Match every panel card's width to the Circle of Fifths card above it
   (same fix already used on the Bass/Keyboard pages): .tool-panel's own
   24px side padding was shrinking .gtr-fretboard-panel/.tool-controls-card
   ~48px narrower than .circle-section. Drop that padding and drive the
   panel's max-width off the same responsive tiers .circle-section uses,
   so Scale Explorer, CAGED, Chord Library, and Capo Explorer all line up
   flush with the circle instead of sitting narrower than it. */
:root { --gtr-panel-maxw: 1200px; }
@media (min-width: 601px) and (max-width: 1099px) { :root { --gtr-panel-maxw: 100%; } }
@media (min-width: 2560px) { :root { --gtr-panel-maxw: 1440px; } }
@media (min-width: 3840px) { :root { --gtr-panel-maxw: 1800px; } }
.tool-panel { width: 100%; max-width: var(--gtr-panel-maxw); padding-left: 0; padding-right: 0; }

.tool-hint { font-size: 13px; color: var(--text2); margin: 0 0 12px; line-height: 1.5; }

.tool-controls-title-icon {
    width: 18px;
    height: 18px;
    object-fit: contain;
    flex-shrink: 0;
}

/* Scale Explorer — frets are clickable (manual note finder, same as the
   Bass page): clicking any fret toggles a highlight on that specific
   note, independent of the Scale Explorer's own root/type picker.
   The reference app uses the shared purple "active" dot everywhere
   EXCEPT the Guitar Scale fretboard, where it's overridden to a flat
   coral fill matching that panel's own identity color (--guitar-rgb) —
   copied here instead of the generic purple. Like the reference, it
   wins over the rose scale-match / gold root-ring via !important. */
#scale-fretboard .gtr-fret-cell { cursor: pointer; }
#scale-fretboard .gtr-fret-cell:hover .gtr-fret-dot { transform: scale(1.08); }
#scale-fretboard .gtr-open-note-badge { cursor: pointer; }
#scale-fretboard .gtr-open-note-badge:hover { transform: scale(1.08); }
#scale-fretboard .gtr-open-note-badge.gtr-user-picked {
    background: #a5182f !important;
    border-color: #e6455f !important;
    color: #fff !important;
    box-shadow: 0 0 12px rgba(var(--guitar-rgb), .55) !important;
}
#chord-lib-fretboard .gtr-open-note-badge.gtr-user-picked {
    background: #6640e8 !important;
    border-color: #6640e8 !important;
    color: #fff !important;
    box-shadow: 0 0 12px rgba(102, 64, 232, .55) !important;
}

/* Scale Explorer — clicking a regular fret (not just the fret-0 badge)
   uses the same manual-preview highlight: a flat coral fill matching
   the Guitar Scale identity, copied verbatim from the reference app's
   #ws-guitar .fret-cell.active .fret-dot (not the embossed gradient
   used for CAGED/Chord Library shape dots elsewhere). */
#scale-fretboard .gtr-fret-cell.gtr-user-picked .gtr-fret-dot {
    background: #a5182f !important;
    border-color: #e6455f !important;
    color: #fff !important;
    box-shadow: 0 0 12px rgba(var(--guitar-rgb), .55) !important;
}
#chord-lib-fretboard .gtr-fret-cell.gtr-user-picked .gtr-fret-dot {
    background: #6640e8 !important;
    border-color: #6640e8 !important;
    color: #fff !important;
    box-shadow: 0 0 12px rgba(102, 64, 232, .55) !important;
}

/* Chord Library — once a chord/voicing is active, any note the user adds,
   moves, or mutes by hand (as opposed to the untouched preset shape) gets
   this purple treatment instead of the shape's normal embossed dot color,
   so it's visually obvious which notes were manually toggled. Same purple
   used for the manual fret-highlight (.gtr-user-picked) elsewhere. */
.gtr-fret-dot--user-edited {
    background: #6640e8 !important;
    border-color: #6640e8 !important;
    color: #fff !important;
    box-shadow: 0 0 12px rgba(102, 64, 232, .55) !important;
}
#chord-lib-fretboard .gtr-fret-cell.active .gtr-fret-dot--shape.gtr-fret-dot--user-edited {
    background: #6640e8 !important;
    border-color: #6640e8 !important;
    color: #fff !important;
    box-shadow: 0 0 12px rgba(102, 64, 232, .55) !important;
}
.gtr-open-note-badge--user-edited {
    background: #6640e8 !important;
    border-color: #6640e8 !important;
    color: #fff !important;
    box-shadow: 0 0 12px rgba(102, 64, 232, .55) !important;
}

/* Chord Library board is editable once a chord is picked — every fretted
   cell and open-string badge accepts clicks so the player can build their
   own voicings, not just the preset shapes. */
#chord-lib-fretboard .gtr-fret-cell { cursor: pointer; }
#chord-lib-fretboard .gtr-fret-cell:hover .gtr-fret-dot { transform: scale(1.08); }
#chord-lib-fretboard .gtr-open-note-badge { cursor: pointer; }

/* Scale Explorer — Play, Speed, fret-count selector (12/15/24) and
   Clear Fretboard, all on one line directly above the board. Fret-count
   group copied from the reference app's fret-toggle-g buttons; the
   active segment uses this page's theme colour (--guitar-rgb, indigo)
   instead of the reference's shared purple, matching the coral "active
   fret" treatment above. Pushed to the right of Play/Speed via
   margin-left: auto on the fret-count group so the row reads as one
   clean line instead of two separate clusters. */
.scale-fretboard-controls-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 14px 0 10px;
    flex-wrap: wrap;
}
.scale-fretboard-controls-row .scale-note-toggle {
    margin-left: auto;
}
.scale-fret-toggle-group {
    display: flex;
    background: var(--bg3);
    border: 1px solid var(--border2);
    border-radius: 8px;
    overflow: hidden;
}
.scale-fret-toggle {
    background: transparent;
    border: none;
    color: var(--text2);
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    padding: 6px 12px;
    cursor: pointer;
    transition: background .15s, color .15s;
}
.scale-fret-toggle:not(.active):hover {
    background: rgba(var(--tool-rgb), .16);
    color: #fff;
}
.scale-fret-toggle.active {
    background: linear-gradient(160deg, rgba(210, 200, 255, .42) 0%, rgba(var(--tool-rgb), .85) 45%, rgba(46, 24, 126, .95) 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);
}
.scale-clear-btn { font-size: 12px; padding: 6px 14px; }

/* Clear Fretboard sits on the same line as Play (Scale Explorer, Chord
   Library, Capo Explorer), pushed to the right end of that row so it
   reads as the top-right control of the fretboard section below it. */
.fretboard-clear-btn { font-size: 12px; padding: 6px 14px; margin-left: auto; }

/* Scale Explorer — Play button, same gold "hear what's lit up" treatment
   as the Bass/Keyboard pages' Play buttons, so the control reads the same
   across every instrument page. */
.scale-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;
}
.scale-play-btn:hover {
    color: #4a3300;
    background: linear-gradient(160deg, #ffeab0 0%, #ffd980 55%, #e6ae3f 100%);
    border-color: transparent;
}
.scale-play-btn:disabled {
    background: var(--glass-md);
    border-color: rgba(var(--tool-light-rgb), .22);
    color: var(--text2);
    opacity: .45;
    cursor: not-allowed;
}
.scale-play-btn.is-playing { animation: sc-play-pulse 0.6s var(--ease) infinite; }
@keyframes sc-play-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

/* Speed toggle — always shown toggled-in (never a blank/off state),
   reusing the Scale Explorer's own fret-count pill theme (coral) so it
   matches the other pills in this section. */
.scale-speed-toggle,
.scale-speed-toggle.active {
    background: linear-gradient(160deg, rgba(210, 200, 255, .42) 0%, rgba(var(--tool-rgb), .85) 45%, rgba(46, 24, 126, .95) 100%);
    border-bottom: none;
    font-size: 13px;
    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);
}


/* CAGED — root pills now reuse the shared .tool-controls-card / .ps-row /
   .root-pill markup (the same card the bass page uses for its Root Note
   picker, where the root pills are the first and only control in the
   card). Hover/active states use a coral-tinted accent to match this
   panel's identity (--guitar-rgb), since these pills use aria-pressed
   rather than the .active class. The Scale Explorer's root pills
   (.scale-root-pill) share this same coral treatment — keyed off the
   .active class instead of aria-pressed, since that's how the Scale
   Explorer tracks its selected root — so both cards match. */
.caged-root-pill:hover,
.scale-root-pill:hover {
    background: rgba(var(--tool-rgb), .16);
    border-color: rgba(var(--tool-light-rgb), .40);
    color: #ffc2cb;
}
.caged-root-pill[aria-pressed="true"],
.scale-root-pill.active {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.10) 0%, rgba(255, 255, 255, 0.01) 55%, transparent 100%),
        radial-gradient(130% 160% at 50% 105%, rgba(var(--tool-rgb), 0.75) 0%, rgba(var(--tool-rgb), 0.38) 55%, rgba(var(--tool-rgb), 0.18) 100%);
    backdrop-filter: blur(14px) saturate(200%);
    -webkit-backdrop-filter: blur(14px) saturate(200%);
    border-color: rgba(255, 255, 255, 0.2);
    border-bottom: 2px solid rgba(var(--tool-light-rgb), 1);
    color: #fff;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.3),
        inset 0 -4px 8px -3px rgba(var(--tool-rgb), 0.4),
        0 2px 8px rgba(var(--tool-rgb), 0.2);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}

/* CAGED card — slightly more elevated than the generic tool-controls-card,
   matching the reference app's panel treatment (deeper drop shadow + inset
   highlight, on top of the shared coral tint already set via --tool-rgb).
   Applied to the Scale Explorer's card too, so both panels on the guitar
   page share one consistent card style. */
#panel-caged .tool-controls-card,
#panel-scale .tool-controls-card {
    border-color: rgba(var(--tool-light-rgb), .28);
    box-shadow:
        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);
}

/* ── Sharp/flat spelling toggle + accidental pills — copied from the
   bass page's Root Note pills. 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;
}
/* Sharp/flat colors for .sf-acc-pill now live centrally in tool.css
   (shared by every tool page) rather than duplicated here. */

/* ── Chord Library + Capo Explorer — unified plum identity ────────────
   Both panels use the generic .tool-controls-card / fretboard shell
   driven by --tool-rgb / --tool-light-rgb, which now default to this
   page's plum (--guitar-rgb, matching Chord Builder) at the :root
   level — no override needed here. CAGED shape dots keep their own
   distinct per-letter colors (see CAPO_SHAPE_COLORS in guitar.js) so
   the shapes stay easy to tell apart even though the page is single-tone. */

/* Capo Explorer fretboard — CAGED shape dots keep each letter's own
   color, matching the pills and chord-quality cards above the board. */
.gcv-root-pills .root-pill:hover {
    background: rgba(102, 64, 232, 0.18);
    border-color: rgba(245, 163, 171, .40);
    color: #fff;
}
.gcv-root-pills .root-pill.active {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.10) 0%, rgba(255, 255, 255, 0.01) 55%, transparent 100%),
        radial-gradient(130% 160% at 50% 105%, rgba(var(--tool-rgb), 0.75) 0%, rgba(var(--tool-rgb), 0.38) 55%, rgba(var(--tool-rgb), 0.18) 100%);
    backdrop-filter: blur(14px) saturate(200%);
    -webkit-backdrop-filter: blur(14px) saturate(200%);
    border-color: rgba(255, 255, 255, 0.2);
    border-bottom: 2px solid rgba(var(--tool-light-rgb), 1);
    color: #fff;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.3),
        inset 0 -4px 8px -3px rgba(var(--tool-rgb), 0.4),
        0 2px 8px rgba(var(--tool-rgb), 0.2);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}
.gcv-type-pills .type-pill-btn:hover {
    background: rgba(102, 64, 232, 0.18);
    border-color: rgba(245, 163, 171, .40);
    color: #fff;
}
.gcv-type-pills .type-pill-btn.active {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.10) 0%, rgba(255, 255, 255, 0.01) 55%, transparent 100%),
        radial-gradient(130% 160% at 50% 105%, rgba(var(--tool-rgb), 0.75) 0%, rgba(var(--tool-rgb), 0.38) 55%, rgba(var(--tool-rgb), 0.18) 100%);
    backdrop-filter: blur(14px) saturate(200%);
    -webkit-backdrop-filter: blur(14px) saturate(200%);
    border-color: rgba(255, 255, 255, 0.2);
    border-bottom: 2px solid rgba(var(--tool-light-rgb), 1);
    color: #fff;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.3),
        inset 0 -4px 8px -3px rgba(var(--tool-rgb), 0.4),
        0 2px 8px rgba(var(--tool-rgb), 0.2);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}
.gcv-card {
    /* No special background/border override — falls back to the plain
       .tool-controls-card (page coral tint), same as Capo Explorer's
       card. */
}
.gcv-display {
    background: rgba(102, 64, 232, 0.18);
    border: 1px solid rgba(245, 163, 171, .30);
}
.gcv-display-name.has-chord { color: #a58cf5; }

.gcv-voicings-section {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--border2);
}
.gcv-voicings-label {
    font-size: 11px;
    font-weight: 700;
    color: var(--text3);
    text-transform: uppercase;
    letter-spacing: .5px;
    margin-bottom: 8px;
}
.gcv-voicings-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.gcv-voicing-chip {
    background: var(--bg3);
    border: 1.5px solid var(--border2);
    border-radius: 10px;
    padding: 7px 9px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    min-width: 64px;
    font-family: inherit;
    color: var(--text2);
    transition: transform .22s cubic-bezier(0.22, 1, 0.36, 1),
                background .18s var(--ease),
                border-color .18s var(--ease),
                box-shadow .22s var(--ease),
                color .14s var(--ease);
}
.gcv-voicing-chip svg { display: block; }
.gcv-voicing-chip:hover {
    border-color: #a58cf5;
    background: rgba(102, 64, 232, 0.18);
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, .28);
    color: #fff;
}
.gcv-voicing-chip.active {
    border-color: #a58cf5;
    background: rgba(102, 64, 232, .30);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 3px 12px rgba(102, 64, 232, .40);
    color: #fff;
}
.gcv-voicing-chip-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .2px;
    white-space: nowrap;
}
.gcv-shape-badge {
    font-size: 8px;
    font-weight: 700;
    padding: 1px 5px;
    border-radius: 4px;
    letter-spacing: .3px;
}

/* Sharp/flat colors for these toggle buttons now live centrally in
   tool.css (shared by every tool page) rather than duplicated here. */

/* CAGED — color legend (hidden until a root is picked; JS toggles display) */
.caged-legend {
    display: none;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--border2);
}
.caged-legend-item { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text2); }
.caged-legend-swatch { width: 13px; height: 13px; border-radius: 50%; flex-shrink: 0; display: inline-block; }
.caged-fret-range-label { font-size: 11px; color: var(--text3); margin-left: 2px; }
.caged-legend-info {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 17px;
    height: 17px;
    padding: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .05);
    border: 1.5px solid rgba(255, 255, 255, .14);
    color: var(--text3);
    font-size: 10px;
    font-weight: 700;
    font-style: normal;
    font-family: inherit;
    cursor: default;
    flex-shrink: 0;
    margin-left: 4px;
    vertical-align: middle;
    transition: border-color .15s var(--ease), color .15s var(--ease);
}
.caged-legend-info:hover {
    border-color: #a58cf5;
    color: #a58cf5;
}
.caged-legend-info[data-tooltip]:hover::after {
    content: attr(data-tooltip);
    position: absolute;
    top: calc(100% + 7px);
    left: 50%;
    transform: translateX(-50%);
    background: #1a1830;
    color: var(--text2);
    font-size: 11px;
    font-weight: 500;
    white-space: nowrap;
    padding: 5px 10px;
    border-radius: 7px;
    border: 1px solid var(--border2);
    box-shadow: 0 4px 16px rgba(0, 0, 0, .5);
    pointer-events: none;
    z-index: 20;
    line-height: 1.5;
}


#caged-auto-label { margin: 8px 2px 4px; }

/* CAGED per-shape colors now live in css/fretboard.css (.gtr-fret-dot--shape.caged-X) */

/* Capo Explorer fretboard — the shared .gtr-fret-dot--shape.caged-X rule
   above gives every panel a flat, unembossed fill per CAGED letter. Chord
   Library's own dots use an embossed gradient instead (see
   #chord-lib-fretboard .gtr-fret-dot--shape in fretboard.css). Capo
   Explorer gets that same embossed treatment here, keeping each letter's
   own color rather than switching to Chord Library's violet. */
#capo-fretboard .gtr-fret-dot--shape.caged-C { background: linear-gradient(160deg, #f0a852 0%, #c94812 55%, #7a2b08 100%) !important; border-color: #e06830 !important; color: #fff !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.20), 0 0 16px #e07040b0 !important; text-shadow: 0 1px 1px rgba(0,0,0,.25); }
#capo-fretboard .gtr-fret-dot--shape.caged-A { background: linear-gradient(160deg, #7fa3d4 0%, #2b5f9e 55%, #12305c 100%) !important; border-color: #5288c0 !important; color: #fff !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.20), 0 0 16px #3a7fd4b0 !important; text-shadow: 0 1px 1px rgba(0,0,0,.25); }
#capo-fretboard .gtr-fret-dot--shape.caged-G { background: linear-gradient(160deg, #7fc494 0%, #1e7d40 55%, #0d4520 100%) !important; border-color: #48a862 !important; color: #fff !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.20), 0 0 16px #28a858b0 !important; text-shadow: 0 1px 1px rgba(0,0,0,.25); }
#capo-fretboard .gtr-fret-dot--shape.caged-E { background: linear-gradient(160deg, #d47f7f 0%, #971e1e 55%, #560f0f 100%) !important; border-color: #c04848 !important; color: #fff !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.20), 0 0 16px #cc2828b0 !important; text-shadow: 0 1px 1px rgba(0,0,0,.25); }
#capo-fretboard .gtr-fret-dot--shape.caged-D { background: linear-gradient(160deg, #d4bc6e 0%, #8a6c00 55%, #4d3c00 100%) !important; border-color: #c0a020 !important; color: #fff !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.20), 0 0 16px #b89000b0 !important; text-shadow: 0 1px 1px rgba(0,0,0,.25); }
.caged-legend-swatch.caged-C { background: #e07040; }
.caged-legend-swatch.caged-A { background: #3a7fd4; }
.caged-legend-swatch.caged-G { background: #28a858; }
.caged-legend-swatch.caged-E { background: #cc2828; }
.caged-legend-swatch.caged-D { background: #b89000; }

.chord-lib-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 12px;
}
.chord-lib-card {
    background: var(--glass);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    padding: 10px;
    cursor: pointer;
    transition: all 0.15s var(--ease);
}
.chord-lib-card:hover { background: var(--glass-md); }
.chord-lib-card[aria-selected="true"] {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.10) 0%, rgba(255, 255, 255, 0.02) 100%),
        rgba(155, 110, 255, 0.14);
    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(180, 150, 255, 0.9);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.3),
        0 3px 10px rgba(155, 110, 255, 0.25);
}
.chord-lib-card-name {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 13.5px;
    text-align: center;
    margin-bottom: 6px;
}

/* Chord Library / Capo Explorer — Clear Fretboard button hover uses the
   panel's purple identity instead of the page's default coral. */
#panel-chords .fretboard-clear-btn:hover,
#panel-capo .fretboard-clear-btn:hover {
    color: #fff;
    border-color: rgba(245, 163, 171, .40);
    background: rgba(102, 64, 232, .18);
}

/* Chord Library fretboard — now left at the page's plain default coral
   board + purple root-dot (same as Capo Explorer's board), instead of
   its own green identity. */

/* Capo Explorer — capo-fret pills reuse .root-pill as-is; shape chips
   get the same per-letter coloring as the CAGED legend/fret dots, and
   the sounding-chord card borrows that shape's color as its accent,
   mirroring the reference app's gc-capo-pill-row / gc-shape-chip /
   sounding-chord card. */
.capo-shape-chip { font-weight: 700; }
.capo-shape-chip.caged-C:hover { background: linear-gradient(160deg, rgba(255,255,255,.10), rgba(224,112,64,.22)); border-color: rgba(224,112,64,.45); color: #fff; }
.capo-shape-chip.caged-C.active { background: linear-gradient(180deg, rgba(255,255,255,.14) 0%, rgba(255,255,255,.02) 100%), rgba(224,112,64,.30); backdrop-filter: blur(10px) saturate(160%); -webkit-backdrop-filter: blur(10px) saturate(160%); border: 1px solid rgba(255,255,255,.25); border-bottom: 2px solid #f0a070; color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 3px 12px rgba(224,112,64,.4); text-shadow: 0 1px 1px rgba(0,0,0,.25); }
.capo-shape-chip.caged-A:hover { background: linear-gradient(160deg, rgba(255,255,255,.10), rgba(58,127,212,.22)); border-color: rgba(58,127,212,.45); color: #fff; }
.capo-shape-chip.caged-A.active { background: linear-gradient(180deg, rgba(255,255,255,.14) 0%, rgba(255,255,255,.02) 100%), rgba(58,127,212,.30); backdrop-filter: blur(10px) saturate(160%); -webkit-backdrop-filter: blur(10px) saturate(160%); border: 1px solid rgba(255,255,255,.25); border-bottom: 2px solid #70b0f5; color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 3px 12px rgba(58,127,212,.4); text-shadow: 0 1px 1px rgba(0,0,0,.25); }
.capo-shape-chip.caged-G:hover { background: linear-gradient(160deg, rgba(255,255,255,.10), rgba(40,168,88,.22)); border-color: rgba(40,168,88,.45); color: #fff; }
.capo-shape-chip.caged-G.active { background: linear-gradient(180deg, rgba(255,255,255,.14) 0%, rgba(255,255,255,.02) 100%), rgba(40,168,88,.30); backdrop-filter: blur(10px) saturate(160%); -webkit-backdrop-filter: blur(10px) saturate(160%); border: 1px solid rgba(255,255,255,.25); border-bottom: 2px solid #60d880; color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 3px 12px rgba(40,168,88,.4); text-shadow: 0 1px 1px rgba(0,0,0,.25); }
.capo-shape-chip.caged-E:hover { background: linear-gradient(160deg, rgba(255,255,255,.10), rgba(204,40,40,.22)); border-color: rgba(204,40,40,.45); color: #fff; }
.capo-shape-chip.caged-E.active { background: linear-gradient(180deg, rgba(255,255,255,.14) 0%, rgba(255,255,255,.02) 100%), rgba(204,40,40,.30); backdrop-filter: blur(10px) saturate(160%); -webkit-backdrop-filter: blur(10px) saturate(160%); border: 1px solid rgba(255,255,255,.25); border-bottom: 2px solid #f06060; color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 3px 12px rgba(204,40,40,.4); text-shadow: 0 1px 1px rgba(0,0,0,.25); }
.capo-shape-chip.caged-D:hover { background: linear-gradient(160deg, rgba(255,255,255,.10), rgba(184,144,0,.22)); border-color: rgba(184,144,0,.45); color: #fff; }
.capo-shape-chip.caged-D.active { background: linear-gradient(180deg, rgba(255,255,255,.14) 0%, rgba(255,255,255,.02) 100%), rgba(184,144,0,.30); backdrop-filter: blur(10px) saturate(160%); -webkit-backdrop-filter: blur(10px) saturate(160%); border: 1px solid rgba(255,255,255,.25); border-bottom: 2px solid #f0d040; color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 3px 12px rgba(184,144,0,.4); text-shadow: 0 1px 1px rgba(0,0,0,.25); }

/* Capo controls card — purple by default (panel's identity), but tints
   to match whichever CAGED shape pill is currently active, same as the
   pills/cards below it. Falls back to purple again when no shape (or
   "All Shapes") is selected. */
#capo-controls-card {
    transition: background .25s var(--ease), border-color .25s var(--ease), box-shadow .25s var(--ease);
}
#capo-controls-card[data-shape="C"] {
    border-color: rgba(224,112,64,.55);
    background: linear-gradient(160deg, rgba(224,112,64,.16), rgba(224,112,64,.02)), linear-gradient(165deg, rgba(24,21,46,.58), rgba(10,8,22,.66));
    box-shadow: 0 0 28px rgba(224,112,64,.14);
}
#capo-controls-card[data-shape="A"] {
    border-color: rgba(58,127,212,.55);
    background: linear-gradient(160deg, rgba(58,127,212,.16), rgba(58,127,212,.02)), linear-gradient(165deg, rgba(24,21,46,.58), rgba(10,8,22,.66));
    box-shadow: 0 0 28px rgba(58,127,212,.14);
}
#capo-controls-card[data-shape="G"] {
    border-color: rgba(40,168,88,.55);
    background: linear-gradient(160deg, rgba(40,168,88,.16), rgba(40,168,88,.02)), linear-gradient(165deg, rgba(24,21,46,.58), rgba(10,8,22,.66));
    box-shadow: 0 0 28px rgba(40,168,88,.14);
}
#capo-controls-card[data-shape="E"] {
    border-color: rgba(204,40,40,.55);
    background: linear-gradient(160deg, rgba(204,40,40,.16), rgba(204,40,40,.02)), linear-gradient(165deg, rgba(24,21,46,.58), rgba(10,8,22,.66));
    box-shadow: 0 0 28px rgba(204,40,40,.14);
}
#capo-controls-card[data-shape="D"] {
    border-color: rgba(184,144,0,.55);
    background: linear-gradient(160deg, rgba(184,144,0,.16), rgba(184,144,0,.02)), linear-gradient(165deg, rgba(24,21,46,.58), rgba(10,8,22,.66));
    box-shadow: 0 0 28px rgba(184,144,0,.14);
}
#capo-controls-card[data-shape] .capo-slider-track-fill,
#capo-controls-card[data-shape] .capo-slider-track-dot { transition: background .25s var(--ease), box-shadow .25s var(--ease); }
#capo-controls-card[data-shape="C"] .capo-slider-track-fill, #capo-controls-card[data-shape="C"] .capo-slider-track-dot { background: #e07040; }
#capo-controls-card[data-shape="A"] .capo-slider-track-fill, #capo-controls-card[data-shape="A"] .capo-slider-track-dot { background: #3a7fd4; }
#capo-controls-card[data-shape="G"] .capo-slider-track-fill, #capo-controls-card[data-shape="G"] .capo-slider-track-dot { background: #28a858; }
#capo-controls-card[data-shape="E"] .capo-slider-track-fill, #capo-controls-card[data-shape="E"] .capo-slider-track-dot { background: #cc2828; }
#capo-controls-card[data-shape="D"] .capo-slider-track-fill, #capo-controls-card[data-shape="D"] .capo-slider-track-dot { background: #b89000; }

.capo-sounding-card {
    margin-top: 18px;
    background:
        radial-gradient(120% 160% at 50% 0%, rgba(139,124,240,.10), transparent 60%),
        var(--glass);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    padding: 18px 22px 16px;
}
.capo-sounding-card.caged-C .capo-shape-big,
.capo-sounding-card.caged-A .capo-shape-big,
.capo-sounding-card.caged-G .capo-shape-big,
.capo-sounding-card.caged-E .capo-shape-big,
.capo-sounding-card.caged-D .capo-shape-big,
.capo-sounding-card.caged-C .capo-fret-pill,
.capo-sounding-card.caged-A .capo-fret-pill,
.capo-sounding-card.caged-G .capo-fret-pill,
.capo-sounding-card.caged-E .capo-fret-pill,
.capo-sounding-card.caged-D .capo-fret-pill { color: #a58cf5; }
.capo-sounding-card.caged-C .capo-fret-pill,
.capo-sounding-card.caged-A .capo-fret-pill,
.capo-sounding-card.caged-G .capo-fret-pill,
.capo-sounding-card.caged-E .capo-fret-pill,
.capo-sounding-card.caged-D .capo-fret-pill { border-color: rgba(245, 163, 171, .55); }

.capo-sounding-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: clamp(6px, 3vw, 18px);
    flex-wrap: nowrap;
}
.capo-sounding-col { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 0 1 auto; }
.capo-sounding-col-left { align-items: center; text-align: center; }
.capo-sounding-col-right { align-items: center; text-align: center; }
.capo-sounding-col-mid {
    flex: 1 1 auto;
    align-items: center;
    text-align: center;
    min-width: 0;
    gap: 2px;
    position: relative;
}
.capo-sounding-eyebrow {
    font-size: clamp(7px, 2vw, 10px);
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--text3);
    white-space: nowrap;
}
.capo-shape-big {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(17px, 6.5vw, 30px);
    line-height: 1.1;
    color: var(--gold);
    white-space: nowrap;
}
.capo-shape-sub { font-size: clamp(9px, 2.8vw, 12px); color: var(--text2); white-space: nowrap; }
.capo-sounding-chord-big {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(17px, 6.5vw, 30px);
    line-height: 1.1;
    color: var(--gold);
    white-space: nowrap;
}
.capo-sounding-quality { font-size: clamp(9px, 2.8vw, 12px); color: var(--text2); white-space: nowrap; }
.capo-sounding-link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(3px, 1.5vw, 8px);
    width: 100%;
}
.capo-sounding-link-line {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(139,124,240,.55));
    max-width: 60px;
    min-width: 8px;
}
.capo-sounding-col-mid .capo-sounding-link-line:last-child { background: linear-gradient(90deg, rgba(139,124,240,.55), transparent); }
.capo-fret-pill {
    flex-shrink: 0;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(9px, 2.6vw, 12px);
    color: var(--capo-gold, #e0a838);
    border: 1px solid var(--border2);
    border-radius: 20px;
    padding: 4px clamp(6px, 2.5vw, 14px);
    background: rgba(255,255,255,.03);
    white-space: nowrap;
}
.capo-sounding-sounds-like { font-size: 11px; color: var(--text3); }
.capo-sounding-link-arrow { font-size: 13px; color: var(--text3); }
.capo-sounding-divider { height: 1px; background: var(--glass-border); margin: 14px 0 12px; }
.capo-sounding-notes { display: flex; flex-wrap: wrap; gap: 8px; }
.capo-sounding-note-pill {
    background: rgba(139,124,240,.14);
    border: 1px solid rgba(139,124,240,.35);
    color: var(--text);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 12px;
    padding: 4px 12px;
    border-radius: 20px;
}


/* ── Capo slider (stepper) — ported directly from the reference app's
   .gc-capo-mobile-stepper. It has NO card/background of its own — it
   sits directly inside .tool-controls-card, same as the reference
   nests it inside .keyboard-panel with no extra nested card. ── */
.capo-slider {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 12px;
    margin-top: 4px;
}
.capo-slider-controls {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    flex: 0 0 auto;
}
.capo-slider-btn {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    border-radius: 7px;
    background: #ffffff0d;
    border: 1px solid var(--border2);
    color: var(--text2);
    font-size: 14px;
    font-family: inherit;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .2s var(--ease), color .2s var(--ease), transform .1s var(--ease), box-shadow .2s var(--ease);
}
.capo-slider-btn-plus {
    background: linear-gradient(155deg, #9082ec, #6b5bd6);
    border: none;
    color: #fff;
}
.capo-slider-btn:active { transform: scale(0.93); }
.capo-slider-btn:disabled { opacity: .35; cursor: default; box-shadow: none; }
.capo-slider-btn-minus:not(:disabled):hover {
    background: rgba(102, 64, 232, .14);
    color: var(--capo-gold);
    border-color: rgba(102, 64, 232, .35);
}
.capo-slider-fret {
    display: flex;
    align-items: baseline;
    justify-content: center;
    min-width: 70px;
}
.capo-slider-fret-word {
    color: var(--text);
    font-size: 16px;
    font-weight: 500;
    letter-spacing: -.2px;
    line-height: 1;
}
.capo-slider-fret-num {
    color: #a58cf5;
    font-size: 22px;
    font-weight: 500;
    line-height: 1;
    margin-left: 6px;
}
.capo-slider-divider {
    height: 1px;
    width: 100%;
    background: var(--border2);
}
.capo-slider-track {
    position: relative;
    flex: 1 1 80px;
    min-width: 0;
    height: 18px;
    margin: 0 0 0 8px;
    display: flex;
    align-items: center;
}
.capo-slider-track::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: 3px;
    border-radius: 2px;
    background: var(--border2);
}
.capo-slider-track-fill {
    position: absolute;
    left: 0;
    height: 3px;
    border-radius: 2px;
    background: linear-gradient(90deg, #6640e8, #a58cf5);
    width: 0%;
    transition: width .25s var(--ease);
}
.capo-slider-track-dot {
    position: absolute;
    top: 50%;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #a58cf5;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .35);
    transform: translate(-50%, -50%);
    left: 0%;
    transition: left .25s var(--ease), transform .12s var(--ease);
}
.capo-shape-row {
    flex-basis: 100%;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}
.capo-shape-row-label {
    font-size: 10px;
    font-weight: 700;
    color: var(--text3);
    text-transform: uppercase;
    letter-spacing: .05em;
    flex-shrink: 0;
}
.capo-all-shapes-btn {
    flex-shrink: 0;
    background: rgba(255, 255, 255, .045);
    border: 1px solid var(--border2);
    border-radius: 20px;
    color: var(--text2);
    font-family: inherit;
    font-size: 12px;
    font-weight: 700;
    padding: 6px 14px;
    cursor: pointer;
    transition: background .12s var(--ease), border-color .12s var(--ease), color .12s var(--ease), box-shadow .12s var(--ease);
}
.capo-all-shapes-btn:hover { color: #fff; border-color: #a58cf5; }
.capo-all-shapes-btn.active {
    background: linear-gradient(160deg, rgba(245, 190, 170, .40) 0%, #6640e8 55%, #6640e8 100%);
    border-color: #a58cf5;
    color: #fff;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 3px 12px rgba(102, 64, 232, .45);
}

@media (min-width: 768px) {
    .capo-shape-row {
        flex: 1;
        flex-basis: auto;
        min-width: 0;
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
    }
    .capo-shape-row::-webkit-scrollbar { display: none; }
}

@media (min-width: 768px) {
    .capo-slider {
        flex-wrap: nowrap;
        gap: 18px;
    }
    .capo-slider-btn {
        width: 30px;
        height: 30px;
        border-radius: 8px;
        background: rgba(255, 255, 255, .05);
        backdrop-filter: var(--blur-sm);
        -webkit-backdrop-filter: var(--blur-sm);
        border: 1px solid rgba(255, 255, 255, .12);
        box-shadow: none;
        font-size: 16px;
    }
    .capo-slider-btn-plus {
        background: linear-gradient(155deg, rgba(144, 130, 236, .85), rgba(107, 91, 214, .9));
        border: none;
    }
    .capo-slider-btn-minus:not(:disabled):hover {
        background: rgba(255, 255, 255, .09);
        color: var(--capo-gold);
    }
    .capo-slider-divider {
        width: 1px;
        height: 28px;
        flex: 0 0 auto;
    }
    .capo-slider-track {
        flex: 0 0 150px;
        max-width: 150px;
        height: 28px;
        margin: 0;
        cursor: pointer;
        touch-action: none;
    }
    .capo-slider-track::before,
    .capo-slider-track-fill { height: 4px; border-radius: 3px; }
    .capo-slider-track-dot {
        width: 16px;
        height: 16px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, .4);
    }
    .capo-slider-track:hover .capo-slider-track-dot { transform: translate(-50%, -50%) scale(1.12); }
}

/* ── Capo chord-card grid — one card per CAGED shape at the current
   capo fret, ported from the reference app's .gc-capo-card. ── */
.capo-card-grid { margin-top: 16px; }
.capo-card-grid:empty { margin-top: 0; }
.capo-card-grid-placeholder {
    text-align: center;
    padding: 22px 10px;
    color: var(--text3);
    font-size: 12.5px;
}

/* One .capo-group per CAGED shape — a colored-dot heading ("C SHAPE ·
   10 chords") over that shape's 10-quality card grid. Normally only one
   group is shown (whichever shape chip is active); "All Shapes" renders
   all five stacked. */
.capo-group { margin-bottom: 18px; }
.capo-group:last-child { margin-bottom: 0; }
.capo-group-header {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .6px;
    margin-bottom: 9px;
    padding-bottom: 7px;
    border-bottom: 1px solid var(--border2);
}
.capo-group-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
    box-shadow: 0 0 8px currentColor;
}
.capo-group-count {
    font-weight: 600;
    color: var(--text3);
    text-transform: none;
    letter-spacing: 0;
    margin-left: auto;
    opacity: .8;
}
.capo-group-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 8px;
}
@media (min-width: 768px) {
    .capo-group-grid { grid-template-columns: repeat(5, 1fr); gap: 9px; }
}

/* Individual chord card: shape name → sounding chord (colored by chord
   quality) + quality caption, badge in the top-right corner showing
   which CAGED shape is being fretted. Ported from the reference app's
   .gc-capo-card. */
.capo-card {
    background: var(--bg3);
    border: 1.5px solid var(--border2);
    border-left: 3px solid var(--border2);
    border-radius: 9px;
    padding: 8px 10px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 4px;
    min-height: 58px;
    transition: transform .22s cubic-bezier(0.22, 1, 0.36, 1),
                background .18s var(--ease),
                border-color .18s var(--ease),
                box-shadow .22s var(--ease);
}
.capo-card:hover {
    border-color: var(--capo-gold);
    background: rgba(212, 175, 55, .07);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0,0,0,.24);
}
.capo-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    font-size: 10px;
    color: var(--text3);
}
.capo-card-badge {
    font-size: 8.5px;
    font-weight: 700;
    padding: 1px 5px;
    border-radius: 4px;
    letter-spacing: .2px;
}
.capo-card-body {
    display: flex;
    align-items: center;
    gap: 5px;
    flex: 1;
}
.capo-card-from { flex-shrink: 0; min-width: 26px; }
.capo-card-shape { font-size: 16px; font-weight: 800; color: var(--text); line-height: 1.1; }
.capo-card-arrow { font-size: 10px; color: #a58cf5; flex-shrink: 0; line-height: 1; }
.capo-card-to { flex: 1; display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.capo-card-target {
    font-size: 18px;
    font-weight: 900;
    line-height: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}
.capo-card-quality {
    font-size: 10px;
    color: var(--text3);
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}
.capo-card.active {
    --capo-active-accent: var(--capo-card-accent, #d4af37);
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-bottom: 2px solid color-mix(in srgb, var(--capo-active-accent) 85%, white 15%);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.10) 0%, rgba(255, 255, 255, 0.02) 100%),
        color-mix(in srgb, var(--capo-active-accent) 16%, transparent);
    backdrop-filter: blur(10px) saturate(160%);
    -webkit-backdrop-filter: blur(10px) saturate(160%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.3),
        0 3px 10px color-mix(in srgb, var(--capo-active-accent) 28%, transparent);
}

/* Selection nav (Chord Library / Capo / Scale / CAGED) — "expanding hex row".
   Inactive items are a hexagon icon token + a label. The active item opens
   into a wide card with a plain (glowing) icon, its name and description.
   Everything is driven by --tool-rgb / --tool-light-rgb (the Guitar theme).
   Still a role="tablist" of <button class="tool-tab guitar-tab"> — the
   .tool-tab class is only the JS hook for js/guitar.js's tab switching. */
.guitar_selection_nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    max-width: var(--gtr-panel-maxw);
    gap: 14px;
    margin-top: 28px;
}
.guitar-tab {
    flex: 1 1 130px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 8px 6px;
    text-align: center;
    background: none;
    border: 1px solid transparent;
    border-radius: 6px;
    box-shadow: none;
    color: var(--text2);
    font-family: var(--font-display);
    cursor: pointer;
    transition: flex-grow 0.35s var(--ease), background 0.2s var(--ease), border-color 0.2s var(--ease), box-shadow 0.2s var(--ease), color 0.2s var(--ease);
}
.guitar-tab:focus-visible {
    outline: 2px solid rgb(var(--tool-light-rgb));
    outline-offset: 3px;
}

/* Hexagon token: outer hex = outline colour, ::before = dark inner hex. */
.guitar-tab-hex {
    position: relative;
    flex: none;
    width: 62px;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
    background: rgba(var(--tool-light-rgb), 0.65);
    transition: background 0.2s var(--ease), transform 0.2s var(--ease), filter 0.2s var(--ease);
}
.guitar-tab-hex::before {
    content: "";
    position: absolute;
    inset: 2px;
    clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
    background: linear-gradient(160deg, rgba(var(--tool-rgb), 0.42), rgba(var(--tool-rgb), 0.16)), #0f0e12;
    transition: background 0.2s var(--ease);
}
.guitar-tab-hex > * { position: relative; z-index: 1; }

.guitar-tab-icon {
    flex-shrink: 0;
    font-size: 28px;
    line-height: 1;
    color: rgb(var(--tool-light-rgb));
    opacity: 0.95;
    transition: opacity 0.2s var(--ease);
}
.guitar-tab-icon--img {
    width: 28px;
    height: 28px;
    object-fit: contain;
}
.guitar-tab-text {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 0;
}
.guitar-tab-label {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #bdbdc4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color 0.2s var(--ease);
}
.guitar-tab-desc {
    display: none;
    font-family: var(--font-body, inherit);
    font-weight: 400;
    font-size: 12.5px;
    color: #c9c0f5;
    margin-top: 3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.guitar-tab:not([aria-selected="true"]):hover { transform: none; background: none; }
.guitar-tab:not([aria-selected="true"]):hover .guitar-tab-hex {
    background: rgb(var(--tool-light-rgb));
    transform: translateY(-3px);
    filter: drop-shadow(0 6px 10px rgba(var(--tool-rgb), 0.55));
}
.guitar-tab:not([aria-selected="true"]):hover .guitar-tab-hex::before {
    background: linear-gradient(160deg, rgba(var(--tool-rgb), 0.62), rgba(var(--tool-rgb), 0.3)), #0f0e12;
}
.guitar-tab:not([aria-selected="true"]):hover .guitar-tab-icon { opacity: 1; }
.guitar-tab:not([aria-selected="true"]):hover .guitar-tab-label { color: #fff; }

/* Active: wide card, plain glowing icon (no hex), name + description. */
.guitar-tab[aria-selected="true"] {
    flex: 2.6 1 300px;
    flex-direction: row;
    justify-content: flex-start;
    gap: 18px;
    min-height: 96px;
    padding: 14px 26px;
    text-align: left;
    background: linear-gradient(150deg, rgba(var(--tool-rgb), 0.34), rgba(var(--tool-rgb), 0.08) 70%), #17122b;
    border: 1px solid rgba(var(--tool-light-rgb), 0.55);
    box-shadow: 0 0 26px -8px rgba(var(--tool-rgb), 0.8);
    color: #fff;
    transform: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
.guitar-tab[aria-selected="true"] .guitar-tab-hex {
    width: auto;
    height: auto;
    clip-path: none;
    background: none;
    filter: drop-shadow(0 0 10px rgba(var(--tool-rgb), 0.9));
}
.guitar-tab[aria-selected="true"] .guitar-tab-hex::before { display: none; }
.guitar-tab[aria-selected="true"] .guitar-tab-icon { opacity: 1; font-size: 40px; }
.guitar-tab[aria-selected="true"] .guitar-tab-icon--img { width: 40px; height: 40px; }
.guitar-tab[aria-selected="true"] .guitar-tab-text { align-items: flex-start; }
.guitar-tab[aria-selected="true"] .guitar-tab-label { font-size: 15px; color: #fff; }
.guitar-tab[aria-selected="true"] .guitar-tab-desc { display: block; }
/* Fully self-contained: .guitar-tab and its sub-elements (.guitar-tab-icon,
   .guitar-tab-label, .guitar-tab-desc, .guitar-tab-text) share no class
   names with tool.css's generic .tool-tab component, so nothing here
   depends on tool.css's cascade (font-size, font-weight, or otherwise).
   The <button> keeps class="tool-tab guitar-tab" in guitar.html only so
   js/guitar.js's existing `.tool-tab` tab-switching selector still finds
   it — that's a JS hook, not a styling dependency. */



/* ================================================================
   CAPO EXPLORER — GLASS · FROSTED · ELEGANT
   Adapted from the reference app's #gc-capo-panel treatment
   (backdrop blur, corner sheen, layered soft shadows, glowing
   active states) onto this page's own capo class names. Purely
   additive on top of #panel-capo's existing indigo identity —
   nothing removed, nothing renamed.
   ================================================================ */

/* ── Panel shell: frosted glass slab with corner sheen ─────────── */
#panel-capo .tool-controls-card {
    position: relative;
    backdrop-filter: var(--blur-lg) saturate(150%);
    -webkit-backdrop-filter: var(--blur-lg) saturate(150%);
    box-shadow:
        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),
        inset 0 0 0 1px rgba(255, 255, 255, .03);
    overflow: hidden;
}
#panel-capo .tool-controls-card::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;
}
#panel-capo .tool-controls-card::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;
}
#panel-capo .tool-controls-card > * { position: relative; z-index: 1; }

/* ── Capo-fret pills (reuse .root-pill) — frosted, glowing when active ── */
#panel-capo .root-pill {
    background: transparent;
    border-radius: 7px;
}
#panel-capo .root-pill.active,
#panel-capo .root-pill[aria-pressed="true"] {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.10) 0%, rgba(255, 255, 255, 0.01) 55%, transparent 100%),
        radial-gradient(130% 160% at 50% 105%, rgba(var(--tool-rgb), 0.75) 0%, rgba(var(--tool-rgb), 0.38) 55%, rgba(var(--tool-rgb), 0.18) 100%) !important;
    backdrop-filter: blur(14px) saturate(200%);
    -webkit-backdrop-filter: blur(14px) saturate(200%);
    border-bottom: 2px solid rgba(var(--tool-light-rgb), 1);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.3),
        inset 0 -4px 8px -3px rgba(var(--tool-rgb), 0.4),
        0 2px 8px rgba(var(--tool-rgb), 0.2);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}
#panel-capo .root-pill:not(.active):not([aria-pressed="true"]):hover {
    background: rgba(255, 255, 255, .07);
    color: #a58cf5;
}

/* ── Shape chips: frosted glass pills, per-letter glow kept intact ── */
.capo-shape-chip {
    background: rgba(255, 255, 255, .04);
    backdrop-filter: var(--blur-sm);
    -webkit-backdrop-filter: var(--blur-sm);
    border: 1px solid rgba(255, 255, 255, .10);
}

/* ── Capo controls card: same frosted treatment, per-shape tint kept ── */
#capo-controls-card {
    position: relative;
    backdrop-filter: var(--blur-md) saturate(140%);
    -webkit-backdrop-filter: var(--blur-md) saturate(140%);
    overflow: hidden;
}
#capo-controls-card::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(120% 90% at 6% -12%, rgba(255, 255, 255, .10), transparent 55%);
    z-index: 0;
}
#capo-controls-card > * { position: relative; z-index: 1; }

/* ── Slider buttons: glassy plus/active button, no glow ─────────── */
.capo-slider-btn {
    backdrop-filter: var(--blur-sm);
    -webkit-backdrop-filter: var(--blur-sm);
}

/* ── Sounding-chord result card: glass card with corner sheen ──── */
.capo-sounding-card {
    position: relative;
    background: linear-gradient(135deg, rgba(255, 255, 255, .075), rgba(255, 255, 255, .015)),
                radial-gradient(120% 160% at 50% 0%, rgba(139, 124, 240, .10), transparent 60%);
    backdrop-filter: var(--blur-md) saturate(140%);
    -webkit-backdrop-filter: var(--blur-md) saturate(140%);
    box-shadow:
        0 12px 34px rgba(0, 0, 0, .35),
        inset 0 1px 0 rgba(255, 255, 255, .12);
    overflow: hidden;
}
.capo-sounding-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(100% 100% at 0% 0%, rgba(255, 255, 255, .09), transparent 60%);
    pointer-events: none;
}
.capo-sounding-card > * { position: relative; z-index: 1; }
.capo-shape-big,
.capo-sounding-chord-big {
    text-shadow: 0 1px 2px rgba(0, 0, 0, .3);
}

/* ── Fret pill + note pills: frosted, subtle sheen ──────────────── */
.capo-fret-pill {
    backdrop-filter: var(--blur-sm);
    -webkit-backdrop-filter: var(--blur-sm);
}
.capo-sounding-note-pill {
    backdrop-filter: var(--blur-sm);
    -webkit-backdrop-filter: var(--blur-sm);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .10);
}

/* ── Divider: subtle glass hairline ─────────────────────────────── */
.capo-sounding-divider,
#panel-capo .capo-slider-divider {
    background: rgba(255, 255, 255, .10);
}

/* Respect reduced-motion / avoid heavy blur repaint on low-power scroll */
@media (prefers-reduced-motion: reduce) {
    #panel-capo .tool-controls-card,
    #capo-controls-card,
    .capo-shape-chip,
    .capo-slider-btn,
    .capo-sounding-card,
    .capo-fret-pill,
    .capo-sounding-note-pill {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }
}


/* ── Effects pedalboard (Chord Library + Capo Explorer only) ─────── */
.pedalboard-panel {
    margin-bottom: 16px;
    padding: 16px 18px 18px;
    background: linear-gradient(165deg, rgba(24, 21, 46, .58), rgba(10, 8, 22, .66));
    border: 1px solid rgba(var(--tool-light-rgb), .26);
    border-radius: var(--radius-lg);
    box-shadow: 0 6px 0 rgba(0, 0, 0, .35), 0 10px 22px rgba(0, 0, 0, .4);
}
.pedalboard-panel-label {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 15px;
    color: rgb(var(--tool-light-rgb));
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.pedalboard-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
    margin-bottom: 16px;
}
.pedal-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100px;
    padding: 12px 8px 14px;
    background: var(--pedal-bg);
    border: none;
    border-radius: 12px;
    cursor: pointer;
    box-shadow: 0 4px 0 var(--pedal-shadow), 0 6px 14px rgba(0,0,0,.35);
    transition: transform 0.18s cubic-bezier(.34,1.56,.64,1), box-shadow 0.18s var(--ease), opacity 0.15s var(--ease);
}
.pedal-box:hover {
    transform: translateY(-3px) scale(1.03);
    box-shadow: 0 2px 0 var(--pedal-shadow), 0 8px 18px rgba(0,0,0,.4);
}
.pedal-box:active {
    transform: translateY(1px) scale(0.98);
    box-shadow: 0 1px 0 var(--pedal-shadow), 0 3px 8px rgba(0,0,0,.35);
}
.pedal-box--selected {
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.55), 0 4px 0 var(--pedal-shadow), 0 8px 18px rgba(0, 0, 0, .4);
}
.pedal-box--locked { opacity: 0.4; cursor: not-allowed; }
.pedal-box-label {
    font-family: var(--font-display);
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: 0.06em;
    color: var(--pedal-text);
    margin-bottom: 10px;
}
.pedal-box-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    width: 100%;
}
.pedal-box-icon {
    font-size: 26px;
    color: var(--pedal-text);
    opacity: 0.9;
}
.pedal-box-led {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: #4a1414;
    box-shadow: inset 0 1px 1px rgba(0,0,0,.5);
    transition: all 0.15s var(--ease);
}
.pedal-box--on .pedal-box-led {
    background: #ff5b5b;
    box-shadow: 0 0 8px 2px rgba(255, 91, 91, .85), inset 0 0 2px rgba(0,0,0,.3);
}
.pedal-box-switch {
    width: 42px; height: 20px;
    padding: 0;
    border-radius: 6px;
    background: #0c0c11;
    border: 1px solid rgba(255, 255, 255, 0.14);
    box-shadow: inset 0 3px 4px rgba(0,0,0,.6), inset 0 -1px 0 rgba(255,255,255,.05), 0 1px 0 rgba(255,255,255,.03);
    cursor: pointer;
    transition: transform 0.12s cubic-bezier(.34,1.56,.64,1), box-shadow 0.15s var(--ease), background 0.15s var(--ease);
}
.pedal-box-switch:hover { box-shadow: inset 0 3px 4px rgba(0,0,0,.6), inset 0 -1px 0 rgba(255,255,255,.08), 0 0 0 2px rgba(255,255,255,.06); }
.pedal-box-switch:active { transform: scale(0.9) translateY(1px); }
.pedal-box--on .pedal-box-switch {
    background: #1e2130;
    box-shadow: inset 0 4px 5px rgba(0,0,0,.65), inset 0 0 10px rgba(255, 91, 91, .4), 0 0 0 2px rgba(255, 91, 91, .18);
}
.pedal-box-switch--bump { animation: pedalSwitchBump 0.28s cubic-bezier(.34,1.56,.64,1); }
@keyframes pedalSwitchBump {
    0% { transform: scale(1); }
    35% { transform: scale(0.84) translateY(2px); }
    70% { transform: scale(1.06); }
    100% { transform: scale(1); }
}
.pedalboard-params {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding-top: 14px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.pedalboard-params[hidden] { display: none; }
.pedal-param-row {
    display: grid;
    grid-template-columns: 70px 1fr 40px;
    align-items: center;
    gap: 14px;
}
.pedal-param-label {
    font-family: var(--font-display);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text2);
}
.pedal-param-value {
    font-family: var(--font-display);
    font-size: 12.5px;
    font-weight: 700;
    color: var(--text2);
    text-align: right;
}
.pedal-param-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 2px;
    background: rgba(255, 255, 255, 0.14);
    border-radius: 2px;
    outline: none;
}
.pedal-param-slider:focus-visible {
    outline: 2px solid var(--purple-l);
    outline-offset: 3px;
    border-radius: 2px;
}
.pedal-param-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 15px; height: 15px;
    border-radius: 50%;
    background: var(--accent, #6640e8);
    box-shadow: 0 0 0 4px rgba(102, 64, 232, 0.18);
    cursor: pointer;
}
.pedal-param-slider:focus-visible::-webkit-slider-thumb {
    box-shadow: 0 0 0 4px rgba(102, 64, 232, 0.18), 0 0 0 2px var(--purple-l);
}
.pedal-param-slider::-moz-range-thumb {
    width: 15px; height: 15px;
    border: none;
    border-radius: 50%;
    background: var(--accent, #6640e8);
    box-shadow: 0 0 0 4px rgba(102, 64, 232, 0.18);
    cursor: pointer;
}
.pedal-param-slider:focus-visible::-moz-range-thumb {
    box-shadow: 0 0 0 4px rgba(102, 64, 232, 0.18), 0 0 0 2px var(--purple-l);
}


/* Quick Guide modal styles now live in shared.css (css/shared.css) so
   every page — not just Guitar — can use the same modal markup/JS. */

@media (max-width: 768px) {
    /* Mobile-only 5% font-size reduction (auto-generated). Desktop keeps
       the original sizes; this block only fires under 768px. */
    .tool-hint { font-size: 12.5px; }
    .scale-fret-toggle { font-size: 12.5px; }
    .scale-clear-btn { font-size: 11.5px; }
    /* Clear Fretboard sits on the same line as Play (Scale Explorer, Chord
   Library, Capo Explorer), pushed to the right end of that row so it
   reads as the top-right control of the fretboard section below it. */
.fretboard-clear-btn { font-size: 11.5px; }
    /* Speed toggle — always shown toggled-in (never a blank/off state),
   reusing the Scale Explorer's own fret-count pill theme (coral) so it
   matches the other pills in this section. */
.scale-speed-toggle,
.scale-speed-toggle.active { font-size: 12.5px; }
    .gcv-voicings-label { font-size: 10.5px; }
    .gcv-voicing-chip-label { font-size: 9.5px; }
    .gcv-shape-badge { font-size: 7.5px; }
    .caged-legend-item { font-size: 12.5px; }
    .caged-fret-range-label { font-size: 10.5px; }
    .caged-legend-info { font-size: 9.5px; }
    .caged-legend-info[data-tooltip]:hover::after { font-size: 10.5px; }
    .chord-lib-card-name { font-size: 13px; }
    .capo-sounding-sounds-like { font-size: 10.5px; }
    .capo-sounding-link-arrow { font-size: 12.5px; }
    .capo-sounding-note-pill { font-size: 11.5px; }
    .capo-slider-btn { font-size: 13.5px; }
    .capo-slider-fret-word { font-size: 15px; }
    .capo-slider-fret-num { font-size: 21px; }
    .capo-shape-row-label { font-size: 9.5px; }
    .capo-all-shapes-btn { font-size: 11.5px; }
    .capo-card-grid-placeholder { font-size: 12px; }
    .capo-group-header { font-size: 10.5px; }
    .capo-card-top { font-size: 9.5px; }
    .capo-card-badge { font-size: 8px; }
    .capo-card-shape { font-size: 15px; }
    .capo-card-arrow { font-size: 9.5px; }
    .capo-card-target { font-size: 17px; }
    .capo-card-quality { font-size: 9.5px; }
    .guitar-tab-icon { font-size: 24px; }
    .guitar-tab[aria-selected="true"] .guitar-tab-label { font-size: 14px; }
    .guitar-tab-desc { font-size: 12px; }
    .pedalboard-panel-label { font-size: 14px; }
    .pedal-box-label { font-size: 11px; }
    .pedal-box-icon { font-size: 24.5px; }
    .pedal-param-label { font-size: 10.5px; }
    .pedal-param-value { font-size: 12px; }
}

/* -- Tuning pill (beside "Clear Fretboard") + dropdown menu ---------------- */
.fretboard-right-group {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 8px;
}
.tuning-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-family: var(--font-display);
    font-size: 12px;
    font-weight: 600;
    padding: 6px 14px;
    border-radius: 999px;
    border: 1px solid var(--glass-border);
    background: var(--glass-md);
    color: var(--text2);
    cursor: pointer;
    white-space: nowrap;
    transition: color 0.15s var(--ease), border-color 0.15s var(--ease), background 0.15s var(--ease);
}
.tuning-pill::after {
    content: "";
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid currentColor;
    opacity: 0.7;
}
.tuning-pill-label { letter-spacing: 0.06em; text-transform: uppercase; font-size: 11px; color: var(--text3); }
.tuning-pill-value { color: rgb(var(--tool-light-rgb)); }
.tuning-pill:hover,
.tuning-pill[aria-expanded="true"] { color: var(--text); border-color: rgba(var(--tool-rgb), 0.65); }
.tuning-pill.is-custom { border-color: rgba(var(--tool-rgb), 0.55); }

.tuning-menu {
    position: fixed;
    z-index: 1300;
    min-width: 230px;
    padding: 6px;
    border-radius: 12px;
    background: #15121c;
    border: 1px solid var(--glass-border);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.55);
}
.tuning-menu[hidden] { display: none; }
.tuning-menu-item {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 9px 12px;
    border: 0;
    border-radius: 8px;
    background: none;
    color: var(--text2);
    font-family: var(--font-display);
    font-size: 13px;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
}
.tuning-menu-item:hover,
.tuning-menu-item:focus-visible { background: rgba(255, 255, 255, 0.06); color: var(--text); outline: none; }
.tuning-menu-item[aria-checked="true"] { background: rgb(var(--tool-rgb)); color: #fff; }
.tuning-menu-notes { font-size: 11.5px; letter-spacing: 0.1em; opacity: 0.75; font-weight: 500; }

/* -- Guitar selection nav on phones ---------------------------------------
   Keep it compact: the active item is a full-width card on top, and the three
   others share ONE row of smaller hexes underneath (instead of wrapping into
   2 + 1 and eating a third of the screen). */
@media (max-width: 520px) {
    .guitar_selection_nav { gap: 6px 8px; margin-top: 20px; align-items: flex-start; }
    .guitar-tab {
        flex: 1 1 0;
        min-width: 0;
        gap: 7px;
        padding: 4px 0 2px;
    }
    .guitar-tab[aria-selected="true"] {
        order: -1;
        flex: 1 1 100%;
        min-height: 78px;
        padding: 12px 18px;
        gap: 14px;
    }
    .guitar-tab-hex { width: 52px; height: 59px; }
    .guitar-tab-icon { font-size: 22px; }
    .guitar-tab-icon--img { width: 24px; height: 24px; }
    .guitar-tab[aria-selected="true"] .guitar-tab-icon { font-size: 34px; }
    .guitar-tab[aria-selected="true"] .guitar-tab-icon--img { width: 36px; height: 36px; }
    .guitar-tab-label {
        font-size: 10px;
        letter-spacing: 0.06em;
        white-space: normal;
        text-align: center;
        line-height: 1.25;
    }
    .guitar-tab[aria-selected="true"] .guitar-tab-label { font-size: 14px; text-align: left; white-space: nowrap; }
    .guitar-tab-desc { font-size: 12px; }

    /* Tuning pill + Clear Fretboard: when they wrap to their own line, spread
       them to the two edges instead of bunching on the right. */
    .fretboard-right-group { margin-left: 0; flex: 1 1 100%; justify-content: space-between; }
}

/* -- Effects pedals on phones ---------------------------------------------
   All five pedals sit in ONE row (they used to wrap into 2+2+1 and took a
   big chunk of the screen). They share the row width evenly; labels, icons
   and the footswitch are scaled down to fit. */
@media (max-width: 520px) {
    .pedalboard-panel { padding: 14px 12px 16px; }
    .pedalboard-grid { flex-wrap: nowrap; justify-content: center; gap: 5px; margin-bottom: 14px; }
    .pedalboard-grid .pedal-box {
        flex: 1 1 0;
        min-width: 0;
        max-width: 76px;
        width: auto;
        padding: 9px 3px 11px;
        border-radius: 10px;
    }
    .pedalboard-grid .pedal-box-label { font-size: 8.5px; letter-spacing: 0.02em; margin-bottom: 8px; }
    .pedalboard-grid .pedal-box-body { gap: 8px; }
    .pedalboard-grid .pedal-box-icon { font-size: 20px; }
    .pedalboard-grid .pedal-box-switch { width: min(100%, 42px); height: 24px; }
}

/* -- Scale Explorer controls on phones ------------------------------------
   The 12 / 15 / 24 fret selector sits on the first line pushed to the right,
   directly above the Clear Fretboard pill on the second line (Tuning stays
   at the left of that line). Because it only needs auto margins, it adapts to
   any width: if everything fits on one line it stays on one line. */
@media (max-width: 600px) {
    #panel-scale .scale-fretboard-controls-row .scale-fret-toggle-group { margin-left: auto; }
}

/* -- Scale dropdowns (Guitar / Bass / Keyboard) use the Tuning menu style ---
   js/custom-select.js swaps each <select class="scale-select"> for a button
   that opens the same popover as the Tuning pill. The native <select> stays
   in the DOM, hidden, as the source of truth. */
.cs-native {
    position: absolute !important;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
    opacity: 0;
    pointer-events: none;
}
.scale-select.cs-trigger {
    display: flex;
    align-items: center;
    text-align: left;
    line-height: 1.3;
    background-image: none;   /* the old teal chevron; the caret below follows each page's colour */
    position: relative;
}
.scale-select.cs-trigger::after {
    content: "";
    position: absolute;
    right: 13px;
    top: 50%;
    width: 0;
    height: 0;
    margin-top: -2px;
    border-left: 4.5px solid transparent;
    border-right: 4.5px solid transparent;
    border-top: 5.5px solid rgb(var(--tool-light-rgb));
    transition: transform 0.15s var(--ease);
}
.scale-select.cs-trigger[aria-expanded="true"]::after { transform: rotate(180deg); }
.scale-select.cs-trigger[aria-expanded="true"] {
    border-color: rgba(var(--tool-light-rgb), .55);
    box-shadow: 0 0 0 3px rgba(var(--tool-rgb), 0.18);
}
.cs-trigger-label {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.tuning-menu.cs-menu {
    min-width: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.25) transparent;
}
.cs-menu .tuning-menu-item { justify-content: flex-start; padding: 10px 12px; }
.cs-menu .tuning-menu-item[aria-selected="true"] { background: rgb(var(--tool-rgb)); color: #fff; }