/* Generated from ui/styles/playlist-cards.css. Edit the source, then npm run build:styles. */
/* Shared playlist cards: public repertoire and musician cabinet. */
.musician-playlists { min-width: 0; margin-block: var(--ds-ui-space-24, var(--ui-space-24)); }
.artist-playlists { min-width:0; margin:var(--ds-ui-space-24, var(--ui-space-24)) 0 var(--ds-ui-space-12, var(--ui-space-12)); }
.artist-playlists__head { display: flex; align-items: center; justify-content: space-between; gap: var(--ds-ui-space-12, var(--ui-space-12)); flex-wrap: wrap; }
.artist-playlists__rail { display: flex; gap: var(--ds-ui-space-12, var(--ui-space-12)); overflow-x: auto; scroll-snap-type: x proximity; padding-block:0; }
/* The artwork owns its title; the only caption is this musician's song count. */
.artist-playlist-card { flex:0 0 min(200px,calc((100% - 3 * var(--ds-ui-space-12, var(--ui-space-12))) / var(--ds-ui-playlist-visible-cards, var(--ui-playlist-visible-cards)))); min-width: 0; display: flex; flex-direction: column; gap: var(--ds-ui-space-8, var(--ui-space-8)); padding: 0; border: 0; border-radius: var(--ds-ui-radius-card, var(--ui-radius-card)); background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; scroll-snap-align: start; }
.artist-playlist-card__cover { position: relative; display: grid; place-items: center; width: 100%; aspect-ratio: 1; border-radius: inherit; overflow: hidden; isolation: isolate; background: var(--ds-ui-color-ink, var(--ui-color-ink)); color: var(--ds-ui-color-white, var(--ds-ui-color-white, var(--ui-color-white))); box-sizing: border-box; border: 2px solid transparent; transition: border-color var(--motion-fast) var(--motion-ease-standard); }
.artist-playlist-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; transition: scale var(--motion-media) var(--motion-ease); }
.artist-playlist-card__fallback { display: none; position: relative; max-width: 100%; padding: var(--ds-ui-space-12, var(--ui-space-12)); box-sizing: border-box; overflow-wrap: anywhere; font: var(--ds-ui-type-label, var(--ui-type-label)); background: var(--ds-ui-color-ink, var(--ui-color-ink)); }
.artist-playlist-card__cover[data-missing="true"] .artist-playlist-card__fallback { display: block; }
.artist-playlist-card__count { position:absolute; right:var(--ds-ui-space-6, var(--ui-space-6)); bottom:var(--ds-ui-space-6, var(--ui-space-6)); padding:var(--ds-ui-space-2, var(--ui-space-2)) var(--ds-ui-space-6, var(--ui-space-6)); border:1px solid color-mix(in srgb,var(--ds-ui-color-white, var(--ui-color-white)) 24%,transparent); border-radius:var(--ds-ui-radius-pill, var(--ui-radius-pill)); color:var(--ds-ui-color-white, var(--ui-color-white)); background:var(--ds-ui-playlist-count-background, var(--ui-playlist-count-background)); box-shadow:var(--ds-ui-playlist-count-shadow, var(--ui-playlist-count-shadow)); backdrop-filter:blur(var(--ds-ui-space-8, var(--ui-space-8))); -webkit-backdrop-filter:blur(var(--ds-ui-space-8, var(--ui-space-8))); font:var(--ds-ui-type-caption, var(--ui-type-caption)); white-space:nowrap; }
.artist-playlist-card[aria-pressed="true"] .artist-playlist-card__cover { border-color: var(--ds-ui-color-accent, var(--ui-color-accent)); }
.artist-playlist-card[aria-pressed="true"] .artist-playlist-card__count { text-decoration: underline; text-underline-offset: .2em; }
.musician-playlists summary { cursor: pointer; padding-block: var(--ds-ui-space-12, var(--ui-space-12)); font: var(--ds-ui-type-label, var(--ui-type-label)); }
.artist-playlist-choices { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,240px),1fr)); gap: var(--ds-ui-space-12, var(--ui-space-12)); margin-block: var(--ds-ui-space-16, var(--ui-space-16)); }
.artist-playlist-choice { display: flex; gap: var(--ds-ui-space-12, var(--ui-space-12)); align-items: center; min-height: var(--ds-ui-space-44, var(--ui-space-44)); }
.artist-playlist-choice small { display: block; color: inherit; }
.artist-playlist-order { display: grid; gap: var(--ds-ui-space-12, var(--ui-space-12)); padding-left: var(--ds-ui-space-24, var(--ui-space-24)); }
.artist-playlist-order li > div { display: inline-flex; gap: var(--ds-ui-space-8, var(--ui-space-8)); margin-left: var(--ds-ui-space-12, var(--ui-space-12)); }
@media (forced-colors: active) { .artist-playlist-card__cover { background: Canvas; color: CanvasText; border-color: ButtonText; } .artist-playlist-card img { display: none; } .artist-playlist-card__fallback { display: block; background: Canvas; } .artist-playlist-card[aria-pressed="true"] .artist-playlist-card__cover { border-color: Highlight; } }

.artist-playlists[hidden], .artist-playlists [hidden] { display: none; }
.artist-playlist-card:hover:not([aria-pressed="true"]) .artist-playlist-card__cover { border-color: currentColor; }
.artist-playlist-card:focus-visible { outline: 2px solid var(--ds-ui-color-accent, var(--ui-color-accent)); outline-offset: -2px; }

@media (hover: hover) and (pointer: fine) { .artist-playlist-card:hover img { scale: var(--motion-zoom); } }
@media (prefers-reduced-motion: reduce) { .artist-playlist-card, .artist-playlist-card img { transition: none; } }