/* The player's foundation: the design tokens, the reset, the base typography,
   the page-routing rules and the shell grid. Everything here is something no
   component owns, and everything app.css does is layered on top of it.

   Loaded FIRST, before app.css — the position legacy.css held. Every rule in
   this file was lifted verbatim out of legacy.css's first 300 lines and its
   phone block, in the same relative order, so nothing about the cascade
   changed when it moved.

   Two things here are load-bearing in ways that are easy to miss:

     - .page { display: none } is what makes routing work at all. Without it
       every one of the player's thirteen routes renders at once, stacked.
     - --safe-* are consumed by app.css in fifteen places, one of them
       --kb-tabbar-h: calc(60px + var(--safe-bottom)). An undefined variable
       makes that calc() invalid and the phone tab bar loses its height.

   The colours below are the pre-redesign token names. They are kept because
   they still have consumers, and their values are the brand palette's:
   docs/brand/palette/tokens.css is where a colour is decided, not here.
   --red and --text-muted are the two with no brand equivalent — see
   docs/design/README.md. */

:root {
    --bg: #17181c;
    --bg2: #1e1f24;
    --bg3: #25262d;
    --bg4: #2e2f38;
    --gold: #c9a84c;
    --gold-dim: #8a6e2f;
    --text: #e8e4dc;
    --text-dim: #7a7670;
    --text-muted: #454240;
    --accent: #c9a84c;
    --red: #e05a4e;
    --sidebar-w: 260px;
    --player-h: 88px;
    --radius: 6px;
    --transition: 0.18s cubic-bezier(0.4, 0, 0.2, 1);
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --safe-left: env(safe-area-inset-left, 0px);
    --safe-right: env(safe-area-inset-right, 0px);
}

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html,
body {
    height: 100%;
    overflow: hidden;
}

body {
    background: var(--bg);
    color: var(--text);
    font-family: 'DM Sans', sans-serif;
    font-size: 14px;
    line-height: 1.5;
}

#app {
    display: grid;
    grid-template-columns: var(--sidebar-w) 1fr;
    grid-template-rows: 1fr var(--player-h);
    height: 100vh;
    height: 100svh;
    height: 100dvh;
}

#sidebar {
    grid-row: 1 / 2;
    grid-column: 1 / 2;
    background: #111214;
    border-right: 1px solid #ffffff08;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding-left: var(--safe-left);
}

#main {
    grid-row: 1 / 2;
    grid-column: 2 / 3;
    overflow-y: auto;
    scroll-behavior: smooth;
}

#player-bar {
    grid-row: 2 / 3;
    grid-column: 1 / 3;
    background: #0e0f12;
    border-top: 1px solid #ffffff0a;
    display: flex;
    align-items: center;
    padding: 0 calc(24px + var(--safe-right)) 0 calc(24px + var(--safe-left));
    padding-bottom: var(--safe-bottom);
    gap: 24px;
    min-height: var(--player-h);
}

/* The sidebar's scrolling list, and the scrollbars for both scroll
   regions. app.css restyles the thumb and the padding on top of these. */
#artist-list {
    flex: 1;
    overflow-y: auto;
    padding: 0 8px 8px;
}

#artist-list::-webkit-scrollbar {
    width: 3px;
}

#artist-list::-webkit-scrollbar-track {
    background: transparent;
}

#artist-list::-webkit-scrollbar-thumb {
    background: var(--bg4);
    border-radius: 2px;
}


#main::-webkit-scrollbar {
    width: 4px;
}

#main::-webkit-scrollbar-track {
    background: transparent;
}

#main::-webkit-scrollbar-thumb {
    background: var(--bg4);
    border-radius: 2px;
}

.page {
    display: none;
    animation: fadeUp 0.2s ease;
}

.page.active {
    display: block;
}

@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* --- phones --------------------------------------------------------------

   The foundation's own phone overrides, lifted with their selectors so the two
   halves cannot drift apart. @media adds no specificity, so a rule here still
   loses every tie against an unscoped rule later in app.css — which is exactly
   what it did inside legacy.css, and why it has to stay ahead of app.css. */

@media (max-width: 640px) {
    :root {
        --sidebar-w: 0px;
    }

    #app {
        grid-template-columns: 1fr;
    }

    #sidebar {
        position: fixed;
        left: -100%;
        top: 0;
        width: 80%;
        max-width: 280px;
        height: 100dvh;
        z-index: 1000;
        transition: left 0.3s cubic-bezier(0.2, 0.9, 0.4, 1.1);
        border-right: none;
        box-shadow: 2px 0 20px rgba(0, 0, 0, 0.5);
        padding-left: 0;
    }

    body.mobile-sidebar-open #sidebar {
        left: 0;
    }

    #main {
        grid-column: 1 / 2;
        padding-top: calc(56px + var(--safe-top));
    }
}