/* Collection cards and viewers follow the approved shelf component, independently of editorial cards. */
.spj-collection-page,.collection-dialog{--bg:var(--background);--soft:var(--nav-feedback,#dce6e9);--display:"Playfair Display",Georgia,serif}
.spj-collection-page .collection-links{display:flex;flex-wrap:wrap;gap:24px;padding:0 0 22px;border-bottom:1px solid var(--line)}
.spj-collection-page .collection-links a{display:flex;align-items:center;min-height:44px;font-size:14px}
.spj-collection-page .collection-links [aria-current=page]{color:var(--accent);text-decoration:underline;text-underline-offset:8px}
.spj-collection-page .collection-links + .collection-library-title{margin-top:20px}
.spj-collection-page .shelf-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:36px 24px}
.spj-collection-page .shelf-entry{min-width:0;display:flex}
.spj-collection-page .shelf-card{display:flex;flex-direction:column;min-width:0;width:100%;margin:0}
.spj-collection-page .collection-card-button{display:flex;flex-direction:column;flex:1;width:100%;padding:0;text-align:left;font:inherit;color:inherit;background:var(--bg);border:1px solid var(--line);border-radius:6px;overflow:hidden;cursor:pointer}
.spj-collection-page .shelf-art,.collection-dialog .shelf-art{position:relative;display:flex;align-items:center;justify-content:center;width:100%;aspect-ratio:2/3;background:var(--nav-feedback,#dce6e9);overflow:hidden}
.spj-collection-page.shelf-listening .shelf-art,.collection-dialog.shelf-listening .shelf-art{aspect-ratio:1}
.spj-collection-page .shelf-art img,.collection-dialog .shelf-art img{width:100%;height:100%;object-fit:cover;display:block;border-radius:0}
.spj-collection-page .shelf-art img[hidden],.collection-dialog .shelf-art img[hidden],.cover-fallback[hidden]{display:none}
.cover-fallback{padding:18px;text-align:center;color:var(--muted);font-family:"Playfair Display",Georgia,serif}
.spj-collection-page .collection-card-copy{padding:18px 16px 16px;display:flex;flex-direction:column;gap:8px;flex:1;width:100%;box-sizing:border-box;overflow-wrap:anywhere}
.spj-collection-page .collection-card-copy .eyebrow{font-size:10px;line-height:1.6;letter-spacing:1px;color:var(--warm)}
.spj-collection-page .collection-card-title{font-family:var(--display);font-size:22px;line-height:1.3;font-weight:500;letter-spacing:0}
.spj-collection-page .collection-card-creator{font-size:15px;color:var(--muted);line-height:1.6}
.spj-collection-page .collection-card-period{font-size:12px;color:var(--muted)}
.spj-collection-page .collection-favorite{color:var(--warm);font-family:Arial,sans-serif;font-size:16px}
.spj-collection-page .collection-card-action{display:inline-flex;align-self:flex-end;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:8px 12px;border:1px solid var(--accent);border-radius:4px;margin-top:auto;font-size:13px;color:var(--accent);box-sizing:border-box}
.spj-collection-page .collection-card-period{margin-bottom:8px}
.spj-collection-page .collection-card-button:is(:hover,:focus-visible) .collection-card-action{background:var(--soft);color:var(--warm)}
.spj-collection-page .collection-card-button:is(:hover,:focus-visible) .collection-card-title{color:var(--warm)}
.spj-collection-page .collection-card-button:focus-visible{outline:3px solid var(--focus);outline-offset:4px}
.spj-collection-page .collection-item-credit{font-size:10px;line-height:1.6;margin:8px 0 0}
.spj-collection-page .collection-now{padding-bottom:32px;margin:28px 0 32px;border-bottom:1px solid var(--line)}
.spj-collection-page .shelf-year-title,.spj-collection-page .collection-library-title{font-family:var(--display);font-size:32px;font-weight:500;margin:0 0 28px}
.spj-collection-page .collection-now-count{font-family:Arial,sans-serif;font-size:16px;color:var(--muted);font-weight:400}
.spj-collection-page .collection-now .shelf-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.spj-collection-page .collection-now .collection-card-button{display:grid;grid-template-columns:minmax(80px,34%) minmax(0,1fr);align-items:start}
.spj-collection-page .collection-now .collection-card-copy{padding:14px;min-width:0;height:100%}
.spj-collection-page .collection-now .collection-card-title{font-size:20px}
.spj-collection-page .collection-now .collection-card-creator{font-size:14px}
.spj-collection-page .shelf-controls{display:flex;align-items:end;flex-wrap:wrap;gap:16px;margin:28px 0 20px}
.spj-collection-page .shelf-controls label{display:grid;gap:6px;font-size:12px;color:var(--muted)}
.spj-collection-page .shelf-search{flex:1;min-width:220px}
.spj-collection-page .shelf-controls :is(input,select){min-height:44px;border:1px solid var(--control);border-radius:4px;padding:10px 14px;background:var(--bg);color:inherit;font:inherit;box-sizing:border-box}
.spj-collection-page .shelf-controls select{padding-right:32px}
.spj-collection-page .shelf-chip,.spj-collection-page .collection-filter-panel>summary{min-height:44px;padding:8px 14px;border:1px solid var(--line);border-radius:4px;background:var(--bg);color:var(--text);font:inherit;font-size:12px;line-height:1.6;box-sizing:border-box;cursor:pointer}
.spj-collection-page .shelf-chip[aria-pressed=true]{background:var(--accent);color:white}
.spj-collection-page .collection-filter-panel{position:relative}
.spj-collection-page .collection-filter-options{position:absolute;z-index:3;right:0;min-width:250px;padding:24px;background:var(--bg);border:1px solid var(--line);border-radius:6px;box-shadow:0 8px 24px #11182715;display:grid;gap:16px}
.spj-collection-page .text-link{border:0;background:none;font-size:13px;min-height:44px;padding:8px;cursor:pointer}
.spj-collection-page .shelf-result{font-size:12px;color:var(--muted);margin:0 0 28px}
.spj-collection-page .collection-pagination{display:flex;justify-content:center;gap:8px;margin:32px 0}
.spj-collection-page .collection-pagination button{min-width:44px;min-height:44px;border:1px solid var(--line);border-radius:4px;background:var(--bg);color:var(--accent)}
.spj-collection-page .collection-pagination [aria-current=page]{background:var(--accent);color:white}
.collection-dialog{box-sizing:border-box;width:min(1100px,calc(100% - 64px));max-width:none;max-height:calc(100dvh - 64px);padding:64px;border:1px solid var(--line);border-radius:6px;background:var(--background);color:var(--text);overflow:auto}
.collection-dialog::backdrop{background:#11182799;backdrop-filter:blur(7px)}
.collection-dialog-close{position:sticky;top:0;display:flex;align-items:center;justify-content:center;width:48px;height:48px;margin:-40px -40px 16px auto;border:1px solid var(--line);border-radius:50%;background:var(--background);color:var(--accent);padding:0;cursor:pointer;z-index:1}
.collection-dialog-close svg{display:block;width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.collection-dialog-close:hover{background:var(--nav-feedback,#dce6e9)}
.collection-dialog-layout{display:grid;grid-template-columns:260px minmax(0,1fr);gap:48px;align-items:start}
.collection-dialog-art{overflow:hidden;border-radius:6px}
.collection-dialog .eyebrow{font-size:10px;letter-spacing:1px;color:var(--warm);text-transform:uppercase}
.collection-dialog h2{font-family:"Playfair Display",Georgia,serif;font-size:42px;font-weight:500;line-height:1.2;margin:16px 0}
.collection-dialog-creator{font-size:20px;color:var(--muted);margin:0 0 24px}
.collection-detail-tags{display:flex;flex-wrap:wrap;gap:8px}
.collection-detail-tag{padding:6px 12px;border:1px solid var(--line);font-size:12px;border-radius:4px}
.collection-detail-section{margin-top:28px;padding-top:24px;border-top:1px solid var(--line)}
.collection-detail-section h3{font-family:Arial,sans-serif;font-size:13px;font-weight:500;letter-spacing:1px;text-transform:uppercase;margin:0 0 16px}
.collection-detail-section p{font-size:15px;line-height:1.8;color:var(--muted);margin:0 0 16px}
.collection-dialog .system-note{font-size:12px;line-height:1.6;color:var(--muted)}
.collection-tracklist{padding:0;margin:0;list-style:none}
.collection-tracklist li{display:grid;grid-template-columns:24px minmax(0,1fr) 40px;gap:12px;align-items:center;border-bottom:1px solid var(--line);font-size:13px;color:var(--muted)}
.collection-tracklist .discogs-track-title{padding:12px 0;color:var(--accent)}
.collection-detail-links{display:flex;flex-wrap:wrap;gap:12px;margin-top:16px}
.collection-detail-links a{display:inline-flex;align-items:center;min-height:44px;padding:10px 16px;border:1px solid var(--accent);border-radius:4px;color:var(--accent);font-size:13px;text-decoration:none;box-sizing:border-box}
.collection-detail-links a:is(:hover,:focus-visible){background:var(--nav-feedback,#dce6e9);color:var(--warm);text-decoration:none}
.collection-dialog :focus-visible{outline:3px solid var(--focus);outline-offset:4px}
.collection-dialog .series-season{border-bottom:1px solid var(--line);padding:12px 0}
.collection-dialog .series-season summary{cursor:pointer;font-size:14px;min-height:32px}
@media(max-width:1100px){.spj-collection-page .collection-now .shelf-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:900px){.spj-collection-page .shelf-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.spj-collection-page .collection-card-title{font-size:20px}}
@media(max-width:700px){.collection-dialog{width:calc(100% - 24px);max-height:calc(100dvh - 24px);padding:24px}.collection-dialog-close{margin:0 0 20px auto}.collection-dialog-layout{grid-template-columns:1fr;gap:24px}.collection-dialog-art{width:150px;max-width:60%;margin-inline:auto}.collection-dialog h2{font-size:32px}.collection-dialog-creator{font-size:18px}.collection-detail-links{flex-direction:column}.spj-collection-page .collection-now .shelf-grid{grid-template-columns:1fr;max-width:480px}}
@media(max-width:500px){.spj-collection-page .shelf-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 16px}.spj-collection-page .shelf-search{flex-basis:100%}.spj-collection-page .collection-library-title{font-size:28px}.spj-collection-page .collection-filter-options{right:0;min-width:220px}}

body:has(.collection-dialog[open]){overflow:hidden}.collection-dialog{overscroll-behavior:contain}.collection-dialog h2,.collection-detail-section h3{color:var(--text)}

/* Approved filter disclosure and season panels. */
.spj-collection-page .collection-filter-panel>summary{display:flex;align-items:center;justify-content:center;gap:8px;list-style:none}
.spj-collection-page .collection-filter-panel>summary::-webkit-details-marker{display:none}
.spj-collection-page .collection-filter-panel>summary:after{content:'+';font-size:18px;line-height:1}
.spj-collection-page .collection-filter-panel[open]>summary:after{content:'−'}
.spj-collection-page .collection-filter-panel[open]{flex-basis:100%;order:5}
.spj-collection-page .collection-filter-panel[open]>summary{width:max-content;margin-bottom:16px}
.spj-collection-page .collection-filter-options{position:static;box-shadow:none;display:flex;flex-wrap:wrap;gap:20px}
.collection-dialog .series-season{margin:16px 0;border:1px solid var(--line);border-radius:6px;padding:0}
.collection-dialog .series-season summary{display:flex;align-items:center;gap:16px;min-height:56px;padding:14px;list-style:none}
.collection-dialog .series-season summary::-webkit-details-marker{display:none}
.collection-dialog .series-season summary:after{content:'+';margin-left:auto;font-size:22px}
.collection-dialog .series-season[open] summary:after{content:'−'}
.collection-dialog .series-season summary img{width:60px;height:90px;object-fit:contain;border-radius:4px}
.collection-dialog .series-season summary strong{display:block;font-size:16px}
.collection-dialog .series-season summary small{display:block;font-size:12px;color:var(--muted);margin-top:6px}
.collection-dialog .series-season-body{padding:0 16px 18px}
.collection-dialog .series-season summary:hover{background:var(--soft)}
.collection-dialog .series-season-body a{font-size:13px}

.spj-collection-page .collection-card-period{margin-bottom:12px}.spj-collection-page .collection-card-action{padding:10px 16px;font:500 13px/1.4 Inter,Arial,sans-serif}.spj-collection-page .collection-card-button:is(:hover,:focus-visible) .collection-card-action{border-color:var(--warm)}

.collection-dialog .series-status{display:inline-block;padding:8px 12px;background:var(--soft);border:1px solid var(--line);border-radius:4px;font-weight:600}

/* Collection page chrome follows the approved permanent-page layout.
   Scope these rules so Explore's pagination and editorial type cannot leak into it. */
.spj-explore:has(>.spj-collection-page){padding-top:0}
.spj-collection-page,.collection-dialog{font:400 16px/1.6 Inter,system-ui,sans-serif}
.spj-collection-page{--line:#d9dfe7;--soft:#edf0f6}
.spj-collection-page .collection-header{padding:54px 0 30px;margin:0}
.spj-collection-page .eyebrow{margin:0;font:600 10px/1.5 Inter,system-ui,sans-serif;letter-spacing:1.8px;text-transform:uppercase;color:var(--warm)}
.spj-collection-page .collection-header h1{font-family:var(--display);font-size:64px;font-weight:500;line-height:1.12;letter-spacing:-1.7px;margin:20px 0}
.spj-collection-page .collection-header>p:last-child{font:400 24px/1.5 var(--display);color:var(--muted);max-width:750px;margin:0}
.spj-collection-page .collection-links{gap:4px}
.spj-collection-page .collection-links a{display:inline-flex;align-items:center;min-height:44px;padding:10px 12px;border-radius:3px;font:400 14px/1.6 Inter,system-ui,sans-serif;color:var(--text);background:transparent;border:0;text-decoration:none;transition:background-color 120ms ease,color 120ms ease}
.spj-collection-page .collection-links a[aria-current=page]{color:var(--accent);background:transparent;border:0;text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:1px}
.spj-collection-page .collection-links a:active{background:var(--nav-feedback)}
.spj-collection-page .collection-links a:focus-visible{outline:3px solid var(--focus);outline-offset:4px}
.spj-collection-page .shelf-year-title{line-height:1.12;letter-spacing:-1px}
.spj-collection-page .collection-library-title{line-height:1.25;letter-spacing:-1px;margin:0 0 20px}
.spj-collection-page .shelf-controls{margin-top:0;position:relative}
.spj-collection-page .shelf-search{flex:1 1 260px;min-width:0}
.spj-collection-page .collection-filter-options{flex-direction:column;gap:20px;padding:20px;background:var(--soft);border:0}
.spj-collection-page .collection-filter-options label:last-child{max-width:350px;width:100%}
.spj-collection-page .shelf-chip[aria-pressed=true],.spj-collection-page .collection-pagination [aria-current=page]{color:var(--background)}
.spj-collection-page .collection-card-button:is(:hover,:focus-visible) .collection-card-action{background:var(--soft)}
@media(hover:hover) and (pointer:fine){
 .spj-collection-page .collection-links a:hover{background:var(--nav-feedback);color:var(--text);text-decoration:none}
 .spj-collection-page .collection-links a[aria-current=page]:hover{color:var(--accent);text-decoration:underline}
}
@media(max-width:900px){.spj-collection-page .collection-header{padding-top:32px}.spj-collection-page .collection-header h1{font-size:43px}}
@media(max-width:500px){.spj-collection-page .shelf-search{flex-basis:100%}.spj-collection-page .collection-filter-options{padding:16px}.spj-collection-page .collection-now-count{font-size:14px}}
:root[data-appearance=dark] .spj-collection-page{--line:#344156;--soft:#1e2c40}
@media(prefers-color-scheme:dark){:root:not([data-appearance=light]) .spj-collection-page{--line:#344156;--soft:#1e2c40}}
@media(prefers-reduced-motion:reduce){.spj-collection-page .collection-links a{transition:none}}

.spj-collection-page .collection-card-copy .eyebrow{font-size:10px;font-weight:600;line-height:1.5;letter-spacing:1.8px;text-transform:uppercase}
.spj-collection-page .shelf-chip[aria-pressed=true]{border-color:var(--accent)}
.spj-collection-page .shelf-search input{font:400 14px/1.4 Inter,system-ui,sans-serif;min-height:48px}
.spj-collection-page .collection-provider-credits{border-top:1px solid var(--line);padding:24px 0 48px;margin-top:40px}
.spj-collection-page .collection-provider-credits h2{font:500 16px/1.12 Inter,system-ui,sans-serif;margin:0 0 16px;letter-spacing:-1px}
.spj-collection-page .collection-provider-credits img{width:110px;height:auto}
.spj-collection-page .collection-provider-credits p{font-size:12px;color:var(--muted);margin:16px 0 0}
.spj-collection-page .system-note{font-size:12px;color:var(--muted);margin:0 0 20px}
.spj-collection-page .system-note a{color:var(--link-default);text-decoration:underline;text-underline-offset:4px}
.spj-collection-page .system-note a:visited{color:var(--link-visited)}
.spj-collection-page .system-note a:hover{color:var(--link-default);text-decoration-thickness:2px}

@media(max-width:900px){.spj-collection-page .collection-header>p:last-child{font-size:21px}}
@media(max-width:500px){.spj-collection-page .shelf-year-title{font-size:28px}}

/* Compact copy in the collection and Now grids. */
.spj-collection-page .collection-library .collection-card-copy {
    padding-block: 12px;
    gap: 4px;
}
.spj-collection-page :is(.collection-library, .collection-now) :is(.collection-card-creator, .collection-card-period) {
    line-height: 1.4;
}
.spj-collection-page :is(.collection-library, .collection-now) .collection-card-period {
    margin-bottom: 6px;
}

.spj-collection-page .collection-now .shelf-grid .collection-card-button {
    padding: 12px;
}
.spj-collection-page .collection-now .collection-card-copy {
    gap: 4px;
}