/* layout.css — the app frame: body grid, top navbar, footer, sidebar and
   the main column. Tokens live in /tokens.css; the shared site shell is
   /page/shell.css. Everything here is present on every route. */

.mu-body {
    height: 100dvh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    /* The mini player's height, so floating layers (lyrics panel, toast) can
       sit clear of it on every viewport. Redefined for the stacked mobile
       player below — keep it in sync with .mu-player's actual height. */
    --mu-player-h: 66px;
}

.mu-layout {
    flex: 1 1 auto;
    min-height: 0;
    display: grid;
    grid-template-columns: 248px minmax(0, 1fr);
}

/* ---- Top navbar ----
   Back/forward, brand, an always-visible search box, and a profile-ish
   shortcut on the right. Deliberately NOT a second copy of the sidebar's
   Home/Library/Leaderboard nav — that lives in the sidebar only, this bar
   is global chrome. */

.mu-navbar {
    flex: none;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 0 var(--mu-gutter);
    height: 56px;
    background: #08080a;
    border-bottom: 1px solid var(--rule);
}

.mu-navbar__brand {
    display: flex;
    align-items: center;
    gap: 8px;
    border: 0;
    background: none;
    color: var(--mu-accent);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.04em;
    cursor: pointer;
    flex: none;
}
.mu-navbar__brandtext { display: flex; flex-direction: column; line-height: 1.1; text-align: left; }
.mu-navbar__logo { display: grid; place-items: center; }
.mu-navbar__logo img { width: 24px; height: 24px; border-radius: 6px; display: block; }

.mu-navbar__search { flex: 1; max-width: 480px; }
.mu-navbar__search input,
.mu-searchbox input {
    width: 100%;
    min-height: 38px;
    padding: 0 16px;
    border: 1px solid var(--rule);
    border-radius: 999px;
    background: rgba(232, 234, 237, 0.05);
    color: var(--text);
    font-family: inherit;
    font-size: 14px;
}
.mu-navbar__search input::placeholder,
.mu-searchbox input::placeholder { color: var(--label); }
.mu-navbar__search input:focus,
.mu-searchbox input:focus { outline: 1px solid var(--focus); outline-offset: 1px; border-color: transparent; }

/* Global support entry point: an accent pill that survives the crowded phone bar
   as an icon-only button. */
.mu-supportbtn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 34px;
    padding: 0 14px;
    border: 1px solid var(--mu-accent);
    border-radius: 999px;
    background: transparent;
    color: var(--mu-accent);
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    flex: none;
    white-space: nowrap;
}
.mu-supportbtn:hover { background: color-mix(in srgb, var(--mu-accent) 12%, transparent); }
.mu-nav__support { color: var(--mu-accent); }
@media (max-width: 560px) {
    .mu-supportbtn { padding: 0 10px; }
    .mu-supportbtn span { display: none; }
}
.mu-searchbox { margin: 0 0 12px; }
.mu-searchbox input { max-width: 480px; display: block; }

.mu-navbar__profile {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 36px;
    padding: 0 13px 0 10px;
    border: 0;
    border-radius: 999px;
    background: rgba(232, 234, 237, 0.08);
    color: var(--text);
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    flex: none;
}
.mu-navbar__profile:hover { background: rgba(232, 234, 237, 0.14); }
.mu-navbar__username { max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Auth controls + account chip, flush right regardless of the search width. */
.mu-navbar__right { margin-left: auto; display: flex; align-items: center; gap: 10px; flex: none; }
@media (max-width: 560px) { .mu-navbar__username { display: none; } }

/* Auth controls in the navbar — the real UI's shape, disabled until accounts
   exist. Hidden on narrow screens, where the search box needs the room. */
.mu-navbar__auth { display: flex; align-items: center; gap: 8px; flex: none; }
.mu-navbar__auth button {
    min-height: 34px;
    padding: 0 14px;
    border-radius: 999px;
    border: 1px solid var(--rule);
    background: transparent;
    color: var(--text);
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: not-allowed;
}
.mu-navbar__auth button.is-primary { background: var(--mu-accent); color: var(--mu-accent-ink); border-color: var(--mu-accent); }
.mu-navbar__auth button[disabled] { opacity: 0.5; }
@media (max-width: 720px) {
    .mu-navbar__auth { gap: 4px; }
    .mu-navbar__auth button { padding: 0 10px; }
}
/* On phones the Log in / Sign up buttons squeeze the search box down to a
   couple of characters, so they go away here — the profile chip still routes
   to the login page, and the search view carries its own field. */
@media (max-width: 560px) {
    .mu-navbar__auth { display: none; }
}

/* ---- Footer ---- */

.mu-footer {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px var(--mu-gutter);
    background: #08080a;
    border-top: 1px solid var(--rule);
    font-size: 12px;
    color: var(--label);
}
.mu-footer__nav { display: flex; gap: 18px; }
.mu-footer__nav button {
    border: 0;
    background: none;
    color: var(--label);
    font-size: 12px;
    cursor: pointer;
}
.mu-footer__nav button:hover { color: var(--text); }

.mu-static { max-width: 640px; margin: 0 auto; }
.mu-tagline { font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mu-accent); }
.mu-static p { color: var(--blurb); line-height: 1.6; }
.mu-static code { font-size: 0.9em; color: var(--text); }

/* ---- Sidebar ---- */

.mu-sidebar {
    background: #0a0a0c;
    border-right: 1px solid var(--rule);
    padding: 18px calc(var(--mu-gutter) - 14px);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.mu-nav { display: flex; flex-direction: column; gap: 2px; }

.mu-nav__item {
    display: flex;
    align-items: center;
    min-height: var(--tap);
    padding: 0 14px;
    border: 0;
    border-radius: 3px;
    background: none;
    color: var(--label);
    font-family: inherit;
    font-size: 12px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    text-align: left;
    cursor: pointer;
    transition: color 160ms var(--ease), background-color 160ms var(--ease);
}
.mu-nav__item:hover { color: var(--text); background: rgba(232, 234, 237, 0.05); }
.mu-nav__item[aria-current="page"] { color: var(--text); background: rgba(74, 127, 181, 0.14); }

.mu-side-title {
    margin: 0 0 8px;
    padding: 0 14px;
    font-size: 10px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--label);
}

.mu-album-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }

.mu-side-album {
    display: block;
    width: 100%;
    min-height: 38px;
    padding: 0 14px;
    border: 0;
    border-radius: 3px;
    background: none;
    color: var(--blurb);
    font-family: inherit;
    font-size: 12px;
    text-align: left;
    cursor: pointer;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: color 160ms var(--ease), background-color 160ms var(--ease);
}
.mu-side-album:hover { color: var(--text); background: rgba(232, 234, 237, 0.05); }

/* ---- Main ---- */

.mu-main { min-width: 0; display: flex; flex-direction: column; overflow: hidden; }

/* "New tracks" bar: a slim strip between the topbar and the view. */
/* Full-width strip under the navbar — spans the sidebar too, so the top of the
   frame reads as one band. `flex: none` because .mu-body is a flex column; the
   [hidden] rule is required because display:flex would otherwise beat the UA
   `[hidden] { display: none }` and leave an empty bar. */
.mu-notice {
    flex: none;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 8px var(--mu-gutter);
    background: rgba(74, 127, 181, 0.16);
    border-bottom: 1px solid var(--rule);
    font-size: 12px;
    letter-spacing: 0.06em;
}
.mu-notice[hidden] { display: none; }

.mu-notice__text { color: var(--text); }

.mu-toast {
    position: fixed;
    left: 50%;
    bottom: calc(var(--mu-player-h) + 26px + env(safe-area-inset-bottom, 0px));
    transform: translateX(-50%);
    padding: 8px 18px;
    background: #1a1c22;
    border: 1px solid var(--rule);
    border-radius: 20px;
    font-size: 12px;
    color: var(--text);
    z-index: 40;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
}
.mu-toast[hidden] { display: none; }

.mu-notice__listen {
    min-height: 32px;
    padding: 0 16px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: transparent;
    color: var(--text);
    font-family: inherit;
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    cursor: pointer;
}
.mu-notice__listen:hover { background: rgba(74, 127, 181, 0.3); }

.mu-notice__close {
    margin-left: auto;
    width: 32px;
    height: 32px;
    border: 0;
    background: none;
    color: var(--label);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
}
.mu-notice__close:hover { color: var(--text); }

.mu-view {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 22px var(--mu-gutter) 40px;
}

.mu-section { margin-top: 36px; }

.mu-section__title {
    margin: 0 0 16px;
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--label);
}