/* Collection pages share the listening room's smoked surfaces. The existing
   row controls and playback contexts remain the source of interaction. */
.catalog-screen {
  max-width: 1360px;
  margin-inline: auto;
  padding: 12px 4px 36px;
  --catalog-surface: var(--glass-quiet, var(--bg2));
  --catalog-action-size: 32px;
}
.catalog-page-head { margin-bottom: 24px; }
.catalog-page-head h1.page { margin: 0 0 10px; font-size: 36px; font-weight: 650; letter-spacing: -1px; }
.catalog-page-head .page-intro { margin: 0; font-size: 14px; line-height: 1.6; }
.catalog-screen .catalog-tools { margin-bottom: 28px; gap: 8px; }
.catalog-tools .chip {
  min-height: 44px;
  padding: 10px 16px;
  border: 1px solid var(--line);
  background: transparent;
  font-size: 13px;
  font-weight: 550;
}
.catalog-tools .chip[aria-pressed='true'] { background: var(--glass-hover, var(--bg3)); color: var(--text); border-color: var(--glass-edge, var(--line)); }
.catalog-tools .lib-filter { min-height: 44px; background: var(--catalog-surface); border-color: var(--line); }
.catalog-panel,
.catalog-screen .catalog-hero {
  border: 1px solid var(--glass-edge, var(--line));
  border-radius: var(--radius);
  background: var(--catalog-surface);
  box-shadow: inset 0 1px 0 var(--glass-highlight, transparent);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}
.catalog-panel { padding: 20px; }
.catalog-screen .section-head { align-items: center; gap: 16px; margin-bottom: 16px; }
.catalog-screen h2.section { font-size: 19px; font-weight: 600; letter-spacing: -.35px; }
.catalog-screen .section-more { min-height: 44px; font-size: 12px; }
.catalog-overview { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 28px; align-items: start; margin-bottom: 32px; }
.catalog-overview > :only-child { grid-column: 1 / -1; }
.catalog-shelf { min-width: 0; }
.catalog-screen .card-grid { grid-template-columns: repeat(auto-fill, minmax(min(160px, 100%), 1fr)); gap: 24px 18px; margin-bottom: 12px; }
.catalog-shelf .card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.catalog-screen .card { padding: 0; min-width: 0; background: transparent; }
.catalog-screen .card:hover { background: transparent; transform: none; }
.catalog-screen .card .cover { box-shadow: 0 9px 22px rgba(0, 0, 0, .2); }
.catalog-screen .card .t { margin-top: 12px; font-size: 14px; font-weight: 600; }
.catalog-screen .card .s { margin-top: 5px; font-size: 12px; line-height: 1.5; }
.catalog-screen .rail { gap: 20px; padding: 4px 2px 16px; margin-bottom: 24px; }
.catalog-screen .rail .card { width: var(--cover-lg); }
.catalog-screen .card:focus-visible { outline: 2px solid var(--focus); outline-offset: 5px; }
.catalog-screen .tracklist-head,
.catalog-screen .track {
  grid-template-columns: 26px minmax(0, 1fr) 42px var(--catalog-action-size) var(--catalog-action-size);
  gap: 8px;
}
.catalog-screen .tracklist-head { text-transform: none; letter-spacing: 0; font-weight: 500; padding: 8px; }
.catalog-screen .tracklist-head .plays,
.catalog-screen .track .plays { display: none; }
.catalog-screen .track { min-height: 66px; padding: 10px 8px; border-bottom: 1px solid var(--line); }
.catalog-screen .track:last-child { border-bottom-color: transparent; }
.catalog-screen .track:hover { background: var(--glass-hover, var(--bg3)); }
.catalog-screen .track .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; font-weight: 550; }
.catalog-screen .track .artist { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 5px; line-height: 1.45; }
.catalog-screen .track .dur,
.catalog-screen .track .n { font-size: 12px; font-variant-numeric: tabular-nums; }
.catalog-screen .track-add { width: var(--catalog-action-size); height: var(--catalog-action-size); }
.catalog-screen .lib-count { margin: 0 8px 12px; font-size: 12px; }
.catalog-screen .rows > .row { min-height: 74px; border-bottom: 1px solid var(--line); }
.catalog-screen .rows > .row:last-child { border-bottom-color: transparent; }
.catalog-screen .rows .t { font-size: 14px; font-weight: 600; overflow-wrap: anywhere; }
.catalog-screen .genre-grid { grid-template-columns: repeat(auto-fill, minmax(min(150px, 100%), 1fr)); gap: 10px; }
.catalog-screen .catalog-genre { min-height: 76px; height: auto; padding: 16px 18px; background: var(--catalog-surface); border: 1px solid var(--line); color: var(--text); font-size: 15px; font-weight: 600; }
.catalog-screen .catalog-genre .n { color: var(--text2); font-size: 12px; font-weight: 400; margin-top: 6px; }
.catalog-screen .catalog-hero { display: grid; grid-template-columns: minmax(160px, 220px) minmax(0, 1fr); align-items: center; gap: 30px; padding: 28px; margin-bottom: 24px; }
.catalog-hero > .cover { width: 100%; height: auto; aspect-ratio: 1; box-shadow: 0 14px 30px rgba(0, 0, 0, .24); }
.catalog-hero .kind { text-transform: none; letter-spacing: 0; font-size: 13px; font-weight: 500; }
.catalog-hero h1 { font-size: clamp(28px, 3.1vw, 42px); font-weight: 650; letter-spacing: -1px; line-height: 1.12; overflow-wrap: anywhere; margin: 10px 0 14px; }
.catalog-hero .sub { font-size: 13px; line-height: 1.7; overflow-wrap: anywhere; }
.catalog-hero .sub b { font-weight: 500; }
.catalog-hero .hero-actions { flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.catalog-hero .catalog-play { min-height: 46px; padding: 12px 24px; gap: 9px; display: inline-flex; align-items: center; justify-content: center; }
.catalog-hero .catalog-play:disabled { opacity: .55; cursor: default; }
.catalog-hero .icon-btn { width: 44px; height: 44px; background: transparent; }
.catalog-track-panel { margin-bottom: 28px; }
.catalog-artist > .artist-profile { margin-top: 34px; }
.catalog-artist .artist-profile-empty,
.catalog-artist .artist-profile-loading { padding: 20px; background: var(--catalog-surface); }
.catalog-artist .artist-profile-kicker { text-transform: none; letter-spacing: 0; font-size: 12px; font-weight: 500; }
.catalog-artist .artist-profile-empty h2 { font-size: 19px; font-weight: 600; }
.catalog-screen .empty { padding: 32px 18px; }
@media (max-width: 1120px) {
  .catalog-overview { grid-template-columns: minmax(0, 1fr); }
  .catalog-shelf .card-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .catalog-screen { padding: 8px 0 28px; --catalog-action-size: 44px; }
  .catalog-page-head h1.page { font-size: 30px; }
  .catalog-page-head { margin-bottom: 20px; }
  .catalog-screen .catalog-tools { margin-bottom: 22px; }
  .catalog-screen .lib-toolbar { align-items: stretch; }
  .catalog-tools .chip { padding-inline: 13px; }
  .catalog-tools .lib-filter { flex-basis: 100%; width: 100%; }
  .catalog-panel { padding: 14px 10px; }
  .catalog-screen .card-grid,
  .catalog-shelf .card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 14px; }
  .catalog-screen .section-head { gap: 10px; margin-bottom: 12px; }
  .catalog-screen h2.section { font-size: 17px; }
  .catalog-screen .catalog-hero { grid-template-columns: minmax(0, 1fr); padding: 22px 18px; gap: 22px; }
  .catalog-hero > .cover { width: min(65%, 180px); margin-inline: auto; }
  .catalog-hero h1 { font-size: 30px; letter-spacing: -.8px; }
  .catalog-hero .hero-actions { margin-top: 20px; }
  .catalog-screen .tracklist-head,
  .catalog-screen .track { grid-template-columns: 44px minmax(0, 1fr) 34px var(--catalog-action-size) var(--catalog-action-size); gap: 6px; padding-inline: 5px; }
  .catalog-playlist:not(.is-reordering) .tracklist-head,
  .catalog-playlist:not(.is-reordering) .track { grid-template-columns: 44px minmax(0, 1fr) var(--catalog-action-size) var(--catalog-action-size) var(--catalog-action-size); }
  .catalog-playlist:not(.is-reordering) .track .dur,
  .catalog-playlist:not(.is-reordering) .tracklist-head > :nth-child(4) { display: none; }
  .catalog-screen .track-play-control { margin-left: 0; }
  .catalog-screen .track .name { font-size: 13px; }
  .catalog-screen .track .artist { font-size: 11.5px; }
  .catalog-screen .row { gap: 12px; padding-inline: 5px; }
  .catalog-screen .row .meta { font-size: 11px; }
  .catalog-screen .row .cover { width: 44px; height: 44px; }
}
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  .catalog-panel,
  .catalog-screen .catalog-hero { background: var(--bg2); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .catalog-panel,
  .catalog-screen .catalog-hero { background: var(--bg2); }
}