/* chords page — extends style.css */
/* Version token. Keep in sync with the `?v=N` on the <link> in chords.html.
 * v=9 — UX upgrade: empty-state hero, labelled search form, prev/next
 * chord nav, tap-to-zoom diagram modal, wall-clock fallback badge,
 * chord-pill frequency counts, root-coloured timeline events. */

/* Light theme — scoped to .chords-page only (rest of site stays dark).
 * Overrides the CSS variables defined in style.css :root. Keeps the same
 * variable names so the rest of chords.css doesn't need to change.
 *
 * Note: CSS variables cascade DOWN, not up. Setting --bg on .chords-page
 * only affects descendants. We give .chords-page its own background so the
 * dark body color doesn't bleed through the container's padding.
 */
.chords-page {
    --bg: #fafaf7;            /* warm off-white, not pure white */
    --surface: #ffffff;        /* card / input backgrounds */
    --border: #e5e0d8;         /* subtle warm border */
    --text: #1a1a1a;           /* primary text */
    --text-2: #555555;         /* secondary text */
    --text-3: #888888;         /* muted text */
    --accent: #b88746;         /* amber accent (slightly darker for contrast on light) */
    --accent-dim: #8a6433;

    /* Chord-root colour palette — all stay inside the warm
     * amber/copper family so they don't introduce a new hue. Used by
     * chord pills, the timeline event list, and the .chord-name accent
     * so each root feels distinct at a glance. */
    --root-C:   #b88746;        /* amber */
    --root-Cs:  #a96e44;        /* warm rust */
    --root-D:   #94683e;        /* copper */
    --root-Ds:  #c18456;        /* tan */
    --root-E:   #c89460;        /* sand */
    --root-F:   #b07553;        /* terracotta */
    --root-Fs:  #9e613b;        /* cinnamon */
    --root-G:   #d4a574;        /* gold */
    --root-Gs:  #b08250;        /* bronze */
    --root-A:   #8a5a30;        /* walnut */
    --root-As:  #c79a6e;        /* wheat */
    --root-B:   #a07147;        /* chestnut */
}

/* Override style.css's hard-coded #ffffff on h1/h2/h3 so the heading
 * colour picks up our --text variable. */
.chords-page h1,
.chords-page h2,
.chords-page h3 {
    color: var(--text);
}

/* The .back-link uses --text-2 (already covered by our override) but its
 * underline accent needs the same. */
.chords-page a {
    color: var(--text-2);
}

.chords-page {
    max-width: 720px;
    background: var(--bg);
    /* The container has 4rem padding — extend the light bg to cover body
     * bleed-through so the page reads as fully light, not light-on-dark. */
    padding: 0 1.5rem 6rem;
    margin-top: -4rem;          /* offset the .container's 4rem top padding */
    padding-top: 4rem;
    min-height: 100vh;
    box-sizing: border-box;
}

.chords-header {
    border-bottom: 1px solid var(--border);
    padding-bottom: 1.5rem;
    margin-bottom: 1.5rem;
}

.back-link {
    color: var(--text-2);
    font-size: 0.92rem;
    border-bottom: none;
    display: inline-block;
    margin-bottom: 1rem;
}

.back-link + .back-link {
    /* second back-link sits on the same line as the first (e.g. "all songs"
     * next to "← back"). */
    margin-left: 1rem;
    color: var(--text-3);
}

.back-link:hover {
    color: var(--accent);
}

.chords-header h1 {
    font-size: 1.85rem;
    margin-bottom: 0.3rem;
}

.chords-header .artist {
    color: var(--text-2);
    font-size: 0.95rem;
    margin: 0;
}

/* YouTube search */
.yt-search {
    margin: 0 0 1.5rem;
}

/* On the song page the whole search form is collapsed into a thin
 * summary chip — keeps the chord hero above the fold. On the landing
 * page we add the [open] attribute so the form is visible. The default
 * <details> bullet is hidden via marker:none + a webkit override;
 * .yt-search-toggle-icon supplies a visible affordance. */
.yt-search > summary {
    list-style: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0 1rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--text-2);
    font-size: 0.82rem;
    text-transform: lowercase;
    letter-spacing: 0.02em;
    user-select: none;
    -webkit-user-select: none;
    transition: border-color 0.12s ease, color 0.12s ease,
                background 0.12s ease;
    touch-action: manipulation;
    /* Apple HIG 44px tap-floor. */
    min-height: 44px;
}
.yt-search > summary::-webkit-details-marker { display: none; }
.yt-search > summary:hover,
.yt-search > summary:focus-visible,
.yt-search[open] > summary {
    color: var(--accent);
    border-color: var(--accent);
    outline: none;
}
.yt-search-toggle-icon {
    font-size: 0.95rem;
    line-height: 1;
}

.yt-search-body {
    margin-top: 0.7rem;
    padding: 0.9rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 4px;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.yt-search-row {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

/* Visible label + hint pair on top of each input row. Replaces the old
 * placeholder-as-label pattern so users immediately know which input
 * does what and which one to use when. */
.yt-search-label {
    display: flex;
    flex-direction: column;
    gap: 0.05rem;
    cursor: pointer;
}
.yt-search-label-text {
    color: var(--text);
    font-size: 0.88rem;
    font-weight: 500;
}
.yt-search-label-hint {
    color: var(--text-3);
    font-size: 0.72rem;
    font-style: italic;
}
.yt-search-input-wrap {
    display: flex;
    gap: 0.5rem;
    align-items: stretch;
}

.yt-search-input {
    flex: 1;
    background: var(--bg);
    border: 1px solid var(--border);
    color: var(--text);
    border-radius: 4px;
    padding: 0.65rem 0.85rem;
    font-family: inherit;
    font-size: 0.95rem;
    outline: none;
    transition: border-color 0.12s ease;
    min-width: 0;
}

.yt-search-input::placeholder {
    color: var(--text-3);
}

.yt-search-input:focus {
    border-color: var(--accent);
}

.yt-search-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    background: var(--accent);
    border: 1px solid var(--accent);
    color: var(--bg);
    border-radius: 4px;
    padding: 0 0.95rem;
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.12s ease, border-color 0.12s ease;
    touch-action: manipulation;
    /* Comfortable mobile tap target (matches Apple HIG 44px floor). */
    min-height: 44px;
}
.yt-search-btn:hover,
.yt-search-btn:focus-visible {
    background: var(--accent-dim);
    border-color: var(--accent-dim);
    outline: none;
}
/* On narrow screens the visible "Search" label collapses to icon-only
 * so the input keeps its share of horizontal space. */
.yt-search-btn-text { display: none; }
@media (min-width: 480px) {
    .yt-search-btn-text { display: inline; }
}

/* Paste row uses the same skeleton as the search row but with a softer
 * (secondary) button — it should feel like a side door, not the main
 * entrance. */
.yt-paste-row { margin-top: 0; }

.yt-paste-input {
    flex: 1;
    background: var(--bg);
    border: 1px solid var(--border);
    color: var(--text);
    border-radius: 4px;
    padding: 0.65rem 0.85rem;
    font-family: inherit;
    font-size: 0.95rem;
    outline: none;
    transition: border-color 0.12s ease;
    min-width: 0;
}

.yt-paste-input::placeholder {
    color: var(--text-3);
    font-style: italic;
}

.yt-paste-input:focus {
    border-color: var(--accent);
}

.yt-paste-btn {
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--text-2);
    border-radius: 4px;
    padding: 0 0.95rem;
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: border-color 0.12s ease, color 0.12s ease,
                background 0.12s ease;
    touch-action: manipulation;
    min-height: 44px;
}

.yt-paste-btn:hover,
.yt-paste-btn:focus-visible {
    border-color: var(--accent);
    color: var(--accent);
    background: var(--bg);
    outline: none;
}

.yt-search-results {
    margin-top: 0.6rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 4px;
    overflow: hidden;
    max-height: 480px;
    overflow-y: auto;
}

.yt-result {
    display: flex;
    gap: 0.8rem;
    padding: 0.7rem;
    border-bottom: 1px solid var(--border);
    cursor: pointer;
    transition: background 0.1s ease;
    text-align: left;
    background: transparent;
    width: 100%;
    border-left: 0;
    border-right: 0;
    border-top: 0;
    color: var(--text);
    font-family: inherit;
    font-size: 0.9rem;
    line-height: 1.3;
}

.yt-result:last-child {
    border-bottom: 0;
}

.yt-result:hover,
.yt-result:focus,
.yt-result.active {
    background: rgba(212, 165, 116, 0.08);
    outline: none;
}

.yt-result-thumb {
    flex: 0 0 120px;
    aspect-ratio: 16 / 9;
    background: var(--bg);
    border-radius: 3px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.yt-result-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.yt-result-thumb-fallback {
    color: var(--text-3);
    font-size: 0.7rem;
    text-align: center;
    padding: 0 0.4rem;
}

.yt-result-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 0.3rem;
}

.yt-result-title {
    color: var(--text);
    font-weight: 500;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.yt-result-meta {
    color: var(--text-3);
    font-size: 0.78rem;
    display: flex;
    gap: 0.6rem;
    align-items: center;
    flex-wrap: wrap;
}

.yt-result-meta .yt-result-status {
    margin-left: auto;
    font-style: italic;
}

.yt-result-status.ready {
    color: #6fcf97;
}

.yt-result-status.processing {
    color: var(--accent);
}

.yt-result-status.error {
    color: #eb5757;
}

.yt-search-status {
    margin-top: 0.5rem;
    padding: 0.5rem 0.7rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 4px;
    color: var(--text-2);
    font-size: 0.85rem;
}

.yt-search-status.error {
    border-color: #eb5757;
    color: #eb5757;
}

.yt-search-status.processing {
    border-color: var(--accent);
}

.yt-search-status .pulse {
    display: inline-block;
    animation: pulse-dot 1.2s ease-in-out infinite;
}

@keyframes pulse-dot {
    0%, 100% { opacity: 0.4; }
    50%      { opacity: 1; }
}

@media (max-width: 540px) {
    .yt-result-thumb {
        flex-basis: 96px;
    }
    .yt-result {
        padding: 0.5rem;
        gap: 0.6rem;
    }
}

#player-section {
    margin: 1.5rem 0;
    aspect-ratio: 16 / 9;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 4px;
    overflow: hidden;
}

#player {
    width: 100%;
    height: 100%;
}

/* Lazy-loaded video placeholder. Shown by default instead of the YT iframe
   so the iframe doesn't capture touch focus on iOS WebKit (Telegram mobile).
   Replaced with the real iframe only after the user taps play. */
.player-placeholder {
    position: relative;
    width: 100%;
    height: 100%;
    background: #000;
    overflow: hidden;
}

.player-placeholder img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    opacity: 0.85;
}

.player-play {
    position: absolute;
    inset: 0;
    margin: auto;
    width: max-content;
    max-width: calc(100% - 2rem);
    height: max-content;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    padding: 0.85rem 1.4rem;
    background: rgba(0, 0, 0, 0.65);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 12px;
    color: #fff;
    font-size: 1rem;
    cursor: pointer;
    backdrop-filter: blur(2px);
    transition: background 0.15s ease, transform 0.15s ease;
}
.player-play .play-sub {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.78rem;
    font-weight: 400;
}

.player-play:hover,
.player-play:focus-visible {
    background: rgba(0, 0, 0, 0.85);
    transform: scale(1.03);
}

.player-play .play-icon {
    font-size: 1.15rem;
    color: var(--accent, #d4a574);
}

/* When the user wants the iframe to take focus away (e.g. watching video),
   the play-overlay turns into a small "close video" button so they can get
   back to interacting with the chord page. */
.player-close {
    position: absolute;
    top: 0.6rem;
    right: 0.6rem;
    z-index: 2;
    padding: 0.4rem 0.7rem;
    background: rgba(0, 0, 0, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 4px;
    color: #fff;
    font-size: 0.85rem;
    cursor: pointer;
}

/* Current / next chord cards */
.chord-display {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin: 1.5rem 0;
}

.chord-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 1.5rem 1rem;
    text-align: center;
}

.chord-current {
    border-color: var(--accent);
    box-shadow: 0 0 0 1px var(--accent) inset, 0 0 24px -8px var(--accent);
}

.chord-label {
    color: var(--text-3);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    margin-bottom: 0.6rem;
}

.chord-name {
    font-family: ui-serif, Georgia, Cambria, serif;
    font-size: 3.4rem;
    font-weight: 600;
    color: var(--accent);
    line-height: 1;
    letter-spacing: -0.02em;
}

.chord-next .chord-name {
    color: var(--text-2);
    font-size: 2.4rem;
}

.chord-meta {
    color: var(--text-3);
    font-size: 0.78rem;
    margin-top: 0.5rem;
    font-variant-numeric: tabular-nums;
}

/* Guitar chord diagram */
.chord-diagram {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0.4rem auto 0;
    min-height: 110px;
}

.chord-current .chord-diagram {
    min-height: 140px;
}

.chord-next .chord-diagram {
    min-height: 100px;
    opacity: 0.7;
}

.chord-diagram svg {
    max-width: 100%;
    height: auto;
}

/* svguitar styling overrides — use the canonical class names svguitar
 * actually emits (verified against the rendered DOM). Slightly thicker
 * strokes than the library defaults so the diagram reads well on phones. */
.chord-diagram svg .chord-fret,
.chord-diagram svg .chord-string,
.chord-diagram svg .chord-barre {
    stroke: var(--text-2);
    stroke-width: 2;
}

.chord-diagram svg .finger {
    fill: var(--accent);
    stroke: var(--accent);
    stroke-width: 1.5;
}

.chord-diagram svg text.finger-text {
    fill: var(--bg);
    font-weight: 700;
}

.chord-diagram svg .chord-mute,
.chord-diagram svg .chord-open {
    fill: var(--text-2);
    stroke: var(--text-2);
}

.chord-diagram svg .chord-open {
    fill: none;
    stroke: var(--accent);
}

.chord-diagram svg .chord-nut {
    stroke: var(--text);
    stroke-width: 2.5;
}

.chord-diagram svg .chord-tuning {
    fill: var(--text-2);
    font-weight: 500;
}

/* Fallback if svguitar didn't load: the container (now a <button>)
 * will have no SVG inside. Use a class instead of :empty since <button>
 * isn't a meaningful :empty target. */
.chord-diagram.is-empty::before {
    content: 'diagram loading…';
    color: var(--text-3);
    font-size: 0.8rem;
    font-style: italic;
    opacity: 0.6;
}

/* Timeline */
.timeline-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-top: 2rem;
    margin-bottom: 0.5rem;
    color: var(--text-2);
    font-size: 0.85rem;
}

.timeline-label {
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 0.72rem;
}

.timeline-time {
    font-variant-numeric: tabular-nums;
}

.timeline {
    position: relative;
    height: 6px;
    background: var(--border);
    border-radius: 3px;
    margin-bottom: 0.6rem;
    cursor: pointer;
}

.timeline-progress {
    position: absolute;
    inset: 0 auto 0 0;
    background: var(--accent);
    border-radius: 3px;
    width: 0%;
    pointer-events: none;
}

.timeline-cursor {
    position: absolute;
    top: -3px;
    left: 0%;
    width: 12px;
    height: 12px;
    background: var(--accent);
    border-radius: 50%;
    transform: translateX(-50%);
    pointer-events: none;
    box-shadow: 0 0 8px var(--accent);
}

.timeline-events {
    display: flex;
    flex-wrap: nowrap;
    gap: 0;
    overflow-x: auto;
    padding: 0.5rem 0 0.8rem;
    border-top: 1px solid var(--border);
    margin-top: 0.6rem;
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
}

.timeline-events::-webkit-scrollbar {
    height: 4px;
}

.timeline-events::-webkit-scrollbar-thumb {
    background: var(--border);
}

.timeline-event {
    flex: 0 0 auto;
    padding: 0.55rem 0.7rem;
    border-right: 1px solid var(--border);
    color: var(--root-color, var(--text-3));
    font-size: 0.78rem;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
    transition: color 0.12s ease, background 0.12s ease;
    white-space: nowrap;
    /* Apple HIG 44px tap-floor. */
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    touch-action: manipulation;
    background: transparent;
    border-top: 0;
    border-bottom: 0;
    border-left: 0;
    font-family: inherit;
}

.timeline-event:hover {
    color: var(--text);
    background: var(--surface);
}

.timeline-event.active {
    color: var(--accent);
    background: var(--surface);
    font-weight: 600;
}

.timeline-event .ev-chord {
    color: inherit;
    margin-left: 0.4rem;
}

/* Meta section */
#meta-section {
    margin-top: 2.5rem;
}

#meta-section h2 {
    font-size: 1.05rem;
    margin-bottom: 0.5rem;
    color: var(--text-2);
    font-family: inherit;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.chord-list {
    font-family: ui-serif, Georgia, serif;
    color: var(--accent);
    font-size: 1.1rem;
    letter-spacing: 0.04em;
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 0.5rem;
    margin: 0;
    line-height: 1.4;
}

.chord-pill {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--root-color, var(--accent));
    font-family: inherit;
    font-size: 0.92rem;
    padding: 0.4rem 0.55rem;
    border-radius: 3px;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
    line-height: 1.2;
    /* Apple HIG 44px tap-floor on phones. */
    min-height: 44px;
    touch-action: manipulation;
}

.chord-pill:hover,
.chord-pill:focus-visible {
    background: var(--accent);
    color: var(--bg);
    border-color: var(--accent);
    outline: none;
}

.chord-pill:active {
    transform: translateY(1px);
}

.meta-line {
    color: var(--text-3);
    font-size: 0.85rem;
    margin-top: 0.6rem;
}

footer {
    margin-top: 3rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border);
}

.footer-note {
    color: var(--text-3);
    font-size: 0.82rem;
}

.footer-note code {
    background: var(--surface);
    padding: 0.1rem 0.4rem;
    border-radius: 3px;
    font-size: 0.78rem;
    color: var(--text-2);
}

/* Empty / loading state */
.chord-card.loading .chord-name {
    color: var(--text-3);
    animation: pulse 1.4s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 0.4; }
    50% { opacity: 0.8; }
}

/* Mobile */
@media (max-width: 540px) {
    .chord-display {
        grid-template-columns: 1fr;
        gap: 0.8rem;
    }
    .chord-card {
        padding: 1.1rem 0.8rem;
    }
    .chord-current .chord-name {
        font-size: 2.6rem;
    }
    .chord-next .chord-name {
        font-size: 1.7rem;
    }
    .chord-name {
        font-size: 2.6rem;
    }
    .chord-diagram {
        margin: 0.2rem auto 0;
    }
    /* Cap the diagram height so a tall viewBox doesn't push content way down.
     * svguitar uses preserveAspectRatio="xMidYMid meet" so the diagram still
     * scales proportionally inside the cap. */
    .chord-current .chord-diagram svg {
        max-height: 240px;
    }
    .chord-next .chord-diagram svg {
        max-height: 180px;
    }
}
/* Capo control */
.capo-control {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin: 1rem 0 0.5rem;
    padding: 0.6rem 0.9rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 4px;
    color: var(--text-2);
    font-size: 0.88rem;
    flex-wrap: wrap;
}

.capo-label {
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 0.72rem;
    color: var(--text-3);
    margin-right: 0.3rem;
}

.capo-control button {
    background: var(--bg);
    border: 1px solid var(--border);
    color: var(--text);
    /* 44px = Apple HIG minimum tap target. Big enough to hit on mobile. */
    width: 44px;
    height: 44px;
    border-radius: 4px;
    font-family: inherit;
    font-size: 1.4rem;
    font-weight: 500;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    /* Stop mobile double-tap zoom on rapid clicks */
    touch-action: manipulation;
    user-select: none;
    -webkit-user-select: none;
    transition: border-color 0.12s ease, color 0.12s ease,
                background 0.12s ease, transform 0.08s ease;
}

.capo-control button:hover:not(:disabled) {
    border-color: var(--accent);
    color: var(--accent);
    background: rgba(212, 165, 116, 0.06);
}

.capo-control button:active:not(:disabled) {
    transform: scale(0.94);
    background: rgba(212, 165, 116, 0.14);
}

.capo-control button:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.capo-control button:disabled {
    opacity: 0.25;
    cursor: not-allowed;
}

.capo-value {
    font-family: ui-serif, Georgia, serif;
    font-size: 1.5rem;
    color: var(--accent);
    min-width: 2em;
    text-align: center;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    /* Brief flash when value changes — instant visual feedback that the
       click registered, even if you weren't looking at the chord card. */
    transition: color 0.25s ease;
}

.capo-value.flash {
    animation: capo-flash 0.4s ease;
}

@keyframes capo-flash {
    0%   { color: var(--accent); transform: scale(1); }
    35%  { color: #fff;          transform: scale(1.18); }
    100% { color: var(--accent); transform: scale(1); }
}

.capo-suffix {
    color: var(--text-3);
    font-size: 0.78rem;
    text-transform: lowercase;
    letter-spacing: 0.04em;
}

.capo-clear {
    width: auto !important;
    padding: 0 0.8rem !important;
    height: 44px !important;
    font-size: 0.78rem !important;
    text-transform: lowercase;
    letter-spacing: 0.04em;
    margin-left: 0.3rem;
    font-weight: 400 !important;
}

.capo-hint {
    color: var(--text-3);
    font-size: 0.78rem;
    margin-left: auto;
    font-style: italic;
}

/* Sounding-chord subtitle inside chord cards */
.chord-sounding {
    color: var(--text-3);
    font-size: 0.78rem;
    font-style: italic;
    margin-top: -0.3rem;
    margin-bottom: 0.3rem;
}

/* Capo bar overlay on the chord diagram */
.chord-diagram {
    position: relative;
}

.chord-capo-overlay {
    position: absolute;
    left: 5%;
    right: 5%;
    height: 4px;
    background: var(--accent);
    border-radius: 1px;
    box-shadow: 0 0 6px var(--accent);
    pointer-events: none;
    z-index: 2;
}

/* =========================================================================
 * v=9 UX additions
 * ========================================================================= */

/* Landing hero — only visible on the empty-state (no ?song=) page.
 * Lives in the header's vertical flow so it appears above the chord
 * cards without competing with the back-links. */
.landing-hero {
    margin: 1.5rem 0 0.5rem;
    padding: 1.4rem 1.3rem 1.5rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 6px;
}
.landing-hero-title {
    font-family: ui-serif, Georgia, serif;
    font-size: 1.35rem;
    line-height: 1.35;
    color: var(--text);
    margin: 0 0 0.55rem;
    letter-spacing: -0.005em;
}
.landing-hero-sub {
    color: var(--text-2);
    font-size: 0.92rem;
    line-height: 1.55;
    margin: 0 0 1.1rem;
    max-width: 28rem;
}

/* Three example song chips so a first-time visitor sees something
 * tappable. Populated by chord-app.js from data/songs.json, falling back
 * to a hardcoded short list if registry loading is slow. */
.landing-hero-examples {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem 0.5rem;
    margin-bottom: 1.1rem;
}
.landing-hero-example {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.42rem 0.78rem;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--text);
    font-size: 0.82rem;
    cursor: pointer;
    transition: border-color 0.12s ease, color 0.12s ease,
                background 0.12s ease;
    touch-action: manipulation;
    text-align: left;
    font-family: inherit;
    line-height: 1.2;
}
.landing-hero-example:hover,
.landing-hero-example:focus-visible {
    border-color: var(--accent);
    color: var(--accent);
    background: var(--surface);
    outline: none;
}
.landing-hero-example .chip-meta {
    color: var(--text-3);
    font-size: 0.7rem;
    font-style: italic;
}

.landing-keyboard {
    border-top: 1px solid var(--border);
    padding-top: 0.9rem;
    color: var(--text-2);
    font-size: 0.82rem;
}
.landing-keyboard > summary {
    list-style: none;
    cursor: pointer;
    color: var(--text-3);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding: 0.3rem 0;
}
.landing-keyboard > summary::-webkit-details-marker { display: none; }
.landing-keyboard > ul {
    margin: 0.4rem 0 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.landing-keyboard kbd {
    display: inline-block;
    min-width: 1.5em;
    padding: 0.05rem 0.3rem;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 3px;
    font-family: inherit;
    font-size: 0.78rem;
    color: var(--text);
    text-align: center;
}
@media (max-width: 540px) {
    .landing-hero {
        padding: 1.1rem 1rem 1.2rem;
    }
    .landing-hero-title {
        font-size: 1.2rem;
    }
    .landing-hero-sub {
        font-size: 0.88rem;
    }
}

/* Wall-clock fallback badge — sits next to the "Now" label so the user
 * notices it without us having to recolour the whole card. The tooltip
 * explains what "wall-clock mode" means and how to switch out of it. */
.chord-fallback-badge {
    display: inline-block;
    margin: 0 0 0.4rem;
    padding: 0.18rem 0.5rem;
    background: rgba(184, 135, 70, 0.12);
    color: var(--accent);
    border: 1px solid rgba(184, 135, 70, 0.4);
    border-radius: 999px;
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 500;
    cursor: help;
}

/* Prev / next chord navigation under the Now card. Big enough to hit on
 * phones (44px floor) and visually paired so they read as a unit. */
.chord-nav {
    margin-top: 0.7rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.4rem;
}
.chord-nav-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.55rem 0.6rem;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 4px;
    color: var(--text-2);
    font-family: inherit;
    font-size: 0.78rem;
    font-weight: 500;
    cursor: pointer;
    transition: border-color 0.12s ease, color 0.12s ease,
                background 0.12s ease;
    min-height: 44px;
    touch-action: manipulation;
}
.chord-nav-btn:hover,
.chord-nav-btn:focus-visible {
    color: var(--accent);
    border-color: var(--accent);
    outline: none;
}
.chord-nav-btn:active {
    transform: scale(0.98);
}
.chord-nav-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}
.chord-nav-arrow {
    font-size: 1rem;
    line-height: 1;
}
/* Next-button is visually the dominant direction (you usually skip
 * forward through a song) so we tint it slightly. */
#chord-next-btn {
    color: var(--text);
    border-color: var(--accent-dim);
    background: rgba(184, 135, 70, 0.08);
}
#chord-next-btn:hover,
#chord-next-btn:focus-visible {
    color: var(--bg);
    background: var(--accent);
    border-color: var(--accent);
}

/* Tap-to-zoom — the diagram containers are now buttons so they get a
 * subtle lift on hover/focus to advertise the affordance. */
.chord-diagram-btn {
    cursor: zoom-in;
    background: transparent;
    border: 1px dashed transparent;
    border-radius: 4px;
    color: inherit;
    font: inherit;
    padding: 0.2rem;
    width: 100%;
    text-align: center;
    transition: border-color 0.12s ease, background 0.12s ease;
}
.chord-diagram-btn:hover,
.chord-diagram-btn:focus-visible {
    border-color: var(--border);
    background: rgba(184, 135, 70, 0.05);
    outline: none;
}
.chord-current .chord-diagram-btn {
    min-height: 140px;
}
.chord-next .chord-diagram-btn {
    min-height: 100px;
    opacity: 0.75;
}

/* Modal — fullscreen overlay with a backdrop and centred panel. The SVG
 * content is cloned from the live diagram; we let it scale to the panel
 * width via CSS max-width. */
.diagram-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
}
.diagram-modal[hidden] { display: none; }
.diagram-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}
.diagram-modal-body {
    position: relative;
    width: 100%;
    max-width: 480px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 1.4rem 1.2rem 1.6rem;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35);
    color: var(--text);
}
.diagram-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}
.diagram-modal-title {
    margin: 0;
    font-family: ui-serif, Georgia, serif;
    font-size: 1.6rem;
    color: var(--accent);
    line-height: 1;
}
.diagram-modal-close {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-2);
    width: 36px;
    height: 36px;
    border-radius: 4px;
    cursor: pointer;
    font-family: inherit;
    font-size: 1rem;
    line-height: 1;
    transition: border-color 0.12s ease, color 0.12s ease;
}
.diagram-modal-close:hover,
.diagram-modal-close:focus-visible {
    border-color: var(--accent);
    color: var(--accent);
    outline: none;
}
.diagram-modal-content {
    display: flex;
    justify-content: center;
}
.diagram-modal-content svg {
    max-width: 100%;
    height: auto;
    /* Bigger strokes in modal so the diagram reads at arms-length. */
    --finger-size: 0.7;
}
.diagram-modal-content svg .chord-fret,
.diagram-modal-content svg .chord-string,
.diagram-modal-content svg .chord-barre {
    stroke-width: 2.5;
}

/* Chord pill frequency badge.
 * The chord list shows each unique chord + how many times it appears
 * (helps memorisation: "G appears 14× — focus here"). */
.chord-pill {
    /* Inline flex so the badge sits naturally on the right edge. */
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}
.chord-pill-count {
    color: var(--text-3);
    font-size: 0.7rem;
    font-variant-numeric: tabular-nums;
    font-weight: 400;
    padding: 0 0.3rem;
    border-left: 1px solid var(--border);
    margin-left: 0.05rem;
    line-height: 1;
    transition: color 0.12s ease, border-color 0.12s ease;
}
.chord-pill:hover .chord-pill-count,
.chord-pill:focus-visible .chord-pill-count {
    color: var(--bg);
    border-color: rgba(250, 250, 247, 0.4);
}

/* The Now-card chord name and the .chord-name accent use the same
 * root-derived colour so the visual link is consistent across views. */
.chord-card .chord-name {
    color: var(--root-color, var(--accent));
}

/* Root-tinted timeline events so the song's chord progression is
 * scannable at a glance. colour-mix is well-supported (Chromium 111+,
 * Safari 16.2+); we provide a hard-coded fallback via --root-color too
 * for browsers that don't support it. */
.timeline-event {
    color: var(--root-color, var(--text-3));
    border-right: 1px solid var(--border);
}
.timeline-event .ev-chord {
    /* The chord name is the root-derived colour; the time stays muted. */
    color: inherit;
    font-weight: 600;
}
.timeline-event:hover {
    /* preserve the root tint on hover but lift it onto the surface. */
    background: var(--surface);
}
.timeline-event.active {
    /* Currently-playing event stands out: bolder + a left-edge bar in
     * the root colour. */
    background: var(--surface);
    font-weight: 600;
}
.timeline-event.active::before {
    content: '';
    display: inline-block;
    width: 3px;
    height: 1em;
    margin-right: 0.4rem;
    background: var(--root-color, var(--accent));
    border-radius: 2px;
    vertical-align: middle;
}

@media (max-width: 540px) {
    .chord-current .chord-diagram-btn { min-height: 100px; }
    .chord-next .chord-diagram-btn { min-height: 90px; }
    .chord-current .chord-diagram-btn svg { max-height: 220px; }
    .chord-next .chord-diagram-btn svg { max-height: 160px; }
}