/* phone layout for the site (≤ 760px wide): the same ui, rearranged.
   sidebar = slide-in drawer behind a menu button · lyrics / queue / details = full-screen sheet ·
   player = three compact rows · now playing = cover stacked above the lyrics. nothing here touches the desktop app. */
.edge { display: none; } /* window resize handles only make sense in the desktop app */
#m-menu { display: none; }
#m-scrim { display: none; }

@media (max-width: 760px) {
  :root { --titlebar-h: 0px; --player-h: 150px; --gap: 8px; }
  #app { height: 100dvh; grid-template-rows: minmax(0, 1fr) var(--player-h); } /* the titlebar is gone, so two rows: workspace, player */
  #titlebar { display: none; }
  #workspace, #workspace.right-closed, #workspace.sb-collapsed, #workspace.sb-collapsed.right-closed { display: block; padding: 0 var(--gap); height: 100%; }
  #main { height: 100%; }

  /* sidebar: a drawer */
  #sidebar { position: fixed; left: 0; top: 0; bottom: 0; width: min(82vw, 320px); z-index: 80; border-radius: 0 22px 22px 0; transform: translateX(-105%); transition: transform .28s var(--ease); padding-top: max(14px, env(safe-area-inset-top)); }
  body.nav-open #sidebar { transform: none; }
  #m-scrim { display: block; position: fixed; inset: 0; z-index: 79; background: rgba(0, 0, 0, .5); opacity: 0; pointer-events: none; transition: opacity .25s; }
  body.nav-open #m-scrim { opacity: 1; pointer-events: auto; }

  /* top bar: menu button + search */
  #topbar { margin: 8px 4px 2px; padding: 6px 8px; gap: 6px; }
  .nav-arrows, #tb-collapse { display: none; }
  #m-menu { display: grid; }
  .search-wrap { max-width: none; }
  #main-scroll { padding: 6px 10px 20px; }

  /* side panel: a full-screen sheet */
  #workspace.right-closed #right { display: none; }
  #right { position: fixed; inset: 0; z-index: 75; border-radius: 0; }
  #right .tabs { padding-top: max(14px, env(safe-area-inset-top)); }

  /* page header stacks */
  .page-h { flex-direction: column; align-items: flex-start; gap: 14px; padding: 6px 2px 16px; }
  .page-h .art { width: 136px; height: 136px; }
  .page-h .art .ic { width: 48px; height: 48px; }
  .page-h h1.title { font-size: 32px; margin: 2px 0 8px; }

  /* lists: index, title, more */
  #view .row { grid-template-columns: 36px minmax(0, 1fr) 40px; height: 56px; padding: 0 6px; }
  #view .row .c-era, #view .row .c-dur, #view .row.head .c-dur, #view .row.head .c-era { display: none; }
  #view .row .c-act { opacity: 1; }
  #view .row .c-act .btn-icon:not([data-act="more"]) { display: none; }
  #view .c-title .t .chips { display: none; }
  .toolbar { padding: 4px 2px 10px; }

  /* shelves and grids */
  .cards { grid-auto-columns: 148px; gap: 10px; }
  .card .play { opacity: 1; transform: none; width: 36px; height: 36px; }
  .quick { grid-template-columns: 1fr; }
  .tiles { grid-template-columns: 1fr 1fr; gap: 8px; }
  .podium { grid-template-columns: 1fr; }

  /* player: cover + title + buttons / seek / controls */
  #player { margin: 0 var(--gap) calc(var(--gap) + env(safe-area-inset-bottom)); border-radius: 22px; padding: 8px 12px 4px; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto auto; gap: 0 8px; align-items: center; }
  .p-left { grid-column: 1; grid-row: 1; gap: 10px; }
  .p-left .cv { width: 44px; height: 44px; border-radius: 9px; }
  .p-left .t { font-size: 13.5px; }
  .p-left .s { font-size: 11.5px; }
  .p-right { grid-column: 2; grid-row: 1; gap: 0; }
  .p-right .vol, #p-info, #p-download { display: none; }
  .p-center { grid-column: 1 / -1; grid-row: 2 / 4; gap: 0; }
  .p-seek { max-width: none; gap: 8px; order: -1; } /* seek above the buttons */
  .p-seek .time { min-width: 34px; font-size: 10.5px; }
  .p-ctrls { gap: 10px; }
  .p-ctrls .btn-icon { width: 36px; height: 36px; }
  .p-play { width: 44px !important; height: 44px !important; }
  .p-play .ic { width: 30px; height: 30px; }

  /* now playing: cover on top, lyrics below, the player bar stays as the controls */
  #npv { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); gap: 12px; padding: calc(44px + env(safe-area-inset-top)) 18px calc(var(--player-h) + 8px); }
  #npv .close { top: calc(10px + env(safe-area-inset-top)); right: 12px; }
  #npv .left { align-items: center; text-align: center; }
  #npv .cover { width: min(36vh, 70vw); border-radius: 18px; }
  #npv .meta { margin-top: 14px; }
  #npv h1 { font-size: 24px; }
  #npv .by { font-size: 14px; }
  #npv .lyx-inner { padding: 0 6px; }
  #npv .lx { font-size: 24px; padding: 7px 0; }
  #npv .lyx:not(.timed) .lx { font-size: 18px; }

  /* menus and toasts stay on screen */
  .menu { max-width: calc(100vw - 16px); }
  #toasts { bottom: calc(var(--player-h) + 12px); }
}

/* touch: no hover, so the hover-only controls are always there */
@media (pointer: coarse) {
  .card .play { opacity: 1; transform: none; }
  .c-act { opacity: 1; }
  .slider .knob { opacity: 1; transform: none; }
  .p-left .cv .exp { display: none; }
}