/* Shell geometry is shared by public listening routes; the audio node remains
   in this host while #screen is replaced by the same-document router. */
.listener-shell{--shell-nav:224px;min-height:100svh;padding-bottom:calc(112px + env(safe-area-inset-bottom));background:var(--color-bg);overflow-x:hidden}
.app-header{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:24px;padding:16px max(20px,calc((100% - var(--content))/2));background:color-mix(in srgb,var(--color-bg) 94%,transparent);border-bottom:1px solid var(--line);backdrop-filter:blur(12px)}
.app-wordmark{display:inline-flex;align-items:center;flex:none}.app-wordmark img{display:block;max-width:232px;height:auto}.app-desktop-nav{display:flex;align-items:center;gap:8px;flex:1}.app-desktop-nav a,.app-mobile-nav a{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:10px 14px;color:var(--color-text);text-decoration:none;border-radius:var(--radius-sm)}.app-desktop-nav a:hover,.app-mobile-nav a:hover,.app-desktop-nav a[aria-current=true],.app-mobile-nav a[aria-current=true]{background:var(--color-raised);color:var(--color-accent)}
.app-header>#queue-toggle{margin-left:auto}.app-content{max-width:var(--content);margin:0 auto;padding:48px max(20px,4vw) 160px}.app-content:focus{outline:none}.app-status{min-height:24px;color:var(--color-muted)}.app-heading{max-width:800px;margin:16px 0 40px}.app-heading h1{margin:8px 0 12px}.app-heading h1:focus{outline:3px solid var(--color-focus);outline-offset:8px}.app-heading .ds-kicker{margin:0}.app-rail{margin:48px 0}.app-rail>h2{margin-bottom:20px}.app-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}.app-card{display:grid;gap:12px}.app-card .ds-art{width:100%}.app-card a,.app-release-link,.app-result-link{color:var(--color-text);font-weight:650}.app-release-link,.app-result-link{display:block;padding:14px 0;border-bottom:1px solid var(--line)}.app-search{position:relative;display:flex;flex-wrap:wrap;gap:8px;margin:-16px 0 40px}.app-search>input{flex:1;min-width:220px}.search-suggestions{position:absolute;z-index:10;top:52px;left:0;right:108px;display:grid;padding:6px;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-sm);box-shadow:0 12px 32px #0008}.search-suggestions button{text-align:left;border:0;border-radius:var(--radius-sm)}.search-suggestions button:hover,.search-suggestions button:focus-visible{background:var(--color-raised)}.search-filters{flex:1 0 100%;margin-top:8px}.search-filters summary{cursor:pointer;color:var(--color-muted)}.search-filter-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin-top:12px}.search-filter-grid label{display:grid;gap:5px;color:var(--color-muted);font-size:var(--text-sm)}.search-filter-grid input,.search-filter-grid select{min-width:0}.search-results{display:grid;gap:12px}.search-group{margin:28px 0}.search-group>h2{margin-bottom:14px}.search-track-list{display:grid;gap:0}.app-search-result{display:grid;gap:8px;padding:16px;margin-bottom:10px}.app-search-result .app-result-link{font-size:var(--text-lg)}.app-search-result .ds-kicker{margin:0}.recent-searches{display:grid;gap:8px;margin-top:20px}.recent-searches h2{margin:0 0 4px}.recent-searches button{justify-self:start}.app-result-link mark,.ds-track-title mark{color:inherit;background:color-mix(in srgb,var(--color-accent) 30%,transparent);border-radius:2px}.ds-feedback{max-width:680px;padding:24px;background:var(--color-surface);border:1px solid var(--line);border-radius:var(--radius-md)}.ds-feedback h2{margin-top:0}.app-content>.ds-art{width:min(360px,100%);margin:0 0 24px}
.mini-player{position:fixed;right:16px;bottom:16px;z-index:30;display:grid;grid-template-columns:56px minmax(130px,1fr) auto auto;align-items:center;gap:12px;width:min(720px,calc(100% - 32px));padding:10px 12px;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);box-shadow:0 10px 40px #0008}.mini-art{width:56px}.mini-copy{min-width:0}.mini-copy a{display:block;overflow:hidden;color:var(--color-text);font-weight:650;text-overflow:ellipsis;white-space:nowrap}.mini-copy p{margin:2px 0;font-size:var(--text-sm);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mini-copy progress{display:block;width:100%;height:5px;accent-color:var(--color-accent)}.mini-player audio{position:absolute;width:1px;height:1px;opacity:.01;pointer-events:none}.mini-player button{white-space:nowrap}.queue-panel{position:fixed;right:16px;bottom:100px;z-index:31;width:min(420px,calc(100% - 32px));max-height:min(70vh,620px);overflow:auto;padding:20px;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);box-shadow:0 10px 40px #0008}.queue-header{display:flex;align-items:center;justify-content:space-between;gap:16px}.queue-header h2{margin:0}.queue-controls{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0}.queue-controls label{display:inline-flex;align-items:center;gap:6px;padding:8px 10px;border:1px solid var(--line);border-radius:var(--radius-sm);font-size:var(--text-sm)}.queue-section{margin:20px 0}.queue-section h3{margin:0 0 4px;color:var(--color-muted);font-size:var(--text-sm);text-transform:uppercase;letter-spacing:.06em}.queue-row{display:flex;align-items:center;gap:8px;padding:12px 0;border-bottom:1px solid var(--line);touch-action:pan-y}.queue-row a{flex:1;min-width:0;color:var(--color-text);overflow-wrap:anywhere}.queue-row button{padding:6px 8px;font-size:var(--text-xs)}.queue-row.is-dragging{opacity:.55}.queue-history-row{display:flex;align-items:center;gap:8px;padding:8px 0}.queue-history-row a{flex:1;color:var(--color-muted);overflow-wrap:anywhere}.queue-history-row button{padding:6px 8px;font-size:var(--text-xs)}
.app-mobile-nav{display:none}
html.keyboard-open .app-mobile-nav{display:none}
@media(max-width:800px){.app-header{gap:12px}.app-wordmark img{width:180px}.app-desktop-nav{display:none}.app-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.app-content{padding-top:32px}.mini-player{right:8px;bottom:calc(64px + env(safe-area-inset-bottom));width:calc(100% - 16px)}.mini-player #now-playing{display:none}.app-mobile-nav{position:fixed;display:grid;grid-template-columns:repeat(4,1fr);left:0;right:0;bottom:0;z-index:29;padding:6px 8px calc(6px + env(safe-area-inset-bottom));background:var(--color-surface);border-top:1px solid var(--line)}.app-mobile-nav a{display:grid;gap:2px;min-height:52px;padding:6px;font-size:var(--text-xs);text-align:center}.app-mobile-nav span{font-size:20px;line-height:1}.listener-shell{padding-bottom:calc(180px + env(safe-area-inset-bottom))}}
@media(max-width:800px){.app-header{gap:12px}.app-wordmark img{width:180px}.app-desktop-nav{display:none}.app-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.app-content{padding-top:32px}.mini-player{right:8px;bottom:calc(64px + env(safe-area-inset-bottom));width:calc(100% - 16px)}.mini-player #now-playing{display:none}.app-mobile-nav{position:fixed;display:grid;grid-template-columns:repeat(4,1fr);left:0;right:0;bottom:0;z-index:29;padding:6px 8px calc(6px + env(safe-area-inset-bottom));background:var(--color-surface);border-top:1px solid var(--line)}.app-mobile-nav a{display:grid;gap:2px;min-height:52px;padding:6px;font-size:var(--text-xs);text-align:center}.app-mobile-nav span{font-size:20px;line-height:1}.listener-shell{padding-bottom:calc(180px + env(safe-area-inset-bottom))}.search-filter-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.search-suggestions{right:0}}
@media(max-width:420px){.app-header{padding-inline:12px}.app-wordmark img{width:156px}.app-header>#queue-toggle{padding-inline:10px}.app-grid{gap:10px}.app-content{padding-inline:16px}.mini-player{grid-template-columns:44px minmax(0,1fr) auto;gap:8px}.mini-art{width:44px}.mini-player #mini-play{padding-inline:10px}.mini-player audio{display:none}}
@media(max-width:800px){input,select,textarea{font-size:16px}.app-header{padding-top:calc(12px + env(safe-area-inset-top))}.app-content{padding-bottom:calc(180px + env(safe-area-inset-bottom))}.now-playing-dialog{max-height:calc(var(--viewport-height, 100dvh) - env(safe-area-inset-top))}.now-playing-inner{max-height:calc(var(--viewport-height, 100dvh) - env(safe-area-inset-top))}}
@media(max-width:800px) and (orientation:landscape){.app-content{padding-bottom:calc(140px + env(safe-area-inset-bottom))}.now-playing-hero{grid-template-columns:120px minmax(0,1fr)}.waveform-shell,.waveform-shell canvas{min-height:88px;height:88px}}
@media(prefers-reduced-motion:reduce){.app-header{backdrop-filter:none}}
.mini-transport{display:flex;align-items:center;gap:6px}.mini-transport button{padding-inline:9px}.now-playing-dialog{width:min(900px,calc(100% - 32px));max-height:min(92vh,900px);padding:0;color:var(--color-text);background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);box-shadow:0 24px 80px #000b}.now-playing-dialog::backdrop{background:#050605b8;backdrop-filter:blur(5px)}.now-playing-inner{display:grid;gap:24px;padding:clamp(20px,4vw,48px);overflow:auto;max-height:min(92vh,900px)}.now-playing-header{display:flex;align-items:center;justify-content:space-between;gap:16px}.now-playing-header p{margin:0}.now-playing-hero{display:grid;grid-template-columns:minmax(180px,38%) minmax(0,1fr);align-items:end;gap:clamp(20px,4vw,48px)}.now-playing-art{width:100%;max-width:420px}.now-playing-meta h1{margin:8px 0;overflow-wrap:anywhere}.now-playing-artist{margin:0;font-size:var(--text-lg);font-weight:650}.player-artists a,.now-playing-artist a{color:inherit}.waveform-panel{display:grid;gap:10px}.waveform-shell{position:relative;min-height:132px;overflow:hidden;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--color-bg);touch-action:pan-y;cursor:ew-resize}.waveform-shell canvas{display:block;width:100%;height:132px}.waveform-loading{position:absolute;inset:0;display:grid;place-items:center;padding:20px;text-align:center;color:var(--color-muted);pointer-events:none}.waveform-shell[data-state=ready] .waveform-loading{opacity:0}.waveform-shell[data-state=error]{border-color:var(--color-danger,#d65b45)}.waveform-shell[data-state=error] .waveform-loading{opacity:1}.waveform-panel>input[type=range]{width:100%;accent-color:var(--color-accent)}.time-readout{display:flex;justify-content:space-between;font-variant-numeric:tabular-nums;color:var(--color-muted)}.now-playing-transport,.now-playing-secondary,.now-playing-actions{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:10px}.now-playing-transport button{min-width:96px}.now-playing-transport #full-play{min-width:132px;background:var(--color-accent);color:var(--color-bg)}.now-playing-secondary label{display:inline-flex;align-items:center;gap:8px}.now-playing-secondary input,.now-playing-secondary select{max-width:180px}.now-playing-actions{justify-content:flex-start}.now-playing-details{border-top:1px solid var(--line);padding-top:16px}.now-playing-details summary{cursor:pointer;font-weight:650}.player-detail-copy{max-width:70ch}.player-detail-copy h3{margin-bottom:8px}.player-detail-copy p{white-space:pre-wrap}.lyrics-lines{display:grid;gap:6px}.lyrics-lines li::marker{color:var(--color-muted)}.now-playing-dialog button:focus-visible,.now-playing-dialog input:focus-visible,.now-playing-dialog select:focus-visible,.waveform-shell:focus-visible{outline:3px solid var(--color-focus);outline-offset:3px}
@media(max-width:800px){.mini-transport button{padding-inline:7px}.now-playing-dialog{inset:auto 0 0;width:100%;max-width:none;max-height:calc(100dvh - env(safe-area-inset-top));margin:0;border-radius:var(--radius-lg) var(--radius-lg) 0 0;border-bottom:0}.now-playing-inner{padding:20px 16px calc(24px + env(safe-area-inset-bottom));max-height:calc(100dvh - env(safe-area-inset-top))}.now-playing-hero{grid-template-columns:minmax(110px,34%) minmax(0,1fr);gap:16px}.now-playing-meta h1{font-size:clamp(1.35rem,6vw,2.3rem)}.now-playing-artist{font-size:var(--text-base)}.waveform-shell,.waveform-shell canvas{min-height:112px;height:112px}.now-playing-secondary{justify-content:flex-start}.now-playing-secondary label{flex:1;justify-content:space-between}.now-playing-secondary input,.now-playing-secondary select{max-width:160px}.now-playing-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.now-playing-actions button{width:100%}}
@media(max-width:420px){.mini-transport{gap:2px}.mini-transport button{font-size:var(--text-xs);padding-inline:6px}.mini-player{grid-template-columns:44px minmax(0,1fr) auto}.now-playing-inner{gap:18px}.now-playing-hero{grid-template-columns:96px minmax(0,1fr);align-items:center}.now-playing-dialog .now-playing-transport{gap:6px}.now-playing-transport button{min-width:0;flex:1;padding-inline:8px}.now-playing-transport #full-play{flex:1.3}.now-playing-secondary label{font-size:var(--text-sm)}}
@media(prefers-reduced-motion:reduce){.now-playing-dialog::backdrop{backdrop-filter:none}.now-playing-dialog,.now-playing-inner{scroll-behavior:auto}}
.share-sheet{width:min(680px,calc(100% - 32px));padding:0;color:var(--color-text);background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);box-shadow:0 24px 80px #000b}.share-sheet::backdrop{background:#050605b8;backdrop-filter:blur(5px)}.share-sheet-inner{display:grid;gap:16px;padding:24px}.share-sheet-inner header{display:flex;align-items:center;justify-content:space-between;gap:16px}.share-sheet-inner h2{margin:0;overflow-wrap:anywhere}.share-sheet-close{min-height:40px}.share-sheet-row{display:flex;align-items:end;gap:8px}.share-sheet-row label,.share-sheet-inner>label{display:grid;flex:1;gap:6px;color:var(--color-muted);font-size:var(--text-sm)}.share-sheet-row input,.share-sheet-inner textarea{width:100%;color:var(--color-text);background:var(--color-bg);border:1px solid var(--line);border-radius:var(--radius-sm);font:inherit;padding:10px}.share-sheet-inner textarea{resize:vertical}.share-sheet-status{min-height:22px;margin:0;color:var(--color-accent)}.share-sheet button{min-height:40px;padding:8px 12px}.share-sheet-inner button:focus-visible,.share-sheet-inner input:focus-visible,.share-sheet-inner textarea:focus-visible{outline:3px solid var(--color-focus);outline-offset:2px}@media(max-width:600px){.share-sheet{inset:auto 0 0;width:100%;max-width:none;margin:0;border-radius:var(--radius-lg) var(--radius-lg) 0 0;border-bottom:0}.share-sheet-inner{padding:20px 16px calc(24px + env(safe-area-inset-bottom))}.share-sheet-row{align-items:stretch;flex-direction:column}}
.app-card{align-content:start;min-width:0}.app-card h3{overflow-wrap:anywhere}.app-card .ds-actions{align-items:stretch}.app-card .ds-actions a{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:10px 14px;border:1px solid var(--color-border);border-radius:var(--radius-sm);text-decoration:none}.app-load-more{grid-column:1/-1;justify-self:start;margin-top:4px}
.release-header{display:grid;grid-template-columns:minmax(180px,320px) minmax(0,1fr);align-items:end;gap:clamp(20px,4vw,48px);margin:0 0 24px}.release-header .ds-art{width:100%}.release-header-meta{display:grid;gap:12px;align-content:end}.release-header-meta p{margin:0}.release-artists{font-size:var(--text-lg);font-weight:650}.release-credits{margin:24px 0;border-top:1px solid var(--line);padding-top:16px}.release-credits summary{display:inline-flex;cursor:pointer;font-weight:650}.release-credits ul{columns:2;column-gap:40px;padding-left:24px}.release-credits li{break-inside:avoid;margin:6px 0}.release-tracklist{margin-top:32px}.release-disc-heading{margin:28px 0 4px;padding-top:12px;border-top:1px solid var(--line);color:var(--color-muted);font-size:var(--text-base);text-transform:uppercase;letter-spacing:.08em}.ds-track.is-playing{background:color-mix(in srgb,var(--color-accent) 13%,transparent);border-radius:var(--radius-sm);padding-inline:10px}.ds-track.is-playing .ds-track-title{color:var(--color-accent)}
@media(max-width:800px){.release-header{grid-template-columns:minmax(120px,35%) minmax(0,1fr);gap:16px}.release-credits ul{columns:1}}
.track-discussion{display:grid;gap:16px;max-width:760px;margin:48px 0;padding-top:24px;border-top:1px solid var(--line)}.track-discussion h2{margin:0}.track-discussion details{padding:12px 0;border-bottom:1px solid var(--line)}.track-discussion summary{cursor:pointer;font-weight:650}.discussion-list{display:grid;gap:14px}.discussion-comment,.discussion-reply{display:grid;gap:8px;padding:16px;background:var(--color-surface);border:1px solid var(--line);border-radius:var(--radius-sm)}.discussion-reply{margin-left:28px;background:color-mix(in srgb,var(--color-surface) 70%,var(--color-bg))}.discussion-comment p,.discussion-reply p{margin:0;white-space:pre-wrap;overflow-wrap:anywhere}.discussion-comment-header{display:flex;align-items:center;flex-wrap:wrap;gap:10px;color:var(--color-muted);font-size:var(--text-sm)}.discussion-comment-header strong{color:var(--color-text)}.discussion-comment-header time{font-variant-numeric:tabular-nums}.discussion-seek{min-height:36px;padding:6px 10px}.discussion-form{display:grid;gap:12px;padding:20px;background:var(--color-surface);border:1px solid var(--line);border-radius:var(--radius-sm)}.discussion-form label{display:grid;gap:6px;color:var(--color-muted)}.discussion-form textarea{min-height:96px;resize:vertical;line-height:1.45;touch-action:manipulation}.discussion-form input{max-width:180px}.discussion-form button{justify-self:start;min-height:44px}@media(max-width:800px){.discussion-reply{margin-left:12px}.discussion-form textarea{font-size:16px}.discussion-form input{max-width:none;width:100%}}
.offline-library { margin-block: 1.5rem; }
.offline-preferences { display: flex; flex-wrap: wrap; gap: .75rem 1.25rem; align-items: center; }
.offline-preferences label { display: inline-flex; gap: .4rem; align-items: center; }
.offline-list { display: grid; gap: .75rem; margin-top: 1rem; }
.offline-row { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center; justify-content: space-between; padding: .75rem; border: 1px solid var(--ds-border, #2d332f); border-radius: .75rem; }
.offline-row p { flex-basis: 100%; margin: 0; color: var(--ds-muted, #aab3aa); }
