/* V5.0.456 — Universal Rail Console Skin. One visual authority across Listen, Browse, Timeline, and Piano/Menu. CSS-only. Preserves rail section ownership, data lanes, Spotify, mobile, runtime JS, and jacket/sleeve geometry. */ .bhk-v5-playerRail { --bhk-v5-rail-console-bg: rgba(7, 4, 15, .96); --bhk-v5-rail-console-bg-deep: rgba(3, 2, 8, .98); --bhk-v5-rail-console-bg-glass: linear-gradient(180deg, rgba(31, 22, 44, .92), rgba(7, 4, 15, .96)); --bhk-v5-rail-console-line: rgba(190, 157, 255, .42); --bhk-v5-rail-console-line-soft: rgba(190, 157, 255, .22); --bhk-v5-rail-console-line-hot: rgba(214, 123, 255, .86); --bhk-v5-rail-console-purple: #b45cff; --bhk-v5-rail-console-purple-deep: #541677; --bhk-v5-rail-console-ivory: #fff8db; --bhk-v5-rail-console-text: #fff7ff; --bhk-v5-rail-console-muted: rgba(238, 223, 255, .72); --bhk-v5-rail-console-glow: rgba(201, 82, 255, .42); --bhk-v5-rail-console-shadow: 0 18px 34px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.10), inset 0 0 0 1px rgba(0,0,0,.34), inset 18px 0 34px rgba(0,0,0,.30), inset -18px 0 34px rgba(0,0,0,.24); } .bhk-v5-playerRail__top, .bhk-v5-playerRail__now, .bhk-v5-playerRail__transport, .bhk-v5-playerRail__contentSlot, .bhk-v5-playerRail__browseViewport, .bhk-v5-playerRail__browseLinks, .bhk-v5-playerRail__switchBay, .bhk-v5-playerRail__keyboardDeck { border: 1px solid var(--bhk-v5-rail-console-line) !important; border-radius: 0 !important; background: radial-gradient(circle at 18% 0%, rgba(180, 92, 255, .14), transparent 38%), var(--bhk-v5-rail-console-bg-glass) !important; box-shadow: var(--bhk-v5-rail-console-shadow) !important; color: var(--bhk-v5-rail-console-text) !important; } .bhk-v5-playerRail__contentSlot--listen, .bhk-v5-playerRail__contentSlot--browse, .bhk-v5-playerRail__contentSlot--timeline, .bhk-v5-playerRail__contentSlot--menu { outline: 1px solid rgba(255,255,255,.035); outline-offset: -5px; } .bhk-v5-playerRail__mode, .bhk-v5-playerRail__transport button, .bhk-v5-playerRail__switch, .bhk-v5-playerRail__bank, .bhk-v5-playerRail__browseLinks a, .bhk-v5-playerRail__browseLink, .bhk-v5-playerRail__pianoKey { border: 1px solid var(--bhk-v5-rail-console-line-soft) !important; border-radius: 0 !important; background: linear-gradient(180deg, rgba(24, 18, 35, .96), rgba(6, 4, 12, .98)) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.09), inset 0 -1px 0 rgba(0,0,0,.72), 0 10px 18px rgba(0,0,0,.22) !important; color: var(--bhk-v5-rail-console-text) !important; text-shadow: 0 1px 2px rgba(0,0,0,.78) !important; } .bhk-v5-playerRail__mode::before, .bhk-v5-playerRail__transport button::before, .bhk-v5-playerRail__switch::before, .bhk-v5-playerRail__bank::before, .bhk-v5-playerRail__browseLinks a::before, .bhk-v5-playerRail__browseLink::before { border-radius: 0 !important; } .bhk-v5-playerRail__mode.is-active, .bhk-v5-playerRail__mode[aria-pressed="true"], .bhk-v5-playerRail__transport button.is-active, .bhk-v5-playerRail__transport button[aria-pressed="true"], .bhk-v5-playerRail__switch.is-active, .bhk-v5-playerRail__switch[aria-pressed="true"], .bhk-v5-playerRail__bank.is-active, .bhk-v5-playerRail__bank[aria-pressed="true"], .bhk-v5-playerRail__browseLinks a.is-active, .bhk-v5-playerRail__browseLink.is-active, .bhk-v5-playerRail__pianoKey.is-active, .bhk-v5-playerRail__pianoKey[aria-current="true"] { border-color: var(--bhk-v5-rail-console-line-hot) !important; background: linear-gradient(180deg, rgba(145, 62, 192, .92), rgba(65, 16, 88, .98)) !important; box-shadow: 0 0 0 1px rgba(255,255,255,.09), 0 0 22px var(--bhk-v5-rail-console-glow), inset 0 1px 0 rgba(255,255,255,.24), inset 0 -10px 20px rgba(0,0,0,.32) !important; } .bhk-v5-playerRail__mode:hover, .bhk-v5-playerRail__mode:focus-visible, .bhk-v5-playerRail__transport button:hover, .bhk-v5-playerRail__transport button:focus-visible, .bhk-v5-playerRail__switch:hover, .bhk-v5-playerRail__switch:focus-visible, .bhk-v5-playerRail__bank:hover, .bhk-v5-playerRail__bank:focus-visible, .bhk-v5-playerRail__browseLinks a:hover, .bhk-v5-playerRail__browseLinks a:focus-visible, .bhk-v5-playerRail__browseLink:hover, .bhk-v5-playerRail__browseLink:focus-visible, .bhk-v5-playerRail__pianoKey:hover, .bhk-v5-playerRail__pianoKey:focus-visible { border-color: var(--bhk-v5-rail-console-line-hot) !important; box-shadow: 0 0 0 1px rgba(255,255,255,.10), 0 0 18px rgba(201,82,255,.30), inset 0 1px 0 rgba(255,255,255,.18), inset 0 -10px 20px rgba(0,0,0,.35) !important; } .bhk-v5-playerRail__switchBody, .bhk-v5-playerRail__switchBody > span, .bhk-v5-playerRail__transportIcon, .bhk-v5-playerRail__modeIcon, .bhk-v5-playerRail__browseLinkType, .bhk-v5-playerRail__bank::after { color: var(--bhk-v5-rail-console-ivory) !important; } .bhk-v5-playerRail__switchBody { background: linear-gradient(180deg, rgba(34, 29, 48, .98), rgba(5, 4, 12, .98)) !important; border-color: rgba(255,255,255,.08) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.11), inset 0 -10px 18px rgba(0,0,0,.55) !important; } .bhk-v5-playerRail__switchBody > span { background: linear-gradient(180deg, #ffffff, #e9dcff 48%, #8f65ff) !important; box-shadow: 0 0 10px rgba(184,118,255,.42) !important; } .bhk-v5-playerRail__switchLabel, .bhk-v5-playerRail__transportLabel, .bhk-v5-playerRail__modeText, .bhk-v5-playerRail__bank, .bhk-v5-playerRail__browseLinks a, .bhk-v5-playerRail__browseLink, .bhk-v5-playerRail__pianoKey strong, .bhk-v5-playerRail__pianoKey em { color: var(--bhk-v5-rail-console-text) !important; letter-spacing: .055em !important; text-shadow: 0 1px 2px rgba(0,0,0,.82) !important; } .bhk-v5-playerRail__bankPing, .bhk-v5-playerRail__range, .bhk-v5-playerRail__selectorNote, .bhk-v5-playerRail__browseLinksTitle, .bhk-v5-playerRail__transportHead span, .bhk-v5-playerRail__transportHead strong { color: var(--bhk-v5-rail-console-muted) !important; text-shadow: 0 1px 2px rgba(0,0,0,.78) !important; } .bhk-v5-playerRail__browseViewport, .bhk-v5-playerRail__browseArt, .bhk-v5-playerRail__browseEmptyBox { border-color: var(--bhk-v5-rail-console-line-soft) !important; border-radius: 0 !important; background: radial-gradient(circle at 30% 16%, rgba(190,157,255,.11), transparent 38%), var(--bhk-v5-rail-console-bg-deep) !important; } .bhk-v5-playerRail__browseImage, .bhk-v5-playerRail__browseArt img { border-radius: 0 !important; } .bhk-v5-playerRail__banks { border-color: var(--bhk-v5-rail-console-line-soft) !important; background: linear-gradient(180deg, rgba(14, 10, 24, .96), rgba(4, 3, 9, .98)) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.07), inset 0 0 0 1px rgba(0,0,0,.34) !important; } .bhk-v5-playerRail__keyboardDeck { background: radial-gradient(circle at 18% 0%, rgba(180,92,255,.13), transparent 34%), linear-gradient(180deg, rgba(23,18,31,.98), rgba(8,5,12,.98)) !important; } .bhk-v5-playerRail__pianoKey { text-shadow: 0 1px 1px rgba(255,255,255,.28) !important; } .bhk-v5-playerRail__pianoKey.has-blackKey::before { box-shadow: inset -8px 0 18px rgba(255,255,255,.08), 0 12px 18px rgba(0,0,0,.30) !important; } .bhk-v5-playerRail__top .bhk-v5-playerRail__mode[data-bhk-v5-mode-toggle="listen"], .bhk-v5-playerRail__top .bhk-v5-playerRail__mode[data-bhk-v5-mode-toggle="browse"], .bhk-v5-playerRail__top .bhk-v5-playerRail__mode[data-bhk-v5-mode-toggle="timeline"], .bhk-v5-playerRail__top .bhk-v5-playerRail__mode[data-bhk-v5-mode-toggle="menu"] { border-radius: 0 !important; background: linear-gradient(180deg, rgba(28,23,41,.96), rgba(8,5,14,.98)) !important; } .bhk-v5-playerRail__top .bhk-v5-playerRail__svgIcon, .bhk-v5-playerRail__top svg { filter: drop-shadow(0 4px 7px rgba(0,0,0,.50)); } .bhk-v5-playerRail[data-bhk-v5-rail-current="listen"] .bhk-v5-playerRail__mode[data-bhk-v5-mode-toggle="listen"], .bhk-v5-playerRail[data-bhk-v5-rail-current="browse"] .bhk-v5-playerRail__mode[data-bhk-v5-mode-toggle="browse"], .bhk-v5-playerRail[data-bhk-v5-rail-current="timeline"] .bhk-v5-playerRail__mode[data-bhk-v5-mode-toggle="timeline"], .bhk-v5-playerRail[data-bhk-v5-rail-current="menu"] .bhk-v5-playerRail__mode[data-bhk-v5-mode-toggle="menu"] { border-color: var(--bhk-v5-rail-console-line-hot) !important; background: linear-gradient(180deg, rgba(92, 34, 126, .94), rgba(25, 9, 42, .98)) !important; box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 0 22px rgba(201,82,255,.38), inset 0 1px 0 rgba(255,255,255,.20) !important; } .bhk-v5-playerRail__trackRow, .bhk-v5-playerRail__railLink, .bhk-v5-playerRail__timelineMilestone, .bhk-v5-playerRail__timelineSwitch, .bhk-v5-timelineRail__switch, .bhk-v5-timelineRail__button { border-color: var(--bhk-v5-rail-console-line-soft) !important; border-radius: 0 !important; background: linear-gradient(180deg, rgba(20, 15, 29, .96), rgba(6, 4, 12, .98)) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.08), inset 0 -1px 0 rgba(0,0,0,.66) !important; } .bhk-v5-playerRail__trackRow.is-active, .bhk-v5-playerRail__timelineMilestone.is-active, .bhk-v5-playerRail__timelineSwitch.is-active, .bhk-v5-timelineRail__switch.is-active, .bhk-v5-timelineRail__button.is-active { border-color: var(--bhk-v5-rail-console-line-hot) !important; background: linear-gradient(180deg, rgba(112, 43, 151, .92), rgba(35, 12, 56, .98)) !important; box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 0 18px rgba(201,82,255,.34), inset 0 1px 0 rgba(255,255,255,.18) !important; } @media (prefers-reduced-motion: no-preference) { .bhk-v5-playerRail__mode, .bhk-v5-playerRail__transport button, .bhk-v5-playerRail__switch, .bhk-v5-playerRail__bank, .bhk-v5-playerRail__browseLinks a, .bhk-v5-playerRail__browseLink, .bhk-v5-playerRail__pianoKey { transition: border-color .18s ease, box-shadow .18s ease, background .18s ease, transform .18s ease; } } /* V5.0.491 — Rail top console skin glyph stack safety. Console glow stays behind the mode SVG so the glyph cannot be masked by a skin layer. */ .bhk-v5-playerRail__top .bhk-v5-playerRail__modeIcon { overflow: visible !important; border-radius: 0 !important; } .bhk-v5-playerRail__top .bhk-v5-playerRail__modeIcon::before, .bhk-v5-playerRail__top .bhk-v5-playerRail__modeIcon::after { z-index: 0 !important; } .bhk-v5-playerRail__top .bhk-v5-playerRail__modeIcon .bhk-v5-playerRail__svgIcon, .bhk-v5-playerRail__top .bhk-v5-playerRail__modeIcon svg { z-index: 2 !important; } /* V5.0.495 — Browse Rail Link Compression + Selector Bay Parity. Rail-only CSS. Compresses the Browse proof-link bay and makes Browse selector bays match the established Listen selector geometry/skin so reclaimed vertical real estate goes to controls. Preserves links, hrefs, rail authority, colour authority, and no-rounded shell discipline. */ .bhk-v5-playerRail[data-bhk-v5-rail-current="browse"] .bhk-v5-playerRail__browseLinks, html[data-bhk-v5-rail="browse"] .bhk-v5-playerRail__browseLinks, .bhk-v5-playerRail[data-bhk-v5-rail-current="browse"] .bhk-v5-railLinks, html[data-bhk-v5-rail="browse"] .bhk-v5-railLinks { display: grid !important; width: 278px !important; min-width: 278px !important; max-width: 278px !important; min-height: 92px !important; height: 92px !important; max-height: 92px !important; padding: 6px !important; gap: 3px !important; align-content: start !important; overflow: hidden !important; border-radius: 0 !important; } .bhk-v5-playerRail[data-bhk-v5-rail-current="browse"] .bhk-v5-playerRail__browseLinksTitle, html[data-bhk-v5-rail="browse"] .bhk-v5-playerRail__browseLinksTitle, .bhk-v5-playerRail[data-bhk-v5-rail-current="browse"] .bhk-v5-railLinks__title, html[data-bhk-v5-rail="browse"] .bhk-v5-railLinks__title { position: relative !important; display: block !important; width: auto !important; height: 10px !important; min-height: 10px !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; clip: auto !important; clip-path: none !important; border: 0 !important; color: var(--bhk-v5-rail-console-muted) !important; font-size: 8px !important; font-weight: 950 !important; line-height: 10px !important; letter-spacing: .14em !important; text-transform: uppercase !important; text-overflow: ellipsis !important; white-space: nowrap !important; } .bhk-v5-playerRail[data-bhk-v5-rail-current="browse"] .bhk-v5-playerRail__browseLinksList, html[data-bhk-v5-rail="browse"] .bhk-v5-playerRail__browseLinksList, .bhk-v5-playerRail[data-bhk-v5-rail-current="browse"] .bhk-v5-railLinks__list, html[data-bhk-v5-rail="browse"] .bhk-v5-railLinks__list { display: grid !important; grid-auto-rows: 20px !important; gap: 3px !important; min-height: 0 !important; height: auto !important; max-height: 66px !important; align-content: start !important; overflow: hidden !important; } .bhk-v5-playerRail[data-bhk-v5-rail-current="browse"] .bhk-v5-playerRail__browseLinksRow, html[data-bhk-v5-rail="browse"] .bhk-v5-playerRail__browseLinksRow, .bhk-v5-playerRail[data-bhk-v5-rail-current="browse"] .bhk-v5-railLinks__row, html[data-bhk-v5-rail="browse"] .bhk-v5-railLinks__row { display: grid !important; min-height: 20px !important; height: 20px !important; max-height: 20px !important; min-width: 0 !important; overflow: hidden !important; } .bhk-v5-playerRail[data-bhk-v5-rail-current="browse"] .bhk-v5-playerRail__browseLink, html[data-bhk-v5-rail="browse"] .bhk-v5-playerRail__browseLink, .bhk-v5-playerRail[data-bhk-v5-rail-current="browse"] .bhk-v5-railLinks__control, html[data-bhk-v5-rail="browse"] .bhk-v5-railLinks__control { min-height: 20px !important; height: 20px !important; max-height: 20px !important; padding: 2px 6px !important; gap: 4px !important; align-items: center !important; border-radius: 0 !important; overflow: hidden !important; } .bhk-v5-playerRail[data-bhk-v5-rail-current="browse"] .bhk-v5-playerRail__browseLinkLabel, html[data-bhk-v5-rail="browse"] .bhk-v5-playerRail__browseLinkLabel, .bhk-v5-playerRail[data-bhk-v5-rail-current="browse"] .bhk-v5-railLinks__label, html[data-bhk-v5-rail="browse"] .bhk-v5-railLinks__label { min-width: 0 !important; overflow: hidden !important; color: var(--bhk-v5-rail-console-text) !important; font-size: 8px !important; font-weight: 950 !important; line-height: 1 !important; letter-spacing: .035em !important; text-overflow: ellipsis !important; text-transform: uppercase !important; white-space: nowrap !important; } .bhk-v5-playerRail[data-bhk-v5-rail-current="browse"] .bhk-v5-playerRail__browseLinkKind, html[data-bhk-v5-rail="browse"] .bhk-v5-playerRail__browseLinkKind, .bhk-v5-playerRail[data-bhk-v5-rail-current="browse"] .bhk-v5-railLinks__type, html[data-bhk-v5-rail="browse"] .bhk-v5-railLinks__type { font-size: 7px !important; line-height: 1 !important; letter-spacing: .09em !important; } .bhk-v5-playerRail[data-bhk-v5-rail-current="browse"] .bhk-v5-playerRail__switchBay--browse-primary, html[data-bhk-v5-rail="browse"] .bhk-v5-playerRail__switchBay--browse-primary, .bhk-v5-playerRail[data-bhk-v5-rail-current="browse"] .bhk-v5-playerRail__switchBay--browse-secondary, html[data-bhk-v5-rail="browse"] .bhk-v5-playerRail__switchBay--browse-secondary { position: relative !important; isolation: isolate !important; display: grid !important; width: 278px !important; max-width: 278px !important; min-width: 0 !important; padding: 6px !important; overflow: hidden !important; border: 1px solid color-mix(in srgb, var(--v5-line-strong) 30%, transparent) !important; border-radius: 0 !important; background: linear-gradient(90deg, color-mix(in srgb, var(--v5-page) 82%, transparent) 0%, color-mix(in srgb, var(--v5-surface-2) 76%, transparent) 45%, color-mix(in srgb, var(--v5-page) 88%, transparent) 100%), radial-gradient(circle at 16% 6%, color-mix(in srgb, var(--v5-proof) 8%, transparent), transparent 42%), radial-gradient(circle at 88% 100%, color-mix(in srgb, var(--v5-accent) 13%, transparent), transparent 48%), color-mix(in srgb, var(--v5-page) 72%, var(--v5-surface)) !important; box-shadow: 0 14px 30px color-mix(in srgb, var(--v5-shadow) 22%, transparent), inset 0 1px 0 color-mix(in srgb, var(--v5-proof) 14%, transparent), inset 0 -1px 0 color-mix(in srgb, var(--v5-signal) 16%, transparent), inset 14px 0 24px color-mix(in srgb, #000 22%, transparent), inset -14px 0 24px color-mix(in srgb, #000 20%, transparent) !important; color: color-mix(in srgb, #fff 94%, var(--v5-accent, #8f64ff) 6%) !important; } .bhk-v5-playerRail[data-bhk-v5-rail-current="browse"] .bhk-v5-playerRail__switchBay--browse-primary, html[data-bhk-v5-rail="browse"] .bhk-v5-playerRail__switchBay--browse-primary { grid-template-rows: 12px 12px 11px minmax(0, 1fr) !important; gap: 3px !important; min-height: 96px !important; height: 96px !important; max-height: 96px !important; } .bhk-v5-playerRail[data-bhk-v5-rail-current="browse"] .bhk-v5-playerRail__switchBay--browse-secondary, html[data-bhk-v5-rail="browse"] .bhk-v5-playerRail__switchBay--browse-secondary { grid-template-rows: minmax(0, 1fr) 31px !important; gap: 6px !important; min-height: 126px !important; height: 126px !important; max-height: 126px !important; } .bhk-v5-playerRail[data-bhk-v5-rail-current="browse"] .bhk-v5-playerRail__switchBay--browse-primary::before, .bhk-v5-playerRail[data-bhk-v5-rail-current="browse"] .bhk-v5-playerRail__switchBay--browse-secondary::before, html[data-bhk-v5-rail="browse"] .bhk-v5-playerRail__switchBay--browse-primary::before, html[data-bhk-v5-rail="browse"] .bhk-v5-playerRail__switchBay--browse-secondary::before { content: "" !important; position: absolute !important; inset: 3px !important; z-index: 0 !important; border: 1px solid color-mix(in srgb, var(--v5-line-strong) 16%, transparent) !important; border-radius: 0 !important; background: repeating-linear-gradient(90deg, color-mix(in srgb, var(--v5-proof) 3%, transparent) 0 1px, transparent 1px 12px), linear-gradient(180deg, color-mix(in srgb, var(--v5-proof) 4%, transparent), transparent 36%, color-mix(in srgb, #000 12%, transparent)) !important; opacity: .68 !important; pointer-events: none !important; } .bhk-v5-playerRail[data-bhk-v5-rail-current="browse"] .bhk-v5-playerRail__switchBay--browse-primary::after, .bhk-v5-playerRail[data-bhk-v5-rail-current="browse"] .bhk-v5-playerRail__switchBay--browse-secondary::after, html[data-bhk-v5-rail="browse"] .bhk-v5-playerRail__switchBay--browse-primary::after, html[data-bhk-v5-rail="browse"] .bhk-v5-playerRail__switchBay--browse-secondary::after { content: "" !important; position: absolute !important; left: 9px !important; right: 9px !important; bottom: 5px !important; top: auto !important; z-index: 0 !important; height: 1px !important; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--v5-signal) 74%, var(--v5-accent)), transparent) !important; box-shadow: 0 0 14px color-mix(in srgb, var(--v5-accent) 26%, transparent) !important; opacity: .66 !important; pointer-events: none !important; } .bhk-v5-playerRail[data-bhk-v5-rail-current="browse"] .bhk-v5-playerRail__switchBay--browse-primary > *, .bhk-v5-playerRail[data-bhk-v5-rail-current="browse"] .bhk-v5-playerRail__switchBay--browse-secondary > *, html[data-bhk-v5-rail="browse"] .bhk-v5-playerRail__switchBay--browse-primary > *, html[data-bhk-v5-rail="browse"] .bhk-v5-playerRail__switchBay--browse-secondary > * { position: relative !important; z-index: 1 !important; } .bhk-v5-playerRail[data-bhk-v5-rail-current="browse"] .bhk-v5-playerRail__switchBay--browse-primary .bhk-v5-playerRail__bankPing, .bhk-v5-playerRail[data-bhk-v5-rail-current="browse"] .bhk-v5-playerRail__switchBay--browse-primary .bhk-v5-playerRail__range, .bhk-v5-playerRail[data-bhk-v5-rail-current="browse"] .bhk-v5-playerRail__switchBay--browse-primary .bhk-v5-playerRail__selectorNote, html[data-bhk-v5-rail="browse"] .bhk-v5-playerRail__switchBay--browse-primary .bhk-v5-playerRail__bankPing, html[data-bhk-v5-rail="browse"] .bhk-v5-playerRail__switchBay--browse-primary .bhk-v5-playerRail__range, html[data-bhk-v5-rail="browse"] .bhk-v5-playerRail__switchBay--browse-primary .bhk-v5-playerRail__selectorNote { display: block !important; min-width: 0 !important; overflow: hidden !important; color: color-mix(in srgb, var(--v5-proof) 86%, transparent) !important; font-size: 8px !important; font-weight: 950 !important; line-height: 1 !important; letter-spacing: .13em !important; text-transform: uppercase !important; text-overflow: ellipsis !important; white-space: nowrap !important; text-shadow: 0 0 9px color-mix(in srgb, var(--v5-accent) 18%, transparent) !important; } .bhk-v5-playerRail[data-bhk-v5-rail-current="browse"] .bhk-v5-playerRail__switchBay--browse-primary .bhk-v5-playerRail__bankPing, html[data-bhk-v5-rail="browse"] .bhk-v5-playerRail__switchBay--browse-primary .bhk-v5-playerRail__bankPing { width: max-content !important; max-width: 72px !important; padding: 2px 5px !important; border: 1px solid color-mix(in srgb, var(--v5-signal) 44%, transparent) !important; background: color-mix(in srgb, var(--v5-signal) 10%, transparent) !important; color: color-mix(in srgb, var(--v5-signal) 72%, var(--v5-proof)) !important; } .bhk-v5-playerRail[data-bhk-v5-rail-current="browse"] .bhk-v5-playerRail__switchBay--browse-primary .bhk-v5-playerRail__switches, .bhk-v5-playerRail[data-bhk-v5-rail-current="browse"] .bhk-v5-playerRail__switchBay--browse-secondary .bhk-v5-playerRail__switches, html[data-bhk-v5-rail="browse"] .bhk-v5-playerRail__switchBay--browse-primary .bhk-v5-playerRail__switches, html[data-bhk-v5-rail="browse"] .bhk-v5-playerRail__switchBay--browse-secondary .bhk-v5-playerRail__switches { display: grid !important; grid-template-columns: repeat(8, minmax(0, 1fr)) !important; gap: 3px !important; min-width: 0 !important; align-items: stretch !important; padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; } .bhk-v5-playerRail[data-bhk-v5-rail-current="browse"] .bhk-v5-playerRail__switchBay--browse-secondary .bhk-v5-playerRail__banks, html[data-bhk-v5-rail="browse"] .bhk-v5-playerRail__switchBay--browse-secondary .bhk-v5-playerRail__banks { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 4px !important; align-items: stretch !important; min-width: 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; } .bhk-v5-playerRail[data-bhk-v5-rail-current="browse"] .bhk-v5-playerRail__switchBay--browse-primary .bhk-v5-playerRail__switch, .bhk-v5-playerRail[data-bhk-v5-rail-current="browse"] .bhk-v5-playerRail__switchBay--browse-secondary .bhk-v5-playerRail__switch, html[data-bhk-v5-rail="browse"] .bhk-v5-playerRail__switchBay--browse-primary .bhk-v5-playerRail__switch, html[data-bhk-v5-rail="browse"] .bhk-v5-playerRail__switchBay--browse-secondary .bhk-v5-playerRail__switch { position: relative !important; display: grid !important; grid-template-rows: minmax(0, 1fr) 11px !important; gap: 2px !important; min-width: 0 !important; min-height: 42px !important; height: auto !important; padding: 3px 2px 2px !important; overflow: hidden !important; border: 1px solid color-mix(in srgb, var(--v5-line-strong) 26%, transparent) !important; border-radius: 0 !important; background: linear-gradient(180deg, color-mix(in srgb, var(--v5-proof) 6%, transparent), transparent 42%), color-mix(in srgb, var(--v5-page) 62%, var(--v5-surface-2)) !important; box-shadow: inset 0 1px 0 color-mix(in srgb, var(--v5-proof) 9%, transparent), inset 0 -1px 0 color-mix(in srgb, #000 30%, transparent) !important; color: color-mix(in srgb, var(--v5-proof) 82%, transparent) !important; transform: none !important; } .bhk-v5-playerRail[data-bhk-v5-rail-current="browse"] .bhk-v5-playerRail__switchBay--browse-primary .bhk-v5-playerRail__switchBody, .bhk-v5-playerRail[data-bhk-v5-rail-current="browse"] .bhk-v5-playerRail__switchBay--browse-secondary .bhk-v5-playerRail__switchBody, html[data-bhk-v5-rail="browse"] .bhk-v5-playerRail__switchBay--browse-primary .bhk-v5-playerRail__switchBody, html[data-bhk-v5-rail="browse"] .bhk-v5-playerRail__switchBay--browse-secondary .bhk-v5-playerRail__switchBody { position: relative !important; display: grid !important; place-items: end center !important; width: 100% !important; min-width: 0 !important; min-height: 22px !important; border: 1px solid color-mix(in srgb, var(--v5-line-strong) 28%, transparent) !important; border-radius: 0 !important; background: radial-gradient(circle at 50% 100%, color-mix(in srgb, var(--v5-proof) 6%, transparent), transparent 60%), linear-gradient(180deg, color-mix(in srgb, #000 24%, transparent), color-mix(in srgb, var(--v5-surface-3) 72%, transparent)) !important; box-shadow: inset 0 1px 0 color-mix(in srgb, var(--v5-proof) 8%, transparent), inset 0 -8px 16px color-mix(in srgb, #000 28%, transparent) !important; } .bhk-v5-playerRail[data-bhk-v5-rail-current="browse"] .bhk-v5-playerRail__switchBay--browse-primary .bhk-v5-playerRail__switchBody span, .bhk-v5-playerRail[data-bhk-v5-rail-current="browse"] .bhk-v5-playerRail__switchBay--browse-secondary .bhk-v5-playerRail__switchBody span, html[data-bhk-v5-rail="browse"] .bhk-v5-playerRail__switchBay--browse-primary .bhk-v5-playerRail__switchBody span, html[data-bhk-v5-rail="browse"] .bhk-v5-playerRail__switchBay--browse-secondary .bhk-v5-playerRail__switchBody span { display: block !important; width: 64% !important; height: 3px !important; margin: 0 0 3px !important; background: color-mix(in srgb, var(--v5-line-strong) 36%, transparent) !important; box-shadow: 0 0 0 transparent !important; } .bhk-v5-playerRail[data-bhk-v5-rail-current="browse"] .bhk-v5-playerRail__switchBay--browse-primary .bhk-v5-playerRail__switchLabel, .bhk-v5-playerRail[data-bhk-v5-rail-current="browse"] .bhk-v5-playerRail__switchBay--browse-secondary .bhk-v5-playerRail__switchLabel, html[data-bhk-v5-rail="browse"] .bhk-v5-playerRail__switchBay--browse-primary .bhk-v5-playerRail__switchLabel, html[data-bhk-v5-rail="browse"] .bhk-v5-playerRail__switchBay--browse-secondary .bhk-v5-playerRail__switchLabel { display: block !important; overflow: hidden !important; color: color-mix(in srgb, var(--v5-proof) 82%, transparent) !important; font-size: 8px !important; font-weight: 950 !important; line-height: 1 !important; letter-spacing: .04em !important; text-align: center !important; text-overflow: clip !important; text-transform: uppercase !important; white-space: nowrap !important; } .bhk-v5-playerRail[data-bhk-v5-rail-current="browse"] .bhk-v5-playerRail__switchBay--browse-secondary .bhk-v5-playerRail__bank, html[data-bhk-v5-rail="browse"] .bhk-v5-playerRail__switchBay--browse-secondary .bhk-v5-playerRail__bank { position: relative !important; min-width: 0 !important; min-height: 29px !important; height: auto !important; padding: 3px 2px !important; overflow: hidden !important; border: 1px solid color-mix(in srgb, var(--v5-line-strong) 28%, transparent) !important; border-radius: 0 !important; background: linear-gradient(180deg, color-mix(in srgb, var(--v5-proof) 5%, transparent), transparent 56%), color-mix(in srgb, var(--v5-page) 62%, var(--v5-surface-2)) !important; color: color-mix(in srgb, var(--v5-proof) 84%, transparent) !important; box-shadow: inset 0 1px 0 color-mix(in srgb, var(--v5-proof) 8%, transparent), inset 0 -1px 0 color-mix(in srgb, #000 28%, transparent) !important; font-size: 8px !important; font-weight: 950 !important; line-height: 1 !important; letter-spacing: .08em !important; text-transform: uppercase !important; } .bhk-v5-playerRail[data-bhk-v5-rail-current="browse"] .bhk-v5-playerRail__switchBay--browse-primary .bhk-v5-playerRail__switch.is-active, .bhk-v5-playerRail[data-bhk-v5-rail-current="browse"] .bhk-v5-playerRail__switchBay--browse-primary .bhk-v5-playerRail__switch[aria-pressed="true"], .bhk-v5-playerRail[data-bhk-v5-rail-current="browse"] .bhk-v5-playerRail__switchBay--browse-secondary .bhk-v5-playerRail__switch.is-active, .bhk-v5-playerRail[data-bhk-v5-rail-current="browse"] .bhk-v5-playerRail__switchBay--browse-secondary .bhk-v5-playerRail__switch[aria-pressed="true"], html[data-bhk-v5-rail="browse"] .bhk-v5-playerRail__switchBay--browse-primary .bhk-v5-playerRail__switch.is-active, html[data-bhk-v5-rail="browse"] .bhk-v5-playerRail__switchBay--browse-primary .bhk-v5-playerRail__switch[aria-pressed="true"], html[data-bhk-v5-rail="browse"] .bhk-v5-playerRail__switchBay--browse-secondary .bhk-v5-playerRail__switch.is-active, html[data-bhk-v5-rail="browse"] .bhk-v5-playerRail__switchBay--browse-secondary .bhk-v5-playerRail__switch[aria-pressed="true"] { border-color: color-mix(in srgb, var(--v5-signal) 76%, var(--v5-proof)) !important; background: radial-gradient(circle at 50% 18%, color-mix(in srgb, var(--v5-signal) 24%, transparent), transparent 52%), linear-gradient(180deg, color-mix(in srgb, var(--v5-proof) 10%, transparent), transparent 46%), color-mix(in srgb, var(--v5-accent) 32%, var(--v5-surface)) !important; box-shadow: 0 0 0 1px color-mix(in srgb, var(--v5-signal) 28%, transparent), 0 0 14px color-mix(in srgb, var(--v5-accent) 30%, transparent), inset 0 1px 0 color-mix(in srgb, var(--v5-proof) 14%, transparent) !important; } .bhk-v5-playerRail[data-bhk-v5-rail-current="browse"] .bhk-v5-playerRail__switchBay--browse-secondary .bhk-v5-playerRail__bank.is-active, .bhk-v5-playerRail[data-bhk-v5-rail-current="browse"] .bhk-v5-playerRail__switchBay--browse-secondary .bhk-v5-playerRail__bank[aria-pressed="true"], html[data-bhk-v5-rail="browse"] .bhk-v5-playerRail__switchBay--browse-secondary .bhk-v5-playerRail__bank.is-active, html[data-bhk-v5-rail="browse"] .bhk-v5-playerRail__switchBay--browse-secondary .bhk-v5-playerRail__bank[aria-pressed="true"] { border-color: color-mix(in srgb, var(--v5-signal) 74%, var(--v5-proof)) !important; background: linear-gradient(180deg, color-mix(in srgb, var(--v5-signal) 15%, transparent), transparent 60%), color-mix(in srgb, var(--v5-accent) 30%, var(--v5-surface)) !important; color: var(--v5-proof) !important; box-shadow: 0 0 0 1px color-mix(in srgb, var(--v5-signal) 22%, transparent), 0 0 12px color-mix(in srgb, var(--v5-accent) 26%, transparent), inset 0 1px 0 color-mix(in srgb, var(--v5-proof) 12%, transparent) !important; } .bhk-v5-playerRail[data-bhk-v5-rail-current="browse"] .bhk-v5-playerRail__switchBay--browse-primary .bhk-v5-playerRail__switch.is-active .bhk-v5-playerRail__switchBody span, .bhk-v5-playerRail[data-bhk-v5-rail-current="browse"] .bhk-v5-playerRail__switchBay--browse-primary .bhk-v5-playerRail__switch[aria-pressed="true"] .bhk-v5-playerRail__switchBody span, .bhk-v5-playerRail[data-bhk-v5-rail-current="browse"] .bhk-v5-playerRail__switchBay--browse-secondary .bhk-v5-playerRail__switch.is-active .bhk-v5-playerRail__switchBody span, .bhk-v5-playerRail[data-bhk-v5-rail-current="browse"] .bhk-v5-playerRail__switchBay--browse-secondary .bhk-v5-playerRail__switch[aria-pressed="true"] .bhk-v5-playerRail__switchBody span, html[data-bhk-v5-rail="browse"] .bhk-v5-playerRail__switchBay--browse-primary .bhk-v5-playerRail__switch.is-active .bhk-v5-playerRail__switchBody span, html[data-bhk-v5-rail="browse"] .bhk-v5-playerRail__switchBay--browse-primary .bhk-v5-playerRail__switch[aria-pressed="true"] .bhk-v5-playerRail__switchBody span, html[data-bhk-v5-rail="browse"] .bhk-v5-playerRail__switchBay--browse-secondary .bhk-v5-playerRail__switch.is-active .bhk-v5-playerRail__switchBody span, html[data-bhk-v5-rail="browse"] .bhk-v5-playerRail__switchBay--browse-secondary .bhk-v5-playerRail__switch[aria-pressed="true"] .bhk-v5-playerRail__switchBody span { width: 76% !important; background: color-mix(in srgb, var(--v5-signal) 76%, var(--v5-proof)) !important; box-shadow: 0 0 7px color-mix(in srgb, var(--v5-signal) 42%, transparent), 0 0 14px color-mix(in srgb, var(--v5-accent) 32%, transparent) !important; } /* V5.0.496 — Remove Browse Links Title + Browse Switch Console Cleanup. Rail-only CSS. Removes the visible Browse Links title row, reclaims its height, and cleans the Browse switch console interior while preserving all link hrefs, rail mapping, colour authority, no-rounded shell discipline, and V5.0.494 Home/S1 ownership. */ .bhk-v5-playerRail__browseLinks .bhk-v5-playerRail__browseLinksTitle, .bhk-v5-playerRail__browseLinks .bhk-v5-railLinks__title, .bhk-v5-playerRail[data-bhk-v5-rail-current="browse"] .bhk-v5-playerRail__browseLinksTitle, .bhk-v5-playerRail[data-bhk-v5-rail-current="browse"] .bhk-v5-railLinks__title, html[data-bhk-v5-rail="browse"] .bhk-v5-playerRail__browseLinksTitle, html[data-bhk-v5-rail="browse"] .bhk-v5-railLinks__title { display: none !important; visibility: hidden !important; width: 0 !important; height: 0 !important; min-height: 0 !important; max-height: 0 !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; border: 0 !important; opacity: 0 !important; pointer-events: none !important; } .bhk-v5-playerRail__browseLinks, .bhk-v5-playerRail__browseLinks.bhk-v5-railLinks, .bhk-v5-playerRail[data-bhk-v5-rail-current="browse"] .bhk-v5-playerRail__browseLinks, .bhk-v5-playerRail[data-bhk-v5-rail-current="browse"] .bhk-v5-railLinks, html[data-bhk-v5-rail="browse"] .bhk-v5-playerRail__browseLinks, html[data-bhk-v5-rail="browse"] .bhk-v5-railLinks { display: grid !important; grid-template-rows: minmax(0, 1fr) !important; width: 278px !important; min-width: 278px !important; max-width: 278px !important; min-height: 74px !important; height: 74px !important; max-height: 74px !important; padding: 4px 6px !important; gap: 0 !important; align-content: stretch !important; overflow: hidden !important; border-radius: 0 !important; } .bhk-v5-playerRail__browseLinks .bhk-v5-playerRail__browseLinksList, .bhk-v5-playerRail__browseLinks .bhk-v5-railLinks__list, .bhk-v5-playerRail[data-bhk-v5-rail-current="browse"] .bhk-v5-playerRail__browseLinksList, .bhk-v5-playerRail[data-bhk-v5-rail-current="browse"] .bhk-v5-railLinks__list, html[data-bhk-v5-rail="browse"] .bhk-v5-playerRail__browseLinksList, html[data-bhk-v5-rail="browse"] .bhk-v5-railLinks__list { display: grid !important; grid-auto-rows: 20px !important; gap: 3px !important; min-height: 0 !important; height: 66px !important; max-height: 66px !important; align-self: center !important; align-content: start !important; overflow: hidden !important; } .bhk-v5-playerRail__browseLinks .bhk-v5-playerRail__browseLinksRow, .bhk-v5-playerRail__browseLinks .bhk-v5-railLinks__row, .bhk-v5-playerRail[data-bhk-v5-rail-current="browse"] .bhk-v5-playerRail__browseLinksRow, .bhk-v5-playerRail[data-bhk-v5-rail-current="browse"] .bhk-v5-railLinks__row, html[data-bhk-v5-rail="browse"] .bhk-v5-playerRail__browseLinksRow, html[data-bhk-v5-rail="browse"] .bhk-v5-railLinks__row, .bhk-v5-playerRail__browseLinks .bhk-v5-playerRail__browseLink, .bhk-v5-playerRail__browseLinks .bhk-v5-railLinks__control, .bhk-v5-playerRail[data-bhk-v5-rail-current="browse"] .bhk-v5-playerRail__browseLink, .bhk-v5-playerRail[data-bhk-v5-rail-current="browse"] .bhk-v5-railLinks__control, html[data-bhk-v5-rail="browse"] .bhk-v5-playerRail__browseLink, html[data-bhk-v5-rail="browse"] .bhk-v5-railLinks__control { min-height: 20px !important; height: 20px !important; max-height: 20px !important; border-radius: 0 !important; } .bhk-v5-playerRail__switchBay--browse-primary, .bhk-v5-playerRail[data-bhk-v5-rail-current="browse"] .bhk-v5-playerRail__switchBay--browse-primary, html[data-bhk-v5-rail="browse"] .bhk-v5-playerRail__switchBay--browse-primary { display: grid !important; grid-template-rows: minmax(0, 1fr) !important; min-height: 96px !important; height: 96px !important; max-height: 96px !important; padding: 7px 6px 6px !important; gap: 0 !important; align-content: stretch !important; overflow: hidden !important; border-radius: 0 !important; } .bhk-v5-playerRail__switchBay--browse-primary .bhk-v5-playerRail__bankPing, .bhk-v5-playerRail__switchBay--browse-primary .bhk-v5-playerRail__range, .bhk-v5-playerRail__switchBay--browse-primary .bhk-v5-playerRail__activeStatus, .bhk-v5-playerRail__switchBay--browse-primary .bhk-v5-playerRail__selectorNote, .bhk-v5-playerRail[data-bhk-v5-rail-current="browse"] .bhk-v5-playerRail__switchBay--browse-primary .bhk-v5-playerRail__bankPing, .bhk-v5-playerRail[data-bhk-v5-rail-current="browse"] .bhk-v5-playerRail__switchBay--browse-primary .bhk-v5-playerRail__range, .bhk-v5-playerRail[data-bhk-v5-rail-current="browse"] .bhk-v5-playerRail__switchBay--browse-primary .bhk-v5-playerRail__activeStatus, .bhk-v5-playerRail[data-bhk-v5-rail-current="browse"] .bhk-v5-playerRail__switchBay--browse-primary .bhk-v5-playerRail__selectorNote, html[data-bhk-v5-rail="browse"] .bhk-v5-playerRail__switchBay--browse-primary .bhk-v5-playerRail__bankPing, html[data-bhk-v5-rail="browse"] .bhk-v5-playerRail__switchBay--browse-primary .bhk-v5-playerRail__range, html[data-bhk-v5-rail="browse"] .bhk-v5-playerRail__switchBay--browse-primary .bhk-v5-playerRail__activeStatus, html[data-bhk-v5-rail="browse"] .bhk-v5-playerRail__switchBay--browse-primary .bhk-v5-playerRail__selectorNote { display: none !important; visibility: hidden !important; width: 0 !important; height: 0 !important; min-height: 0 !important; max-height: 0 !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; border: 0 !important; opacity: 0 !important; pointer-events: none !important; } .bhk-v5-playerRail__switchBay--browse-primary .bhk-v5-playerRail__switches, .bhk-v5-playerRail[data-bhk-v5-rail-current="browse"] .bhk-v5-playerRail__switchBay--browse-primary .bhk-v5-playerRail__switches, html[data-bhk-v5-rail="browse"] .bhk-v5-playerRail__switchBay--browse-primary .bhk-v5-playerRail__switches { display: grid !important; grid-template-columns: repeat(8, minmax(0, 1fr)) !important; gap: 4px !important; width: 100% !important; min-width: 0 !important; min-height: 60px !important; height: 60px !important; max-height: 60px !important; align-self: end !important; align-items: stretch !important; padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; } .bhk-v5-playerRail__switchBay--browse-primary .bhk-v5-playerRail__switch, .bhk-v5-playerRail[data-bhk-v5-rail-current="browse"] .bhk-v5-playerRail__switchBay--browse-primary .bhk-v5-playerRail__switch, html[data-bhk-v5-rail="browse"] .bhk-v5-playerRail__switchBay--browse-primary .bhk-v5-playerRail__switch { min-height: 60px !important; height: 60px !important; max-height: 60px !important; padding: 4px 2px 3px !important; } .bhk-v5-playerRail__switchBay--browse-primary .bhk-v5-playerRail__switchBody, .bhk-v5-playerRail[data-bhk-v5-rail-current="browse"] .bhk-v5-playerRail__switchBay--browse-primary .bhk-v5-playerRail__switchBody, html[data-bhk-v5-rail="browse"] .bhk-v5-playerRail__switchBay--browse-primary .bhk-v5-playerRail__switchBody { min-height: 35px !important; } .bhk-v5-playerRail__switchBay--browse-primary .bhk-v5-playerRail__switchLabel, .bhk-v5-playerRail[data-bhk-v5-rail-current="browse"] .bhk-v5-playerRail__switchBay--browse-primary .bhk-v5-playerRail__switchLabel, html[data-bhk-v5-rail="browse"] .bhk-v5-playerRail__switchBay--browse-primary .bhk-v5-playerRail__switchLabel { min-height: 10px !important; line-height: 10px !important; } .bhk-v5-playerRail__switchBay--browse-secondary .bhk-v5-playerRail__switches, .bhk-v5-playerRail[data-bhk-v5-rail-current="browse"] .bhk-v5-playerRail__switchBay--browse-secondary .bhk-v5-playerRail__switches, html[data-bhk-v5-rail="browse"] .bhk-v5-playerRail__switchBay--browse-secondary .bhk-v5-playerRail__switches { min-height: 54px !important; height: 54px !important; max-height: 54px !important; } .bhk-v5-playerRail__switchBay--browse-secondary .bhk-v5-playerRail__banks, .bhk-v5-playerRail[data-bhk-v5-rail-current="browse"] .bhk-v5-playerRail__switchBay--browse-secondary .bhk-v5-playerRail__banks, html[data-bhk-v5-rail="browse"] .bhk-v5-playerRail__switchBay--browse-secondary .bhk-v5-playerRail__banks { min-height: 30px !important; height: 30px !important; max-height: 30px !important; } /* V5.0.498 — Browse Switches Match Listen Switch Hardware. Rail-skin parity only. The Listen switch wells/buttons/banks are the visual authority. No Browse mapping, click handlers, data JSON, jacket/sleeve geometry, Spotify, YouTube, REST, or API behavior is changed. */ .bhk-v5-playerRail__switchBay--browse-primary .bhk-v5-playerRail__switches, .bhk-v5-playerRail[data-bhk-v5-rail-current="browse"] .bhk-v5-playerRail__switchBay--browse-primary .bhk-v5-playerRail__switches, html[data-bhk-v5-rail="browse"] .bhk-v5-playerRail__switchBay--browse-primary .bhk-v5-playerRail__switches { display: grid !important; position: relative !important; z-index: 1 !important; grid-template-columns: repeat(8, minmax(0, 1fr)) !important; gap: 4px !important; width: 264px !important; min-width: 264px !important; max-width: 264px !important; min-height: 66px !important; height: 66px !important; max-height: 66px !important; padding: 3px 0 !important; margin: 0 auto !important; align-self: end !important; align-items: stretch !important; align-content: stretch !important; color: var(--v5-proof, #fff7ff) !important; background: rgba(0, 0, 0, 0.26) !important; border: 1px solid rgba(255, 255, 255, 0.09) !important; border-top-color: rgba(255, 255, 255, 0.09) !important; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.48), inset 0 1px 0 rgba(255, 255, 255, 0.055) !important; border-radius: 0 !important; overflow: hidden !important; } .bhk-v5-playerRail__switchBay--browse-secondary .bhk-v5-playerRail__switches, .bhk-v5-playerRail[data-bhk-v5-rail-current="browse"] .bhk-v5-playerRail__switchBay--browse-secondary .bhk-v5-playerRail__switches, html[data-bhk-v5-rail="browse"] .bhk-v5-playerRail__switchBay--browse-secondary .bhk-v5-playerRail__switches { display: grid !important; position: relative !important; z-index: 1 !important; grid-template-columns: repeat(8, minmax(0, 1fr)) !important; gap: 4px !important; width: 264px !important; min-width: 264px !important; max-width: 264px !important; min-height: 62px !important; height: 62px !important; max-height: 62px !important; padding: 4px 0 !important; margin: 0 auto !important; align-items: stretch !important; align-content: stretch !important; color: var(--v5-proof, #fff7ff) !important; background: rgba(0, 0, 0, 0) !important; border: 1px solid color-mix(in srgb, var(--v5-accent, #8f64ff) 42%, transparent) !important; border-top-color: color-mix(in srgb, var(--v5-accent, #8f64ff) 42%, transparent) !important; box-shadow: inset 0 1px 0 color-mix(in srgb, var(--v5-proof, #fff7ff) 10%, transparent), inset 0 0 0 1px rgba(0, 0, 0, 0.42), inset 0 -14px 28px rgba(0, 0, 0, 0.24), 0 6px 14px rgba(0, 0, 0, 0.32) !important; border-radius: 0 !important; overflow: hidden !important; } .bhk-v5-playerRail__switchBay--browse-secondary .bhk-v5-playerRail__banks, .bhk-v5-playerRail[data-bhk-v5-rail-current="browse"] .bhk-v5-playerRail__switchBay--browse-secondary .bhk-v5-playerRail__banks, html[data-bhk-v5-rail="browse"] .bhk-v5-playerRail__switchBay--browse-secondary .bhk-v5-playerRail__banks { display: grid !important; position: relative !important; z-index: 1 !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 4px !important; width: 264px !important; min-width: 264px !important; max-width: 264px !important; min-height: 34px !important; height: 34px !important; max-height: 34px !important; padding: 4px 0 !important; margin: 5px auto 0 !important; color: var(--v5-proof, #fff7ff) !important; background: color-mix(in srgb, var(--v5-surface, #06040d) 94%, #000 6%) !important; border: 1px solid color-mix(in srgb, var(--v5-accent, #8f64ff) 40%, transparent) !important; border-top-color: color-mix(in srgb, var(--v5-accent, #8f64ff) 40%, transparent) !important; box-shadow: inset 0 1px 0 color-mix(in srgb, var(--v5-proof, #fff7ff) 11%, transparent), inset 0 0 0 1px rgba(0, 0, 0, 0.38), inset 0 -10px 18px rgba(0, 0, 0, 0.24), 0 5px 13px rgba(0, 0, 0, 0.30) !important; border-radius: 0 !important; overflow: hidden !important; } .bhk-v5-playerRail__switchBay--browse-primary .bhk-v5-playerRail__switch, .bhk-v5-playerRail[data-bhk-v5-rail-current="browse"] .bhk-v5-playerRail__switchBay--browse-primary .bhk-v5-playerRail__switch, html[data-bhk-v5-rail="browse"] .bhk-v5-playerRail__switchBay--browse-primary .bhk-v5-playerRail__switch { display: grid !important; place-items: center !important; min-width: 0 !important; width: auto !important; min-height: 60px !important; height: 60px !important; max-height: 60px !important; padding: 4px 2px 3px !important; color: color-mix(in srgb, var(--v5-proof, #fff7ff) 82%, transparent) !important; background: color-mix(in srgb, var(--v5-surface, #06040d) 92%, var(--v5-accent, #8f64ff) 8%) !important; border: 1px solid color-mix(in srgb, var(--v5-accent, #8f64ff) 35%, transparent) !important; border-top-color: color-mix(in srgb, var(--v5-accent, #8f64ff) 42%, transparent) !important; box-shadow: inset 0 1px 0 color-mix(in srgb, var(--v5-proof, #fff7ff) 9%, transparent), inset 0 -1px 0 rgba(0, 0, 0, 0.56), 0 0 8px color-mix(in srgb, var(--v5-accent, #8f64ff) 12%, transparent) !important; border-radius: 0 !important; opacity: 1 !important; } .bhk-v5-playerRail__switchBay--browse-secondary .bhk-v5-playerRail__switch, .bhk-v5-playerRail[data-bhk-v5-rail-current="browse"] .bhk-v5-playerRail__switchBay--browse-secondary .bhk-v5-playerRail__switch, html[data-bhk-v5-rail="browse"] .bhk-v5-playerRail__switchBay--browse-secondary .bhk-v5-playerRail__switch { display: grid !important; place-items: center !important; min-width: 0 !important; width: auto !important; min-height: 54px !important; height: 54px !important; max-height: 54px !important; padding: 4px 2px 3px !important; color: color-mix(in srgb, var(--v5-proof, #fff7ff) 76%, transparent) !important; background: color-mix(in srgb, var(--v5-surface, #06040d) 94%, var(--v5-accent, #8f64ff) 6%) !important; border: 1px solid color-mix(in srgb, var(--v5-accent, #8f64ff) 30%, transparent) !important; border-top-color: color-mix(in srgb, var(--v5-accent, #8f64ff) 38%, transparent) !important; box-shadow: inset 0 1px 0 color-mix(in srgb, var(--v5-proof, #fff7ff) 8%, transparent), inset 0 -1px 0 rgba(0, 0, 0, 0.58), 0 0 7px color-mix(in srgb, var(--v5-accent, #8f64ff) 10%, transparent) !important; border-radius: 0 !important; opacity: 1 !important; } .bhk-v5-playerRail__switchBay--browse-primary .bhk-v5-playerRail__switch.is-active, .bhk-v5-playerRail__switchBay--browse-primary .bhk-v5-playerRail__switch.is-scroll-current, .bhk-v5-playerRail__switchBay--browse-primary .bhk-v5-playerRail__switch[aria-pressed="true"], .bhk-v5-playerRail__switchBay--browse-secondary .bhk-v5-playerRail__switch.is-active, .bhk-v5-playerRail__switchBay--browse-secondary .bhk-v5-playerRail__switch.is-scroll-current, .bhk-v5-playerRail__switchBay--browse-secondary .bhk-v5-playerRail__switch[aria-pressed="true"], .bhk-v5-playerRail[data-bhk-v5-rail-current="browse"] .bhk-v5-playerRail__switchBay--browse-primary .bhk-v5-playerRail__switch.is-active, .bhk-v5-playerRail[data-bhk-v5-rail-current="browse"] .bhk-v5-playerRail__switchBay--browse-primary .bhk-v5-playerRail__switch.is-scroll-current, .bhk-v5-playerRail[data-bhk-v5-rail-current="browse"] .bhk-v5-playerRail__switchBay--browse-primary .bhk-v5-playerRail__switch[aria-pressed="true"], .bhk-v5-playerRail[data-bhk-v5-rail-current="browse"] .bhk-v5-playerRail__switchBay--browse-secondary .bhk-v5-playerRail__switch.is-active, .bhk-v5-playerRail[data-bhk-v5-rail-current="browse"] .bhk-v5-playerRail__switchBay--browse-secondary .bhk-v5-playerRail__switch.is-scroll-current, .bhk-v5-playerRail[data-bhk-v5-rail-current="browse"] .bhk-v5-playerRail__switchBay--browse-secondary .bhk-v5-playerRail__switch[aria-pressed="true"], html[data-bhk-v5-rail="browse"] .bhk-v5-playerRail__switchBay--browse-primary .bhk-v5-playerRail__switch.is-active, html[data-bhk-v5-rail="browse"] .bhk-v5-playerRail__switchBay--browse-primary .bhk-v5-playerRail__switch.is-scroll-current, html[data-bhk-v5-rail="browse"] .bhk-v5-playerRail__switchBay--browse-primary .bhk-v5-playerRail__switch[aria-pressed="true"], html[data-bhk-v5-rail="browse"] .bhk-v5-playerRail__switchBay--browse-secondary .bhk-v5-playerRail__switch.is-active, html[data-bhk-v5-rail="browse"] .bhk-v5-playerRail__switchBay--browse-secondary .bhk-v5-playerRail__switch.is-scroll-current, html[data-bhk-v5-rail="browse"] .bhk-v5-playerRail__switchBay--browse-secondary .bhk-v5-playerRail__switch[aria-pressed="true"] { color: var(--v5-proof, #fff7ff) !important; background: color-mix(in srgb, var(--v5-accent, #8f64ff) 48%, var(--v5-surface, #06040d) 52%) !important; border-color: color-mix(in srgb, var(--v5-signal, #ff48da) 70%, var(--v5-proof, #fff7ff) 30%) !important; border-top-color: color-mix(in srgb, var(--v5-signal, #ff48da) 70%, var(--v5-proof, #fff7ff) 30%) !important; box-shadow: 0 0 0 1px color-mix(in srgb, var(--v5-signal, #ff48da) 34%, transparent), 0 0 20px color-mix(in srgb, var(--v5-accent, #8f64ff) 30%, transparent), inset 0 1px 0 color-mix(in srgb, var(--v5-proof, #fff7ff) 13%, transparent), inset 0 -1px 0 rgba(0, 0, 0, 0.50) !important; opacity: 1 !important; } .bhk-v5-playerRail__switchBay--browse-secondary .bhk-v5-playerRail__bank, .bhk-v5-playerRail[data-bhk-v5-rail-current="browse"] .bhk-v5-playerRail__switchBay--browse-secondary .bhk-v5-playerRail__bank, html[data-bhk-v5-rail="browse"] .bhk-v5-playerRail__switchBay--browse-secondary .bhk-v5-playerRail__bank { min-height: 26px !important; height: 26px !important; max-height: 26px !important; padding: 3px 4px !important; border-radius: 0 !important; color: color-mix(in srgb, var(--v5-proof, #fff7ff) 76%, transparent) !important; background: color-mix(in srgb, var(--v5-surface, #06040d) 92%, var(--v5-accent, #8f64ff) 8%) !important; border: 1px solid color-mix(in srgb, var(--v5-accent, #8f64ff) 30%, transparent) !important; box-shadow: inset 0 1px 0 color-mix(in srgb, var(--v5-proof, #fff7ff) 8%, transparent), inset 0 -1px 0 rgba(0, 0, 0, 0.52) !important; } .bhk-v5-playerRail__switchBay--browse-secondary .bhk-v5-playerRail__bank.is-active, .bhk-v5-playerRail__switchBay--browse-secondary .bhk-v5-playerRail__bank[aria-pressed="true"], .bhk-v5-playerRail[data-bhk-v5-rail-current="browse"] .bhk-v5-playerRail__switchBay--browse-secondary .bhk-v5-playerRail__bank.is-active, .bhk-v5-playerRail[data-bhk-v5-rail-current="browse"] .bhk-v5-playerRail__switchBay--browse-secondary .bhk-v5-playerRail__bank[aria-pressed="true"], html[data-bhk-v5-rail="browse"] .bhk-v5-playerRail__switchBay--browse-secondary .bhk-v5-playerRail__bank.is-active, html[data-bhk-v5-rail="browse"] .bhk-v5-playerRail__switchBay--browse-secondary .bhk-v5-playerRail__bank[aria-pressed="true"] { color: var(--v5-proof, #fff7ff) !important; background: color-mix(in srgb, var(--v5-accent, #8f64ff) 48%, var(--v5-surface, #06040d) 52%) !important; border-color: color-mix(in srgb, var(--v5-signal, #ff48da) 70%, var(--v5-proof, #fff7ff) 30%) !important; box-shadow: 0 0 0 1px color-mix(in srgb, var(--v5-signal, #ff48da) 34%, transparent), 0 0 18px color-mix(in srgb, var(--v5-accent, #8f64ff) 28%, transparent), inset 0 1px 0 color-mix(in srgb, var(--v5-proof, #fff7ff) 12%, transparent), inset 0 -1px 0 rgba(0, 0, 0, 0.50) !important; } .bhk-v5-playerRail__switchBay--browse-secondary .bhk-v5-playerRail__switch.is-unassigned, .bhk-v5-playerRail__switchBay--browse-secondary .bhk-v5-playerRail__switch[aria-disabled="true"], .bhk-v5-playerRail__switchBay--browse-secondary .bhk-v5-playerRail__bank.is-unassigned, .bhk-v5-playerRail__switchBay--browse-secondary .bhk-v5-playerRail__bank[aria-disabled="true"] { opacity: .46 !important; filter: saturate(.72) brightness(.82) !important; } /* V5.0.499 — Remove Browse ControlOptics Spacer Rows / Expand Switch Wells. Rail-skin only. Removes Browse-only decorative spacer canvases so the switch wells reclaim the vertical space. Listen/Menu/Timeline canvases, Browse mapping, click handlers, JSON, jacket/sleeve geometry, Spotify, YouTube, REST, and API behavior remain unchanged. */ .bhk-v5-playerRail__switchBay--browse-primary > .bhk-v5-playerRail__controlOptics, .bhk-v5-playerRail__switchBay--browse-secondary > .bhk-v5-playerRail__controlOptics, .bhk-v5-playerRail[data-bhk-v5-rail-current="browse"] .bhk-v5-playerRail__switchBay--browse-primary > .bhk-v5-playerRail__controlOptics, .bhk-v5-playerRail[data-bhk-v5-rail-current="browse"] .bhk-v5-playerRail__switchBay--browse-secondary > .bhk-v5-playerRail__controlOptics, html[data-bhk-v5-rail="browse"] .bhk-v5-playerRail__switchBay--browse-primary > .bhk-v5-playerRail__controlOptics, html[data-bhk-v5-rail="browse"] .bhk-v5-playerRail__switchBay--browse-secondary > .bhk-v5-playerRail__controlOptics { display: none !important; visibility: hidden !important; width: 0 !important; min-width: 0 !important; max-width: 0 !important; height: 0 !important; min-height: 0 !important; max-height: 0 !important; margin: 0 !important; padding: 0 !important; border: 0 !important; overflow: hidden !important; opacity: 0 !important; pointer-events: none !important; } .bhk-v5-playerRail__switchBay--browse-primary, .bhk-v5-playerRail[data-bhk-v5-rail-current="browse"] .bhk-v5-playerRail__switchBay--browse-primary, html[data-bhk-v5-rail="browse"] .bhk-v5-playerRail__switchBay--browse-primary { grid-template-rows: minmax(0, 1fr) !important; align-content: stretch !important; padding-top: 6px !important; padding-bottom: 6px !important; } .bhk-v5-playerRail__switchBay--browse-primary .bhk-v5-playerRail__switches, .bhk-v5-playerRail[data-bhk-v5-rail-current="browse"] .bhk-v5-playerRail__switchBay--browse-primary .bhk-v5-playerRail__switches, html[data-bhk-v5-rail="browse"] .bhk-v5-playerRail__switchBay--browse-primary .bhk-v5-playerRail__switches { min-height: 81px !important; height: 81px !important; max-height: 81px !important; padding-top: 4px !important; padding-bottom: 4px !important; align-self: stretch !important; } .bhk-v5-playerRail__switchBay--browse-primary .bhk-v5-playerRail__switch, .bhk-v5-playerRail[data-bhk-v5-rail-current="browse"] .bhk-v5-playerRail__switchBay--browse-primary .bhk-v5-playerRail__switch, html[data-bhk-v5-rail="browse"] .bhk-v5-playerRail__switchBay--browse-primary .bhk-v5-playerRail__switch { min-height: 73px !important; height: 73px !important; max-height: 73px !important; padding-top: 5px !important; padding-bottom: 4px !important; } .bhk-v5-playerRail__switchBay--browse-primary .bhk-v5-playerRail__switchBody, .bhk-v5-playerRail[data-bhk-v5-rail-current="browse"] .bhk-v5-playerRail__switchBay--browse-primary .bhk-v5-playerRail__switchBody, html[data-bhk-v5-rail="browse"] .bhk-v5-playerRail__switchBay--browse-primary .bhk-v5-playerRail__switchBody { min-height: 47px !important; } .bhk-v5-playerRail__switchBay--browse-secondary, .bhk-v5-playerRail[data-bhk-v5-rail-current="browse"] .bhk-v5-playerRail__switchBay--browse-secondary, html[data-bhk-v5-rail="browse"] .bhk-v5-playerRail__switchBay--browse-secondary { grid-template-rows: minmax(0, 1fr) 34px !important; align-content: stretch !important; row-gap: 4px !important; padding-top: 6px !important; padding-bottom: 6px !important; } .bhk-v5-playerRail__switchBay--browse-secondary .bhk-v5-playerRail__switches, .bhk-v5-playerRail[data-bhk-v5-rail-current="browse"] .bhk-v5-playerRail__switchBay--browse-secondary .bhk-v5-playerRail__switches, html[data-bhk-v5-rail="browse"] .bhk-v5-playerRail__switchBay--browse-secondary .bhk-v5-playerRail__switches { min-height: 80px !important; height: 80px !important; max-height: 80px !important; padding-top: 4px !important; padding-bottom: 4px !important; align-self: stretch !important; } .bhk-v5-playerRail__switchBay--browse-secondary .bhk-v5-playerRail__switch, .bhk-v5-playerRail[data-bhk-v5-rail-current="browse"] .bhk-v5-playerRail__switchBay--browse-secondary .bhk-v5-playerRail__switch, html[data-bhk-v5-rail="browse"] .bhk-v5-playerRail__switchBay--browse-secondary .bhk-v5-playerRail__switch { min-height: 72px !important; height: 72px !important; max-height: 72px !important; padding-top: 5px !important; padding-bottom: 4px !important; } .bhk-v5-playerRail__switchBay--browse-secondary .bhk-v5-playerRail__switchBody, .bhk-v5-playerRail[data-bhk-v5-rail-current="browse"] .bhk-v5-playerRail__switchBay--browse-secondary .bhk-v5-playerRail__switchBody, html[data-bhk-v5-rail="browse"] .bhk-v5-playerRail__switchBay--browse-secondary .bhk-v5-playerRail__switchBody { min-height: 46px !important; } .bhk-v5-playerRail__switchBay--browse-secondary .bhk-v5-playerRail__banks, .bhk-v5-playerRail[data-bhk-v5-rail-current="browse"] .bhk-v5-playerRail__switchBay--browse-secondary .bhk-v5-playerRail__banks, html[data-bhk-v5-rail="browse"] .bhk-v5-playerRail__switchBay--browse-secondary .bhk-v5-playerRail__banks { min-height: 34px !important; height: 34px !important; max-height: 34px !important; margin-top: 0 !important; align-self: end !important; }