/* ============================================================
   DESKTOP HOME REDESIGN — Step 1
   1) Auto-hide (icon-rail) sidebar that expands on hover
   2) Full-width New Releases hero carousel on desktop

   Scope: >= 769px only. Mobile (<=768px) is untouched.
   Loaded AFTER the bundles so these rules win.
   ============================================================ */

/* Hidden by default (mobile) — js/home-dashboard.js only relocates the
   real widget nodes into these containers when isDesktop() is true, so
   keep this collapsed everywhere except >=769px below. */
.csDesktopWidgets {
    display: none;
}

/* Home "New Releases" preview — desktop only, same reasoning as above.
   Mobile Home already previews releases via .csHeroCarousel + the
   New Releases card in the explore grid, so the mobile UI stays as-is.
   (To also show it on mobile later, delete this one rule.) */
.csHomeReleases {
    display: none;
}

@media (min-width: 769px) {

    /* ── 1. AUTO-HIDE SIDEBAR ──────────────────────────────── */

    :root {
        --cs-rail-w: 76px;    /* collapsed width */
        --cs-rail-open-w: 260px; /* expanded width */
    }

    .sidebar {
        width: var(--cs-rail-w);
        padding: 1.2rem 0.6rem;
        overflow-x: hidden;
        overflow-y: hidden;
        transition: width 0.26s cubic-bezier(0.4, 0, 0.2, 1),
                    padding 0.26s cubic-bezier(0.4, 0, 0.2, 1),
                    box-shadow 0.26s ease;
        will-change: width;
    }

    /* Expanded on hover / keyboard focus — overlays content, no reflow */
    .sidebar:hover,
    .sidebar:focus-within,
    .sidebar.cs-rail-open {
        width: var(--cs-rail-open-w);
        padding: 2rem 1.5rem;
        overflow-y: auto;
        box-shadow: 8px 0 40px rgba(0, 0, 0, 0.55),
                    4px 0 24px rgba(217, 70, 239, 0.28);
    }

    /* Main content sits next to the COLLAPSED rail permanently,
       so expanding the sidebar never shifts the page. */
    .main-content {
        margin-left: var(--cs-rail-w);
        width: calc(100% - var(--cs-rail-w));
        max-width: calc(100% - var(--cs-rail-w));
        transition: none;
    }

    /* --- Collapsed state: hide every text label --- */
    .sidebar:not(:hover):not(:focus-within):not(.cs-rail-open) .tagline,
    .sidebar:not(:hover):not(:focus-within):not(.cs-rail-open) .sidebar-search-wrap,
    .sidebar:not(:hover):not(:focus-within):not(.cs-rail-open) .csLockBadge,
    .sidebar:not(:hover):not(:focus-within):not(.cs-rail-open) .sidebar-user-email,
    .sidebar:not(:hover):not(:focus-within):not(.cs-rail-open) #sidebarThemeLabel,
    .sidebar:not(:hover):not(:focus-within):not(.cs-rail-open) .nav-link > span:not(.nav-icon),
    .sidebar:not(:hover):not(:focus-within):not(.cs-rail-open) .sidebar-login-btn > span:last-child,
    .sidebar:not(:hover):not(:focus-within):not(.cs-rail-open) .sidebar-logout-btn > span:last-child {
        opacity: 0;
        width: 0;
        overflow: hidden;
        white-space: nowrap;
        pointer-events: none;
        display: none;
    }

    /* Collapsed: centre the icons */
    .sidebar:not(:hover):not(:focus-within):not(.cs-rail-open) .nav-link,
    .sidebar:not(:hover):not(:focus-within):not(.cs-rail-open) .sidebar-login-btn,
    .sidebar:not(:hover):not(:focus-within):not(.cs-rail-open) .sidebar-logout-btn,
    .sidebar:not(:hover):not(:focus-within):not(.cs-rail-open) #sidebarThemeBtn {
        justify-content: center;
        padding-left: 0;
        padding-right: 0;
        gap: 0;
    }

    .sidebar:not(:hover):not(:focus-within):not(.cs-rail-open) .logo-container {
        margin-bottom: 1.2rem;
        padding-bottom: 0.9rem;
    }

    .sidebar:not(:hover):not(:focus-within):not(.cs-rail-open) .logo-img {
        width: 46px;
    }

    .sidebar:not(:hover):not(:focus-within):not(.cs-rail-open) .sidebar-auth {
        padding: 0.8rem 0.2rem;
    }

    .logo-img {
        transition: width 0.26s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .nav-icon {
        flex-shrink: 0;
        width: 22px;
        text-align: center;
    }

    /* Tooltip for collapsed icons */
    .sidebar .nav-link { position: relative; overflow: visible; }

    .sidebar:not(:hover):not(:focus-within):not(.cs-rail-open) .nav-link::after {
        content: attr(data-tip);
        position: absolute;
        left: calc(100% + 14px);
        top: 50%;
        transform: translateY(-50%) translateX(-6px);
        background: rgba(24, 10, 40, 0.97);
        border: 1px solid rgba(217, 70, 239, 0.4);
        color: #f5e9ff;
        font-size: 0.8rem;
        font-weight: 500;
        padding: 0.4rem 0.7rem;
        border-radius: 8px;
        white-space: nowrap;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.18s ease, transform 0.18s ease;
        z-index: 1200;
    }

    .sidebar:not(:hover):not(:focus-within):not(.cs-rail-open) .nav-link:hover::after {
        opacity: 1;
        transform: translateY(-50%) translateX(0);
    }

    /* Active pill stays visible in collapsed rail */
    .sidebar:not(:hover):not(:focus-within):not(.cs-rail-open) .nav-link.active {
        background: linear-gradient(135deg, rgba(217, 70, 239, 0.28), rgba(239, 68, 68, 0.14));
    }


    /* ── 2. DESKTOP HERO CAROUSEL ──────────────────────────── */

    .csHeroCarousel {
        display: block;
        margin: 0 0 2.2rem;
    }

    .csHero-track {
        position: relative;
        width: 100%;
        height: clamp(260px, 26vw, 360px);
        border-radius: 22px;
        overflow: hidden;
        background: #150a26;
        border: 1px solid rgba(217, 70, 239, 0.22);
        box-shadow: 0 18px 50px rgba(0, 0, 0, 0.5);
    }

    .csHero-slide {
        position: absolute;
        inset: 0;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.5s ease;
    }

    .csHero-slide.csHero-slide--active {
        opacity: 1;
        visibility: visible;
    }

    .csHero-bg {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
    }

    /* Blurred copy fills the whole banner */
    .csHero-bg--blur {
        object-fit: cover;
        object-position: center;
        filter: blur(26px) brightness(0.55) saturate(1.2);
        transform: scale(1.15);
    }

    /* Sharp thumbnail anchored to the right half, like the reference */
    .csHero-bg--sharp {
        left: auto;
        right: 0;
        width: 58%;
        object-fit: cover;
        object-position: center;
        -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 34%, #000 100%);
        mask-image: linear-gradient(90deg, transparent 0%, #000 34%, #000 100%);
    }

    .csHero-bg--sharp.csHero-bg--fill {
        object-fit: cover;
    }

    .csHero-overlay {
        position: absolute;
        inset: 0;
        background: linear-gradient(90deg,
            rgba(12, 4, 24, 0.96) 0%,
            rgba(12, 4, 24, 0.86) 34%,
            rgba(12, 4, 24, 0.35) 62%,
            rgba(12, 4, 24, 0.15) 100%);
    }

    .csHero-content {
        position: absolute;
        left: clamp(2rem, 4vw, 3.5rem);
        top: 50%;
        transform: translateY(-50%);
        max-width: 48%;
        text-align: left;
        z-index: 2;
    }

    .csHero-title {
        font-family: 'Space Grotesk', sans-serif;
        font-size: clamp(1.9rem, 3vw, 2.9rem);
        font-weight: 700;
        line-height: 1.1;
        margin: 0 0 0.45rem;
        color: #fff;
        text-shadow: 0 4px 20px rgba(0, 0, 0, 0.6);
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .csHero-artist {
        font-size: 1rem;
        color: rgba(255, 255, 255, 0.72);
        margin: 0 0 0.9rem;
    }

    .csHero-tags {
        display: flex;
        gap: 0.5rem;
        flex-wrap: wrap;
        margin-bottom: 1.2rem;
    }

    .csHero-tag {
        display: inline-flex;
        align-items: center;
        gap: 0.3rem;
        padding: 0.32rem 0.75rem;
        border-radius: 999px;
        font-size: 0.78rem;
        font-weight: 600;
        color: #f3e5ff;
        background: rgba(217, 70, 239, 0.18);
        border: 1px solid rgba(217, 70, 239, 0.35);
        backdrop-filter: blur(6px);
    }

    .csHero-actions {
        display: flex;
        gap: 0.7rem;
        align-items: center;
    }

    .csHero-btn {
        display: inline-flex;
        align-items: center;
        gap: 0.4rem;
        padding: 0.7rem 1.5rem;
        border-radius: 999px;
        font-family: 'Outfit', sans-serif;
        font-size: 0.92rem;
        font-weight: 600;
        cursor: pointer;
        border: 1.5px solid transparent;
        transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
    }

    .csHero-btn--primary {
        background: linear-gradient(135deg, #d946ef, #a855f7);
        color: #fff;
        box-shadow: 0 8px 26px rgba(217, 70, 239, 0.45);
    }

    .csHero-btn--primary:hover {
        transform: translateY(-2px);
        box-shadow: 0 12px 32px rgba(217, 70, 239, 0.6);
    }

    .csHero-btn--outline {
        background: rgba(255, 255, 255, 0.08);
        border-color: rgba(255, 255, 255, 0.28);
        color: #fff;
        backdrop-filter: blur(8px);
    }

    .csHero-btn--outline:hover {
        background: rgba(255, 255, 255, 0.16);
        transform: translateY(-2px);
    }

    .csHero-btn--faved {
        border-color: rgba(239, 68, 68, 0.7);
        color: #ff8a8a;
    }

    /* Arrows */
    .csHero-arrow {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: 42px;
        height: 42px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        background: rgba(18, 8, 32, 0.72);
        border: 1px solid rgba(255, 255, 255, 0.2);
        color: #fff;
        cursor: pointer;
        z-index: 3;
        backdrop-filter: blur(10px);
        opacity: 0;
        transition: opacity 0.25s ease, background 0.25s ease, transform 0.25s ease;
    }

    .csHero-track:hover .csHero-arrow { opacity: 1; }

    .csHero-arrow:hover {
        background: rgba(217, 70, 239, 0.75);
        transform: translateY(-50%) scale(1.08);
    }

    .csHero-arrow--prev { left: 16px; }
    .csHero-arrow--next { right: 16px; }

    /* Dots */
    .csHero-dots {
        position: absolute;
        bottom: 16px;
        left: 50%;
        transform: translateX(-50%);
        display: flex;
        gap: 7px;
        z-index: 3;
    }

    .csHero-dot {
        width: 8px;
        height: 8px;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.32);
        cursor: pointer;
        transition: width 0.25s ease, background 0.25s ease;
    }

    .csHero-dot--active {
        width: 24px;
        background: linear-gradient(90deg, #d946ef, #a855f7);
    }


    /* ── 3. DESKTOP HOME WIDGETS — Step 2 ──────────────────── */
    /* Tools for Practice / Continue Learning / Challenges, below the
       hero carousel. Each is its own self-contained ".csDW-card" —
       dark flat panel, icon+title+subtitle header, "View All" link —
       per the reference screenshots, not the old gradient/glow
       .csChallengeBox look from mobile. All three share the exact
       same card shell so the row reads as one cohesive system. */

    /* Three INDEPENDENT stacked sections (Tools / Continue Learning /
       Challenges) — not one shared 3-column panel. Same DOM, same IDs,
       same JS relocation targets; layout only. Each .csDW-col is a
       full-width band with its own container, heading and spacing. */
    .csDesktopWidgets {
        display: flex;
        flex-direction: column;
        gap: 2rem;
        margin: 0 0 2.6rem;
    }

    .csDW-col {
        display: block;
        min-width: 0;
    }

    /* Per-section accent — same ChordStar purple/magenta family, shifted
       just enough that the three bands read as separate destinations. */
    .csDW-tools      { --csDW-accent: rgba(217, 70, 239, 0.55); }
    .csDW-learning   { --csDW-accent: rgba(168, 85, 247, 0.55); }
    .csDW-challenges { --csDW-accent: rgba(244, 114, 182, 0.55); }

    /* ── Shared card shell ── */
    .csDW-card {
        background: linear-gradient(180deg, #14101f 0%, #100c19 100%);
        border: 1px solid rgba(255, 255, 255, 0.07);
        border-radius: 20px;
        padding: 1.5rem 1.7rem 1.7rem;
        position: relative;
        overflow: hidden;
        min-height: 96px;
    }

    /* Faint magenta glow line along the bottom edge, like the reference */
    .csDW-card::after {
        content: "";
        position: absolute;
        left: 0; right: 0; bottom: 0;
        height: 2px;
        background: linear-gradient(90deg,
            transparent 0%,
            var(--csDW-accent, rgba(217, 70, 239, 0.55)) 50%,
            transparent 100%);
        opacity: 0.6;
    }

    /* Section header: own heading + rule, so each band has a clear
       hierarchy of its own instead of floating inside a shared row. */
    .csDW-cardHead {
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
        gap: 1rem;
        flex-wrap: wrap;
        margin: 0 0 1.3rem;
        padding: 0 0 0.9rem;
        border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    }

    .csDW-cardTitle {
        font-family: 'Space Grotesk', sans-serif;
        font-size: 1.22rem;
        font-weight: 700;
        color: #fff;
        margin: 0 0 0.28rem;
        letter-spacing: -0.01em;
    }

    .csDW-cardSub {
        font-size: 0.78rem;
        color: rgba(255, 255, 255, 0.42);
        margin: 0;
    }

    .csDW-viewAll {
        font-size: 0.8rem;
        font-weight: 600;
        color: #d946ef;
        text-decoration: none;
        white-space: nowrap;
        transition: color 0.2s ease;
    }

    .csDW-viewAll:hover {
        color: #f0abfc;
    }

    /* Continue Learning / Challenges body — same relocated real content
       as before, just re-skinned to sit flat inside .csDW-card instead
       of its own separate gradient box. */
    .csDW-cardBody:empty {
        display: none;
    }

    .csDW-cardBody .dc-card,
    .csDW-cardBody .cm-challenge-card,
    .csDW-cardBody .clr-card,
    .csDW-cardBody .wg-widget {
        background: none;
        border: none;
        border-radius: 0;
        box-shadow: none;
        margin-bottom: 0;
        padding-left: 0;
        padding-right: 0;
    }

    .csDW-cardBody .cm-challenge-card,
    .csDW-cardBody .wg-widget {
        border-top: 1px solid rgba(255, 255, 255, 0.07);
        margin-top: 0.9rem;
        padding-top: 0.9rem;
    }

    /* ── Tools for Practice — flat colored icon tiles. Now a full-width
       band, so an auto-fitting grid instead of a squeezed flex row. ── */
    .csDW-toolsRow {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
        gap: 0.7rem;
    }

    .csDW-toolItem {
        min-width: 0;
        display: flex;
        align-items: center;
        gap: 0.6rem;
        padding: 0.4rem;
        border-radius: 12px;
        cursor: pointer;
        transition: background 0.15s ease, transform 0.15s ease;
    }

    .csDW-toolItem:hover {
        background: rgba(255, 255, 255, 0.035);
        transform: translateY(-1px);
    }

    .csDW-toolIcon {
        flex-shrink: 0;
        width: 40px;
        height: 40px;
        border-radius: 11px;
        background: var(--tk-color, #a855f7);
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
    }

    .csDW-toolIcon svg {
        width: 19px;
        height: 19px;
    }

    .csDW-toolText {
        display: flex;
        flex-direction: column;
        min-width: 0;
    }

    .csDW-toolText strong {
        font-size: 0.83rem;
        font-weight: 700;
        color: #fff;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .csDW-toolText small {
        font-size: 0.68rem;
        color: rgba(255, 255, 255, 0.4);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Ultrawide: cap the stack so the sections don't stretch comically
       wide, per the existing "desktop width not capped well on
       ultrawide" note. */
    @media (min-width: 1600px) {
        .csDesktopWidgets {
            max-width: 1320px;
        }
    }

    @media (max-width: 1100px) {
        .csDesktopWidgets {
            gap: 1.5rem;
        }
        .csDW-card {
            padding: 1.25rem 1.3rem 1.4rem;
        }
        .csDW-toolsRow {
            grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
        }
    }


    /* ── 4. HOME — NEW RELEASES PREVIEW ────────────────────── */
    /* A short rail of the newest releases on Home, with "View All →"
       into /releases. Same .release-card visuals as the full page,
       scaled down so it reads as a preview and not as the page. */

    .csHomeReleases {
        display: block;
        margin: 0 0 2.6rem;
    }

    .csHomeReleases-head {
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
        gap: 1rem;
        flex-wrap: wrap;
        margin: 0 0 1.3rem;
        padding: 0 0 0.9rem;
        border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    }

    .csHomeReleases-title {
        font-family: 'Space Grotesk', sans-serif;
        font-size: 1.22rem;
        font-weight: 700;
        color: #fff;
        margin: 0 0 0.28rem;
        letter-spacing: -0.01em;
    }

    .csHomeReleases-sub {
        font-size: 0.78rem;
        color: rgba(255, 255, 255, 0.42);
        margin: 0;
    }

    .csHomeReleases-viewAll {
        font-size: 0.8rem;
        font-weight: 600;
        color: #d946ef;
        text-decoration: none;
        white-space: nowrap;
        transition: color 0.2s ease;
    }

    .csHomeReleases-viewAll:hover {
        color: #f0abfc;
    }

    .csHomeReleases-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(min(230px, 100%), 1fr));
        gap: 1.2rem;
    }

    /* Preview-scale card text — the full /releases grid keeps the
       larger .cards-grid / .card-title sizing untouched. */
    .csHomeReleases-grid .card-content {
        padding: 0.9rem 1rem 1rem;
    }

    .csHomeReleases-grid .card-title {
        font-size: 0.98rem;
        margin-bottom: 0.45rem;
    }

    .csHomeReleases-grid .card-artist {
        font-size: 0.66rem;
        letter-spacing: 1px;
        margin-bottom: 0.3rem;
    }

    .csHomeReleases-grid .card-meta {
        gap: 0.7rem;
        font-size: 0.7rem;
        flex-wrap: wrap;
    }

    /* Keep the lift subtle at this size — the full grid's -12px pop is
       too much for a dense preview row. */
    .csHomeReleases-grid .release-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 14px 30px rgba(217, 70, 239, 0.28);
    }

    @media (min-width: 1600px) {
        .csHomeReleases {
            max-width: 1320px;
        }
    }
}

/* Light theme tweaks for the rail */
@media (min-width: 769px) {
    [data-theme="light"] .sidebar:hover,
    [data-theme="light"] .sidebar:focus-within {
        box-shadow: 8px 0 40px rgba(0, 0, 0, 0.14);
    }
}