/* music-base.css — .music-app shell, body :has() rules,
   layout-local tokens (--sidebar-w, --player-h, --topbar-h,
   --row-h, --cover-*), the CSS grid template, lucide icon
   defaults, and the .ms-btn baseline. Loaded first; every
   later module assumes these tokens + grid are in scope. */

/* Music — YouTube Music–style layout on the lucyna.dev design system. */

/* The Music page takes the full viewport (minus the topbar). Disable the
   normal main column constraints just for this page, and lock body to a
   fixed viewport height so the inner grid has something definite to
   fill against (without this, body's `min-height: 100vh` lets the grid
   collapse to its content height and the player floats up the page). */
/* `body.musiced` is added by music.js as a :has-fallback. Either selector
   alone is enough — the OR keeps the page locked to viewport height even
   on browsers/timing where :has hasn't kicked in yet. Without this lock,
   the music-app falls back to content-height and the player visibly
   scrolls off-screen with the album grid. */
body:has(.music-app),
body.musiced {
    overflow: hidden;
    height: 100vh;
    height: 100dvh;
}
body:has(.music-app) main,
body.musiced main {
    max-width: none;
    padding: 0;
    flex: 1;
    overflow: hidden;
    min-height: 0;
}
/* Hide the global personality footer on the music page — we render our own
   copy inside the .music-app grid so the player stays at the page bottom. */

/* Visually-hidden inputs (page-local). Used for the file/folder inputs that
   are triggered via <label for=...>. Cannot use display:none / hidden —
   Firefox refuses to open the file picker for those. */
.music-app .visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Mobile-first grid: one main column + auto player row. Desktop adds
   the sidebar column (see `@media (min-width: 721px)` below). The
   inversion mirrors the sidebar visibility fix in music-sidebar.css —
   on iOS Safari cold loads the page paints at the fallback viewport
   width (980 px) before meta-viewport shrinks it; under the old
   desktop-default rules, that first paint applied the desktop grid
   AND the desktop sidebar visibility, leaving a stuck-visible
   sidebar until reload. Mobile-default means the cold-load fallback
   width can only produce the mobile single-column layout, and the
   desktop layout strictly requires a confirmed > 720 px viewport. */
.music-app {
    /* Page-local layout tokens. The palette tokens (--panel-bg, --row-hover,
       --btn-*, --panel-border) now live in site.css :root and theme-switch
       site-wide; no need to redeclare here. */
    --sidebar-w: 240px;
    --player-h: 80px;
    --topbar-h: 66px;
    --row-h: 56px;
    --cover-tile: 180px;
    --cover-tile-mobile: 140px;
    --cover-thumb: 40px;
    --cover-hero: 240px;

    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr auto;
    grid-template-areas:
        "main"
        "player";
    height: 100%;
    width: 100%;
    overflow: hidden;
    position: relative;
    /* Block iOS Safari pinch-zoom on the music app. /musiced is a
       full-screen app, not document content that needs reading-zoom,
       and the zoom-OUT snap-back leaves Safari with stale visual-
       viewport state — env(safe-area-inset-*) stuck at 0, 100dvh
       sized to the pre-zoom viewport, and gesture-tracking holding
       on long enough to swallow taps. pan-x pan-y keeps scrolling
       and tapping working while making pinch a no-op, so the broken
       half-state is unreachable. */
    touch-action: pan-x pan-y;
    /* Respect the device's bottom safe-area on every platform. iPad
       home indicator (~21 px), Android Chrome gesture bar (reported
       under viewport-fit=cover), and iOS non-Safari browsers' home
       indicator all live in this inset; without padding-bottom the
       player row at grid-row 2 paints under them and gets visually
       clipped. Desktop reports env=0 so this is a no-op there.
       iPhone Safari layers an additional floor on top — see the
       .iphone-safari rule in music-mobile.css (the Liquid Glass URL
       pill needs more clearance than env alone). */
    padding-bottom: env(safe-area-inset-bottom);
}
@media (min-width: 721px) {
    .music-app {
        grid-template-columns: var(--sidebar-w) 1fr;
        grid-template-rows: 1fr var(--player-h);
        grid-template-areas:
            "sidebar main"
            "player  player";
    }
}

/* lucide icons — defaults applied to <svg class="icon"> */
.music-app .icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.music-app .icon-lg { width: 22px; height: 22px; }
.music-app .icon-xl { width: 40px; height: 40px; }

/* Buttons in the music app — slim ghost style by default. Excludes anything
   carrying an explicit style class (.ms-btn / .ms-icon-btn / .ms-chip /
   .ms-discover-play etc.) so their own bordered/boxed look isn't
   stripped by this reset. Forgetting to add a class here is why
   custom-styled buttons sometimes render as plain text. */
.music-app button:where(:not(.ms-btn):not(.ms-icon-btn):not(.ms-context-item):not(.ms-chip):not(.ms-discover-play)) {
    background: transparent;
    border: none;
    color: inherit;
    cursor: pointer;
    padding: 0;
    font: inherit;
}
.music-app button:focus { outline: none; }
.music-app button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }