/* ==========================================================================
   SHARED TOKENS + BASE
   Loaded on every page. Instrument-specific pages add their own stylesheet
   on top of this one.
   ========================================================================== */

/* ==========================================================================
   NAMING CONVENTIONS — read this before adding new files/variables.
   The names below are similar on purpose (historical), which makes them
   easy to mix up. This block is the canonical answer.

   FILES
   -----
   css/tool.css   (singular) — SHARED base stylesheet, loaded on every
                    instrument/tool page (guitar, bass, keyboard,
                    chord-builder, tools). Defines generic, reusable
                    components: .tool-tab, .tool-controls-card,
                    .tool-panel, etc. Never put page-specific colors or
                    one-off layout here — anything added here affects
                    every page that loads it.
   css/tools.css  (plural)   — PAGE-SPECIFIC stylesheet for tools.html
                    ("Practice Tools") only. Styles that page's own
                    unique panels: .tuner-panel, .metro-panel,
                    .analyzer-panel. Loads *after* tool.css.
   Every other instrument follows the plural pattern too: guitar.css,
   bass.css, keyboard.css, chord-builder.css are each that page's own
   stylesheet, loaded after tool.css + shared.css.

   COLOR VARIABLES
   ---------------
   --tool-rgb / --tool-light-rgb  — a GENERIC, reusable variable pair
                    that tool.css's shared components (.tool-tab,
                    .tool-controls-card, etc.) read from. It has no
                    color of its own — each page must set it once at
                    :root by pointing it at that page's own dedicated
                    variable, e.g.:
                        guitar.css:        --tool-rgb: var(--guitar-rgb);
                        chord-builder.css: --tool-rgb: var(--chordbuilder-rgb);
                        tools.css:         --tool-rgb: var(--tools-rgb);
                    Only pages that reuse tool.css's shared components
                    need this bridge line at all.
   --guitar-rgb, --bass-rgb, --keyboard-rgb, --chordbuilder-rgb,
   --tools-rgb     — each page's actual, dedicated color (defined once
                    below in :root). These are the source of truth —
                    change a page's color here, not by hunting for
                    hardcoded hex values in that page's CSS.
   Bass and Keyboard were built with their own dedicated classes
   (.bass-controls-panel, etc.) from the start and never adopted
   tool.css's shared components, so they only ever use their own
   --bass-rgb / --keyboard-rgb directly — no --tool-rgb bridge needed.

   PITFALL TO AVOID
   ----------------
   If a page needs to override a shared tool.css component with fully
   custom styling (see .guitar-tab in guitar.css for the reference
   example), give it an entirely new, page-specific class name instead
   of layering more specific selectors on top of the shared class name.
   Piling specificity on top of a shared class leaves dead, silently-
   overridden rules behind in tool.css and makes it unclear later
   whether removing something from tool.css is safe.
   ========================================================================== */

/* ==========================================================================
   SPA MERGE FIX — per-section --tool-rgb scoping.
   Every page's own CSS file sets --tool-rgb at :root (see guitar.css,
   bass.css, keyboard.css, chord-builder.css, tools.css, landing.css) —
   correct and harmless when each page was its own separate document, but
   now that app.html loads all of them into ONE document, :root is global,
   so only the last one loaded was winning for the entire page regardless
   of which section was showing (e.g. Chord Builder's panels rendering in
   whatever color happened to load last, not its own indigo).

   Fix: re-scope each section's accent to its own <main data-app-section>
   container instead of :root. A selector like `main[data-app-section=...]`
   has higher specificity than the plain `:root` pseudo-class the page
   files use, so these win regardless of load order, and since CSS custom
   properties inherit down the DOM tree, only elements actually inside
   that section see this value — no more cross-section bleeding. The
   original :root rules in each page's own CSS are left as-is (still
   correct and needed for that page's standalone .html file); this block
   simply overrides them within the merged app.html context only, since
   these selectors don't match anything on the standalone pages. */
main[data-app-section="home"]          { --tool-rgb: 124, 111, 224; --tool-light-rgb: 194, 182, 255; }
main[data-app-section="guitar"]        { --tool-rgb: var(--guitar-rgb); --tool-light-rgb: var(--guitar-light-rgb); }
main[data-app-section="bass"]          { --tool-rgb: var(--bass-rgb); --tool-light-rgb: var(--bass-light-rgb); }
main[data-app-section="keyboard"]      { --tool-rgb: var(--keyboard-rgb); --tool-light-rgb: var(--keyboard-light-rgb); }
main[data-app-section="chord-builder"] { --tool-rgb: var(--chordbuilder-rgb); --tool-light-rgb: var(--chordbuilder-light-rgb); }
main[data-app-section="tools"]         { --tool-rgb: var(--tools-rgb); --tool-light-rgb: var(--tools-light-rgb); }
main[data-app-section="learn"]         { --tool-rgb: 124, 111, 224; --tool-light-rgb: 194, 182, 255; }
/* Shared chrome that sits outside any one section (the secondary
   .section-nav-card pill row, the #circle-of-fifths-mount widget) still
   needs *some* --tool-rgb since a few of their child rules reference it
   — falls back to the same neutral purple Home uses. */
.section-nav-card, #circle-of-fifths-mount { --tool-rgb: 124, 111, 224; --tool-light-rgb: 194, 182, 255; }

/* Same collision, different shape: bass.css, guitar.css, and keyboard.css
   each redefine the shared .tool-panel class itself (not just a custom
   property) to strip tool.css's base 24px side padding, since their own
   fretboard/piano content needs full-bleed width. With all three loaded
   in one document, the last one loaded (guitar.css) was silently winning
   globally — stripping Chord Builder's padding too, which its .cpb-card /
   .cbk-card negative-margin alignment trick (see chord-builder.css)
   specifically depends on existing. Re-declaring each page's own
   zero-padding version scoped to its own section here has higher
   specificity than their bare, unscoped originals, so it wins regardless
   of CSS file load order, and leaves every other section's .tool-panel
   alone. */
[data-app-section="guitar"] .tool-panel,
[data-app-section="bass"] .tool-panel,
[data-app-section="keyboard"] .tool-panel {
    padding-left: 0;
    padding-right: 0;
}


/* Cross-document View Transitions: smooths navigation between the separate
   instrument pages (guitar.html <-> bass.html <-> keyboard.html, etc.),
   which are full page loads rather than an in-app tab switch. Opting in via
   @view-transition makes same-origin navigations cross-fade natively in
   supporting browsers (Chrome/Edge 126+, Safari 18+) with zero JS. Browsers
   without support simply navigate instantly as before — no fallback needed. */
@view-transition {
    navigation: auto;
}

/* Keep the crossfade calm and consistent with the rest of the UI's motion
   language rather than the default zoom/slide some browsers apply. */
::view-transition-old(root),
::view-transition-new(root) {
    animation-duration: 0.22s;
    animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}

/* The named section-nav-pill (see .section-nav-pill below) gets its own
   slightly longer, matching-eased morph so its cross-page slide feels
   like the same motion as its in-page slide, not the generic crossfade. */
::view-transition-group(section-nav-pill) {
    animation-duration: 0.32s;
    animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}

@media (prefers-reduced-motion: reduce) {
    @view-transition {
        navigation: none;
    }
}

:root {
    --font-display: 'Chakra Petch', 'IBM Plex Sans', system-ui, sans-serif;
    --font-body:    'IBM Plex Sans', system-ui, sans-serif;

    --bg:           #0b0b0c;
    --bg2:          rgba(255, 255, 255, 0.035);
    --bg3:          rgba(255, 255, 255, 0.055);
    --border:       rgba(255, 255, 255, 0.08);
    --border2:      rgba(255, 255, 255, 0.13);
    --text:         #f1f0f2;
    --text2:        #9a9aa0;
    --text3:        #68686e;

    --purple:       #7c6fe0;
    --purple-l:     #c2b6ff;
    --purple-dim:   rgba(124, 111, 224, 0.18);
    --gold:         #ffd166;
    --capo-gold:    #8b7cf0;

    --glass:        rgba(255, 255, 255, 0.042);
    --glass-md:     rgba(255, 255, 255, 0.065);
    --glass-border: rgba(255, 255, 255, 0.096);
    --glass-hi:     rgba(255, 255, 255, 0.15);
    --glass-purple: rgba(124, 111, 224, 0.15);

    --shadow-deep:  0 12px 40px rgba(0, 0, 0, 0.50), inset 0 1px 0 rgba(255, 255, 255, 0.075);
    --shadow-card:  0 4px 22px rgba(0, 0, 0, 0.38);
    --shadow-glow:  0 0 28px rgba(124, 111, 224, 0.22);

    --blur-sm:      blur(10px);
    --blur-md:      blur(18px);
    --blur-lg:      blur(28px);
    --ease:         cubic-bezier(0.4, 0, 0.2, 1);

    --radius-lg:    18px;
    --radius-md:    13px;
    --radius-sm:    10px;

    /* Per-tool accent colors — used on the hub cards, nav highlights,
       and inside each tool's own page. Keep any given tool's color the
       same across every file it appears in. */
    --guitar-rgb:        102, 64, 232;   /* Electric Indigo */
    --guitar-light-rgb:  165, 140, 245;
    --bass-rgb:          46, 196, 182;   /* Teal */
    --bass-light-rgb:    110, 230, 215;
    --keyboard-rgb:      56, 189, 248;   /* Sky Cyan */
    --keyboard-light-rgb: 130, 220, 255;
    --chordbuilder-rgb:       195, 77, 255;   /* Electric Amethyst */
    --chordbuilder-light-rgb: 230, 175, 255;
    --tools-rgb:         124, 141, 176;  /* Slate — Practice Tools */
    --tips-rgb:          245, 176, 66;   /* Amber — Quick Tips */
    --tools-light-rgb:   170, 185, 215;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    position: relative;
    background: linear-gradient(180deg, #060606 0%, #0b0b0c 55%, #0e0e10 100%);
    color: var(--text);
    font-family: var(--font-body);
    -webkit-font-smoothing: antialiased;
    min-height: 100vh;
    overflow-x: hidden;
}
body::before {
    content: "";
    position: fixed;
    inset: -15%;
    z-index: -4;
    pointer-events: none;
    /* Was a saturated purple "nebula" (three colored blobs) — now a much
       quieter neutral glow, keeping just a faint trace of the brand
       accent so the page doesn't feel flat, without tinting the whole
       background purple like before. */
    background:
        radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.025), transparent 55%),
        radial-gradient(circle at 80% 25%, rgba(139, 107, 255, 0.05), transparent 55%),
        radial-gradient(circle at 50% 65%, rgba(255, 255, 255, 0.02), transparent 60%);
    filter: blur(70px);
    animation: home-bg-drift 20s ease-in-out infinite alternate;
}
body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -3;
    pointer-events: none;
    background-image:
        radial-gradient(1.5px 1.5px at 12% 20%, #fff, transparent),
        radial-gradient(1px 1px at 32% 65%, #fff, transparent),
        radial-gradient(1.5px 1.5px at 58% 30%, #fff, transparent),
        radial-gradient(1px 1px at 78% 72%, #fff, transparent),
        radial-gradient(1.5px 1.5px at 88% 15%, #fff, transparent),
        radial-gradient(1px 1px at 6% 80%, #fff, transparent),
        radial-gradient(1px 1px at 22% 45%, #fff, transparent),
        radial-gradient(1.5px 1.5px at 44% 85%, #fff, transparent),
        radial-gradient(1px 1px at 65% 10%, #fff, transparent),
        radial-gradient(1.5px 1.5px at 92% 55%, #fff, transparent),
        radial-gradient(1px 1px at 3% 40%, #fff, transparent),
        radial-gradient(1.5px 1.5px at 72% 92%, #fff, transparent),
        radial-gradient(1px 1px at 38% 8%, #fff, transparent),
        radial-gradient(1.5px 1.5px at 55% 55%, #fff, transparent);
    background-repeat: repeat;
    background-size: 480px 380px;
    opacity: 0.5;
}
body > * { position: relative; z-index: 1; }
@keyframes home-bg-drift {
    from { transform: translate(0, 0) scale(1); }
    to   { transform: translate(-2.5%, 2.5%) scale(1.06); }
}

/* ── Site-wide atmosphere fx ────────────────────────────────────────────
   Twinkling stars, pulsing color orbs, and drifting glow notes. Used to
   be homepage-only; now applies on every page so the whole site shares
   the same lively background, not just the landing page. */
body::after {
    animation: home-star-twinkle 6s ease-in-out infinite alternate;
}
@keyframes home-star-twinkle {
    from { opacity: 0.32; }
    to   { opacity: 0.58; }
}

.home-fx-layer {
    position: fixed;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    overflow: hidden;
}
.home-fx-note {
    position: absolute;
    bottom: 10px;
    font-family: Georgia, serif;
    text-shadow: 0 0 8px currentColor;
    animation: home-fx-float linear infinite;
}
@keyframes home-fx-float {
    0%   { transform: translateY(20px); opacity: 0; }
    15%  { opacity: 0.9; }
    85%  { opacity: 0.5; }
    100% { transform: translateY(-260px); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
    body::after { animation: none; }
    .home-fx-note { animation: none; display: none; }
}

/* Touch devices (phones/tablets): the full-screen background is the most
   expensive thing the page does all the time. body::before is a 130%-size
   layer with a 70px blur that also drifts and scales forever -- the blur is
   re-applied by the GPU on every frame -- yet its gradients are only 2-5%
   opaque, so it is nearly invisible. Drop the blur and the drift, freeze the
   star twinkle and hide the floating notes. The static look is unchanged;
   desktop keeps the full animation. */
@media (pointer: coarse) {
    body::before {
        filter: none;
        animation: none;
        inset: 0;
    }
    body::after {
        animation: none;
        opacity: 0.45;
    }
    .home-fx-layer { display: none; }
}

img { max-width: 100%; display: block; }

/* ── How to Play (Learn) section ────────────────────────────────────── */
.learn-panel {
    max-width: 1200px;
    margin: 24px auto 80px;
    padding: 0 24px;
}
.learn-groups {
    display: grid;
    grid-template-columns: 1fr;
    gap: 32px;
}
@media (min-width: 860px) {
    .learn-groups {
        grid-template-columns: 1fr 1fr;
        align-items: start;
    }
}
.learn-intro { text-align: center; margin-bottom: 36px; }
.learn-intro h1 {
    font-family: var(--font-display);
    font-size: clamp(26px, 4vw, 34px);
    margin: 0 0 12px;
}
.learn-intro p {
    color: var(--text2);
    font-size: 14.5px;
    line-height: 1.6;
    max-width: 560px;
    margin: 0 auto;
}
.learn-group { margin-bottom: 40px; }
.learn-group-title {
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 800;
    margin: 0 0 16px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(var(--tool-rgb), 0.25);
}
.learn-topic {
    background: linear-gradient(160deg, rgba(var(--tool-rgb), .10), 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), .2);
    border-radius: var(--radius-lg, 14px);
    padding: 20px 22px;
    margin-bottom: 14px;
    box-shadow: 0 6px 0 rgba(0, 0, 0, .3), 0 10px 22px rgba(0, 0, 0, .3);
}
.learn-topic h3 {
    font-family: var(--font-display);
    font-size: 15.5px;
    font-weight: 800;
    margin: 0 0 8px;
    color: var(--text);
}
.learn-topic p {
    font-size: 13.5px;
    line-height: 1.65;
    color: var(--text2);
    margin: 0 0 14px;
}
.learn-topic p:last-of-type { margin-bottom: 0; }
.learn-topic p strong { color: var(--text); }
.learn-try-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 8px 14px;
    border-radius: 9px;
    background: rgba(var(--tool-rgb), 0.16);
    border: 1px solid rgba(var(--tool-light-rgb), 0.4);
    color: var(--text);
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s var(--ease, ease), transform 0.15s var(--ease, ease);
}
.learn-try-btn:hover {
    background: rgba(var(--tool-rgb), 0.28);
    transform: translateY(-1px);
}
@media (max-width: 600px) {
    .learn-panel { padding: 0 16px; }
    .learn-topic { padding: 16px 18px; }
}

/* Temporary placeholder styling for not-yet-merged sections during the
   SPA conversion (see app.html). Safe to delete once every section has
   its real content. */
.spa-todo-stub {
    max-width: 600px;
    margin: 80px auto;
    padding: 40px;
    text-align: center;
    background: var(--glass);
    border: 1px dashed var(--glass-border);
    border-radius: var(--radius-lg);
    color: var(--text2);
}
.spa-todo-stub h2 { color: var(--text); margin: 0 0 8px; }
.spa-todo-stub p { margin: 0; font-size: 14px; }

a { color: inherit; text-decoration: none; }

:focus-visible {
    outline: 2px solid var(--purple-l);
    outline-offset: 2px;
    border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}

/* ── Ambient ombre background ─────────────────────────────────────────── */
.cn-bg {
    position: fixed;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
}

.cn-bg-glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(90px);
    /* Was 0.35 with much more saturated colors below — this pair of big
       blurred circles was the actual dominant source of the purple wash
       (more than body::before, which is comparatively subtle). Toned way
       down so the page reads as neutral black with just a trace of the
       brand accent, not a colored background. */
    opacity: 0.16;
}

.cn-bg-glow--1 {
    width: 520px; height: 520px;
    top: -160px; left: -120px;
    background: radial-gradient(circle, rgba(139,107,255,0.45), transparent 70%);
}

.cn-bg-glow--2 {
    width: 620px; height: 620px;
    bottom: -220px; right: -160px;
    background: radial-gradient(circle, rgba(79,140,255,0.30), transparent 70%);
}

.cn-bg-orbit {
    position: absolute;
    top: 50%; left: 50%;
    width: 900px; height: 900px;
    transform: translate(-50%, -50%);
    opacity: 0.15;
}

.cn-orbit-ring {
    fill: none;
    stroke: var(--purple-l);
    stroke-width: 1;
}

.cn-orbit-ring--1 { animation: cn-spin 90s linear infinite; }
.cn-orbit-ring--2 { animation: cn-spin 140s linear infinite reverse; }

@keyframes cn-spin {
    to { transform: rotate(360deg); }
}

.cn-bg-sparkles i {
    position: absolute;
    width: 3px; height: 3px;
    border-radius: 50%;
    background: var(--purple-l);
    opacity: 0.5;
    animation: cn-twinkle 4s ease-in-out infinite;
}
.cn-bg-sparkles i:nth-child(1)  { top: 12%; left: 18%; animation-delay: 0s; }
.cn-bg-sparkles i:nth-child(2)  { top: 24%; left: 76%; animation-delay: .4s; }
.cn-bg-sparkles i:nth-child(3)  { top: 60%; left: 8%;  animation-delay: .8s; }
.cn-bg-sparkles i:nth-child(4)  { top: 72%; left: 88%; animation-delay: 1.2s; }
.cn-bg-sparkles i:nth-child(5)  { top: 40%; left: 44%; animation-delay: 1.6s; }
.cn-bg-sparkles i:nth-child(6)  { top: 85%; left: 52%; animation-delay: 2s; }
.cn-bg-sparkles i:nth-child(7)  { top: 8%;  left: 60%; animation-delay: 2.4s; }
.cn-bg-sparkles i:nth-child(8)  { top: 50%; left: 92%; animation-delay: 2.8s; }
.cn-bg-sparkles i:nth-child(9)  { top: 30%; left: 30%; animation-delay: 3.2s; }
.cn-bg-sparkles i:nth-child(10) { top: 66%; left: 68%; animation-delay: 3.6s; }
.cn-bg-sparkles i:nth-child(11) { top: 18%; left: 50%; animation-delay: 1s; }
.cn-bg-sparkles i:nth-child(12) { top: 92%; left: 20%; animation-delay: 2.2s; }

@keyframes cn-twinkle {
    0%, 100% { opacity: 0.15; transform: scale(1); }
    50%      { opacity: 0.8;  transform: scale(1.6); }
}

.cn-trail-dot {
    position: absolute;
    border-radius: 50%;
    background: var(--purple-l);
    opacity: 0.5;
    transform: translate(-50%, -50%);
    transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
    pointer-events: none;
}
.cn-trail-dot--fade { opacity: 0; transform: translate(-50%, -50%) scale(0.3); }

/* ── Nav ──────────────────────────────────────────────────────────────── */
.nclg-nav {
    position: sticky;
    top: 0;
    z-index: 40;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 24px;
    background: rgba(6, 4, 20, 0.72);
    backdrop-filter: var(--blur-md);
    border-bottom: 1px solid var(--border);
}

.nclg-nav-brand {
    display: flex;
    align-items: center;
    gap: 10px;
}

.nclg-nav-logo { width: 40px; height: 40px; border-radius: 9px; }

.nclg-nav-wordmark {
    display: flex;
    flex-direction: column;
    line-height: 1;
    font-family: var(--font-display);
    min-width: 0;
}
.nclg-nav-wordmark strong { font-size: 18px; font-weight: 700; letter-spacing: 0.04em; color: var(--text); white-space: nowrap; }

/* "Back to NCLG" logo at the right end of the nav (from Worship Music Hub). */
.nclg-nav-link--logo2 { opacity: 0.85; transition: opacity .2s ease, transform .2s ease; }
.nclg-nav-link--logo2:hover { opacity: 1; transform: translateY(-1px); }
.nclg-nav-logo2 { height: 36px; width: auto; object-fit: contain; display: block; }


.nclg-nav-links {
    display: flex;
    align-items: center;
    gap: 4px;
}

.nclg-nav-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: var(--radius-pill, 999px);
    color: var(--text2);
    transition: background 0.15s var(--ease), color 0.15s var(--ease);
}
.nclg-nav-icon {
    font-size: 21px;
    line-height: 1;
    filter: grayscale(1) brightness(1.6) opacity(0.75);
    transition: filter 0.15s var(--ease);
}
.nclg-nav-icon--img {
    width: 30px;
    height: 30px;
    object-fit: contain;
}
.nclg-nav-link:hover { background: var(--glass); color: var(--text); }
.nclg-nav-link:hover .nclg-nav-icon { filter: none; }
.nclg-nav-link--text {
    width: auto;
    height: auto;
    padding: 10px 17px;
    font-size: 16px;
    font-weight: 700;
}
/* Guide + How to Play ("Tutorial") now show as words on desktop, not
   icon-only circles like the instrument links — the whole point being
   that a user can tell at a glance what these two do without having to
   guess from an icon or hover for a tooltip. Mobile (nav-mobile.css)
   already shows icon+label for every nav link in the drawer, so this
   is a desktop-only distinction. */
.nclg-nav-label { display: inline; }

/* Desktop only: hide the instrument shortcut icons (Guitar/Bass/
   Keyboard/Chord Builder/Practice Tools) from the header nav entirely
   — Guide and How to Play are the only two left there. Switching
   between instruments on desktop now happens via the Home page's hub
   cards, or the secondary .section-nav-card pill row shown once
   you're already on an instrument page. Mobile keeps the full list in
   its hamburger drawer, unaffected by this rule. */
@media (min-width: 769px) {
    .nclg-nav-link--instrument { display: none; }
}

.nclg-nav-link[aria-current="page"] {
    color: var(--text);
    background: var(--glass-md);
}
.nclg-nav-link[aria-current="page"] .nclg-nav-icon { filter: none; }

/* Mobile hamburger toggle button — hidden by default. Its visible/flex
   state and the drawer it opens live entirely in css/nav-mobile.css,
   which only loads on mobile widths; this base rule just ensures the
   button doesn't render with unstyled browser defaults on desktop. */
.nclg-nav-toggle { display: none; }
.nclg-nav-scrim { display: none; }

/* ── Section nav card (in-page tool switcher) ────────────────────────── */
.sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ── Section nav (in-page tool switcher) ─────────────────────────────────
   Slanted tabs on a hairline. The buttons themselves stay rectangular so
   js/section-nav.js can keep measuring them (a skewed element's bounding
   box is wider than its visible shape); only their painted shapes — the
   sliding .section-nav-pill and each button's ::before — are skewed.
   Per-tool colour comes from --c-rgb (set per link below). */
.section-nav-card {
    --nav-slant: -18deg;
    width: fit-content;
    max-width: 100%;
    margin: 27px auto 0;
    padding: 0 12px;
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    justify-content: center;
    gap: 3.4px;
    background: none;
    border: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 0;
    position: relative;
    z-index: 1;
}
.section-nav-card[hidden] { display: none; }

/* Sliding indicator — a single element positioned/colored via JS
   (js/section-nav.js), so the active state animates between tabs and
   recolors to the active tool's accent. Slanted edge on the left, glowing
   underline, and a colour wash rising from the bottom. */
.section-nav-pill {
    position: absolute;
    top: 0;
    bottom: -1px;
    left: 0;
    width: 0;
    box-sizing: border-box;
    transform: skewX(var(--nav-slant));
    border-radius: 0;
    background: linear-gradient(0deg, rgba(var(--c-rgb, 124, 92, 255), .30), rgba(var(--c-rgb, 124, 92, 255), .04) 75%);
    border-left: 2.55px solid rgb(var(--c-rgb, 124, 92, 255));
    border-bottom: 2.55px solid rgb(var(--c-rgb, 124, 92, 255));
    box-shadow: 0 10px 17px -10px rgba(var(--c-rgb, 124, 92, 255), .9);
    transition: left 0.32s cubic-bezier(0.22, 1, 0.36, 1), width 0.32s cubic-bezier(0.22, 1, 0.36, 1), background 0.32s var(--ease), border-color 0.32s var(--ease), box-shadow 0.32s var(--ease);
    pointer-events: none;
    z-index: 0;
    /* Same name on every page's pill element (matched by the browser
       across the old/new document snapshots) lets it morph position +
       size natively during a cross-document navigation. */
    view-transition-name: section-nav-pill;
}

.section-nav-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7.6px;
    font-family: var(--font-display);
    font-size: 11.9px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 12px 22px 10px;
    border-radius: 0;
    color: var(--text2);
    white-space: nowrap;
    flex: 0 0 auto;
    position: relative;
    z-index: 1;
    transition: color 0.2s var(--ease);
}
/* Resting shape: a slanted divider on the left and a faint underline in the
   tool's own colour (so the colours still read before a tab is active). */
.section-nav-btn::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    box-sizing: border-box;
    transform: skewX(var(--nav-slant));
    border-left: 1px solid rgba(255, 255, 255, 0.08);
    border-bottom: 2.55px solid rgba(var(--c-rgb, 124, 92, 255), .22);
    transition: background 0.2s var(--ease), border-color 0.2s var(--ease), opacity 0.2s var(--ease);
}
.section-nav-icon {
    font-size: 15.3px;
    line-height: 1;
    filter: grayscale(1) brightness(1.6) opacity(0.75);
    transition: filter 0.15s var(--ease);
}
.section-nav-icon--img {
    width: 21px;
    height: 21px;
    object-fit: contain;
}
.section-nav-btn:hover {
    color: var(--text);
}
.section-nav-btn:hover::before {
    background: linear-gradient(0deg, rgba(var(--c-rgb, 124, 92, 255), .12), transparent 75%);
    border-bottom-color: rgba(var(--c-rgb, 124, 92, 255), .6);
}
.section-nav-btn:hover .section-nav-icon { filter: none; }
.section-nav-btn[aria-current="page"] { color: var(--text); }
.section-nav-btn[aria-current="page"] .section-nav-icon { filter: none; }
/* Once the sliding pill is live it paints the active state, so the button's
   own resting shape steps aside. */
.section-nav-card.js-ready .section-nav-btn[aria-current="page"]::before { opacity: 0; }
/* No-JS / not-yet-measured fallback: paint the active tab on the button
   itself so it is legible before section-nav.js positions the pill. */
.section-nav-card:not(.js-ready) .section-nav-btn[aria-current="page"]::before {
    background: linear-gradient(0deg, rgba(var(--c-rgb, 124, 92, 255), .30), rgba(var(--c-rgb, 124, 92, 255), .04) 75%);
    border-left: 2.55px solid rgb(var(--c-rgb, 124, 92, 255));
    border-bottom: 2.55px solid rgb(var(--c-rgb, 124, 92, 255));
    box-shadow: 0 10px 17px -10px rgba(var(--c-rgb, 124, 92, 255), .9);
}

/* Narrow desktop / tablet (769–860px): tighten so all five tabs stay on one line. */
@media (max-width: 860px) {
    .section-nav-btn { padding: 12px 15px 10px; letter-spacing: 0.06em; gap: 6px; }
}

/* Per-tool accent, read by section-nav.js and applied to the pill's
   --c-rgb custom property when that tab becomes active. */
.section-nav-btn[href="guitar.html"],        .section-nav-btn[data-section-link="guitar"]        { --c-rgb: 102, 64, 232; }
.section-nav-btn[href="bass.html"],          .section-nav-btn[data-section-link="bass"]          { --c-rgb: 45, 197, 168; }
.section-nav-btn[href="keyboard.html"],      .section-nav-btn[data-section-link="keyboard"]      { --c-rgb: 79, 179, 245; }
.section-nav-btn[href="chord-builder.html"], .section-nav-btn[data-section-link="chord-builder"] { --c-rgb: 195, 77, 255; }
.section-nav-btn[href="tools.html"],         .section-nav-btn[data-section-link="tools"]         { --c-rgb: 148, 148, 168; }

/* Shrink padding/font before dropping labels, so all 5 items always fit
   on one line without scrolling or clipping. */




/* ── Footer ───────────────────────────────────────────────────────────── */
.site-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 28px 20px 36px;
    color: var(--text3);
    font-size: 16px;
    border-top: 1px solid var(--border);
    margin-top: 60px;
}
.site-footer-logo { width: 30px; height: 30px; border-radius: 5px; opacity: 0.8; }
.site-footer-tagline { color: var(--text3); }
.site-footer-tagline::before { content: "·"; margin-right: 10px; }

/* ── Quick Guide modal (opened from the "Guide" nav link) ────────────────
   Shared across every page: each tool page (Guitar, Bass, Keyboard, Chord
   Builder, Practice Tools) gets its own page-specific guide content, and the
   home page gets an app-wide quick-start guide. Colors theme automatically
   via --tool-rgb / --tool-light-rgb, which every page already sets. ───── */
.guide-modal {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.guide-modal--open { display: flex; }
.guide-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(4, 3, 12, 0.72);
    backdrop-filter: var(--blur-sm);
    -webkit-backdrop-filter: var(--blur-sm);
}
.guide-modal-panel {
    position: relative;
    max-width: 560px;
    width: 100%;
    max-height: 86vh;
    overflow-y: auto;
    background: var(--bg2);
    backdrop-filter: var(--blur-lg);
    -webkit-backdrop-filter: var(--blur-lg);
    border: 1px solid rgba(var(--tool-rgb), 0.28);
    border-radius: var(--radius-lg);
    box-shadow: 0 6px 0 rgba(0, 0, 0, .35), var(--shadow-deep), 0 0 34px rgba(var(--tool-rgb), 0.1);
    padding: 30px 26px 26px;
    animation: guide-modal-pop 0.2s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes guide-modal-pop {
    from { opacity: 0; transform: scale(0.96) translateY(8px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}
.guide-modal-close {
    position: absolute;
    top: 16px; right: 16px;
    width: 30px; height: 30px;
    display: flex; align-items: center; justify-content: center;
    background: var(--glass);
    border: 1px solid var(--glass-border);
    border-radius: 50%;
    color: var(--text2);
    font-size: 14px;
    cursor: pointer;
    transition: all 0.15s var(--ease);
}
.guide-modal-close:hover { background: rgba(255,255,255,0.1); color: var(--text); }
.guide-modal-panel h2 {
    font-family: var(--font-display);
    font-size: 21px;
    font-weight: 800;
    margin: 0 0 6px;
    color: var(--text);
}
.guide-modal-intro {
    color: var(--text2);
    font-size: 13.5px;
    margin: 0 0 20px;
}
.guide-modal-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.guide-modal-item {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 12px;
    border-radius: 12px;
    background: rgba(var(--tool-rgb), 0.06);
    border: 1px solid rgba(var(--tool-rgb), 0.16);
    transition: background 0.15s var(--ease), border-color 0.15s var(--ease);
}
.guide-modal-item:hover {
    background: rgba(var(--tool-rgb), 0.1);
    border-color: rgba(var(--tool-light-rgb), 0.3);
}
.guide-modal-item-icon {
    flex: 0 0 auto;
    width: 38px; height: 38px;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(160deg, rgba(var(--tool-light-rgb), 0.95), rgba(var(--tool-rgb), 0.95));
    border: none;
    border-radius: 10px;
    font-size: 18px;
    color: #fff;
    box-shadow: 0 3px 0 rgba(0, 0, 0, .3);
}
.guide-modal-item-icon img { width: 20px; height: 20px; object-fit: contain; }
.guide-modal-item-title {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 14.5px;
    color: #fff;
    margin-bottom: 3px;
}
.guide-modal-item p {
    margin: 0;
    font-size: 13px;
    line-height: 1.45;
    color: var(--text2);
}


@media (max-width: 768px) {
    /* Mobile-only 5% font-size reduction (auto-generated). Desktop keeps
       the original sizes; this block only fires under 768px. */
    .nclg-nav-wordmark strong { font-size: 16px; }
    .nclg-nav-logo2 { height: 30px; }
    .nclg-nav-icon { font-size: 20px; }
    .nclg-nav-link--text { font-size: 15px; }
    .section-nav-btn { font-size: 16px; }
    .section-nav-icon { font-size: 16px; }
    /* Shrink padding/font before dropping labels, so all 5 items always fit
   on one line without scrolling or clipping. */




/* ── Footer ───────────────────────────────────────────────────────────── */
.site-footer { font-size: 15px; }
    .guide-modal-close { font-size: 13.5px; }
    .guide-modal-panel h2 { font-size: 20px; }
    .guide-modal-intro { font-size: 13px; }
    .guide-modal-item-icon { font-size: 17px; }
    .guide-modal-item-title { font-size: 14px; }
    .guide-modal-item p { font-size: 12.5px; }
}