/* ── Main navigation tabs ───────────────────────────────── */
.main-tabs {
    display: flex;
    gap: 0.25rem;
    margin: 0 0 1.5rem;
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 40;
    background: linear-gradient(to bottom, var(--bg) 65%, rgba(13, 15, 20, 0.85));
    backdrop-filter: blur(6px);
    overflow-x: auto;
    scrollbar-width: none;
}
.main-tabs::-webkit-scrollbar { display: none; }

.main-tab {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.85rem 1.3rem;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    font-family: 'Inter', sans-serif;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--muted);
    cursor: pointer;
    white-space: nowrap;
    transition: color 0.15s, border-color 0.15s;
}
.main-tab:hover { color: var(--text); }
.main-tab.active { color: var(--accent); border-bottom-color: var(--accent); }
.main-tab:focus-visible {
    outline: none;
    color: var(--text);
    box-shadow: inset 0 0 0 2px rgba(200, 169, 110, 0.35);
    border-radius: 6px 6px 0 0;
}

.main-tab-count {
    font-size: 0.7rem;
    font-weight: 600;
    padding: 0.05rem 0.4rem;
    border-radius: 999px;
    background: var(--surface2);
    color: var(--muted);
}
.main-tab.active .main-tab-count { background: rgba(200, 169, 110, 0.18); color: var(--accent); }

.main-pane[hidden] { display: none; }

.tab-short { display: none; }

/* The pan hint only makes sense where the score actually scrolls. */
.score-pan-hint { display: none; }

.pane-intro {
    color: var(--muted);
    font-size: 0.86rem;
    margin: -0.75rem 0 1.25rem;
}

/* Link to the IMSLP browser. It used to be grey 0.82rem text under the blurb
   and read as a caption, not a destination — hence the button treatment. */
.imslp-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1.1rem;
    padding: 0.55rem 1.15rem;
    font-size: 0.88rem;
    font-weight: 500;
    color: var(--accent2);
    text-decoration: none;
    background: rgba(126, 184, 176, 0.08);
    border: 1px solid rgba(126, 184, 176, 0.35);
    border-radius: 999px;
    transition: background 0.15s, border-color 0.15s, transform 0.15s;
}
.imslp-link:hover {
    background: rgba(126, 184, 176, 0.16);
    border-color: var(--accent2);
}
.imslp-link:active { transform: translateY(1px); }
.imslp-link::after { content: '→'; font-size: 0.9em; opacity: 0.7; }

/* ── Shared realization config bar ──────────────────────── */
.cfg-bar {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    flex-wrap: wrap;
    padding: 0.7rem 0 1rem;
    border-bottom: 1px solid var(--border);
    margin-bottom: 1rem;
}
.cfg-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--muted);
}
.cfg-hint {
    font-size: 0.78rem;
    color: var(--muted);
    opacity: 0.75;
    flex: 1 1 14rem;
    min-width: 0;
}

/* ── Collapsible section (fold) ─────────────────────────── */
.fold { }
.fold-summary {
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-family: 'Playfair Display', serif;
    font-size: 1.05rem;
    color: var(--accent);
    user-select: none;
}
.fold-summary::-webkit-details-marker { display: none; }
.fold-summary::before {
    content: '▸';
    font-family: 'Inter', sans-serif;
    font-size: 0.7rem;
    color: var(--muted);
    transition: transform 0.18s;
}
.fold[open] > .fold-summary::before { transform: rotate(90deg); }
.fold-summary::after { content: ''; flex: 1; height: 1px; background: var(--border); }
.fold-body { padding-top: 1.1rem; }

/* Passages fold sits inside the score pane, so it is quieter than a card. */
#passages-panel {
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: 6px;
    margin-bottom: 0.75rem;
    background: var(--surface2);
}
#passages-panel > .fold-summary {
    font-family: 'Inter', sans-serif;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--muted);
    font-weight: 500;
}
#passages-panel > .fold-summary::after { display: none; }
#passages-panel .fold-body { padding-top: 0.6rem; }

/* ── Advanced settings: rules toolbar ───────────────────── */
.rules-toolbar {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}
.rules-filter {
    flex: 1 1 14rem;
    padding: 0.55rem 0.8rem;
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text);
    font-family: inherit;
    font-size: 0.88rem;
}
.rules-filter:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(200, 169, 110, 0.13);
}
.rules-count { font-size: 0.78rem; color: var(--muted); }
.rule-card[hidden] { display: none; }

.rules-empty {
    display: none;
    color: var(--muted);
    font-size: 0.85rem;
    padding: 1rem 0;
}
.rules-empty.visible { display: block; }

/* ── Documentation pane ─────────────────────────────────── */
.docs-layout {
    display: grid;
    grid-template-columns: 13rem 1fr;
    gap: 2rem;
    align-items: start;
}
.docs-toc {
    position: sticky;
    top: 4.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 1rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
}
.docs-toc a {
    font-size: 0.82rem;
    color: var(--muted);
    text-decoration: none;
    padding: 0.35rem 0.5rem;
    border-radius: 6px;
    border-left: 2px solid transparent;
    transition: color 0.15s, background 0.15s, border-color 0.15s;
}
.docs-toc a:hover { color: var(--text); background: var(--surface2); }
.docs-toc a.current { color: var(--accent); border-left-color: var(--accent); }

.docs-body {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    padding: 1.75rem;
    font-size: 0.87rem;
    color: var(--muted);
    line-height: 1.75;
}
.docs-body h4 {
    font-family: 'Playfair Display', serif;
    color: var(--accent);
    font-size: 1.05rem;
    margin: 2rem 0 0.6rem;
    scroll-margin-top: 4.5rem;
}
.docs-body h4:first-child { margin-top: 0; }
.docs-body ul { padding-left: 1.4em; }
.docs-body li { margin-bottom: 0.35rem; }
.docs-body strong { color: var(--text); }
.docs-body a { color: #8090a8; }
.docs-body a:hover { color: #a0b4cc; }

@media (max-width: 780px) {
    .docs-layout { grid-template-columns: 1fr; gap: 1rem; }
    .docs-toc { position: static; flex-direction: row; flex-wrap: wrap; }
    .docs-body { padding: 1.25rem; }
}
@media (max-width: 540px) {
    .main-tab { padding: 0.7rem 0.85rem; font-size: 0.82rem; }
}

/* ── Compact header on the realizer ─────────────────────── */
/* The tab bar now carries the wayfinding, so the masthead gives back the
   vertical space it used to take before the first control. */
.site-header.compact { padding: 2rem 0 1.25rem; }
.site-header.compact h1 { font-size: clamp(1.7rem, 4vw, 2.4rem); }
.site-header.compact .subtitle { font-size: 0.82rem; margin-bottom: 0.3rem; }
.site-header.compact .staff-deco { margin: 0.9rem auto; max-width: 300px; }
.site-header.compact .staff-deco .clef { font-size: 2rem; }
.site-header.compact .desc { font-size: 0.86rem; margin-top: 0.5rem; max-width: 540px; }

/* ── Display-options fold ───────────────────────────────── */
/* Same pattern as the language menu: a real <details> on a phone, but on a
   wide screen the summary disappears and the body shows unconditionally. */
.display-fold-summary { display: none; }
.display-fold > .real-toolbar { display: flex; }

/* ══════════════════════════════════════════════════════════
   MOBILE (≤ 640 px)
   ══════════════════════════════════════════════════════════ */
@media (max-width: 640px) {

    /* — Masthead: one compact block, the tab bar does the wayfinding — */
    .site-header.compact { padding: 2.6rem 0 .9rem; }
    .site-header.compact h1 { font-size: 1.5rem; }
    .site-header.compact .subtitle { font-size: .7rem; }
    .site-header.compact .staff-deco { margin: .6rem auto; max-width: 200px; }
    .site-header.compact .staff-deco .clef { font-size: 1.5rem; }
    .site-header.compact .desc { font-size: .8rem; line-height: 1.55; }
    .imslp-link { margin-top: .5rem; padding: .7rem 0; min-height: 44px; }

    /* — Tabs: three equal columns, no horizontal scroll to discover — */
    .main-tabs {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 0;
        overflow-x: visible;
        margin-bottom: 1.1rem;
    }
    .main-tab {
        justify-content: center;
        gap: .3rem;
        padding: .8rem .3rem;
        font-size: .78rem;
        min-height: 46px;
        white-space: normal;
    }
    .tab-full  { display: none; }
    .tab-short { display: inline; }
    .main-tab-count { font-size: .62rem; padding: .02rem .3rem; }

    /* — Touch targets: 44 px minimum on every control — */
    .ed-ctrl-select,
    .comment-input,
    .rules-filter { min-height: 44px; font-size: 16px; }   /* 16px stops iOS zoom-on-focus */
    .ed-realize-btn { min-height: 46px; width: 100%; font-size: .92rem; }
    .btn { min-height: 46px; justify-content: center; }

    .ed-toolbar { flex-wrap: wrap; gap: .5rem; }
    .ed-ctrl-group { flex: 1 1 45%; }

    /* Duration + accidental buttons become a 5-up grid of real targets. */
    .ed-dur-bar {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        gap: .35rem;
        align-items: stretch;
    }
    .ed-dur-bar .ed-dur-lbl,
    .ed-dur-bar .ed-acc-display { grid-column: 1 / -1; }
    .ed-dur-bar > span[style] { display: none; }          /* the desktop spacer */
    .ed-dur-btn,
    .ed-dot-btn {
        min-height: 44px;
        min-width: 0;
        width: 100%;
        font-size: .95rem;
    }
    /* The keyboard legend is meaningless without a physical keyboard. */
    .ed-help { display: none; }
    .ed-fig-bar { flex-wrap: wrap; gap: .4rem; }
    .ed-fig-input { flex: 1 1 100%; min-height: 44px; font-size: 16px; }
    .ed-fig-btn { min-height: 44px; min-width: 56px; }

    .cfg-bar { padding-bottom: .8rem; }
    .cfg-hint { flex: 1 1 100%; font-size: .74rem; }

    /* — Score viewer: full-bleed, the card padding was costing 48 px — */
    .card { padding: 1.1rem; }
    #score-viewer-card .score-wrap {
        margin-left: -1.1rem;
        margin-right: -1.1rem;
        border-radius: 0;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    /* Centring an oversized child puts its left edge out of scroll reach. */
    #score-viewer-card .score-wrap { justify-content: flex-start; padding: .75rem; }
    #score-viewer-card .score-wrap svg { max-width: none; width: 760px; }
    .score-pan-hint {
        display: block;
        text-align: center;
        font-size: .7rem;
        color: var(--muted);
        margin: .35rem 0 0;
    }

    /* Display options fold back into a real disclosure. */
    .display-fold {
        border: 1px solid var(--border);
        border-radius: 6px;
        background: var(--surface2);
        margin-bottom: .7rem;
    }
    .display-fold-summary {
        display: flex;
        align-items: center;
        min-height: 44px;
        padding: 0 .8rem;
        cursor: pointer;
        list-style: none;
        font-size: .78rem;
        text-transform: uppercase;
        letter-spacing: .06em;
        color: var(--muted);
    }
    .display-fold-summary::-webkit-details-marker { display: none; }
    .display-fold:not([open]) > .real-toolbar { display: none; }
    .display-fold > .real-toolbar {
        flex-direction: column;
        align-items: flex-start;
        gap: .1rem;
        padding: 0 .8rem .7rem;
    }
    .display-fold .cb-label { min-height: 44px; display: flex; align-items: center; gap: .5rem; }
    .display-fold .cb-label input[type="checkbox"] { width: 20px; height: 20px; }
    #voice-legend { padding: .3rem 0; }

    .page-nav { gap: .6rem; }
    .page-nav-btn { min-width: 48px; min-height: 44px; }

    /* Knobs are pointer-event driven, so touch already works — but the page
       would pan away under the finger without this. */
    .pb-knob-wrap { touch-action: none; }
    .playback-bar { gap: .5rem; row-gap: .6rem; }
    .pb-btn { min-width: 44px; min-height: 44px; }

    /* — Advanced settings & documentation — */
    .rules-toolbar { gap: .6rem; }
    .rule-card > summary { min-height: 48px; }
    .docs-toc a { min-height: 40px; display: flex; align-items: center; }

    /* — Comment form — */
    .comment-textarea { min-height: 8rem; }

    /* — Chord Inspector: bottom sheet rather than a centred dialog — */
    .ci-overlay { align-items: flex-end; padding: 0; }
    .ci-panel {
        width: 100%;
        max-width: none;
        max-height: 85vh;
        position: relative;
        border-radius: 16px 16px 0 0;
        padding-top: 1.6rem;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    /* Grab handle. */
    .ci-panel::before {
        content: '';
        position: absolute;
        top: .6rem;
        left: 50%;
        transform: translateX(-50%);
        width: 38px;
        height: 4px;
        border-radius: 2px;
        background: var(--border);
    }
    .ci-close { min-width: 44px; min-height: 44px; }
}

/* ── Deploy stamp ───────────────────────────────────────── */
.deploy-stamp {
    font-size: 0.72rem;
    color: var(--muted);
    opacity: 0.65;
    margin-top: 0.5rem;
}
.deploy-stamp time { font-variant-numeric: tabular-nums; }
.deploy-rev { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .02em; }