/* ChordStamp learning hub styles
 * Copyright (c) 2026 ChordStamp. All rights reserved.
 * Not licensed for redistribution or reuse.
 */
/* Learn styles, adapted from the original guide; all colors derive from
   the site theme (site.css), so the guitar-finish picker themes this page. */
:root {
    --bg-section: var(--surface);
    --bg-alt: var(--surface2);
    --text: var(--ink);
    --text-muted: var(--dim);
    --accent-color: var(--accent);
    --accent-hover: var(--accent);
    --accent-light: var(--surface2);
    --border: var(--line);
    --shadow: rgba(0, 0, 0, 0.22);
    --code-bg: color-mix(in srgb, var(--bg) 60%, black);
    --code-text: var(--accent2);

    /* the anatomy drawing keeps realistic wood colors in every theme */
    --guitar-body: #b98a4e;
    --soundhole: #191410;
    --bridge: #4a2f18;
    --saddle: #efe8d6;
    --nut: #efe8d6;
    --headstock: #4a2f18;
    --neck: #a97e42;
    --fretboard: #33241a;
    --fret-wire: #cfcabe;
    --fret-dot: #efe8d6;
    --tuner: #b9b9bd;
    --string: #cfc9b8;
    --pin: #191410;
    --pickguard: #241a11;
    --body-electric: #b8443c;
    --pickguard-e: #f0ead6;
    --pickup: #efe6cf;
    --pole: #6b6b70;
    --hardware: #c9cbd0;
    --knob: #efe8d6;
    --headstock-e: #b8443c;
    --outline: #33241a;
    --label-line: var(--dim);
    --label-text: var(--dim);

    --note-root: var(--accent);
    --note-normal: var(--accent2);
    --note-highlight: var(--accent);
    --note-dim: var(--line);
}

/* ===== Base Styles ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
    scroll-behavior: smooth;
    font-size: 16px;
}

body {
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    background: var(--bg);
    color: var(--text);
    line-height: 1.6;
    transition: background 0.3s, color 0.3s;
}

/* ===== Sidebar Navigation ===== */
#sidebar {
    position: fixed;
    left: 0; top: 0;
    width: 240px;
    height: 100vh;
    background: var(--bg-section);
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    z-index: 100;
    transition: transform 0.3s ease, background 0.3s;
}

.nav-header {
    padding: 1.5rem 1.2rem 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    border-bottom: 1px solid var(--border);
}

.nav-icon { font-size: 1.6rem; }
.nav-header h2 { font-size: 1.1rem; font-weight: 700; }

#sidebar ul {
    list-style: none;
    flex: 1;
    overflow-y: auto;
    padding: 0.5rem 0;
}

#sidebar li a {
    display: block;
    padding: 0.6rem 1.2rem;
    color: var(--text-muted);
    text-decoration: none;
    font-size: 0.9rem;
    border-left: 3px solid transparent;
    transition: all 0.2s;
}

#sidebar li a:hover,
#sidebar li a.active {
    color: var(--accent-color);
    background: var(--accent-light);
    border-left-color: var(--accent-color);
}

.nav-footer {
    padding: 1rem 1.2rem;
    border-top: 1px solid var(--border);
}

#theme-toggle {
    background: none;
    border: 1px solid var(--border);
    color: var(--text-muted);
    padding: 0.4rem 0.8rem;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.85rem;
    width: 100%;
    transition: all 0.2s;
}
#theme-toggle:hover { border-color: var(--accent-color); color: var(--accent-color); }

#mobile-nav-toggle {
    display: none;
    position: fixed;
    top: 1rem; left: 1rem;
    z-index: 200;
    background: var(--bg-section);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 0.5rem 0.7rem;
    font-size: 1.3rem;
    cursor: pointer;
    color: var(--text);
    box-shadow: 0 2px 8px var(--shadow);
}

/* ===== Main Content ===== */
#content {
    margin-left: 240px;
    min-height: 100vh;
}

.section {
    max-width: 900px;
    margin: 0 auto;
    padding: 3rem 2rem;
}

/* Hero */
.hero-section {
    max-width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    background: linear-gradient(135deg, var(--bg-alt) 0%, var(--bg) 100%);
    text-align: center;
    padding: 4rem 2rem;
}

.hero-inner h1 {
    font-size: 3rem;
    font-weight: 800;
    line-height: 1.15;
    margin-bottom: 1rem;
}

.accent { color: var(--accent-color); }

.subtitle {
    font-size: 1.2rem;
    color: var(--text-muted);
    max-width: 500px;
    margin: 0 auto 2rem;
}

.cta-btn {
    display: inline-block;
    padding: 0.7rem 1.8rem;
    background: var(--accent-color);
    color: #fff;
    text-decoration: none;
    border-radius: 8px;
    font-weight: 600;
    font-size: 1rem;
    border: none;
    cursor: pointer;
    transition: background 0.2s, transform 0.1s;
}
.cta-btn:hover { background: var(--accent-hover); transform: translateY(-1px); }
.cta-btn.small { padding: 0.5rem 1.2rem; font-size: 0.9rem; }

/* Section titles */
.section-title {
    font-size: 2rem;
    font-weight: 800;
    margin-bottom: 0.5rem;
    color: var(--accent-color);
}

.section-intro {
    font-size: 1.05rem;
    color: var(--text-muted);
    margin-bottom: 2rem;
    max-width: 700px;
}

/* ===== Anatomy Section ===== */
.anatomy-container {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 2rem;
    align-items: start;
}

#guitar-anatomy-svg {
    width: 100%;
    max-width: 600px;
}

.anatomy-label { cursor: pointer; }
.anatomy-label:hover .label-text,
.anatomy-label.active .label-text {
    fill: var(--accent-color);
    font-weight: 700;
}
.anatomy-label:hover line,
.anatomy-label.active line { stroke: var(--accent-color); }
.anatomy-label:hover .label-dot,
.anatomy-label.active .label-dot { fill: var(--accent-color); }

.label-text { font-size: 15px; font-family: inherit; font-weight: 500; }
/* the SVG scales with the viewport, so viewBox-unit text shrinks with
   it, so bump the units on phones to keep labels legible */
@media (max-width: 640px) {
    .label-text { font-size: 20px; font-weight: 600; }
    .anatomy-label line { stroke-width: 2; }
    /* labels sit at the viewBox edges; let them spill into the
       container padding instead of truncating */
    #guitar-anatomy-svg, #guitar-electric-svg { overflow: visible; }
}

.info-panel {
    background: var(--bg-alt);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 1.5rem;
    position: sticky;
    top: 2rem;
}

.info-panel h3 {
    color: var(--accent-color);
    margin-bottom: 0.5rem;
}

/* ===== Strings & Tuning ===== */
/* Styled as a fretboard seen from playing position: nut on the left,
   fret wires behind, wound bronze bass strings vs plain steel trebles:
   so the diagram connects to the instrument in the lap (Zaid feedback) */
.tuning-visual {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    margin-bottom: 2rem;
    max-width: 560px;
    background:
        repeating-linear-gradient(90deg,
            transparent 0 92px, rgba(210, 205, 190, 0.22) 92px 94px),
        var(--fretboard);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 12px 14px;
    position: relative;
    overflow: hidden;
}
.tuning-visual::before {           /* the nut */
    content: "";
    position: absolute;
    left: 53px;
    top: 6px;
    bottom: 6px;
    width: 7px;
    background: var(--nut);
    border-radius: 3px;
    box-shadow: 1px 0 4px rgba(0, 0, 0, 0.45);
    z-index: 0;
}

.tv-caption {
    font-size: 0.8rem;
    color: var(--nut);
    opacity: 0.75;
    padding-left: 66px;    /* clear of the nut strip */
    margin-bottom: 2px;
}

.string-row {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 0.3rem 0;
    position: relative;
    z-index: 1;
}

.string-num {
    width: 28px;
    height: 28px;
    background: var(--bg-alt);
    border: 1px solid var(--border);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.85rem;
    flex: none;
}

.string-line {
    flex: 1;
    border-radius: 2px;
    background: linear-gradient(180deg, #f2ede0, #b8ad8f 55%, #7d7460);
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.55);
}
/* wound strings (E A D G): bronze + winding ridges */
.string-line.thick, .string-line.med-thick,
.string-line.medium, .string-line.med-thin {
    background:
        repeating-linear-gradient(90deg,
            rgba(60, 35, 10, 0.30) 0 1px,
            rgba(255, 255, 255, 0.08) 1px 2px,
            transparent 2px 3px),
        linear-gradient(180deg, #e8c088, #b98a4e 55%, #6e5026);
}
.string-line.thick { height: 8px; }
.string-line.med-thick { height: 7px; }
.string-line.medium { height: 6px; }
.string-line.med-thin { height: 5px; }
.string-line.thin { height: 3px; }
.string-line.thinnest { height: 2px; }

.string-note {
    font-weight: 800;
    font-size: 1.2rem;
    width: 28px;
    text-align: center;
    color: var(--accent-color);
}

.string-mnemonic {
    font-size: 0.85rem;
    color: var(--text-muted);
    width: 20px;
}

.play-btn {
    background: var(--accent-color);
    color: #fff;
    border: none;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    cursor: pointer;
    font-size: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s, transform 0.1s;
}
.play-btn:hover { background: var(--accent-hover); transform: scale(1.1); }

.mnemonic-box {
    background: var(--accent-light);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 1.2rem 1.5rem;
    margin-bottom: 1.5rem;
}

.mnemonic-box h3 { margin-bottom: 0.3rem; font-size: 1rem; }
.mnemonic-text { font-size: 1.15rem; letter-spacing: 0.02em; }

/* ===== Tip/Theory Boxes ===== */
.tip-box, .theory-box {
    background: var(--bg-alt);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 1.5rem;
    margin-top: 2rem;
}
.tip-box h4, .theory-box h3 { margin-bottom: 0.5rem; }
.tip-box ul { padding-left: 1.2rem; }
.tip-box li { margin-bottom: 0.4rem; }
.small-note { font-size: 0.9rem; color: var(--text-muted); margin-top: 0.5rem; }

/* ===== Tab Section ===== */
.tab-example-box {
    background: var(--bg-alt);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 2rem;
    color: var(--text);
}
.tab-example-box h3 { color: var(--accent-color); margin-bottom: 0.8rem; }

.tab-display {
    font-family: 'Courier New', monospace;
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--code-text);
    overflow-x: auto;
}

.tab-legend {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.4rem;
    margin-top: 1rem;
    font-size: 0.88rem;
}

.legend-sym {
    display: inline-block;
    background: rgba(255,255,255,0.1);
    padding: 0.1rem 0.5rem;
    border-radius: 4px;
    font-family: monospace;
    font-weight: 700;
    margin-right: 0.3rem;
}

/* Interactive tab builder */
#tab-table {
    width: 100%;
    border-collapse: collapse;
    font-family: 'Courier New', monospace;
    margin-bottom: 0.8rem;
}

#tab-table td {
    text-align: center;
    padding: 0.4rem 0.6rem;
    border: 1px solid var(--border);
    cursor: pointer;
    font-size: 1rem;
    transition: background 0.15s;
    min-width: 36px;
}

#tab-table td:hover:not(.string-label) {
    background: var(--accent-light);
}

.string-label {
    font-weight: 700;
    color: var(--accent-color);
    cursor: default !important;
    background: var(--bg-alt);
    width: 30px;
}

.small-btn {
    background: var(--bg-alt);
    border: 1px solid var(--border);
    padding: 0.3rem 1rem;
    border-radius: 6px;
    cursor: pointer;
    color: var(--text);
    font-size: 0.85rem;
}
.small-btn:hover { border-color: var(--accent-color); }

/* ===== Fretboard ===== */
.fretboard-container, .scale-fretboard-container {
    overflow-x: auto;
    margin: 1.5rem 0;
    padding-bottom: 0.5rem;
}

.fretboard {
    display: grid;
    grid-template-rows: repeat(6, 36px);
    gap: 0;
    min-width: 700px;
    position: relative;
    background: var(--fretboard);
    border-radius: 8px;
    padding: 8px 0;
}

.fret-col {
    display: contents;
}

.fret-cell {
    display: flex;
    align-items: center;
    justify-content: center;
    border-right: 2px solid var(--fret-wire);
    position: relative;
    font-size: 0.7rem;
    font-weight: 700;
    min-width: 50px;
}

.fret-cell.open-string {
    border-right: 3px solid var(--nut);
    min-width: 36px;
    background: rgba(0,0,0,0.15);
}

.fret-cell .note-dot {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 0.65rem;
    background: var(--note-normal);
    transition: all 0.2s;
    cursor: pointer;
}

.fret-cell .note-dot.root { background: var(--note-root);
    box-shadow: 0 0 0 2.5px var(--text); transform: scale(1.1); }
.fret-cell .note-dot.dimmed { background: var(--note-dim); color: var(--text-muted); opacity: 0.4; }
.fret-cell .note-dot.highlighted { background: var(--note-highlight); transform: scale(1.15); }

.note-selector, .chord-selector {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 1rem;
}

.note-btn, .chord-btn {
    padding: 0.4rem 0.9rem;
    border: 1px solid var(--border);
    background: var(--bg-section);
    border-radius: 6px;
    cursor: pointer;
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--text);
    transition: all 0.2s;
}

.note-btn:hover, .chord-btn:hover { border-color: var(--accent-color); color: var(--accent-color); }
.note-btn.active, .chord-btn.active { background: var(--accent-color); color: #fff; border-color: var(--accent-color); }

/* song-list deep links into the library: quiet until hovered */
.learn-table a { color: inherit; text-decoration: none;
    border-bottom: 1px dotted var(--text-muted); }
.learn-table a:hover { color: var(--accent-color);
    border-bottom-color: var(--accent-color); }

/* the all-chords picker: one row per flavor, common grips gold-ringed */
.chord-sel-group { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 2px; }
.chord-sel-group .chord-selector { margin-bottom: 0.5rem; gap: 0.3rem; }
.chip-lab { flex: none; width: 76px; text-align: right; font-size: 0.72rem;
            color: var(--text-muted); text-transform: uppercase;
            letter-spacing: 0.06em; padding-top: 0.55rem; }
.chord-btn.common { border-color: var(--accent-color);
                    box-shadow: inset 0 0 0 1px var(--accent-color); }
.chord-btn.common.active { color: #fff; }
@media (max-width: 560px) {
    .chord-sel-group { flex-direction: column; gap: 2px; }
    .chip-lab { text-align: left; padding-top: 0; }
}

/* Chromatic scale */
.chromatic-visual {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: 1rem 0;
}

.chr-note {
    padding: 0.4rem 0.7rem;
    border-radius: 6px;
    font-weight: 700;
    font-size: 0.95rem;
}

.chr-note.natural { background: var(--accent-light); color: var(--accent-color); }
.chr-note.sharp { background: var(--bg); border: 1px solid var(--border); color: var(--text-muted); }

/* ===== Scales ===== */
.scale-controls {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.scale-controls select {
    padding: 0.4rem 0.8rem;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--bg-section);
    color: var(--text);
    font-size: 0.9rem;
}

.scale-controls label { font-weight: 600; font-size: 0.9rem; }

.scale-info {
    background: var(--bg-alt);
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}

.scale-notes-row {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.8rem;
    flex-wrap: wrap;
}

.scale-note-chip {
    padding: 0.3rem 0.7rem;
    border-radius: 6px;
    font-weight: 700;
    font-size: 0.9rem;
}

.scale-note-chip.root { background: var(--note-root); color: #fff; }
.scale-note-chip.normal { background: var(--note-normal); color: #fff; }

/* Intervals */
.intervals-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 0.8rem;
    margin-top: 1rem;
}

.interval-card {
    background: var(--bg-section);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 0.8rem;
    text-align: center;
}

.interval-name { display: block; font-weight: 700; color: var(--accent-color); margin-bottom: 0.2rem; }
.interval-desc { display: block; font-size: 0.85rem; color: var(--text-muted); }
.interval-example { display: block; font-size: 0.9rem; margin-top: 0.3rem; font-weight: 600; }

/* ===== Chords ===== */
.chord-display-area {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 2rem;
    align-items: start;
    margin: 1.5rem 0;
}

.chord-diagram-container {
    background: var(--bg-alt);
    border-radius: 12px;
    padding: 1rem;
    display: flex;
    justify-content: center;
}

#chord-svg { width: 180px; }

.chord-info-panel h3 { color: var(--accent-color); margin-bottom: 0.5rem; }
.chord-tip { color: var(--text-muted); font-size: 0.9rem; margin: 0.8rem 0; font-style: italic; }

.chord-theory-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin-top: 1rem;
}

.chord-theory-card {
    background: var(--bg-section);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 1rem;
    text-align: center;
}

.chord-theory-card h4 { color: var(--accent-color); margin-bottom: 0.3rem; }
.formula { font-weight: 700; font-size: 1.1rem; margin: 0.5rem 0; }
.sound-desc { font-size: 0.85rem; color: var(--text-muted); font-style: italic; }

/* ===== Rhythm ===== */
.note-values-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 1rem;
    margin: 1rem 0 2rem;
}

.note-value-card {
    background: var(--bg-section);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 1.2rem;
    text-align: center;
}

.note-symbol { font-size: 2.5rem; display: block; margin-bottom: 0.3rem; }
.note-label { font-weight: 700; margin-bottom: 0.2rem; }
.note-beats { color: var(--text-muted); font-size: 0.9rem; margin-bottom: 0.5rem; }

.beat-dots {
    display: flex;
    justify-content: center;
    gap: 0.4rem;
}

.beat-dots .dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--note-dim);
    border: 1px solid var(--border);
}

.beat-dots .dot.on { background: var(--accent-color); border-color: var(--accent-color); }
.beat-dots .dot.half-on {
    background: linear-gradient(90deg, var(--accent-color) 50%, var(--note-dim) 50%);
    border-color: var(--accent-color);
}

/* Metronome */
.metronome-box {
    background: var(--bg-alt);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 1.5rem;
    text-align: center;
}
.metronome-box h3 { margin-bottom: 1rem; }

.metronome-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.metro-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: var(--bg-section);
    color: var(--text);
    font-size: 1.4rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}
.metro-btn:hover { border-color: var(--accent-color); color: var(--accent-color); }

.bpm-display {
    display: flex;
    flex-direction: column;
    align-items: center;
}
#bpm-value { font-size: 2.5rem; font-weight: 800; line-height: 1; }
.bpm-label { font-size: 0.75rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.1em; }

.beat-indicator {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.beat-light {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--bg-section);
    border: 2px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1rem;
    transition: all 0.1s;
}

.beat-light.active {
    background: var(--accent-color);
    border-color: var(--accent-color);
    color: #fff;
    transform: scale(1.15);
    box-shadow: 0 0 16px rgba(192, 96, 20, 0.5);
}

.time-sig-selector {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.time-sig-btn {
    padding: 0.3rem 0.8rem;
    border: 1px solid var(--border);
    background: var(--bg-section);
    border-radius: 6px;
    cursor: pointer;
    font-weight: 600;
    color: var(--text);
    transition: all 0.2s;
}
.time-sig-btn.active { background: var(--accent-color); color: #fff; border-color: var(--accent-color); }

/* ===== Practice ===== */
.routine-tabs {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}

.routine-tab {
    padding: 0.5rem 1.2rem;
    border: 1px solid var(--border);
    background: var(--bg-section);
    border-radius: 8px 8px 0 0;
    cursor: pointer;
    font-weight: 600;
    color: var(--text-muted);
    transition: all 0.2s;
}
.routine-tab.active { background: var(--accent-color); color: #fff; border-color: var(--accent-color); }

.routine-content {
    background: var(--bg-alt);
    border: 1px solid var(--border);
    border-radius: 0 12px 12px 12px;
    padding: 1.5rem;
    margin-bottom: 2rem;
}

.routine-item {
    display: flex;
    gap: 1rem;
    padding: 0.8rem 0;
    border-bottom: 1px solid var(--border);
    align-items: flex-start;
}
.routine-item:last-child { border-bottom: none; }

.routine-time {
    background: var(--accent-color);
    color: #fff;
    padding: 0.2rem 0.6rem;
    border-radius: 6px;
    font-weight: 700;
    font-size: 0.85rem;
    white-space: nowrap;
    min-width: 55px;
    text-align: center;
}

.routine-desc h4 { margin-bottom: 0.2rem; }
.routine-desc p { font-size: 0.9rem; color: var(--text-muted); }

/* Practice timer */
.practice-timer-box {
    background: var(--bg-alt);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 1.5rem;
    text-align: center;
    margin-bottom: 2rem;
}
.practice-timer-box h3 { margin-bottom: 1rem; }

.timer-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 1rem;
}

.timer-controls select {
    padding: 0.4rem 0.8rem;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--bg-section);
    color: var(--text);
    font-size: 0.9rem;
}

.timer-display {
    font-size: 3.5rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    margin-bottom: 0.8rem;
}

.timer-progress {
    height: 8px;
    background: var(--border);
    border-radius: 4px;
    overflow: hidden;
}

.timer-bar {
    height: 100%;
    width: 0%;
    background: var(--accent-color);
    border-radius: 4px;
    transition: width 1s linear;
}

/* ===== Footer ===== */
footer {
    text-align: center;
    padding: 2rem;
    color: var(--text-muted);
    font-size: 0.9rem;
    border-top: 1px solid var(--border);
    max-width: 900px;
    margin: 0 auto;
}

/* ===== Responsive ===== */
@media (max-width: 900px) {
    .anatomy-container { grid-template-columns: 1fr; }
    .chord-display-area { grid-template-columns: 1fr; }
    .info-panel { position: static; }
}

@media (max-width: 768px) {
    #sidebar { transform: translateX(-100%); }
    #sidebar.open { transform: translateX(0); box-shadow: 4px 0 20px var(--shadow); }
    #mobile-nav-toggle { display: block; }
    #content { margin-left: 0; }

    .hero-inner h1 { font-size: 2rem; }
    .section { padding: 2rem 1rem; }
    .tab-legend { grid-template-columns: 1fr; }
    .note-values-grid { grid-template-columns: repeat(2, 1fr); }
    .intervals-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 480px) {
    .hero-inner h1 { font-size: 1.6rem; }
    .section-title { font-size: 1.5rem; }
    .note-values-grid { grid-template-columns: 1fr 1fr; }
    .chord-theory-grid { grid-template-columns: 1fr; }
}

/* ===== Animations ===== */
@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.08); }
}

.playing { animation: pulse 0.3s ease; }


/* ===== learn-page layout overrides (no sidebar; site nav + subnav) ===== */
#content { margin: 0 auto !important; max-width: 1040px;
           padding: 0 20px 40px; }
#sidebar, #mobile-nav-toggle, #theme-toggle { display: none !important; }
[id] { scroll-margin-top: 74px; }
#learn-subnav {
    position: sticky; top: 49px; z-index: 50; display: flex; flex-wrap: wrap;
    gap: 6px; padding: 8px 18px;
    background: color-mix(in srgb, var(--bg) 90%, transparent);
    backdrop-filter: blur(8px); border-bottom: 1px solid var(--line);
}
#learn-subnav .nav-link {
    color: var(--dim); text-decoration: none; font-size: .8rem;
    padding: 3px 11px; border: 1px solid var(--line); border-radius: 20px;
    white-space: nowrap;
}
#learn-subnav .nav-link:hover { color: var(--accent); border-color: var(--accent); }
#learn-subnav .nav-link.active { color: var(--accent); border-color: var(--accent); }
.hero-mini { text-align: center; padding: 46px 10px 8px !important; }
.hero-mini h1 { font-size: clamp(1.7rem, 4.5vw, 2.6rem); line-height: 1.2; }
.hero-mini .accent { color: var(--accent); }
.hero-mini .subtitle { color: var(--dim); max-width: 640px; margin: 12px auto 0; }
.sub-title { color: var(--accent2); font-size: 1.05rem; margin: 30px 0 10px; }

/* ===== components carried over from the jam sheet ===== */
pre.tab { background: #16130e; border: 1px solid #2e2a22;
    border-radius: 8px; padding: 12px 14px; overflow-x: auto;
    font-family: Consolas, Menlo, monospace; font-size: .8rem;
    line-height: 1.45; color: #d9e6cf; margin: 8px 0; }
/* code panels read as dark 'terminals' in every theme, so force light ink */
.tab-display { background: #16130e !important; color: #d9e6cf !important; }
.learn-table { width: 100%; border-collapse: collapse; margin: 8px 0;
    font-size: .9rem; }
.learn-table th { color: var(--accent-color); text-align: left; padding: 6px 8px;
    border-bottom: 2px solid var(--border); font-size: .8rem;
    text-transform: uppercase; letter-spacing: .5px; }
.learn-table td { padding: 7px 8px; border-bottom: 1px solid var(--border);
    vertical-align: top; }
.chords { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 8px; }
.chord { text-align: center; }
.chord .nm { font-size: .85rem; color: var(--accent2); margin-top: 2px; }
.callout, .note { border-left: 3px solid var(--accent-color);
    background: var(--bg-alt); padding: 8px 12px; border-radius: 0 8px 8px 0;
    margin: 10px 0; font-size: .9rem; }
.dim-note, .dim { color: var(--text-muted); font-size: .88rem; margin: 6px 0; }
ol.method { margin: 8px 0 4px 20px; }
ol.method li { margin: 7px 0; }
ol.method li b { color: var(--accent2); }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 700px) { .two { grid-template-columns: 1fr; } }
.chip { display: inline-block; border-radius: 20px; padding: 1px 9px;
    font-size: .7rem; margin-left: 6px; vertical-align: middle;
    border: 1px solid var(--border); color: var(--dim); }
.chip.c1 { color: var(--accent2); border-color: var(--accent2); }
.chip.c2 { color: var(--accent); border-color: var(--accent); }


/* header normalization + small buttons + looping indicator */
#content h2.section-title { font-size: 1.9rem; }
#content h3.sub-title { font-size: 1.12rem; }
.small-btn { background: var(--accent-color); color: var(--bg-section);
    border: none; border-radius: 8px; padding: 7px 14px; cursor: pointer;
    font-size: .85rem; }
.play-btn.looping { outline: 2px solid var(--accent-color); }


/* scroll-target spacing: sticky bars are ~100px, section padding 2rem, so a
   jumped-to heading lands just under the bars instead of a screen down */
#content .section { padding-top: 2rem; }
#learn-subnav .nav-link.active { background: var(--accent-light); }


/* key pickers: the guitar-friendly keys read heavier than the rest */
select optgroup { font-style: normal; font-weight: 600; color: var(--text-muted);
    background: var(--bg-section); }
select optgroup[label="Common on guitar"] option { font-weight: 700; color: var(--text); }
select optgroup[label="Other keys"] option { font-weight: 400; }


/* tools-only mode: hide the written guides, keep the interactive toys */
#tools-only { display: flex; align-items: center; gap: 6px; font-size: .78rem;
    color: var(--text-muted); border: 1px solid var(--border); border-radius: 20px;
    padding: 3px 11px; cursor: pointer; white-space: nowrap; }
#tools-only input { accent-color: var(--accent-color); margin: 0; }
body.tools-only [data-tier="basics"] { display: none; }
body.tools-only #learn-subnav .nav-link.basics { display: none; }
#sync-tip { display: none; max-width: 1100px; margin: 12px auto 0;
    padding: 8px 16px; font-size: .85rem; color: var(--text-muted);
    border: 1px solid var(--border); border-left: 3px solid var(--accent-color);
    border-radius: 8px; }
body.tools-only #sync-tip { display: block; }


/* CAGED controls: fret arrows + a real segmented major/minor switch */
.fret-arrow { background: var(--bg-alt); color: var(--text); border: 1px solid var(--border);
    border-radius: 8px; width: 30px; height: 30px; font-size: 1.1rem; line-height: 1;
    cursor: pointer; }
.fret-arrow:hover { border-color: var(--accent-color); color: var(--accent-color); }
.seg { display: inline-flex; border: 1px solid var(--border); border-radius: 8px;
    overflow: hidden; vertical-align: middle; }
.seg button { background: var(--bg-alt); color: var(--text-muted); border: none;
    padding: 6px 14px; cursor: pointer; font-size: .85rem; }
.seg button.on { background: var(--accent-color); color: var(--bg-section); font-weight: 600; }

.scale-controls { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

#learn-subnav .nav-btn { color: var(--text-muted); background: none; font-size: .8rem;
    padding: 3px 11px; border: 1px solid var(--border); border-radius: 20px;
    white-space: nowrap; cursor: pointer; }
#learn-subnav .nav-btn:hover { color: var(--accent-color); border-color: var(--accent-color); }

/* practice-file buttons: quiet by design, a whisper next to the tool,
   not a call-to-action (dup: "less obnoxious") */
.practice-btn, .timer-chip {
    background: none;
    border: 1px solid var(--border);
    color: var(--text-muted);
    border-radius: 8px;
    padding: 3px 10px;
    font-size: .8rem;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
    line-height: 1.5;
    white-space: nowrap;
}
.practice-btn::before { content: "\266A  "; }
.timer-chip::before { content: "\25B6  "; font-size: .7em; }
.practice-btn:hover, .timer-chip:hover {
    color: var(--accent-color); border-color: var(--accent-color);
}
.routine-acts {
    margin-left: auto;
    align-self: center;
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

/* "picked up where you left off": a quiet, self-dismissing note */
.resume-hint {
    position: fixed;
    left: 50%;
    bottom: 18px;
    transform: translateX(-50%);
    z-index: 90;
    background: var(--bg-alt);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 7px 16px;
    font-size: .82rem;
    color: var(--text-muted);
    box-shadow: 0 4px 16px var(--shadow);
    display: flex;
    gap: 8px;
    align-items: center;
    transition: opacity .5s;
}
.resume-hint button {
    background: none;
    border: none;
    color: var(--accent-color);
    cursor: pointer;
    font: inherit;
    padding: 0;
    text-decoration: underline;
}
.resume-hint.out { opacity: 0; }

/* the tuner's repeat toggle: icon inherits the label colour, and turns
   the accent when the option is on, and an emoji could do neither */
.loop-opt { display: inline-flex; align-items: center; gap: 7px; }
.loop-opt svg { flex: none; color: var(--text-muted); transition: color .2s; }
#repeat-note:checked + .loop-opt,
#repeat-note:checked + .loop-opt svg { color: var(--accent-color); }

/* the "how to read the CAGED map" walkthrough */
.map-guide {
    background: var(--bg-alt);
    border: 1px solid var(--border);
    border-left: 3px solid var(--accent-color);
    border-radius: 0 10px 10px 0;
    padding: 12px 16px;
    margin: 16px 0;
}
.map-guide summary { cursor: pointer; color: var(--text); font-size: .96rem; }
.map-guide summary::marker { color: var(--accent-color); }
.map-steps { margin: 6px 0 10px 20px; }
.map-steps li {
    color: var(--text-muted);
    font-size: .92rem;
    margin: 7px 0;
    padding-left: 2px;
}
.map-steps li b { color: var(--text); }


/* ===== Widgets: every synced tool on one screen, no prose =====
   The tools in here are the SAME nodes as the ones in the page below,
   moved into this grid by learn.js wireWidgets() and moved back on exit.
   Nothing is duplicated, so the shared key needs no extra wiring: style
   this view, never re-implement the tools in it. */
/* pinned right by flex ORDER, not DOM position: wireToolsOnly() re-appends
   every nav link when it restores the guide order, which would otherwise
   leave this button stranded in the middle of the list */
#learn-subnav .view-btn { order: 99; margin-left: auto;
    color: var(--accent-color); border-color: var(--accent-color); }
#learn-subnav .nav-btn.on { color: var(--bg-section); font-weight: 600;
    background: var(--accent-color); border-color: var(--accent-color); }

#widgets-view { max-width: 1240px; margin: 0 auto; padding: 16px 20px 40px;
    display: grid; gap: 18px; align-items: start;
    grid-template-columns: minmax(0, 1fr) 400px; }
/* an id selector setting display outranks the UA's [hidden]{display:none},
   so the attribute alone would never hide this */
#widgets-view[hidden] { display: none; }
/* the two columns hug their own content: a tall right column must not
   stretch the left one and open a hole between the voicings and the map */
#w-main, #w-side { display: flex; flex-direction: column; gap: 18px; }
#w-voicings > .chords, #w-caged > *, #w-side > * { margin: 0; }
/* one panel treatment for all four, so the grid reads as a dashboard and
   not as four loose fragments of a page */
#w-voicings > .chords, #w-caged, #w-side > #circle-tool {
    background: var(--bg-alt); border: 1px solid var(--border);
    border-radius: 12px; padding: 14px 16px; }
#w-voicings > .chords { justify-content: center; gap: 10px; }
#w-caged { padding-bottom: 8px; }
#w-side > #circle-tool { padding: 10px; }

body.widgets #content,
body.widgets #sync-tip,
body.widgets #learn-subnav .nav-link,
body.widgets #tools-only { display: none; }
/* no reading in here: headings, prose and the practice-file buttons all
   belong to the page underneath. The CAGED legend is drawn inside its SVG
   and is the one label that stays. */
body.widgets #widgets-view h3,
body.widgets #widgets-view .practice-btn { display: none; }
body.widgets .resume-hint { display: none; }
/* exactly the seven of the key here; the borrowed V is a teaching point
   for the page, not a grip you need on the stand */
body.widgets .chord.borrowed { display: none; }
body.widgets .time-sig-selector label { display: none; }
/* the right column is narrower than the section this box came from */
body.widgets .metronome-controls { gap: .55rem; flex-wrap: wrap;
    margin-bottom: 1rem; }
body.widgets #metro-tap { font-size: .85rem; height: 34px; }
body.widgets .time-sig-selector { justify-content: center; }

/* the voicing grips are playable in here, so make that visible */
.chord.voicing { cursor: pointer; border-radius: 8px; padding: 2px 2px 4px;
    transition: background .12s ease; }
.chord.voicing:hover { background: var(--bg-section); }
/* the borrowed V is an extra, not the eighth chord of the key: set it
   apart so a wrapped row doesn't read as one long family */
.chord.voicing.borrowed { opacity: .82; margin-left: 6px; padding-left: 14px;
    border-left: 1px dashed var(--border); }

@media (max-width: 1180px) {
    #widgets-view { grid-template-columns: minmax(0, 1fr); }
    #w-side { flex-direction: row; flex-wrap: wrap; align-items: flex-start; }
    #w-side > * { flex: 1 1 320px; }
}

/* drum kit picker: same row language as the time-signature strip */
.drum-picker { display: flex; align-items: center; justify-content: center;
    gap: 8px; margin: 12px 0 18px; font-size: .85rem; color: var(--text-muted); }
.drum-picker select { padding: .35rem .7rem; border: 1px solid var(--border);
    border-radius: 6px; background: var(--bg-section); color: var(--text);
    font-size: .85rem; }

/* progressions in the widget grid: the chords and numerals are data, the
   "Feel" and "You've heard it in" columns are prose and go with the rest
   of the reading */
#w-prog > #prog-tool { background: var(--bg-alt); border: 1px solid var(--border);
    border-radius: 12px; padding: 10px 16px 14px; }
body.widgets #prog-tool thead,
body.widgets #prog-tool td:nth-child(4),
body.widgets #prog-tool td:nth-child(5) { display: none; }
body.widgets #prog-tool .learn-table { margin: 4px 0 0; }
body.widgets #prog-tool td { padding: 5px 8px; }

/* the band row: strum / bass / sound, same language as the other pickers */
.band-controls select { padding: .3rem .6rem; border: 1px solid var(--border);
    border-radius: 6px; background: var(--bg-section); color: var(--text);
    font-size: .85rem; }
.band-controls label { font-size: .85rem; color: var(--text-muted); }