/* ==========================================================================
   GUITAR FRETBOARD — used across guitar.html's own panels only (Scale
   Explorer, CAGED, Chord Library). Fully self-contained: every class is
   namespaced "gtr-" so this file shares no selectors with css/bass.css
   and can be edited freely without touching the Bass page's board.

   Visual design ported from css/bass.css's hand-built board (wood/blue
   neck, nut, per-string rows, glowing fret-dots, fret-inlay markers)
   and re-themed here with the guitar's own accent (--tool-rgb).
   ========================================================================== */

:root {
    --gf-wrap-minw: 860px;
    --gf-dot: 40px;
    --gf-dot-fs: 14px;
    --gf-string-h: 60px;
    --gf-label-w: 32px;
    --gf-label-fs: 16px;
    --gf-nut-w: 8px;
    --gf-badge: 40px;
    --gf-badge-fs: 14px;
}

@media (min-width: 601px) and (max-width: 1099px) {
    :root {
        --gf-wrap-minw: 760px;
        --gf-dot: 34px;
        --gf-dot-fs: 12px;
        --gf-string-h: 52px;
        --gf-label-w: 28px;
        --gf-label-fs: 14px;
        --gf-nut-w: 7px;
        --gf-badge: 34px;
        --gf-badge-fs: 12px;
    }
}
@media (min-width: 1920px) {
    :root {
        --gf-wrap-minw: 980px;
        --gf-dot: 46px;
        --gf-dot-fs: 15px;
        --gf-string-h: 68px;
        --gf-label-w: 36px;
        --gf-label-fs: 17px;
        --gf-nut-w: 9px;
        --gf-badge: 46px;
        --gf-badge-fs: 15px;
    }
}
@media (min-width: 2560px) {
    :root {
        --gf-wrap-minw: 1080px;
        --gf-dot: 50px;
        --gf-dot-fs: 16px;
        --gf-string-h: 76px;
        --gf-label-w: 40px;
        --gf-label-fs: 18px;
        --gf-nut-w: 10px;
        --gf-badge: 50px;
        --gf-badge-fs: 16px;
    }
}
@media (min-width: 3840px) {
    :root {
        --gf-wrap-minw: 1280px;
        --gf-dot: 58px;
        --gf-dot-fs: 18px;
        --gf-string-h: 88px;
        --gf-label-w: 46px;
        --gf-label-fs: 20px;
        --gf-nut-w: 11px;
        --gf-badge: 58px;
        --gf-badge-fs: 18px;
    }
}


.gtr-fretboard-panel {
    background:
        linear-gradient(160deg, rgba(var(--tool-rgb), .13), rgba(var(--tool-rgb), .02)),
        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 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-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Neck "background" — the reference app's .fretboard-wrap uses
   `background: var(--fretboard-brown)`, but --fretboard-brown is never
   actually defined anywhere in its CSS. With no fallback, that makes
   the whole background computed-value-invalid, so it silently resolves
   to transparent — letting the panel's own dark indigo/purple gradient
   (.gtr-fretboard-panel above) show through instead of a solid brown
   fill. That's the real, current look of the reference app, so it's
   replicated here rather than "fixing" a bug the reference doesn't
   actually have fixed. */
.gtr-fretboard-wrap {
    background: transparent;
    min-width: var(--gf-wrap-minw);
    padding: 18px 16px 18px 16px;
    border-radius: var(--radius-lg);
    display: grid;
    grid-template-columns: auto 1fr;
}

.gtr-fret-header-row { display: contents; }
.gtr-fret-header-spacer { grid-column: 1; }
.gtr-fret-header-cells { grid-column: 2; display: flex; align-items: center; margin-bottom: 6px; }
.gtr-fret-num { flex: 1; text-align: center; font-size: calc(var(--gf-dot-fs) - 1px); color: #c9bda7; }
.gtr-fret-num.marker { color: var(--gold); font-weight: 700; }

.gtr-string-row { display: contents; }
.gtr-string-lead {
    grid-column: 1;
    display: flex;
    align-items: center;
    height: var(--gf-string-h);
    border-top: 1px solid rgba(0, 0, 0, .25);
}
.gtr-frets-row {
    grid-column: 2;
    height: var(--gf-string-h);
    border-top: 1px solid rgba(0, 0, 0, .25);
}
.gtr-string-row:first-of-type .gtr-string-lead,
.gtr-string-row:first-of-type .gtr-frets-row { border-top: none; }

.gtr-string-label {
    text-align: center;
    font-size: var(--gf-label-fs);
    font-weight: 700;
    color: #e3dcd0;
    flex-shrink: 0;
    margin-right: 8px;
}

.gtr-open-note-badge {
    width: var(--gf-badge);
    height: var(--gf-badge);
    border-radius: 50%;
    font-size: var(--gf-badge-fs);
    font-weight: 700;
    flex-shrink: 0;
    margin-right: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1.5px solid var(--border2);
    background: rgba(0, 0, 0, .35);
    color: #cda;
}
.gtr-open-note-badge.is-open {
    border-color: #1d9e75;
    background: rgba(13, 48, 40, .55);
    color: #4dd4a8;
}
.gtr-open-note-badge.is-mute {
    border-color: #c23a3a;
    background: rgba(58, 13, 13, .55);
    color: #f07070;
}
.gtr-open-note-badge.is-blank {
    color: #8a9a94;
    border-color: var(--border2);
    background: rgba(0, 0, 0, .35);
    font-size: calc(var(--gf-badge-fs) * .55);
}
/* Scale Explorer / CAGED idle "O" badge (open string, not currently
   part of the highlighted scale) — same neutral colors as is-blank,
   but at full text size since it displays "O" rather than a small
   placeholder dot. */
.gtr-open-note-badge.is-open-neutral {
    color: #8a9a94;
    border-color: var(--border2);
    background: rgba(0, 0, 0, .35);
}
.gtr-open-note-badge.gtr-root-match {
    box-shadow: 0 0 0 2px #1e110c, 0 0 0 4.12px rgba(255, 255, 255, .65);
}

.gtr-nut {
    width: var(--gf-nut-w);
    height: 75%;
    background: #e5dec9;
    border-radius: 3px;
    flex-shrink: 0;
    box-shadow: 1px 1px 3px #00000080;
    z-index: 3;
}
/* When a capo is on the board at all, tint the nut too so the shaded
   capo region reads as one continuous clamp starting at the nut,
   rather than the bar appearing to float mid-board. */
.gtr-nut.gtr-capo-adjacent {
    background: linear-gradient(180deg, #f0e6be, var(--capo-gold));
    box-shadow: 0 0 6px var(--capo-gold), 1px 1px 3px #00000080;
}

.gtr-frets-row { display: flex; flex: 1; height: 100%; position: relative; }
.gtr-frets-row::before {
    content: "";
    position: absolute;
    top: 50%; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(#f0f0ffb3, #64646e80);
    pointer-events: none;
}

.gtr-fret-cell {
    flex: 1;
    height: 100%;
    border-right: 2px solid rgba(0, 0, 0, .4);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 1;
}

.gtr-fret-dot {
    width: var(--gf-dot); height: var(--gf-dot);
    border-radius: 50%;
    border: 1.5px solid rgba(255, 255, 255, .25);
    background: #1e110c;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--gf-dot-fs);
    font-weight: 700;
    color: #bfae95;
    position: relative;
    z-index: 2;
    transition: background .18s cubic-bezier(0.22, 1, 0.36, 1),
                border-color .18s cubic-bezier(0.22, 1, 0.36, 1),
                box-shadow .25s cubic-bezier(0.22, 1, 0.36, 1),
                color .14s var(--ease);
}

/* Scale Explorer — every fret is labeled; matched notes light up in the
   rose/coral color copied straight from the reference app's
   .guitar-scale-match treatment, the root gets its own ring (also
   copied from the reference's .scale-root-ring). */
.gtr-fret-cell.gtr-scale-match .gtr-fret-dot {
    background: linear-gradient(160deg, rgba(255, 150, 165, .95) 0%, rgba(224, 50, 72, .95) 45%, rgba(158, 25, 42, 1) 100%);
    border-color: rgba(255, 150, 165, .75);
    color: #fff;
    box-shadow: 0 0 18px rgba(255, 60, 90, 1);
}
.gtr-fret-cell.gtr-root-match:not(.gtr-scale-match) .gtr-fret-dot {
    background: var(--gold);
    border-color: #fff0c2;
    color: #2a1c00;
    box-shadow: 0 0 18px rgba(255, 209, 102, .85);
}
.gtr-fret-cell.gtr-scale-match.gtr-root-match .gtr-fret-dot {
    box-shadow: 0 0 14px rgba(255, 60, 90, .85), 0 0 0 2px #1e110c, 0 0 0 4.12px rgba(255, 255, 255, .65);
}

/* Chord Library / CAGED / Capo — explicit shape dots, always gold unless
   overridden by a CAGED per-letter color below. */
.gtr-fret-dot--shape {
    background: linear-gradient(160deg, #e8c67e 0%, var(--gold) 55%, #b8862c 100%);
    border-color: #e0c98e;
    color: #2a1c00;
    box-shadow: 0 0 6px rgba(255, 209, 102, .35);
}
.gtr-fret-cell.active .gtr-fret-dot--shape:not([class*="caged-"]) {
    background: linear-gradient(160deg, #f0a3a9 0%, #d6495a 40%, #a52838 70%, #601018 100%) !important;
    border-color: #ef7f8a !important;
    color: #fff !important;
    box-shadow: 0 0 8px rgba(239, 95, 111, .55) !important;
}

/* CAGED System — each shape gets its own fixed color, independent of page theme */
.gtr-fret-dot--shape.caged-C { background: #c94812 !important; border-color: #e06830 !important; color: #fff !important; box-shadow: 0 0 6px #e0704060; }
.gtr-fret-dot--shape.caged-A { background: #2b5f9e !important; border-color: #5288c0 !important; color: #fff !important; box-shadow: 0 0 6px #3a7fd460; }
.gtr-fret-dot--shape.caged-G { background: #1e7d40 !important; border-color: #48a862 !important; color: #fff !important; box-shadow: 0 0 6px #28a85860; }
.gtr-fret-dot--shape.caged-E { background: #971e1e !important; border-color: #c04848 !important; color: #fff !important; box-shadow: 0 0 6px #cc282860; }
.gtr-fret-dot--shape.caged-D { background: #8a6c00 !important; border-color: #c0a020 !important; color: #fff !important; box-shadow: 0 0 6px #b8900060; }

/* Capo bar — ported from the reference app's .fret-cell.capo-active:
   a solid purple bar through the middle of every string's cell at the
   barred fret, so stacked string rows read as one continuous bar
   spanning the whole fretboard, plus a faint full-cell tint. */
.gtr-fret-cell.gtr-capo-active {
    position: relative;
    background: #d4af3726;
}
.gtr-fret-cell.gtr-capo-active::after {
    content: "";
    position: absolute;
    top: 8%;
    bottom: 8%;
    /* Full cell width (not just a sliver through the middle) so the
       bar visually clamps down over whatever note dot is sitting at
       this fret, the way a real capo presses across the whole fret
       rather than floating beside it. */
    left: 0;
    right: 0;
    border-radius: 5px;
    background: var(--capo-gold);
    opacity: .55;
    z-index: 1;
}
/* The note dot itself stays above the bar (z-index 2 vs 1) so its
   label is still readable, but the bar's tint shows through behind
   it — the dot reads as "sitting under the capo" rather than the
   capo being a separate stripe next to it. */

/* Notes sounded *by the capo itself* (strings that were open in the
   CAGED shape) — these need no finger at all, so they must not read
   like the raised, "press me" finger dots used everywhere else. The
   whole cell is washed in the capo's gold so it visually belongs to
   the bar rather than to a fingering, and the dot inside is flattened
   into a flush tag sitting on top of it. */
.gtr-fret-cell.gtr-capo-sounded {
    background: linear-gradient(90deg, rgba(255, 209, 102, .22), rgba(255, 209, 102, .05));
}
.gtr-fret-dot--capo {
    width: calc(var(--gf-dot) - 6px);
    height: calc(var(--gf-dot) - 6px);
    border-radius: 50%;
    background: rgba(255, 228, 154, .22);
    border: 1px dashed rgba(255, 224, 150, .75);
    color: #ffe9b8;
    box-shadow: none;
    font-weight: 600;
}
.gtr-fret-dot--capo.caged-C,
.gtr-fret-dot--capo.caged-A,
.gtr-fret-dot--capo.caged-G,
.gtr-fret-dot--capo.caged-E,
.gtr-fret-dot--capo.caged-D {
    /* Keep these legible without adopting the solid, raised fill the
       fingered dots use — still "no press needed here". */
    background: rgba(255, 255, 255, .08);
    border-style: dashed;
    color: #fff;
    box-shadow: none;
}

/* ── Fret-inlay markers (dots below the board at frets 3,5,7,9,12,15,17,
   19,21 — 12/24 doubled) — ported straight from css/bass.css so the
   guitar board reads the same as the bass board. ─────────────────── */
.gtr-marker-row { display: contents; }
.gtr-marker-spacer { grid-column: 1; }
.gtr-marker-cells { grid-column: 2; display: flex; margin-top: 8px; }
.gtr-fret-marker-dot {
    flex: 1;
    text-align: center;
    font-size: clamp(9px, 0.9vw, 12px);
    color: var(--gold);
}

.gtr-scroll-hint {
    display: block;
    text-align: center;
    font-size: 11.5px;
    color: rgba(var(--tool-light-rgb), .65);
    margin-top: 10px;
}
@media (min-width: 900px) {
    .gtr-scroll-hint { display: none; }
}

/* ==========================================================================
   Chord Library (#chord-lib-fretboard) / Capo Explorer (#capo-fretboard)
   note-dot identity. Single source of truth: this page's own accent,
   --tool-rgb / --tool-light-rgb (guitar's coral, set once at :root in
   guitar.css) — no separate color redeclared here. Same pattern as
   Scale Explorer's rose highlight: only the actual note/shape dots
   carry the accent color. The neck wash, idle dots, and fret-number
   markers stay neutral/gold, matching what the reference app does
   everywhere else (it never re-tints the whole board per tab). CAGED
   letter colors are excluded via :not([class*="caged-"]) and keep
   their own fixed per-shape colors regardless of this rule.
   ========================================================================== */

/* Shape dots (the actual chord-tone fingerings) — embossed gradient in
   this page's own accent color instead of gold. */
#chord-lib-fretboard,
#capo-fretboard {
    --gf-violet: #6640e8;
    --gf-violet-l: #a58cf5;
    --gf-violet-d: #332358;
}

#chord-lib-fretboard .gtr-fret-dot--shape,
#capo-fretboard .gtr-fret-dot--shape {
    background: linear-gradient(160deg, #9185d1 0%, var(--gf-violet-d) 55%, #1f1538 100%);
    border-color: #9185d1;
    color: #eeeafa;
    box-shadow: 0 0 6px rgba(102, 64, 232, .40);
}
#chord-lib-fretboard .gtr-fret-cell.active .gtr-fret-dot--shape:not([class*="caged-"]),
#capo-fretboard .gtr-fret-cell.active .gtr-fret-dot--shape:not([class*="caged-"]) {
    background: linear-gradient(160deg, #bbaee8 0%, #6640e8 40%, #332358 70%, #1d1330 100%) !important;
    border-color: #a58cf5 !important;
    box-shadow: 0 0 9px rgba(165, 140, 245, .65) !important;
}
#chord-lib-fretboard .gtr-fret-cell.gtr-root-match .gtr-fret-dot,
#capo-fretboard .gtr-fret-cell.gtr-root-match .gtr-fret-dot {
    background: linear-gradient(160deg, #afa0e0 0%, var(--gf-violet-d) 55%, #1d1330 100%);
    border-color: #ccc2f0;
    color: #1d1330;
    box-shadow: 0 0 9px rgba(165, 140, 245, .55);
}

/* Capo Explorer only — a bit more glow than Chord Library on the same dots */
#capo-fretboard .gtr-fret-dot--shape {
    box-shadow: 0 0 16px rgba(102, 64, 232, .8);
}
#capo-fretboard .gtr-fret-cell.active .gtr-fret-dot--shape:not([class*="caged-"]) {
    box-shadow: 0 0 22px rgba(165, 140, 245, 1) !important;
}
#capo-fretboard .gtr-fret-cell.gtr-root-match .gtr-fret-dot {
    box-shadow: 0 0 22px rgba(165, 140, 245, .9);
}

/* Capo bar — page-accent clamp instead of gold (kept, same "identity color"
   role as the note dots above, not board-wide theming) */
#chord-lib-fretboard .gtr-fret-cell.gtr-capo-active,
#capo-fretboard .gtr-fret-cell.gtr-capo-active {
    background: rgba(var(--tool-rgb), .15);
}
#chord-lib-fretboard .gtr-fret-cell.gtr-capo-active::after,
#capo-fretboard .gtr-fret-cell.gtr-capo-active::after {
    background: rgb(var(--tool-rgb));
}
#chord-lib-fretboard .gtr-nut.gtr-capo-adjacent,
#capo-fretboard .gtr-nut.gtr-capo-adjacent {
    background: linear-gradient(180deg, rgba(var(--tool-light-rgb), .9), rgb(var(--tool-rgb)));
    box-shadow: 0 0 6px rgb(var(--tool-rgb)), 1px 1px 3px #00000080;
}
#chord-lib-fretboard .gtr-fret-cell.gtr-capo-sounded,
#capo-fretboard .gtr-fret-cell.gtr-capo-sounded {
    background: linear-gradient(90deg, rgba(var(--tool-light-rgb), .25), rgba(var(--tool-light-rgb), .05));
}
#chord-lib-fretboard .gtr-fret-dot--capo,
#capo-fretboard .gtr-fret-dot--capo {
    background: rgba(var(--tool-light-rgb), .22);
    border-color: rgba(var(--tool-light-rgb), .75);
    color: #fff;
}

/* Fret-0 open/muted/blank string badges are intentionally left out of
   the accent re-theme — they keep the original green "open" / red
   "muted" styling with no ring. Only the actual fretboard note dots
   (the finger positions) get the accent highlight in this panel. */

/* ==========================================================================
   Scale Explorer (#scale-fretboard) note highlights — ported verbatim
   from the reference app's Scale Visualizer (.guitar-scale-match /
   .scale-root-ring in 1.css). The reference app does NOT re-theme the
   rest of the board (neck wash, fret markers, idle dots, open-string
   badges, capo bar) per tab — those all stay the same neutral wood/gold
   look used everywhere else in the app. So only the matched-note and
   root-note dot rules live here; everything else falls through to the
   shared .gtr-fret-dot / .gtr-fret-num.marker / etc. defaults above,
   same as CAGED System.
   ========================================================================== */
#scale-fretboard .gtr-fret-cell.gtr-scale-match .gtr-fret-dot {
    background: linear-gradient(160deg, rgba(255,150,165,.95) 0%, rgba(224,50,72,.95) 45%, rgba(158,25,42,1) 100%);
    border-color: rgba(255,150,165,.75);
    color: #fff;
    box-shadow: 0 0 18px rgba(255, 60, 90, 1);
}
/* The root note is *always* also part of the scale, so this combined
   state — not the .gtr-root-match:not(.gtr-scale-match) rule below —
   is what actually renders for a real root dot: same scale-match dot,
   plus a ring, exactly as the reference's scale-root-ring does. */
#scale-fretboard .gtr-fret-cell.gtr-scale-match.gtr-root-match .gtr-fret-dot {
    box-shadow: 0 0 14px rgba(255,60,90,.85), 0 0 0 2px #1e110c, 0 0 0 4px rgba(255,255,255,.65) !important;
}

/* Open/root note that's a root but somehow not flagged as in-scale
   (shouldn't normally happen since the root is always in its own
   scale, but kept as a safe fallback) — same gold root treatment the
   reference uses everywhere else, not a coral variant. */
#scale-fretboard .gtr-fret-cell.gtr-root-match:not(.gtr-scale-match) .gtr-fret-dot {
    background: var(--gold);
    border-color: #fff0c2;
    color: #2a1c00;
    box-shadow: 0 0 18px rgba(255, 209, 102, .85);
}

@media (max-width: 768px) {
    /* Mobile-only 5% font-size reduction (auto-generated). Desktop keeps
       the original sizes; this block only fires under 768px. */
    .gtr-fret-marker-dot { font-size: clamp(8.5px, 0.9vw, 11.5px); }
    .gtr-scroll-hint { font-size: 11px; }
}