/* THE ESC JUKEBOX — Browse view edition (2026-10-22). Companion to esc-jukebox.css: the arch,
   see-through player, tray, LED and buttons use the shared unscoped .jbx-* classes there.
   This file carries only the #escBrowsePane layout + the jewel-case rack, re-scoped from the
   #epCover.jbx-on rules. Theme variables only; glass/chrome neutrals via color-mix with --text/--bg. */
#escJukeboxMount{display:flex;flex-direction:column;flex:1;min-height:0;background:var(--bg);color:var(--text)}
#escJukeboxMount[hidden]{display:none!important}
#escJukeboxMount .jbx-arch{flex:none;margin:10px 12px 4px}
#escJukeboxMount .jbx-dock{position:relative;flex:none}
/* side chips (rack re-stock: Catalog / Playlists / Partners / Blogs / Store) */
.jbxb-sides{display:flex;gap:6px;flex-wrap:wrap;padding:8px 12px 2px;flex:none}
.jbxb-chip{font:500 12px Oswald,sans-serif;letter-spacing:.05em;text-transform:uppercase;border:1px solid var(--gold-dim);color:var(--gold);border-radius:999px;padding:5px 12px;background:var(--chrome);cursor:pointer;min-height:32px}
.jbxb-chip.on{background:var(--gold);color:var(--bg);border-color:var(--gold)}
@media (pointer:coarse){.jbxb-chip{min-height:40px}}
/* the rack: jewel cases */
.jbxb-rack{flex:1;overflow:auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(116px,1fr));gap:12px 10px;padding:10px 12px 14px;perspective:900px;align-content:start}
.jbxb-empty{grid-column:1/-1;color:var(--muted);font:13px Oswald,sans-serif;letter-spacing:.04em;margin:8px 2px}
#escBrowsePane .jbxb-case{position:relative;background:linear-gradient(180deg,color-mix(in srgb,var(--text) 10%,var(--bg)),var(--bg));border:1px solid color-mix(in srgb,var(--text) 22%,transparent);border-left:7px solid var(--gold-dim);border-radius:3px;color:var(--text);transition:transform .25s ease,box-shadow .25s ease;transform-origin:50% 100%;padding:0;cursor:pointer;font:inherit;text-align:left;overflow:hidden;min-width:0}
#escBrowsePane .jbxb-case::after{content:"";position:absolute;inset:0 0 auto 0;height:62%;background:linear-gradient(125deg,color-mix(in srgb,var(--text) 26%,transparent),transparent 42%);pointer-events:none}
#escBrowsePane .jbxb-case:hover,#escBrowsePane .jbxb-case:focus-visible{transform:translateY(-8px) rotateX(10deg) scale(1.03);box-shadow:0 10px 18px color-mix(in srgb,var(--bg) 80%,transparent);border-color:var(--gold)}
#escBrowsePane .jbxb-case.jbx-picked{transform:translateY(-14px) scale(1.05);border-color:var(--gold);box-shadow:0 0 0 2px var(--gold)}
#escBrowsePane .jbxb-case .ep-t{display:block;font:600 12px Oswald,sans-serif;color:var(--text);padding:6px 7px 0;line-height:1.25}
#escBrowsePane .jbxb-case .ep-s{display:block;font-size:11px;color:var(--muted);padding:2px 7px 7px;line-height:1.3}
#escBrowsePane .jbxb-case .ep-ph,#escBrowsePane .jbx-mono{background:var(--bg);color:var(--gold);font:700 24px Oswald,sans-serif;letter-spacing:.08em;display:flex;align-items:center;justify-content:center;aspect-ratio:1/1;width:100%}
@media (max-width:600px){.jbxb-rack{grid-template-columns:repeat(auto-fill,minmax(96px,1fr))}}
@media (max-height:500px){#escJukeboxMount .jbx-arch{display:none}}
@media (prefers-reduced-motion:reduce){
 #escBrowsePane .jbxb-case{transition:opacity .2s!important}
 #escBrowsePane .jbxb-case:hover,#escBrowsePane .jbxb-case.jbx-picked{transform:none}}