/* Keep scrolling inside the active sheet instead of moving the page beneath it. */
html:has(dialog[open]) { overflow: hidden; }
dialog { overscroll-behavior: contain; }
.jam-welcome::before { left: 0; right: 0; }
.back-button[hidden] { display: none; }

@media (max-width: 650px) {
  body:not(.has-current-track) { --player-height: calc(70px + env(safe-area-inset-bottom, 0px)); }
  body:not(.has-current-track) .player { display: none; }
  .topbar .back-button:not([hidden]) { display: inline-flex; width: 44px; height: 44px; flex: none; }
  .topbar .mobile-brand { margin-right: 0; }
  .topbar .profile-button { min-width: 44px; min-height: 44px; justify-content: center; }
  .topbar .icon-button { min-width: 44px; min-height: 44px; }
  .search-modes { margin-inline: 0; padding-right: 0; }
  .cards-grid.home-cards { margin-inline: 0; max-width: 100%; padding-right: 0; }
  .section-nav { scrollbar-width: none; }
  .section-nav::-webkit-scrollbar { display: none; }
  #content, dialog { overflow-wrap: anywhere; }
  #content input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=hidden]),
  #content select, #content textarea,
  dialog input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=hidden]),
  dialog select, dialog textarea { font-size: 16px !important; min-width: 0; max-width: 100%; }

  .dialog-heading .icon-button { width: 44px; height: 44px; flex-shrink: 0; }
  .player { grid-template-columns: minmax(0, 1fr) 88px; }
  .player #toggle, .player .transport-buttons > #next { width: 44px; height: 44px; }
  .playing-track > #likeCurrent { width: 44px; min-width: 44px; height: 44px; }
  input.range, input.range:hover { height: 4px; padding-block: 12px; box-sizing: content-box; background-clip: content-box; }
  .expanded-bottom > button { min-height: 44px; }

  .track-row { grid-template-columns: minmax(0, 1fr) 44px 44px; }
  .track-row .icon-button { width: 44px; height: 44px; }
  .track-row.playlist-track {
    grid-template: "track track track" auto "order like menu" 44px / minmax(0, 1fr) 44px 44px;
    row-gap: 0;
    padding-block: 10px;
  }
  .playlist-track .track-title { grid-area: track; min-height: 52px; }
  .playlist-track .playlist-edit-order { grid-area: order; display: flex; gap: 4px; padding-left: 57px; }
  .playlist-track .like-track { grid-area: like; }
  .playlist-track > [data-action=track-menu] { grid-area: menu; }

  .queue-track { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; gap: 4px 10px; padding-block: 12px; }
  .queue-track > .cover-art { grid-column: 1; grid-row: 1; width: 44px; }
  .queue-track-info { grid-column: 2 / -1; grid-row: 1; min-height: 44px; }
  .queue-controls { grid-column: 2; grid-row: 2; flex-direction: row; gap: 4px; }
  .queue-controls .icon-button, .queue-track > .icon-button { width: 44px; height: 44px; }
  .queue-track > .icon-button { grid-column: 3; grid-row: 2; }
  .queue-controls .icon, .queue-track > .icon-button .icon { width: 19px; height: 19px; }
  .queue-track-info strong { white-space: normal; line-height: 1.5; }
}

@media (max-width: 360px) {
  .filter-fields { grid-template-columns: minmax(0, 1fr); }
  .playlist-track .playlist-edit-order { padding-left: 0; }
}

@media(max-width:760px){.global-search{min-height:52px;height:auto}.global-search input{height:44px;min-height:44px;font-size:16px}.global-search .search-submit,.global-search .search-clear{min-height:44px;height:44px}.global-search .search-clear{min-width:44px}.lyrics-button{min-height:44px}.social-nav{flex-wrap:wrap}.social-nav a,.feature-actions>a,.feature-actions>button{min-height:44px;display:inline-flex;align-items:center}.content-footer{flex-wrap:wrap;gap:12px}.content-footer a,.content-footer button{min-height:44px}}