/* ============================================================================
 * Player v2 — shell skeleton (Tranche S1)
 * STRUCTURAL ONLY. No visual identity, no colours beyond legibility, no
 * animation. The dark/paper identity + polish is Tranche S2's job. Its single
 * responsibility: lay out the three-zone shell and gate zone visibility off
 * `main[data-active-zone]` × `[data-zone]`.
 * ==========================================================================*/

/* ---- Header row ---- */
.v2-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding: 10px 16px;
    border-bottom: 1px solid #333;
}
.v2-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}
.v2-btn {
    font: inherit;
    color: inherit;
    background: transparent;
    border: 1px solid #555;
    border-radius: 6px;
    padding: 6px 12px;
    cursor: pointer;
}

/* ---- Zone nav (top-level tablist) ---- */
.v2-zones {
    display: flex;
    gap: 4px;
    padding: 0 16px;
    border-bottom: 1px solid #333;
}
.v2-zone-btn {
    font: inherit;
    color: inherit;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    padding: 10px 16px;
    cursor: pointer;
}
.v2-zone-btn[aria-selected="true"] {
    border-bottom-color: currentColor;
    font-weight: 600;
}

/* ---- Main + zone show/hide ---- */
.v2-main {
    padding: 12px 16px;
}
.v2-zone {
    display: none;
}
.v2-main[data-active-zone="practice"] .v2-zone[data-zone="practice"],
.v2-main[data-active-zone="sheets"]   .v2-zone[data-zone="sheets"],
.v2-main[data-active-zone="progress"] .v2-zone[data-zone="progress"] {
    display: block;
}

/* ---- Sub-navs (Song Sheets tabs + Practice melody toggle) ---- */
.v2-subnav {
    display: flex;
    gap: 4px;
    margin-bottom: 8px;
}
/* Practice melody sub-toggle buttons (Task 3) — structural only. */
.v2-subnav-btn {
    font: inherit;
    color: inherit;
    background: transparent;
    border: 1px solid #555;
    border-radius: 6px;
    padding: 6px 12px;
    cursor: pointer;
}
.v2-subnav-btn-active {
    font-weight: 600;
    border-color: currentColor;
}

/* ---- Overflow (Export) panel ---- */
.v2-overflow-panel {
    padding: 12px 16px;
    border-top: 1px solid #333;
}