/*
 * The chrome (spec v1.1 §6): page layout, the skip link and <main>. The other files
 * in css/shell/ style the nav, the player bar, the overlays, and narrow screens.
 *
 * WIDE (>= 40rem): a left sidebar (the <nav>), the main column, a glass player bar
 * along the bottom, and the queue drawer on the right. The document scrolls, not a
 * panel, so content passes UNDER the glass bar, which is what makes it glass.
 *
 * NARROW (< 40rem): the same <nav> becomes a bottom tab bar (Home, Search, Library,
 * Upload; Starred and Playlists are Library tabs, and every page head carries a Settings
 * icon, which is where Sign out lives), the
 * player bar becomes a floating mini player above it, and the drawer and the
 * now-playing sheet cover the screen.
 *
 * Public routes (sign in, forgot, reset) hide the nav and the bar, and the main
 * column takes the whole width.
 */

:root {
  --page-x: clamp(1rem, 3.5vw, 3rem);
  --page-top: clamp(1.5rem, 3vw, 2.5rem);
  --safe-b: env(safe-area-inset-bottom, 0px);
}

.skip-link {
  position: fixed;
  left: var(--space-3);
  top: -4rem;
  z-index: 100;
  padding: var(--space-2) var(--space-4);
  background: var(--accent);
  color: var(--bg);
  border-radius: var(--radius-control);
  font-weight: 600;
  text-decoration: none;
}
.skip-link:focus { top: calc(var(--space-3) + env(safe-area-inset-top, 0px)); }

main {
  display: block;
  min-height: 100dvh;
  margin-left: var(--sidebar-w);
  padding: var(--page-top) var(--page-x) calc(var(--bar-h) + var(--safe-b) + var(--space-7));
  /* Shelves bleed to the edges with negative margins; nothing may scroll the page
     sideways. clip, unlike hidden, makes no scroll container. */
  overflow-x: clip;
}

.loading {
  color: var(--fg-muted);
  /* A fast view replaces this before it is ever seen; a slow one fades it in. */
  animation: appear .2s .2s both;
}
@keyframes appear { from { opacity: 0; } to { opacity: 1; } }

/* --- Errors --------------------------------------------------------------------------------------- */

.error-view { max-width: 40rem; }