/* A saved track differs by both silhouette and color in every list layout. */
html body :is(#songList, #playlistDetailSongs, .folder-import-card-grid) .song-card .song-actions .btn-like { color: var(--vault-muted); }
html body :is(#songList, #playlistDetailSongs, .folder-import-card-grid) .song-card .song-actions .btn-like svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: none;
}
html body :is(#songList, #playlistDetailSongs, .folder-import-card-grid) .song-card .song-actions .btn-like[aria-pressed="true"] { color: #ff527b; }
html body :is(#songList, #playlistDetailSongs, .folder-import-card-grid) .song-card .song-actions .btn-like[aria-pressed="true"] svg { fill: currentColor; stroke: currentColor; filter: none; }
html body :is(#songList, #playlistDetailSongs, .folder-import-card-grid) .song-card .song-actions .btn-like:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
html body :is(#songList, #playlistDetailSongs, .folder-import-card-grid) .song-card .song-actions .btn-like[aria-busy="true"] { opacity: .6; cursor: progress; }
/* Playlist tags sit with their track, using the catalog's casing and controls. */
html[data-library-density] body #playlistDetailSongs .song-info { display: flex; flex-direction: column; align-items: stretch; }
html[data-library-density] body #playlistDetailSongs .song-meta {
  align-self: stretch;
  justify-content: flex-start;
  flex-wrap: wrap;
  height: auto;
  min-height: 22px;
  margin-top: 4px;
  overflow: visible;
}
html body #playlistDetailSongs .song-meta :is(.song-badge, .library-song-tag) { text-transform: none; font-weight: 400; }
html body #playlistDetailSongs .song-meta [aria-pressed="true"] { border-color: var(--vault-gold); color: var(--vault-gold); }
html body #playlistDetailSongs :is(.song-card, .library-version-list)[hidden], .playlist-active-filters[hidden], .playlist-filter-empty[hidden] { display: none !important; }

/* The desktop dock sits to the right of this rail, so it needs no bottom reserve.
   Keep section navigation visible while a long collection can scroll separately. */
@media (min-width: 761px) {
  #librarySidebar {
    bottom: 12px;
    display: flex;
    flex-direction: column;
    padding-bottom: 12px;
  }
  #librarySidebar > * { flex-shrink: 0; }
  #librarySidebar #libraryPlaylistLinks {
    flex: 0 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    padding-block: 2px;
  }
}
@media (min-width: 761px) and (max-height: 820px) {
  #librarySidebar { padding-top: 8px; padding-bottom: 8px; }
  #librarySidebar .library-eyebrow { margin-bottom: 8px; }
  #librarySidebar .library-personal-label { margin-top: 20px; }
  #librarySidebar .library-side-nav { gap: 2px; }
  #librarySidebar .library-side-nav button { min-height: 40px; padding-block: 8px; font-size: 13px; }
  #librarySidebar .library-playlist-link { min-height: 34px; padding-block: 6px; }
  #librarySidebar .library-queue-nav { margin-top: 12px; }
}