/* --- Public routes: no nav, no bar ------------------------------------------------------- */

#app:is([data-route="login"], [data-route="forgot"], [data-route="reset"]) main {
  margin-left: 0;
  padding-bottom: var(--space-7);
}

/* --- Narrow screens: tab bar, mini player, full-screen drawer ------------------------------ */

@media (max-width: 40rem) {
  :root { --page-top: 1.25rem; }

  html {
    scroll-padding-bottom: calc(var(--nav-h) + var(--mini-h) + var(--safe-b) + var(--space-5));
  }

  main {
    margin-left: 0;
    padding-bottom: calc(var(--nav-h) + var(--mini-h) + var(--safe-b) + var(--space-7));
  }

  .site-nav {
    top: auto;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 35;
    flex-direction: row;
    width: auto;
    height: calc(var(--nav-h) + var(--safe-b));
    padding: 0 env(safe-area-inset-right, 0px) var(--safe-b) env(safe-area-inset-left, 0px);
    background: var(--bg);
    border-right: 0;
    border-top: 1px solid var(--hairline);
    overflow: visible;
  }
  .brand, .nav-wide { display: none; }
  .nav-list { display: flex; flex: 1; gap: 0; }
  .nav-item { flex: 1; min-width: 0; }
  .nav-link {
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    min-height: var(--nav-h);
    padding: 0 var(--space-1);
    border-radius: 0;
    font-size: .6875rem;
    font-weight: 500;
  }
  .nav-link:hover { background: none; }
  .nav-link[aria-current="page"] { background: none; }
  /* Starred and Playlists live under Library here; Library lights for them. */
  .nav-link[data-section="true"] { color: var(--fg); font-weight: 600; }
  .nav-link[data-section="true"] .icon { color: var(--accent); }

  .player {
    right: var(--space-2);
    bottom: calc(var(--nav-h) + var(--safe-b) + var(--space-2));
    left: var(--space-2);
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "now transport";
    height: var(--mini-h);
    padding: var(--space-1) var(--space-2) var(--space-1) var(--space-1);
    /* Elevation 2: it floats over the page, so a light edge and a shadow; the tint
       wash comes from the bar's own rule. */
    border: 1px solid var(--edge);
    border-radius: var(--radius-lg);
    /* No overflow clipping here: it would cut the focus rings of the buttons at the
       edges. The progress hairline is inset past the rounded corners instead. */
    box-shadow: var(--elev-2);
  }
  /* Nothing to control: no mini player taking up the screen. */
  .player[data-idle="true"] { display: none; }
  /* The mini player keeps play/pause and next; the sheet has the rest. */
  .player-star, .player .progress, .player-extras, .transport > .icon-btn:first-child { display: none; }
  .player-art { width: 44px; height: 44px; }
  .toggle { width: 2.5rem; height: 2.5rem; }
  .mini-progress {
    position: absolute;
    top: -1px;
    right: 14px;
    left: 14px;
    display: block;
    height: 2px;
    background: linear-gradient(to right, var(--accent) calc(var(--progress, 0) * 100%), transparent 0);
  }

  .drawer {
    inset: 0;
    z-index: 45;
    width: 100%;
    border-left: 0;
    box-shadow: none;
    padding-bottom: var(--safe-b);
  }
}