/* Hallmark · shape: app screen · genre: modern-minimal · theme: Reference neutrals (by request) · redesign: full · copy: verbatim
 * nav: compact curator switch and segmented collection tabs · signature: working record sleeves beside a personal listening index
 * states: existing full, filtered, empty, selected, loading and player error · palette: white, warm canvas, black controls, small blue signal
 * display: Outfit 500 · body: Onest 400/500/600 · axes: light/geometric-sans/cool · posture: Restrained · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H5 E4 S4 R5 V4 · weakest: S, preserved the personal portraits and interactive Dylan sleeves as the collection's identity */
/* Hallmark · finish-review: subagent · ship · 0 actionable findings · gap: none */

.collection-page { background: var(--color-canvas); }
.collection-page .page-shell { max-width: var(--container); margin: 0 auto; padding: var(--space-lg) 48px 32px; min-height: 100dvh; box-shadow: none; }
.collection-page .curator-switch { border: 0; width: fit-content; justify-content: flex-end; margin: 0 0 var(--space-md) auto; padding: var(--space-2xs); border-radius: var(--radius-pill); background: var(--color-paper-2); }
.collection-page .curator-switch button { min-height: 40px; min-width: 56px; padding: var(--space-xs) var(--space-md); font: 500 13px var(--font-body); letter-spacing: 0; border-radius: var(--radius-pill); }
.collection-page .curator-switch button[aria-pressed="true"] { background: var(--ink); color: var(--color-accent-ink); text-decoration: none; font-weight: 500; }
.collection-page .curator-switch > span { margin: 0 var(--space-2xs); color: var(--muted); }
.collection-page .curator-masthead { display: grid; grid-template-columns: minmax(0, 1fr) 264px; align-items: center; gap: 48px; padding: 0 0 var(--space-xl); }
.curator-introduction { min-width: 0; }
.collection-page .collection-title { font-family: var(--font-display); font-size: 64px; line-height: 1.06; font-weight: 500; letter-spacing: -.04em; text-transform: lowercase; overflow-wrap: break-word; min-width: 0; }
.collection-page .collection-title .title-lead { display: block; font-family: inherit; font-size: 25px; line-height: 1.3; letter-spacing: -.02em; font-weight: 500; margin-bottom: var(--space-2xs); }
.collection-page .title-period { color: inherit; }
.collection-page .collection-byline { margin: var(--space-sm) 0 0; font-size: 16px; line-height: 1.5; color: var(--muted); }
.collection-page .collection-byline a, .collection-page #jens-erik-byline { color: var(--ink); font-weight: 500; }
.collection-page .collection-byline a { text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 4px; }
.collection-page .collection-byline a:hover { text-decoration-color: var(--accent); }
.collection-page .intro { margin-top: var(--space-sm); font-size: 16px; line-height: 1.6; color: var(--muted); }
.collection-page .collection-stats { display: flex; width: fit-content; gap: var(--space-lg); align-items: center; flex-wrap: wrap; padding: 0; margin-top: 20px; }
.collection-page .collection-stats div { display: flex; flex-direction: row; align-items: baseline; gap: var(--space-xs); }
.collection-page .collection-stats strong { font-family: var(--font-body); font-size: 16px; font-weight: 500; letter-spacing: 0; line-height: 1.5; font-variant-numeric: tabular-nums; }
.collection-page .collection-stats span { font-size: 13px; }
.collection-page .collection-stats p { margin: 0; font-family: var(--font-body); font-size: 13px; letter-spacing: 0; text-align: left; white-space: nowrap; }
.collection-page .curator-portrait { width: 100%; max-width: 264px; height: auto; filter: none; border: 0; border-radius: var(--radius-card); justify-self: end; }
.collection-page .collection-heading { border: 0; padding: 0 0 var(--space-lg); align-items: center; }
.collection-page .view-switch { gap: var(--space-2xs); padding: var(--space-2xs); background: var(--color-paper-2); border-radius: var(--radius-pill); }
.collection-page .view-switch button { min-height: 44px; margin: 0; padding: var(--space-xs) 20px; border: 0; border-radius: var(--radius-pill); font: 500 15px var(--font-display); color: var(--muted); text-transform: lowercase; white-space: nowrap; }
.collection-page .view-switch button[aria-pressed="true"] { background: var(--ink); color: var(--color-accent-ink); }
.collection-page .view-switch button:hover:not([aria-pressed="true"]) { color: var(--ink); }
.collection-page .view-switch button span { margin-left: var(--space-xs); font: 400 12px var(--font-body); color: inherit; }
.collection-page .editorial-label { font-family: var(--font-body); font-size: 13px; letter-spacing: 0; text-transform: none; }
.collection-page .editorial-label span { color: inherit; margin-inline: var(--space-2xs); }
.collection-page .workspace { grid-template-columns: minmax(0, 1fr) 304px; gap: var(--space-xl); align-items: start; }
.collection-page .browse { padding-top: 0; }
.collection-page .comparison-type-switch { display: inline-flex; gap: var(--space-2xs); padding: var(--space-2xs); margin-bottom: var(--space-md); border-radius: var(--radius-pill); background: var(--color-paper-2); }
.collection-page .comparison-type-switch[hidden] { display: none; }
.collection-page .comparison-type-switch button { min-height: 44px; padding: var(--space-xs) var(--space-md); border-radius: var(--radius-pill); background: transparent; color: var(--muted); font: 500 14px var(--font-display); }
.collection-page .comparison-type-switch button[aria-pressed="true"] { background: var(--ink); color: var(--color-accent-ink); }
.collection-page .search-wrap { height: 52px; padding: 0 var(--space-md); gap: var(--space-sm); border: 1px solid var(--color-field-edge); background: var(--color-surface); border-radius: var(--radius-pill); }
.collection-page .search-wrap input { height: 44px; font-size: 16px; }
.collection-page kbd { border: 0; padding: var(--space-2xs) var(--space-xs); border-radius: 4px; background: var(--color-paper-2); font-family: var(--font-body); }
.collection-page #clear-search { font-size: 24px; }
.collection-page .filters { gap: var(--space-sm); padding: 20px 0 var(--space-xs); }
.collection-page .filter-field { gap: var(--space-xs); }
.collection-page .filter-field > label { font-size: 12px; }
.collection-page select { min-height: 44px; padding: 0 var(--space-sm); border: 1px solid var(--color-field-edge); border-radius: var(--radius-pill); background-color: var(--color-surface); font-size: 12px; }
.collection-page .results-summary { min-height: 48px; margin: 0; }
.collection-page .results-summary p { font-size: 13px; }
.collection-page .list-head { padding: var(--space-sm) var(--space-xs); border-bottom: 1px solid var(--line); font: 500 12px var(--font-body); color: var(--muted); letter-spacing: 0; text-transform: none; }
.collection-page .song-grid { grid-template-columns: 44px minmax(0, 1.4fr) minmax(104px, 1fr) 40px 36px; gap: var(--space-sm); }
.collection-page .song-row { min-height: 80px; padding: var(--space-sm) var(--space-xs); border-bottom: 1px solid var(--line); border-radius: 0; transition: none; }
.collection-page .song-row:hover { background: var(--color-hover); }
.collection-page .song-row.selected { background: var(--selected); border-radius: 12px; border-bottom-color: var(--color-transparent); }
.collection-page .play-icon { width: 32px; height: 32px; border-color: var(--color-field-edge); }
.collection-page .song-row.selected .play-icon, .collection-page .play-button:hover .play-icon { background: var(--ink); border-color: var(--ink); color: var(--color-accent-ink); }
.collection-page .song-row.selected .song-art::after { content: ''; position: absolute; inset: 0 0 0 auto; width: 3px; background: var(--accent); z-index: 2; pointer-events: none; }
.collection-page .song-identity { gap: var(--space-sm); }
.collection-page .song-art { width: 44px; height: 44px; border-radius: 4px; }
.collection-page .song-name { font-size: 14px; font-weight: 500; }
.collection-page .record-title { display: block; }
.collection-page .album-name { font-size: 12px; }
.collection-page .song-year, .collection-page .rating { font-family: var(--font-body); font-variant-numeric: tabular-nums; }
.collection-page .rating { font-size: 14px; font-weight: 500; }
.collection-page .rating.perfect { color: var(--ink); }
.collection-page .sidebar { margin-top: 0; padding: 20px; border: 0; border-radius: var(--radius-card); background: var(--color-paper-2); position: sticky; top: 24px; align-self: start; }
.collection-page .detail { position: static; padding: 0; max-height: calc(100dvh - 88px); }
.collection-page .detail-topline { margin-bottom: var(--space-md); font: 400 13px var(--font-body); color: var(--muted); letter-spacing: 0; text-transform: none; }
.collection-page .detail-cover { max-width: 264px; box-shadow: none; }
.collection-page .detail-title-row { margin: var(--space-lg) 0 var(--space-xs); gap: var(--space-sm); }
.collection-page .detail h2 { font-family: var(--font-display); font-size: 25px; font-weight: 500; line-height: 1.2; letter-spacing: -.02em; }
.collection-page .detail-score { font: 500 22px/1.3 var(--font-body); color: var(--ink); font-variant-numeric: tabular-nums; }
.collection-page .detail-album { font-size: 13px; }
.collection-page .detail-facts { margin-top: 20px; }
.collection-page .detail-facts dt { font-size: 11px; }
.collection-page .detail-facts dd { margin-top: var(--space-xs); font: 400 12px var(--font-body); }
.collection-page .player-section { padding-top: var(--space-lg); }
.collection-page .listen-button { background: var(--ink); color: var(--color-accent-ink); border-radius: var(--radius-pill); min-height: 48px; font: 500 14px var(--font-display); text-transform: lowercase; letter-spacing: 0; transition: none; }
.collection-page .listen-button:hover { background: var(--color-ink-2); }
.collection-page .spotify-link { font-size: 12px; }
.collection-page .lp-back { background: var(--color-paper-2); }
.collection-page .lp-jacket::before { opacity: .07; filter: blur(6px); }
.collection-page .lp-face { box-shadow: 0 1px 3px var(--color-shadow); }
.collection-page .lp-artist { font: 400 12px var(--font-body); text-transform: none; letter-spacing: 0; }
.collection-page .album-grid { gap: 32px var(--space-lg); padding-top: var(--space-xs); }
.collection-page .album-card-name { font-size: 15px; font-weight: 500; }
.collection-page .album-card .rating { color: var(--muted); font-size: 13px; }
.collection-page .album-card p { font-size: 12px; }
.collection-page .sleeve-hint { font-size: 12px; margin-bottom: var(--space-lg); }
.collection-page .comparison-summary { padding: var(--space-md) 0 var(--space-lg); }
.collection-page .comparison-summary h2, .collection-page .comparison h2, .collection-page .empty-state h2 { font: 500 24px/1.3 var(--font-display); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.collection-page .comparison-summary p { font-size: 15px; }
.collection-page .comparison-table thead th { font: 400 12px var(--font-body); }
.collection-page .comparison-rank { font-size: 14px; }
.collection-page .collection-footnote { margin-top: var(--space-lg); font-size: 12px; }
.collection-page .page-footer { margin-top: 48px; padding-top: var(--space-lg); border-top: 1px solid var(--line); font: 400 12px var(--font-body); letter-spacing: 0; text-transform: none; }
.collection-page .mobile-selection { border-top: 1px solid var(--line); background: var(--color-surface); box-shadow: none; }
.collection-page .mobile-selection strong { font-size: 13px; font-weight: 500; }
.collection-page #details-dialog[open] { background: var(--paper); border-radius: 20px 20px 0 0; }
.collection-page #details-dialog .detail { max-height: none; }
.collection-page .mobile-close { border-radius: var(--radius-pill); background: var(--color-paper-2); }

@media (max-width: 1200px) {
 .collection-page .page-shell { padding-inline: 32px; }
 .collection-page .workspace { grid-template-columns: minmax(0, 1fr) 280px; gap: var(--space-lg); }
 .collection-page .sidebar { padding: 20px; }
 .collection-page .song-grid { grid-template-columns: 44px minmax(0, 1fr) 36px 32px; gap: var(--space-xs); }
}
@media (max-width: 900px) {
 .collection-page .page-shell { padding: var(--space-lg) var(--space-lg) 104px; }
 .collection-page .curator-masthead { grid-template-columns: minmax(0, 1fr) 224px; gap: var(--space-lg); padding-bottom: 32px; }
 .collection-page .collection-title { font-size: 56px; }
 .collection-page .collection-title .title-lead { font-size: 23px; }
 .collection-page .collection-stats { gap: var(--space-md); }
 .collection-page .workspace { display: block; }
 .collection-page .sidebar { display: none; }
 .collection-page .song-grid { grid-template-columns: 44px minmax(0, 1fr) 32px; gap: var(--space-xs); }
 .collection-page .collection-heading { padding-bottom: var(--space-lg); }
 .collection-page .page-footer { gap: var(--space-xs); }
}
@media (max-width: 700px) {
 .collection-page .collection-heading { flex-wrap: wrap; gap: var(--space-xs); }
 .collection-page .view-switch button span { display: none; }
 .collection-page .page-shell { padding-top: var(--space-md); }
 .collection-page .curator-switch { margin-bottom: var(--space-lg); }
 .collection-page .curator-masthead { grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); }
 .collection-page .collection-title { font-size: 48px; }
 .collection-page .collection-title .title-lead { font-size: 22px; }
 .collection-page .collection-byline { margin-top: var(--space-xs); font-size: 15px; }
 .collection-page .intro { font-size: 15px; }
 .collection-page .collection-stats { gap: var(--space-sm) 20px; margin-top: var(--space-md); }
 .collection-page .collection-stats p { flex-basis: 100%; }
 .collection-page .curator-portrait { width: 100%; max-width: 280px; justify-self: start; }
 .collection-page .view-switch button { font-size: 14px; padding-inline: var(--space-md); }
 .collection-page .editorial-label { font-size: 12px; }
 .collection-page .editorial-label span { margin-inline: var(--space-3xs); }
 .collection-page .song-row { padding-inline: 0; }
 .collection-page .song-identity { gap: var(--space-xs); }
 .collection-page .song-art { width: 36px; height: 36px; }
 .collection-page .album-grid { gap: 32px var(--space-md); }
 .collection-page .comparison-summary h2 { font-size: 22px; }
}
@media (max-width: 380px) {
 .collection-page .page-shell { padding-inline: var(--space-md); }
 .collection-page .view-switch button { padding-inline: 5px; font-size: 12px; }
 .collection-page .editorial-label { display: none; }
 .collection-page .view-switch button span { margin-left: var(--space-2xs); font-size: 11px; }
 .collection-page .editorial-label { font-size: 11px; }
 .collection-page .song-art { width: 32px; height: 32px; }
 .collection-page .collection-title { font-size: 44px; }
}