/* =============================================================================
   RESPONSIVE.CSS  —  Single source of truth for all breakpoint-based overrides
   =============================================================================

   BREAKPOINT SYSTEM (mobile-last; base styles target desktop):
   ┌──────────────────────────────────────────────────────────────────────────────┐
   │  ≥ 1281px             Desktop         Full layout — sidebars always pinned   │
   │  (pointer: fine)                       Sidebar toggle hidden                 │
   │                                                                              │
   │  ≥ 1281px             Large touch     Touch override: toggle re-shown,       │
   │  (pointer: coarse)    tablet          modal panels, logout in settings,      │
   │                       (iPad Pro 12.9" touch-sized tap targets                │
   │                        landscape etc.)                                       │
   │                                                                              │
   │  601px – 1280px       Tablet          Sidebars hidden behind toggle button   │
   │                       (all sizes &    Panels = centered floating modals      │
   │                        orientations)  Touch-optimised targets                │
   │                                                                              │
   │  + orientation: landscape  Tablet     Compact panel max-height (shorter      │
   │    pointer: coarse    landscape       viewport), tighter inner padding       │
   │  + orientation: portrait   Tablet     Narrower panel width (narrower         │
   │    pointer: coarse    portrait        viewport, avoid edge-to-edge panels)   │
   │                                                                              │
   │  ≤ 600px              Mobile phone    Panels slide up full-screen;           │
   │                       (overlay)       song-list sidebar overlays lyrics;     │
   │                                       picking a song closes it (JS)          │
   │  ≤ 600px              Phone bottom    Bottom nav bar replaces left sidebar   │
   │                       nav             (same 600px cutoff as overlay CSS)     │
   │  601–1280 portrait    Tablet          Floating song panel + backdrop;        │
   │  (pointer: coarse)    portrait        picking a song closes it (JS)          │
   │  601–1280 landscape   Tablet /        Left tab rail; song list stays open    │
   │  / fine pointer       narrow desktop  after pick (close via hamburger)       │
   │  ≤ 380px              Tiny phone      Extra padding / font tweaks            │
   │  height ≤ 500px       Landscape       Panels switch back to centered modals  │
   │  width  ≤ 900px       phone           (full-screen too cramped vertically)   │
   │  orientation: landscape                                                      │
   └──────────────────────────────────────────────────────────────────────────────┘

   FILE LOAD ORDER (in main.html):
     responsive.css must be loaded AFTER all other CSS files so its
     overrides take effect correctly.

   EDITING GUIDE:
     — Never add @media queries to other CSS files. Put them here instead.
     — Each section is labelled with which original file it came from.
     — Rules within the same breakpoint are grouped together to avoid
       duplication and specificity fights.
   ============================================================================= */


/* Sidebar backdrop: hidden everywhere by default; section 3c activates it on
   tablet portrait only, using opacity/pointer-events transitions. */
.sidebar-backdrop {
    display: none;
}


/* =============================================================================
   1. DESKTOP ONLY  (≥ 1281px)
   — At this width, both sidebars are always pinned; the toggle is unnecessary.
   — 1281px is chosen because all common iPad sizes (including iPad Pro 11"
     landscape at 1194px and iPad Air landscape at 1180px) stay below it and
     correctly receive tablet treatment in Section 3.
   Source: header.css
============================================================================= */

@media (min-width: 1281px) {
    #sidebar-toggle-btn {
        display: none;
    }
}

@media (max-width: 1280px) {
    #home-back-btn {
        display: none;
    }
}

/* Hide the edit button in the song viewer on small screens (space constraint) */
@media (max-width: 750px) {
    #edit-song-btn {
        display: none;
    }
}


/* =============================================================================
   2. LARGE TOUCH SCREEN OVERRIDE  (≥ 1281px AND pointer: coarse)
   — Covers touch tablets whose viewport width exceeds 1280px
     (e.g. iPad Pro 12.9" landscape = 1366px).
   — Section 1 above hides the sidebar toggle for ALL wide screens.
     This section undoes that specifically for touch-primary devices and
     re-applies the full tablet experience: toggle, modal panels, logout
     in settings, and touch-sized tap targets.
   Source: header.css, main.css, sidebar.css
============================================================================= */

@media (min-width: 1281px) and (pointer: coarse) {

    /* Re-show the sidebar toggle (overrides Section 1) */
    #sidebar-toggle-btn {
        display: flex;
    }

    #home-back-btn {
        display: none;
    }

    /* Move header logout out — logout lives in settings Account section */
    #logout-btn {
        display: none;
    }

    .settings-logout-section {
        display: block;
    }

    /* ── Side panels: centered floating modal ── */
    .side-panel {
        top: 50%;
        left: 50%;
        right: auto;
        bottom: auto;
        width: min(600px, 90vw);
        height: auto;
        max-height: 88dvh;
        border-radius: 16px;
        box-shadow: 0 8px 48px rgba(0, 0, 0, 0.22);
        transform: translate(-50%, -50%) scale(0.95);
        opacity: 0;
        visibility: hidden;
        transition: transform 0.3s cubic-bezier(0.32, 0, 0.15, 1),
            opacity 0.3s ease,
            visibility 0.3s ease,
            box-shadow 0.3s ease;
    }

    .side-panel.active {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
        visibility: visible;
        box-shadow: 0 16px 64px rgba(0, 0, 0, 0.28);
    }

    /* Stronger backdrop behind the floating modal */
    .panel-overlay {
        background: rgba(0, 0, 0, 0.5);
    }

    /* ── Touch-sized tap targets ── */
    .panel-header {
        padding: 16px 16px 16px 24px;
    }

    .panel-content {
        padding: 24px;
    }

    .panel-footer {
        padding: 18px 24px;
        padding-bottom: max(18px, env(safe-area-inset-bottom));
    }

    .btn {
        padding: 12px 20px;
        font-size: 15px;
    }

    .panel-input {
        padding: 12px 14px;
        font-size: 15px;
    }

    .edit-dropdown {
        height: 46px;
    }

    .timesig-dropdown {
        height: 46px;
    }

    .color-grid {
        margin: 0 16px;
        gap: 10px;
    }

    .settings-dark-mode-row {
        margin: 0 16px 18px;
    }

    .color-option {
        border-radius: 8px;
    }

    .settings-slider::-webkit-slider-thumb {
        width: 22px;
        height: 22px;
    }

    .settings-slider::-moz-range-thumb {
        width: 22px;
        height: 22px;
    }

    .filter-chips-edit .filter-chip {
        padding: 8px 14px;
        font-size: 13px;
    }

    .download-option-btn {
        padding: 18px 20px;
        font-size: 15px;
    }

    .settings-group {
        margin-bottom: 20px;
    }

    /* Left sidebar: allow scroll if icon buttons overflow vertically */
    .left-small-sidebar {
        overflow-y: auto;
        overflow-x: hidden;
        padding-bottom: max(12px, env(safe-area-inset-bottom));
    }

    /* Touch-hint below the song list */
    .swipe-edit-hint {
        text-align: center;
        font-size: 11px;
        color: var(--text-tertiary);
        margin: 0;
        padding: 14px 8px 6px;
        opacity: 0.55;
        user-select: none;
    }
}


/* =============================================================================
   3. TABLET  (≤ 1280px)
   — Sidebar toggle visible; sidebars start hidden behind it.
   — Side panels become centered floating modals instead of right-slide.
   — Logout button moved into settings panel.
   — Lyrics container gets slightly less padding.
   — Left small sidebar gets scroll capability in case buttons overflow.
   Source: main.css, header.css, lyrics.css, sidebar.css
============================================================================= */

@media (max-width: 1280px) {

    /* Trash tab: desktop-only — never show on tablet or mobile nav */
    .tab-options[data-filter="deleted"] {
        display: none !important;
    }

    /* ── Header ── */

    /* Header home/back stays visible; logout is only in settings */
    #logout-btn {
        display: none;
    }

    /* The logout section inside settings panel becomes visible */
    .settings-logout-section {
        display: block;
    }

    /* ── Side panels: centered floating modal ── */
    .side-panel {
        top: 50%;
        left: 50%;
        right: auto;
        bottom: auto;
        width: min(600px, 90vw);
        height: auto;
        max-height: 88dvh;
        border-radius: 16px;
        box-shadow: 0 8px 48px rgba(0, 0, 0, 0.22);

        /* Start scaled-down + invisible in center */
        transform: translate(-50%, -50%) scale(0.95);
        opacity: 0;
        visibility: hidden;
        transition: transform 0.3s cubic-bezier(0.32, 0, 0.15, 1),
            opacity 0.3s ease,
            visibility 0.3s ease,
            box-shadow 0.3s ease;
    }

    .side-panel.active {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
        visibility: visible;
        box-shadow: 0 16px 64px rgba(0, 0, 0, 0.28);
    }

    /* Stronger backdrop behind the floating modal */
    .panel-overlay {
        background: rgba(0, 0, 0, 0.5);
    }

    /* ── Panel internals: bigger touch targets ── */
    .panel-header {
        padding: 16px 16px 16px 24px;
    }

    .panel-content {
        padding: 24px;
    }

    .panel-footer {
        padding: 18px 24px;
        padding-bottom: max(18px, env(safe-area-inset-bottom));
    }

    .btn {
        padding: 12px 20px;
        font-size: 15px;
    }

    .panel-input {
        padding: 12px 14px;
        font-size: 15px;
    }

    .edit-dropdown {
        height: 46px;
    }

    .color-grid {
        margin: 0 16px;
        gap: 10px;
    }

    .settings-dark-mode-row {
        margin: 0 16px 18px;
    }

    .color-option {
        border-radius: 8px;
    }

    /* Slider thumbs: bigger touch targets */
    .settings-slider::-webkit-slider-thumb {
        width: 22px;
        height: 22px;
    }

    .settings-slider::-moz-range-thumb {
        width: 22px;
        height: 22px;
    }

    .filter-chips-edit .filter-chip {
        padding: 8px 14px;
        font-size: 13px;
    }

    .download-option-btn {
        padding: 18px 20px;
        font-size: 15px;
    }

    .settings-group {
        margin-bottom: 20px;
    }

    /* ── Lyrics: slightly tighter padding on tablet ── */
    .lyrics-inner {
        padding: 30px 36px;
    }

    /* ── Video section: match lyrics-inner horizontal padding ── */
    #song-video-container {
        padding: 0 36px 40px;
    }

    /* ── Left small sidebar: allow scroll if buttons overflow vertically ──
       Only applies on tablet (not mobile, which uses bottom nav) */
    .left-small-sidebar {
        overflow-y: auto;
        overflow-x: hidden;
        padding-bottom: max(12px, env(safe-area-inset-bottom));
    }

    .timesig-dropdown {
        height: 46px;
    }

    /* Touch-hint shown below the song list on touch devices */
    .swipe-edit-hint {
        text-align: center;
        font-size: 11px;
        color: var(--text-tertiary);
        margin: 0;
        padding: 14px 8px 6px;
        opacity: 0.55;
        user-select: none;
    }
}


/* =============================================================================
   3a. TOUCH DEVICES  (hover: none)
   — Covers large tablets (> 1280px wide) where max-width: 1280px doesn't fire.
============================================================================= */

@media (hover: none) {
    /* Ensure the browser only intercepts vertical scroll touches, leaving
       the long-press timer uninterrupted by horizontal pan gestures. */
    .song-item {
        touch-action: pan-y;
    }
}

/* Same touch-action rule but keyed on any-pointer: coarse so it also fires
   on tablets that have an external keyboard/trackpad attached. Those devices
   report hover:hover (suppressing the rule above) even though their screen
   is still a touch surface. */
@media (any-pointer: coarse) {
    .song-item {
        touch-action: pan-y;
    }
}


/* =============================================================================
   3b. TABLET LANDSCAPE  (601px–1280px, touch primary, orientation: landscape)
   — When a touch tablet is held in landscape the viewport height drops to
     roughly 750–870px.  Panels at max-height: 88dvh can feel cramped; tighten
     to 82dvh and slim down inner padding slightly.
   — Non-touch devices in this range (e.g. a laptop window at ~900px) are
     mouse-driven and don't benefit from these height tweaks, so we gate on
     pointer: coarse.
   Source: main.css
============================================================================= */

@media (min-width: 601px) and (max-width: 1280px) and (orientation: landscape) and (pointer: coarse) {

    .side-panel {
        max-height: 82dvh;
    }

    .panel-content {
        padding: 16px 24px;
    }

    .panel-section {
        margin-bottom: 20px;
    }

    .settings-group {
        margin-bottom: 16px;
    }

    /* ── Metronome: compact layout so the panel fits in a short landscape viewport ── */
    .metronome-panel {
        width: min(300px, 90vw);
        max-height: calc(100dvh - 48px);
    }

    .metronome-visual {
        padding: 10px 16px 6px;
        gap: 8px;
    }

    .beat-dots {
        height: 26px;
    }

    .beat-dot {
        width: 24px;
        height: 24px;
    }

    .bpm-number {
        font-size: 38px;
        min-width: 70px;
    }

    .metronome-notice {
        padding: 2px 16px 0;
        font-size: 11px;
    }

    .metronome-controls {
        padding: 6px 16px 8px;
        gap: 6px;
    }

    .metronome-play-row {
        padding: 0 16px 10px;
    }

    .metronome-play-btn,
    .metronome-tap-btn {
        height: 38px;
    }

    .metronome-autoload-row {
        padding: 0 16px 8px;
    }
}


/* =============================================================================
   3c. TABLET PORTRAIT  (601px–1280px, touch primary, orientation: portrait)
   — In portrait the device is tall and narrow.  Icon tabs move to a fixed
     bottom nav bar (70px tall, touch-optimised).  The help button moves
     into the Settings panel; a drum button opens the metronome.
   — The main song-list sidebar becomes a wide (min(380px, 80vw)) floating
     panel with larger text/touch targets.  A light backdrop covers the rest
     so tapping outside closes the sidebar.
   — Deleted tab hidden from bottom nav (reduce clutter in narrower portrait).
   — Side panels narrowed (min(480px, 90vw)) and capped at 75dvh.
   — Metronome FAB hidden; drum button in bottom nav opens the panel, which
     floats above the nav bar anchored to the right edge.
   Source: main.css, sidebar.css, header.css, metronome.css
============================================================================= */

@media (min-width: 601px) and (max-width: 1280px) and (orientation: portrait) and (pointer: coarse) {

    /* Slightly taller header for touch comfort, but not oversized */
    :root {
        --nav-height: 58px;
    }



    /* Rounded bottom corners on the header bar (mirrors mobile bottom nav) */
    .top-navigation-bar {
        border-radius: 0 0 16px 16px;
        padding: 0 10px 0 10px !important;
    }

    /* Admin button moves to settings panel on tablet portrait */
    #admin-panel-btn {
        display: none !important;
    }

    /* ── Left sidebar: hidden — tabs live inside the floating sidebar instead ── */
    .left-small-sidebar {
        display: none !important;
    }

    /* ── Settings button: shown in header instead of left sidebar ── */
    #settings-header-btn {
        display: flex !important;
    }

    /* ── Zoom buttons: hidden — pinch-to-zoom is used instead ── */
    #zoom-out,
    #zoom-in {
        display: none !important;
    }

    /* ── Main container: no bottom nav, just safe-area padding ── */
    .main-container {
        position: relative;
        padding-bottom: env(safe-area-inset-bottom);
    }

    /* ── Main sidebar: floating panel with margins (not edge-to-edge) ──
       Capped at 75dvh — more room now that the bottom nav is gone. */
    .main-sidebar {
        position: absolute;
        top: 16px;
        left: 16px;
        bottom: auto;
        height: 75dvh;
        width: min(400px, 84vw);
        z-index: 56;
        border-radius: 18px;
        border: 1px solid var(--border);
        box-shadow: 0 8px 40px rgba(0, 0, 0, 0.22);
    }

    /* Grow/shrink from hamburger icon — clean, no wobble */
    .main-sidebar {
        transform: scale(1);
        transform-origin: top left;
        opacity: 1;
        transition: transform 0.18s ease,
                    opacity 0.18s ease;
        display: flex !important;
    }

    .main-container.sidebars-hidden .main-sidebar {
        transform: scale(0);
        transform-origin: top left;
        opacity: 0;
        transition: transform 0.15s ease,
                    opacity 0.12s ease;
    }

    /* ── Sidebar backdrop: tap outside to close ──
       Kept intentionally light so the lyrics area behind it is still
       legible (just not interactive). */
    .sidebar-backdrop {
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 52;
        background: rgba(0, 0, 0, 0.18);
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.25s ease;
    }

    .sidebar-backdrop.active {
        opacity: 1;
        pointer-events: auto;
    }

    /* ── Song list: comfortable touch targets without feeling oversized ── */
    .main-sidebar .song-item {
        padding: 8px 14px;
        min-height: 50px;
    }

    .main-sidebar .song-item.active {
        padding-left: 10px;
    }

    .main-sidebar .song-item .song-title {
        font-size: 14px;
    }

    .main-sidebar .song-author {
        font-size: 12px;
        margin-top: 2px;
    }

    /* ── Sidebar tab bar: replaces bottom nav on tablet portrait ── */
    .sidebar-tab-bar {
        display: flex;
        flex-direction: row;
        flex-shrink: 0;
        gap: 4px;
        padding: 8px;
        border-top: 1px solid var(--border);
    }

    .sidebar-tab-bar .tab-options {
        flex: 1;
        height: 48px;
        font-size: 17px;
        border-radius: 10px;
        flex-direction: column;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 3px;
        border: none;
        background: transparent;
        color: var(--text-secondary);
        cursor: pointer;
        transition: all 0.15s ease;
    }

    .sidebar-tab-bar .tab-options .sidebar-tab-label {
        font-size: 10px;
        font-weight: 600;
        letter-spacing: 0.02em;
    }

    .sidebar-tab-bar .tab-options.active {
        background: color-mix(in srgb, var(--accent) 14%, transparent);
        color: var(--accent);
    }

    .sidebar-tab-bar .tab-options:active {
        transform: scale(0.93);
    }

    /* ── Filter chips: bigger for touch ── */
    .filter-chip {
        padding: 6px 14px;
        font-size: 13px;
    }

    /* ── Sidebar header: slightly larger than desktop but not oversized ── */
    .search-box {
        height: 42px;
    }

    .search-box input {
        font-size: 14px;
    }

    .sidebar-header .add-song-btn {
        width: 42px;
        height: 42px;
        font-size: 15px;
    }

    /* ── Header nav buttons: comfortable touch targets without feeling oversized ── */
    .icon-btn {
        width: 42px;
        height: 42px;
        font-size: 17px;
        border-radius: 10px;
    }

    .top-navigation-bar {
        padding: 0 16px;
        gap: 4px;
    }

    .navigation-bar-left,
    .navigation-bar-right {
        gap: 4px;
    }

    /* Overflow dropdown: bigger rows + icons */
    .overflow-menu {
        width: 230px;
    }

    .overflow-row .icon-btn {
        width: 42px;
        height: 42px;
    }

    /* ── Tonality panel button: proportional to the reduced header size ── */
    #tonality-panel-btn {
        min-width: 78px;
        height: 38px;
        border-radius: 10px;
        font-size: 15px;
    }

    /* ── Settings: show Help section (replaces the bottom-nav help button) ── */
    .instructions-button-panel {
        display: block;
    }

    /* ── Side panels: narrower + height-capped ──
       88dvh on a 1024px-tall iPad ≈ 900px modal — too imposing.
       75dvh ≈ 768px is a comfortable ceiling. */
    .side-panel {
        width: min(480px, 90vw);
        max-height: 75dvh;
    }

    /* ── Metronome: FAB shown, panel anchored bottom-right (desktop style) ── */
    .metronome-panel {
        bottom: calc(24px + env(safe-area-inset-bottom));
        right: 24px;
        left: auto;
        width: min(320px, 90vw);
        transform: translateY(12px) scale(0.97);
        transform-origin: bottom right;
    }

    .metronome-panel.active {
        transform: translateY(0) scale(1);
        opacity: 1;
        pointer-events: all;
    }

        .add-song-btn{
        border-radius: 12px;
    }
}


/* =============================================================================
   4. FULL-SCREEN PANELS  (≤ 600px)
   — Side panels take the full screen (slide up from bottom).
   — No backdrop overlay needed since panel IS the full screen.
   — Panel internals get more compact padding.
   Source: main.css
============================================================================= */

@media (max-width: 600px) {

    /* Admin button moves to settings panel on mobile */
    #admin-panel-btn {
        display: none !important;
    }

    .side-panel {
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        height: 100%;
        max-height: 100%;
        border-radius: 0;

        /* Slide up from bottom */
        transform: translateY(100%);
        opacity: 1;
        visibility: hidden;
        transition: transform 0.32s cubic-bezier(0.32, 0, 0.15, 1),
            visibility 0.32s ease;
    }

    .side-panel.active {
        transform: translateY(0);
        opacity: 1;
        visibility: visible;
        box-shadow: none;
    }

    /* No backdrop — panel fills the whole screen */
    .panel-overlay {
        display: none !important;
    }

    .panel-header {
        padding: 16px 16px 12px 16px;
        padding-top: max(16px, env(safe-area-inset-top));
    }

    .panel-header h2 {
        font-size: 18px;
    }

    .panel-content {
        padding: 16px;
    }

    .panel-footer {
        padding: 14px 16px;
        padding-bottom: max(14px, env(safe-area-inset-bottom));
    }

    .panel-section {
        margin-bottom: 24px;
    }

    .color-grid {
        margin: 0;
        gap: 10px;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        justify-content: center;
    }

    .settings-dark-mode-row {
        margin: 0 0 16px;
    }

    .color-option {
        border-radius: 8px;
    }

    .file-upload-box {
        padding: 24px 16px;
    }

    .settings-group {
        margin-bottom: 18px;
    }

    .download-option-btn {
        padding: 16px;
        font-size: 14px;
        gap: 12px;
    }

    .download-option-btn i {
        font-size: 20px;
    }

    /* 16px prevents iOS auto-zoom on input focus */
    .panel-input {
        padding: 12px 14px;
        font-size: 16px;
    }

    .btn {
        padding: 13px 16px;
        font-size: 15px;
    }

    .key-mode-row {
        gap: 8px;
    }

    .bpm-time-row {
        gap: 8px;
    }
}


/* =============================================================================
   5. MOBILE BOTTOM NAV  (≤ 600px)
   — The left-small-sidebar becomes a fixed horizontal bar at the bottom.
   — The main-sidebar goes full-width, overlaying the lyrics area.
   — Overflow menu (three dots) appears in the header.
   — Most toolbar buttons hidden (accessible via overflow menu instead).
   — Lyrics get slightly smaller font and tighter padding.
   — Keep in sync with responsive.js isMobileNav() / hideSidebarAfterSongSelect()
     (auto-close on song pick: mobile ≤600 and tablet portrait only).
   Source: main.css, header.css, sidebar.css, lyrics.css
============================================================================= */

@media (max-width: 600px) {


    /* ── Bottom nav bar ── */

    /* Turn the left sidebar into a fixed horizontal bottom bar */
    .left-small-sidebar {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        height: 64px;
        flex-direction: row;
        justify-content: space-around;
        align-items: center;
        padding: 0 8px;
        padding-bottom: env(safe-area-inset-bottom);
        border-right: none;
        border-top: 1px solid var(--border);
        border-radius: 16px 16px 0 0;
        background: var(--surface);
        z-index: 205;
        gap: 0;
        overflow: visible;
        overflow-y: visible;
        box-shadow: 0 -1px 0 var(--border), 0 -4px 20px rgba(0, 0, 0, 0.06);
    }

    .left-sidebar-spacer {
        display: none;
    }

    /* Access sits at the far right of the bottom nav */
    .left-small-sidebar .tab-options--access {
        order: 100;
    }

   .left-small-sidebar .tab-options {
        margin-top: 0 !important;
        flex: 1;
        max-width: 72px;
        height: 48px;
        font-size: 18px;
        border-radius: 12px;
        flex-direction: column;
        gap: 3px;
        padding: 0 4px;
        transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
    }

    .left-small-sidebar .tab-options--access {
        color: #c2410c;
        background: color-mix(in srgb, #f59e0b 18%, transparent);
    }

    .left-small-sidebar .tab-options--access.is-pending {
        color: var(--text-secondary);
        background: color-mix(in srgb, var(--accent) 12%, transparent);
    }

    .left-small-sidebar .tab-options .nav-label {
        display: block;
        font-size: 10px;
        font-weight: 600;
        letter-spacing: 0.02em;
    }

    .left-small-sidebar .tab-options.active {
        background: color-mix(in srgb, var(--accent) 14%, transparent);
        color: var(--accent);
    }

    .left-small-sidebar .tab-options:active {
        transform: scale(0.93);
    }

    /* Bottom nav is ALWAYS visible — even when sidebars-hidden is set.
       The toggle only controls the main-sidebar, not the bottom nav. */
    .main-container.sidebars-hidden .left-small-sidebar {
        display: flex !important;
    }

    /* ── Main sidebar: full-width overlay above lyrics ── */

    /* Push the main container up so its content isn't behind the bottom nav */
    .main-container {
        position: relative;
        padding-bottom: calc(64px + env(safe-area-inset-bottom));
    }

    /* main-sidebar covers the full viewport (including header) above the bottom nav */
    .main-sidebar {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: calc(64px + env(safe-area-inset-bottom));
        width: 100%;
        z-index: 110;
        border-right: none;
        background: var(--surface);
    }

    /* Slide sidebar in/out from left */
    .main-sidebar {
        transform: translateX(0);
        opacity: 1;
        transition: transform 0.26s cubic-bezier(0.16, 1, 0.3, 1),
                    opacity 0.26s cubic-bezier(0.16, 1, 0.3, 1),
                    filter 0.26s cubic-bezier(0.16, 1, 0.3, 1);
        display: flex !important;
    }

    .main-container.sidebars-hidden .main-sidebar {
        transform: translateX(-100%);
        opacity: 0.15;
        pointer-events: none;
        transition: transform 0.17s cubic-bezier(0.4, 0, 1, 1),
                    opacity 0.1s cubic-bezier(0.4, 0, 1, 1);
    }

    /* ── Header: refined for mobile ── */

    #overflow-menu-btn {
        display: flex;
    }

    /* These buttons move into the overflow (three-dot) menu on mobile */
.navigation-bar-right .divider,
#toggle-chords,
#simplify-chords,
#chord-panel-toggle-btn,
#zoom-out,
#zoom-in,
#download-btn,
#save-btn,
#group-btn {
    display: none;
}

    .top-navigation-bar {
        overflow: visible;
        padding: 0 14px;
    }

    /* Nav buttons: larger tap targets */
    .navigation-bar-right .icon-btn,
    .navigation-bar-left .icon-btn {
        width: 40px;
        height: 40px;
    }

    /* ── Lyrics: comfortable reading area ── */

    .lyrics-inner {
        padding: 16px 16px;
    }

    /* ── Section color lines: same border-left as desktop, reduced padding ── */
    .lyric-line--marked {
        padding-left: 10px;
    }

    /* ── Video section: match lyrics-inner horizontal padding ── */
    #song-video-container {
        padding: 0 16px 40px;
    }

    .song-title-main {
        font-size: 22px;
        font-weight: 700;
        white-space: normal;
        word-break: break-word;
        line-height: 1.25;
    }

    .song-subtitle {
        font-size: 13px;
        margin-top: 3px;
        margin-bottom: 7px;
        white-space: normal;
        word-break: break-word;
        color: var(--text-tertiary);
    }

    /* Invisible on mobile — .lyrics-header border-bottom is the visual divider */
    .lyrics-section-divider {
        border-bottom: none;
        margin-bottom: 20px;
    }

    .version-badges-row {
        margin-bottom: 20px;
    }

    #lyrics-display {
        font-size: calc(var(--font-size-songs) * 0.82);
    }

    #lyrics-display .chord {
        font-size: calc(var(--font-size-songs) * 0.82);
    }

    /* Meta badges: slightly smaller on mobile */
    .meta-badge {
        font-size: 12px;
        padding: 2px 7px;
    }

    .hide-on-mobile {
        display: none !important;
    }

    .mobile-only {
        display: flex !important;
    }

    #collection-indicator {
        font-size: 11px;
        font-weight: 500;
        color: var(--text-tertiary);
        margin-bottom: 2px;
    }

    /* Show instructions panel in settings for smaller devices */
    .instructions-button-panel {
        display: initial;
    }

    /* ── Song list: premium touch-optimised rows ── */

    /* Search bar: taller, more prominent */
    .search-box {
        height: 42px;
        border-radius: 14px;
    }

    .sidebar-header {
        padding: 14px 12px 10px;
    }

    .song-list {
        padding: 4px 8px 80px;
    }

    /* Song items: generous touch targets with clear hierarchy */
    .song-item {
        padding: 11px 14px;
        min-height: 58px;
        border-radius: 12px;
        margin-bottom: 2px;
    }

    /* Active song: compensate left padding so text position stays consistent */
    .song-item.active {
        padding-left: 11px;
    }

    .song-item .song-title {
        font-size: 15px;
        font-weight: 600;
        letter-spacing: -0.1px;
    }

    .song-author {
        font-size: 12px;
        margin-top: 2px;
    }

    /* ── Lyrics header: redesigned for mobile ── */

    .lyrics-header {
        padding-bottom: 4px;
        border-bottom: 2px solid var(--border-light);
        margin-bottom: 0;
    }

    .lyrics-header-inner {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }

    /* ── Overflow: bottom sheet ── */
    .overflow-backdrop {
        display: block;
    }

    .overflow-menu {
        /* Override absolute positioning → fixed bottom sheet */
        position: fixed;
        top: auto;
        right: 0;
        bottom: 0;
        left: 0;
        width: 100%;
        border-radius: 20px 20px 0 0;
        /* Extra bottom padding so content stays above the bottom nav */
        padding: 6px 0 calc(64px + env(safe-area-inset-bottom) + 8px);
        z-index: 200;
        border: 1px solid var(--border);
        border-bottom: none;

        /* Vertical layout */
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 0;

        /* Slide up instead of fade-in */
        transform: translateY(100%);
        opacity: 1;
        visibility: hidden;
        transition: transform 0.3s cubic-bezier(0.32, 0, 0.15, 1),
                    visibility 0.3s ease;
        box-shadow: none;
    }

    .overflow-menu.open {
        transform: translateY(0);
        opacity: 1;
        visibility: visible;
        box-shadow: 0 -8px 40px rgba(0, 0, 0, 0.18);
    }

    /* Drag handle bar at top of sheet */
    .overflow-drag-handle {
        display: block;
        width: 36px;
        height: 4px;
        border-radius: 2px;
        background: var(--border);
        margin: 4px auto 10px;
        flex-shrink: 0;
    }

    /* Section labels: visible in bottom sheet */
    .overflow-label {
        display: block;
        font-size: 11px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        color: var(--text-tertiary);
        padding: 6px 20px 2px;
    }

    /* Divider between sections */
    .overflow-divider {
        display: block;
        margin: 4px 0;
    }

    /* Rows: stack vertically */
    .overflow-row {
        display: flex;
        flex-direction: column;
        padding: 0;
        gap: 0;
    }

    /* Each button: full-width row with icon on left, label on right */
    .overflow-row .icon-btn {
        width: 100%;
        height: 50px;
        justify-content: flex-start;
        padding: 0 20px;
        gap: 16px;
        border-radius: 0;
        font-size: 18px;
    }

    /* Disabled/desktop-only button in bottom sheet */
    .overflow-desktop-only {
        opacity: 0.4;
        pointer-events: none;
    }

    /* Button labels: visible in bottom sheet */
    .overflow-btn-label {
        display: block;
        font-size: 15px;
        font-weight: 500;
        color: var(--text-primary);
        font-family: var(--font-sans);
    }

    .overflow-row .icon-btn.active .overflow-btn-label {
        color: var(--accent);
    }

    

    /* Hide desktop badges on mobile — shown as plain text in author line */
    .lyrics-header-inner .song-meta-badges {
        display: none;
    }

    /* Show inline meta text appended to author */
    .subtitle-meta-inline {
        display: inline;
    }
}


/* =============================================================================
   6. VERY SMALL PHONES  (≤ 380px)
   — Extra tightening for the smallest devices.
   Source: main.css
============================================================================= */

@media (max-width: 380px) {

    .panel-header h2 {
        font-size: 16px;
    }

    .panel-content {
        padding: 12px;
    }

    .panel-footer {
        padding: 12px;
        padding-bottom: max(12px, env(safe-area-inset-bottom));
    }

    .color-grid {
        gap: 6px;
        grid-template-columns: repeat(4, minmax(0, 44px));
        justify-content: center;
    }
}


/* =============================================================================
   7. LANDSCAPE PHONE  (height ≤ 500px, width ≤ 900px, orientation: landscape)
   — Overrides the full-screen panel rules from Sections 4/5.
   — On landscape phones, full-screen panels are too cramped vertically, so
     we switch back to the centered modal style (like tablet).
   — The height ≤ 500px guard ensures this only fires for phones in landscape;
     tablets in landscape have a viewport height of 750px or more and are
     unaffected.
   — orientation: landscape is added as an explicit guard so this never
     accidentally fires for an unusual portrait device with a small screen.
   Source: main.css
============================================================================= */

@media (max-height: 500px) and (max-width: 900px) and (orientation: landscape) {

    .side-panel {
        top: 50%;
        left: 50%;
        right: auto;
        bottom: auto;
        width: min(560px, 92vw);
        height: auto;
        max-height: 94dvh;
        border-radius: 14px;
        transform: translate(-50%, -50%) scale(0.95);
        opacity: 0;
        visibility: hidden;
    }

    .side-panel.active {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
        visibility: visible;
    }

    /* Re-enable backdrop for the centered modal */
    .panel-overlay {
        display: block !important;
        background: rgba(0, 0, 0, 0.5);
    }

    .panel-content {
        padding: 12px 16px;
    }

    .panel-section {
        margin-bottom: 16px;
    }

    .settings-group {
        margin-bottom: 14px;
    }
}


/* =============================================================================
   8. PDF EXPORT PANEL — RESPONSIVE
   — Desktop (> 1280px): settings sidebar on the left, preview fills the right.
   — Tablet (≤ 1280px): settings collapse to a slide-in drawer; preview fills
     the full panel.  A floating gear FAB (top-right) opens/closes the drawer.
     Threshold matches the main breakpoint change (was 1100px).
   — Mobile (≤ 600px): the whole PDF panel goes full-screen. The settings drawer
     stays at partial width (82vw max) so the PDF is still partially visible.
     Buttons shrink progressively so text stays visible as long as possible.
   Source: download.css
============================================================================= */

/* ── Tablet (≤ 1280px): settings become a slide-in drawer ── */
@media (max-width: 1280px) {

    /* Full-screen panel — no surrounding margins or rounded corners */
    .pdf-fullpanel {
        width: 100%;
        max-width: 100%;
        height: 100dvh;
        max-height: 100dvh;
        border-radius: 0;
    }

    /* Body: single column so preview fills the full width */
    .pdf-fullpanel-body {
        grid-template-columns: 1fr;
    }

    /* Settings drawer slides in from the left */
    .pdf-fullpanel-settings {
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 320px;
        max-width: 82vw;
        z-index: 10;
        background: var(--surface);
        border-right: 1px solid var(--border);
        transform: translateX(-100%);
        transition: transform 0.28s cubic-bezier(0.32, 0, 0.15, 1),
                    box-shadow 0.28s ease;
    }

    .pdf-fullpanel-settings.settings-open {
        transform: translateX(0);
        box-shadow: 4px 0 28px rgba(0, 0, 0, 0.18);
    }

    /* Backdrop: fades in behind the drawer, covering the preview */
    .pdf-settings-backdrop {
        display: block;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.28s ease;
    }

    .pdf-settings-backdrop.active {
        opacity: 1;
        pointer-events: auto;
    }

    /* Show the floating settings FAB */
    .pdf-settings-fab {
        display: flex;
    }

    /* Allow title text to shrink + truncate if needed */
    .pdf-fullpanel-title {
        min-width: 0;
        overflow: hidden;
    }

    .pdf-fullpanel-title h3 {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    /* Actions keep their natural size — buttons never shrink */
    .pdf-fullpanel-actions {
        flex-shrink: 0;
    }

    /* Add song to collection modal */
    .add-song-to-col-modal {
        width: min(440px, 85vw);
    }
}

/* ── Mobile (≤ 600px): PDF panel fills the entire screen ── */
@media (max-width: 600px) {

    .pdf-fullpanel {
      width: 100%;
        max-width: 100%;
        height: 100dvh;
        max-height: 100dvh;
        border-radius: 0;
    }

    /* Settings drawer stays at partial width — part of the PDF peeks through */
    /* (max-width: 82vw is already set above, so no full-width override here) */

    /* Tighter preview padding */
    .pdf-fullpanel-preview {
        padding: 14px;
    }

    /* Remove the title label — it's obvious this is the PDF panel */
    .pdf-fullpanel-title h3 {
        display: none;
    }

    /* Shrink header buttons to keep text visible at smaller sizes */
    .pdf-fullpanel-actions .btn {
        padding: 9px 14px;
        font-size: 13px;
        gap: 6px;
    }

    .pdf-fullpanel-header {
        padding: 10px 14px;
        gap: 8px;
    }

    /* Add song to collection modal — slides up from bottom */
    .add-song-to-col-overlay {
        align-items: flex-end;
    }

    .add-song-to-col-modal {
        width: 100%;
        height: 85dvh;
        max-height: 85dvh;
        border-radius: 16px 16px 0 0;
        transform: translateY(20px);
    }

    .add-song-to-col-overlay.active .add-song-to-col-modal {
        transform: translateY(0);
    }
}

/* ── Very small phones (≤ 420px): further button compression ── */
@media (max-width: 420px) {

    .pdf-fullpanel-actions .btn {
        padding: 7px 10px;
        font-size: 12px;
        gap: 5px;
    }

    .pdf-fullpanel-actions {
        gap: 6px;
    }

    .pdf-fullpanel-header {
        padding: 8px 10px;
        gap: 6px;
    }

    /* Back arrow button: slightly smaller on tiny screens */
    .pdf-fullpanel-title .icon-btn {
        width: 32px;
        height: 32px;
        font-size: 14px;
    }
}

/* ── Landscape phone: compact PDF panel ── */
@media (max-height: 500px) and (max-width: 900px) and (orientation: landscape) {

    .pdf-fullpanel {
        width: 100%;
        max-width: 100%;
        height: 100dvh;
        max-height: 100dvh;
        border-radius: 0;
    }

    .pdf-fullpanel-settings {
        width: 280px;
    }

    .pdf-fullpanel-preview {
        padding: 10px;
    }

    /* Add song to collection modal — compact centered */
    .add-song-to-col-overlay {
        align-items: center;
    }

    .add-song-to-col-modal {
        width: min(500px, 90vw);
        height: 70dvh;
        max-height: 90dvh;
        border-radius: 14px;
        transform: scale(0.96);
    }

    .add-song-to-col-overlay.active .add-song-to-col-modal {
        transform: scale(1);
    }

    .add-song-to-col-header {
        padding: 12px 14px 10px 16px;
    }

    .add-song-to-col-search-row {
        padding: 8px 12px;
    }
}

/* =====================================================================
   TOUCH DEVICES — hide all scrollbars
   On phones and tablets users scroll by dragging; the scrollbar track
   is visual clutter and can't be grabbed with a finger anyway.
   (hover: none) + (pointer: coarse) = any primary touch screen.
   ===================================================================== */
@media (hover: none) and (pointer: coarse) {
    /* Firefox */
    * {
        scrollbar-width: none;
    }

    /* Chrome / Safari / Edge */
    *::-webkit-scrollbar {
        display: none;
    }
}

/* =============================================================================
   CHORD DIAGRAMS — RESPONSIVE
   — Desktop / landscape tablet (> 900px): inline panel to the right of lyrics.
   — Portrait tablet (601–900px): centered floating modal (like settings panels).
   — Mobile phone (≤ 600px): fixed-height bottom sheet that slides up.
   Source: chord-diagrams.css
============================================================================= */

/* ── Shared: remove chord panel from the lyrics flex row on small screens ── */
@media (max-width: 900px) {
    .lyrics-body-layout {
        display: block;
    }
}

/* ── Portrait tablet (601px – 900px): centered floating modal ── */
@media (min-width: 601px) and (max-width: 900px) {

    #chord-panel {
        display: flex !important; /* override display:none — visibility via opacity/scale */
        position: fixed;
        top: 50%;
        left: 50%;
        width: min(520px, 90vw) !important;
        height: 75dvh;
        margin-left: 0;
        padding-top: 0;
        border-radius: 16px;
        background: var(--surface-elevated);
        border: 1px solid var(--border-light);
        box-shadow: 0 8px 48px rgba(0, 0, 0, 0.22);
        z-index: 150;
        gap: 0;
        overflow: hidden;
        /* Hidden: scaled down + invisible */
        transform: translate(-50%, -50%) scale(0.95);
        opacity: 0;
        visibility: hidden;
        transition: transform 0.3s cubic-bezier(0.32, 0, 0.15, 1),
                    opacity 0.25s ease,
                    visibility 0.25s ease;
    }

    #chord-panel.open {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
        visibility: visible;
    }

    /* Toggle pill: full width with sheet padding */
    .chord-view-switch {
        margin: 8px 12px;
        width: auto;
        opacity: 1;
    }

    /* Scrollable card area */
    .chord-panel-content {
        padding: 0 12px 16px;
        max-height: none;
        flex: 1;
        overflow-y: auto;
    }

    /* Guitar: 2 columns on tablet (wider cards = bigger diagrams) */
    .chord-panel-content .chord-card {
        width: calc(50% - 4px);
    }

    /* Guitar SVG: larger on tablet */
    .chord-panel-content .guitar-svg {
        max-width: 150px;
    }

    /* Piano: 1 column on tablet (full-width = larger keyboard) */
    .chord-panel-content.piano-mode .chord-card {
        width: 100%;
    }
}

/* ── Mobile phone (≤ 600px): fixed-height bottom sheet ── */
@media (max-width: 600px) {

    #chord-panel {
        display: flex !important; /* override display:none — visibility via transform */
        position: fixed;
        top: auto;    /* reset sticky top:24px from desktop .chord-panel rule */
        left: 0;
        right: 0;
        bottom: 0;
        width: 100% !important;
        max-width: 100%;
        height: 65dvh; /* fixed height — doesn't grow with chord count */
        max-height: none;
        margin-left: 0;
        padding-top: 0;
        align-self: auto;
        border-radius: 20px 20px 0 0;
        background: var(--surface-elevated);
        border: 1px solid var(--border-light);
        border-bottom: none;
        box-shadow: 0 -4px 32px rgba(0, 0, 0, 0.14);
        z-index: 150;
        gap: 0;
        overflow: hidden; /* clips toggle pill to rounded corners */
        /* Push far enough below viewport that the box-shadow is also hidden */
        transform: translateY(calc(100% + 40px));
        transition: transform 0.3s cubic-bezier(0.32, 0, 0.15, 1);
    }

    #chord-panel.open {
        transform: translateY(0);
    }

    /* Show the drag handle + close button */
    .chord-panel-mobile-header {
        display: flex;
    }

    /* Toggle pill: contained within sheet padding */
    .chord-view-switch {
        margin: 4px 12px 8px;
        width: auto;
        opacity: 1;
    }

    /* Scrollable card area fills remaining fixed height */
    .chord-panel-content {
        padding: 0 12px 16px;
        max-height: none;
        flex: 1;
        overflow-y: auto;
    }
}