/* Collection chrome is deliberately separate from Home's original .viewbar. */
.collection-header{position:relative;display:flex;align-items:center;gap:12px;min-height:34px;margin-bottom:14px;z-index:10}
.collection-content.view-list:not(.collection-sounds){max-width:640px;margin-inline:auto}
.collection-views{display:flex;flex-shrink:0;border:1px solid #62788d;border-radius:5px;box-shadow:0 1px 2px #0004}
.collection-view{position:relative;width:44px;height:32px;min-height:32px;padding:5px;border:0;border-radius:0;--chrome-1:#f0f3f5;--chrome-2:#c8d0d7;--chrome-3:#a1adb8;color:#61717f}
.collection-view:first-child{border-radius:4px 0 0 4px;border-right:1px solid #7c8c99}
.collection-view:last-child{border-radius:0 4px 4px 0}
.collection-view .icon{width:20px;height:20px;filter:drop-shadow(0 1px #ffffffc0)}
.collection-view.is-selected{--chrome-1:#83aac7;--chrome-2:#4e81a9;--chrome-3:#2d5c84;--chrome-shadow:inset 0 1px #ffffff66,inset 0 1px 4px #173b5b88;color:#f4f8fb}
.collection-view.is-selected .icon{filter:drop-shadow(0 -1px #15334d99)}
.collection-view.is-selected::after{content:"";position:absolute;bottom:-5px;left:50%;width:7px;height:7px;background:#2d5c84;transform:translateX(-50%) rotate(45deg);border-right:1px solid #62788d;border-bottom:1px solid #62788d}
.collection-summary{margin-right:auto;font-size:11px;color:#626d78;text-shadow:0 1px #fff;white-space:nowrap}
.collection-sort{height:32px;min-height:32px;padding:5px 10px;font-size:12px;gap:12px}
.collection-sort .icon{width:10px;height:10px;transform:rotate(90deg)}
.collection-menu{position:absolute;top:calc(100% + 6px);right:0;z-index:30;min-width:200px;margin:0;background:var(--card);box-shadow:inset 0 1px #fff,0 3px 8px #0006;text-shadow:0 1px #fff}
.collection-menu-label{padding:8px 12px;font-size:11px;font-weight:bold;color:#6c7680;background:linear-gradient(#f4f6f7,#d4dce2);border-bottom:1px solid #b5bfc8;box-shadow:inset 0 1px #fff}
.collection-menu .table-row{width:100%;background:linear-gradient(#fff,#efefef);font-size:14px;text-align:left;text-shadow:0 1px #fff;min-height:44px}
.collection-menu .table-row>.icon{width:15px;height:15px;color:#3979ab;visibility:hidden}
.collection-menu [aria-checked="true"]>.icon{visibility:visible}
.collection-menu .table-row:active,.collection-menu .table-row:focus-visible{background:linear-gradient(#6994bf,#326795);color:white;text-shadow:0 -1px #0008}
.collection-menu .table-row:focus-visible>.icon{color:white}
.collection-visuals.view-list .video-player video{aspect-ratio:auto}
/* Keep the centered album column independent of its contextual Back. Compact
   panes retain the above-artwork placement rather than intruding on the sidebar. */
.album-detail .album-back{display:flex;width:max-content;margin-left:12px;font-size:12px;padding:5px 9px;gap:3px}
.album-detail .album-back .icon{width:14px;height:14px}
.album-detail>.album-back+.album-header{padding-top:8px}
@media(min-width:720px){
 .pane.route-sounds.detail{container:album-pane / inline-size}
 .album-detail{position:relative}
 .album-detail .album-back{margin-left:0}
 .collection-sounds .collection-header{margin-inline:30px;margin-bottom:0}
 .collection-sounds .album-collection{padding-top:16px}
 .collection-sounds .collection-summary{color:#d4dbe1;text-shadow:0 -1px #0008}
}
/* At 900px of pane content there is room for the unchanged 66px button,
   a 14px artwork gap and sidebar/focus-ring clearance beside the 760px album. */
@container album-pane (min-width:900px){
 .album-detail .album-back{position:absolute;right:calc(100% + 14px);top:20px}
 .album-detail>.album-back+.album-header{padding-top:20px}
}
@media(max-width:719px){
 .collection-header{gap:8px;min-height:44px;margin-bottom:12px}
 .collection-view{height:44px;min-height:44px;width:44px}
 .collection-sort{height:44px;min-height:44px;padding-inline:9px;gap:8px}
 .collection-summary{font-size:10px;white-space:normal}
 .collection-menu{max-width:calc(100vw - 16px)}
}