/* BHK V5.0.214 — Rail CSS modular split. Source: assets/css/bhk-v5-rail.css. Preserve cascade order. */
/* V5.0.162 — Rail Listen Spotify Edge Recovery + 1px Border Shell.
   LISTEN MENU ONLY: the Spotify visual player is now the production Listen
   rail transport face. The shell is widened/tall-fitted to prevent Spotify
   control clipping and carries its own 1px rail-language border. Browse and
   Hamburger/Menu transport layouts are not replaced and keep their own existing
   rail layouts. Original rail transport controls remain preserved in the DOM
   for wiring. No rail authority rewrite, API, OAuth, SDK, token flow, colour
   authority, public shell geometry, mobile player, viewer, or jacket/sleeve
   geometry change is introduced. */
.bhk-v5-playerRail__spotifyTransportVisual {
  display: none;
}

html[data-bhk-v5-rail="listen"] .bhk-v5-playerRail__transport {
  position: relative;
  box-sizing: border-box;
  width: 282px;
  max-width: 100%;
  height: 200px;
  min-height: 200px;
  max-height: 200px;
  display: block !important;
  padding: 0;
  gap: 0;
  overflow: visible;
  border-radius: 0;
  border: 0;
  background: transparent;
  box-shadow: 0 12px 26px color-mix(in srgb, var(--v5-shadow) 24%, transparent);
}

html[data-bhk-v5-rail="listen"] .bhk-v5-playerRail__spotifyTransportVisual {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: block;
  width: 282px;
  max-width: 100%;
  height: 200px;
  overflow: hidden;
  box-sizing: border-box;
  border-radius: 0;
  border: 1px solid color-mix(in srgb, var(--v5-line-strong) 42%, transparent);
  background: color-mix(in srgb, var(--v5-page) 92%, transparent);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--v5-proof) 6%, transparent),
    0 10px 24px color-mix(in srgb, var(--v5-shadow) 22%, transparent);
}

html[data-bhk-v5-rail="listen"] .bhk-v5-playerRail__spotifyTransportVisual iframe {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  display: block;
  width: 282px;
  max-width: none;
  height: 200px;
  border: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: transparent;
}

html[data-bhk-v5-rail="listen"] .bhk-v5-playerRail__transportWiring {
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  width: 1px;
  height: 1px;
  min-width: 1px;
  min-height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

html[data-bhk-v5-rail="listen"] .bhk-v5-playerRail__transportWiring .bhk-v5-playerRail__transportHead,
html[data-bhk-v5-rail="listen"] .bhk-v5-playerRail__transportWiring .bhk-v5-playerRail__transportGrid {
  width: 282px;
}

/* V5.0.176 — Rail Object Hierarchy Polish.
   Visual-only rail pass. Keeps the 300px sticky rail, Listen/Browse/Menu state
   model, Spotify iframe wiring, BNK/S selector wiring, V5 data lanes, colour
   authority tokens, squared public shell corners, and current jacket/sleeve
   geometry intact. */
@media (min-width: 1161px) {
  .bhk-v5-playerRail {
    border-color: color-mix(in srgb, var(--v5-line-strong) 52%, transparent);
    border-top-color: color-mix(in srgb, var(--v5-line-strong) 88%, transparent);
    background:
      radial-gradient(circle at 50% 18%, color-mix(in srgb, var(--v5-accent) 18%, transparent), transparent 13rem),
      radial-gradient(circle at 52% 62%, color-mix(in srgb, var(--v5-signal) 10%, transparent), transparent 17rem),
      linear-gradient(180deg, color-mix(in srgb, var(--v5-proof) 5%, transparent), transparent 28%),
      color-mix(in srgb, var(--v5-page) 40%, var(--v5-surface) 60%);
    box-shadow:
      0 28px 70px var(--v5-shadow),
      inset 0 1px 0 color-mix(in srgb, var(--v5-proof) 6%, transparent),
      inset 0 0 0 1px color-mix(in srgb, var(--v5-page) 44%, transparent);
  }

  .bhk-v5-playerRail::before {
    background:
      linear-gradient(90deg, color-mix(in srgb, var(--v5-line-strong) 8%, transparent), transparent 18%, transparent 82%, color-mix(in srgb, var(--v5-line-strong) 7%, transparent)),
      linear-gradient(180deg, color-mix(in srgb, var(--v5-proof) 4%, transparent), transparent 18%, color-mix(in srgb, var(--v5-page) 16%, transparent));
    opacity: .64;
  }

  .bhk-v5-playerRail__inner {
    gap: 8px;
    padding: 10px 10px 13px;
  }

  .bhk-v5-playerRail__top {
    gap: 5px;
  }

  .bhk-v5-playerRail__mode {
    position: relative;
    min-height: 44px;
    overflow: hidden;
    border-color: color-mix(in srgb, var(--v5-line-strong) 50%, transparent);
    background:
      linear-gradient(180deg, color-mix(in srgb, var(--v5-proof) 5%, transparent), color-mix(in srgb, var(--v5-page) 14%, transparent)),
      color-mix(in srgb, var(--v5-surface-2) 86%, transparent);
    letter-spacing: .14em;
    box-shadow:
      inset 0 1px 0 color-mix(in srgb, var(--v5-proof) 7%, transparent),
      0 8px 18px color-mix(in srgb, var(--v5-shadow) 18%, transparent);
  }

  .bhk-v5-playerRail__mode::after {
    content: "";
    position: absolute;
    left: 8px;
    right: 8px;
    bottom: 6px;
    height: 1px;
    background: color-mix(in srgb, var(--v5-line-strong) 18%, transparent);
    pointer-events: none;
  }

  .bhk-v5-playerRail__mode.is-active {
    border-color: color-mix(in srgb, var(--v5-line-strong) 82%, transparent);
    background:
      linear-gradient(180deg, color-mix(in srgb, var(--v5-proof) 10%, transparent), transparent 52%),
      color-mix(in srgb, var(--v5-accent) 38%, var(--v5-surface));
    box-shadow:
      0 0 0 1px color-mix(in srgb, var(--v5-line-strong) 18%, transparent),
      0 0 20px color-mix(in srgb, var(--v5-accent) 24%, transparent),
      inset 0 1px 0 color-mix(in srgb, var(--v5-proof) 11%, transparent);
  }

  .bhk-v5-playerRail__mode.is-active::after {
    background: color-mix(in srgb, var(--v5-signal) 72%, var(--v5-line-strong));
  }

  .bhk-v5-playerRail__now,
.bhk-v5-playerRail__transport,
.bhk-v5-playerRail__browseViewport,
.bhk-v5-playerRail__switchBay {
    border-color: color-mix(in srgb, var(--v5-line-strong) 30%, transparent);
    background:
      linear-gradient(180deg, color-mix(in srgb, var(--v5-proof) 4%, transparent), transparent 42%),
      color-mix(in srgb, var(--v5-page) 50%, var(--v5-surface) 50%);
    box-shadow:
      inset 0 1px 0 color-mix(in srgb, var(--v5-proof) 5%, transparent),
      0 12px 26px color-mix(in srgb, var(--v5-shadow) 20%, transparent);
  }

  .bhk-v5-playerRail__now {
    min-height: 84px;
    padding: 12px 13px;
  }

  .bhk-v5-playerRail__now strong {
    font-size: 16px;
    line-height: 1;
  }

  html[data-bhk-v5-rail="listen"] .bhk-v5-playerRail__spotifyTransportVisual {
    border-color: color-mix(in srgb, var(--v5-line-strong) 48%, transparent);
    background: color-mix(in srgb, var(--v5-page) 94%, transparent);
    box-shadow:
      inset 0 1px 0 color-mix(in srgb, var(--v5-proof) 8%, transparent),
      inset 0 0 0 1px color-mix(in srgb, var(--v5-page) 38%, transparent),
      0 14px 28px color-mix(in srgb, var(--v5-shadow) 26%, transparent);
  }

  html[data-bhk-v5-rail="listen"] .bhk-v5-playerRail__contentSlot {
    height: 362px;
    min-height: 362px;
    max-height: 362px;
  }

  html[data-bhk-v5-rail="listen"] .bhk-v5-playerRail__tracks {
    gap: 6px;
  }

  .bhk-v5-playerRail__track {
    min-height: 36px;
    padding: 5px 6px;
    border-color: color-mix(in srgb, var(--v5-line-strong) 30%, transparent);
    background:
      linear-gradient(180deg, color-mix(in srgb, var(--v5-proof) 3%, transparent), transparent 56%),
      color-mix(in srgb, var(--v5-surface) 86%, transparent);
    box-shadow: inset 0 1px 0 color-mix(in srgb, var(--v5-proof) 4%, transparent);
  }

  .bhk-v5-playerRail__trackTitle {
    color: color-mix(in srgb, var(--v5-proof) 94%, transparent);
    font-size: 10px;
    line-height: 1.12;
    letter-spacing: -.015em;
  }

  .bhk-v5-playerRail__trackNo,
.bhk-v5-playerRail__trackPlay {
    border-color: color-mix(in srgb, var(--v5-line-strong) 46%, transparent);
    background: color-mix(in srgb, var(--v5-page) 42%, var(--v5-surface-3));
  }

  .bhk-v5-playerRail__track.is-active {
    border-color: color-mix(in srgb, var(--v5-line-strong) 78%, transparent);
    background:
      linear-gradient(180deg, color-mix(in srgb, var(--v5-proof) 9%, transparent), transparent 58%),
      color-mix(in srgb, var(--v5-accent) 34%, var(--v5-surface));
    box-shadow:
      0 0 0 1px color-mix(in srgb, var(--v5-line-strong) 18%, transparent),
      0 0 18px color-mix(in srgb, var(--v5-accent) 20%, transparent),
      inset 0 1px 0 color-mix(in srgb, var(--v5-proof) 10%, transparent);
  }

  .bhk-v5-playerRail__track.is-empty {
    opacity: .62;
  }

  .bhk-v5-playerRail__track.is-empty .bhk-v5-playerRail__trackTitle::before {
    width: 42%;
    background: color-mix(in srgb, var(--v5-line-strong) 20%, transparent);
  }

  .bhk-v5-playerRail__switchBay {
    padding: 10px;
  }

  .bhk-v5-playerRail__switchBay--primary {
    padding-top: 24px;
  }

  .bhk-v5-playerRail__switches {
    gap: 6px;
  }

  .bhk-v5-playerRail__switch {
    background: transparent;
    border-color: color-mix(in srgb, var(--v5-line-strong) 26%, transparent);
    box-shadow: none;
  }

  .bhk-v5-playerRail__switchBody {
    width: 26px;
    height: 52px;
    border-color: color-mix(in srgb, var(--v5-line-strong) 42%, transparent);
    background:
      linear-gradient(180deg, color-mix(in srgb, var(--v5-proof) 5%, transparent), transparent),
      color-mix(in srgb, var(--v5-page) 54%, var(--v5-surface));
  }

  .bhk-v5-playerRail__switchBody span {
    background: color-mix(in srgb, var(--v5-line-strong) 56%, var(--v5-surface-3));
    box-shadow: inset 0 1px 0 color-mix(in srgb, var(--v5-proof) 9%, transparent);
  }

  .bhk-v5-playerRail__switch.is-active .bhk-v5-playerRail__switchBody {
    border-color: color-mix(in srgb, var(--v5-line-strong) 86%, transparent);
    background: color-mix(in srgb, var(--v5-accent) 34%, var(--v5-surface));
    box-shadow:
      0 0 0 1px color-mix(in srgb, var(--v5-signal) 20%, transparent),
      0 0 16px color-mix(in srgb, var(--v5-accent) 22%, transparent),
      inset 0 1px 0 color-mix(in srgb, var(--v5-proof) 12%, transparent);
  }

  .bhk-v5-playerRail__switch.is-active .bhk-v5-playerRail__switchBody span {
    background: var(--v5-proof);
  }

  .bhk-v5-playerRail__switchLabel,
.bhk-v5-playerRail__bank,
.bhk-v5-playerRail__range,
.bhk-v5-playerRail__bankPing {
    text-shadow: 0 0 10px color-mix(in srgb, var(--v5-page) 70%, transparent);
  }

  .bhk-v5-playerRail__bank {
    min-height: 29px;
    border-color: color-mix(in srgb, var(--v5-line-strong) 38%, transparent);
    background:
      linear-gradient(180deg, color-mix(in srgb, var(--v5-proof) 5%, transparent), transparent),
      color-mix(in srgb, var(--v5-surface-2) 82%, transparent);
  }

  .bhk-v5-playerRail__bank.is-active {
    border-color: color-mix(in srgb, var(--v5-line-strong) 82%, transparent);
    background: color-mix(in srgb, var(--v5-accent) 34%, var(--v5-surface));
  }

  html[data-bhk-v5-rail="browse"] .bhk-v5-playerRail__transport {
    border-color: color-mix(in srgb, var(--v5-line-strong) 36%, transparent);
  }

  html[data-bhk-v5-rail="browse"] .bhk-v5-playerRail__transportGrid > button {
    border-color: color-mix(in srgb, var(--v5-line-strong) 36%, transparent);
    background:
      radial-gradient(circle at 50% 20%, color-mix(in srgb, var(--v5-accent) 13%, transparent), transparent 65%),
      color-mix(in srgb, var(--v5-surface-2) 82%, transparent);
  }

  html[data-bhk-v5-rail="browse"] .bhk-v5-playerRail__browseViewport {
    border-color: color-mix(in srgb, var(--v5-line-strong) 38%, transparent);
    overflow: hidden;
  }

  html[data-bhk-v5-rail="browse"] .bhk-v5-playerRail__browseArt {
    border-bottom-color: color-mix(in srgb, var(--v5-line-strong) 26%, transparent);
  }

  html[data-bhk-v5-rail="browse"] .bhk-v5-playerRail__browseImage {
    filter: saturate(1.04) contrast(1.08) brightness(.88);
  }

  html[data-bhk-v5-rail="browse"] .bhk-v5-playerRail__browseArt.has-image::after {
    border-color: color-mix(in srgb, var(--v5-line-strong) 38%, transparent);
    background:
      linear-gradient(180deg, rgba(0,0,0,.06), rgba(0,0,0,.38)),
      linear-gradient(90deg, color-mix(in srgb, var(--v5-signal) 10%, transparent), transparent 44%, color-mix(in srgb, var(--v5-accent) 12%, transparent));
  }

  

  

  

  html[data-bhk-v5-rail="menu"] .bhk-v5-playerRail {
    background:
      radial-gradient(circle at 50% 18%, color-mix(in srgb, var(--v5-accent) 14%, transparent), transparent 14rem),
      color-mix(in srgb, var(--v5-page) 84%, #030207);
  }

  html[data-bhk-v5-rail="menu"] .bhk-v5-playerRail__inner {
    grid-template-rows: auto minmax(0, 1fr);
    gap: 8px;
    height: calc(100dvh - 26px);
    min-height: calc(100dvh - 26px);
    padding: 12px 14px 14px;
  }

  html[data-bhk-v5-rail="menu"] .bhk-v5-playerRail__contentSlot {
    border: 1px solid color-mix(in srgb, var(--v5-line-strong) 26%, transparent);
    background: color-mix(in srgb, var(--v5-page) 86%, transparent);
    box-shadow: inset 0 1px 0 color-mix(in srgb, var(--v5-proof) 4%, transparent);
  }

  html[data-bhk-v5-rail="menu"] .bhk-v5-playerRail__keyboardDeck {
    gap: 5px;
    padding: 6px;
    border: 0;
    background: color-mix(in srgb, var(--v5-page) 88%, transparent);
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--v5-line-strong) 34%, transparent) transparent;
  }

  html[data-bhk-v5-rail="menu"] .bhk-v5-playerRail__pianoKey {
    flex: 0 0 57px;
    min-height: 57px;
    max-height: 57px;
    border: 1px solid color-mix(in srgb, var(--v5-line-strong) 28%, transparent);
    background:
      linear-gradient(90deg, color-mix(in srgb, var(--v5-proof) 5%, transparent) 0 1px, transparent 1px),
      linear-gradient(180deg, color-mix(in srgb, var(--v5-proof) 6%, transparent), color-mix(in srgb, var(--v5-surface-2) 72%, transparent)),
      color-mix(in srgb, var(--v5-page) 34%, var(--v5-surface) 66%);
    color: var(--v5-proof);
    box-shadow:
      inset 0 1px 0 color-mix(in srgb, var(--v5-proof) 6%, transparent),
      0 4px 11px color-mix(in srgb, var(--v5-shadow) 22%, transparent);
  }

  html[data-bhk-v5-rail="menu"] .bhk-v5-playerRail__pianoKey.has-blackKey::before {
    top: 12%;
    left: 0;
    width: 50%;
    height: 58%;
    border-right: 1px solid color-mix(in srgb, var(--v5-line-strong) 12%, transparent);
    background:
      linear-gradient(180deg, color-mix(in srgb, var(--v5-proof) 7%, transparent), transparent 32%),
      color-mix(in srgb, var(--v5-page) 72%, #000);
    box-shadow:
      inset 0 1px 0 color-mix(in srgb, var(--v5-proof) 7%, transparent),
      inset -10px 0 16px color-mix(in srgb, var(--v5-shadow) 44%, transparent),
      12px 9px 18px color-mix(in srgb, var(--v5-shadow) 26%, transparent);
    opacity: .86;
  }

  html[data-bhk-v5-rail="menu"] .bhk-v5-playerRail__keyOrder {
    left: 8px;
    bottom: 7px;
    color: color-mix(in srgb, var(--v5-line-strong) 30%, transparent);
    font-size: 7px;
  }

  html[data-bhk-v5-rail="menu"] .bhk-v5-playerRail__keyCopy {
    right: 10px;
    width: 116px;
    color: var(--v5-proof);
    text-align: right;
  }

  html[data-bhk-v5-rail="menu"] .bhk-v5-playerRail__pianoKey strong {
    color: var(--v5-proof);
    font-size: 10px;
    line-height: .9;
    text-shadow: 0 0 10px color-mix(in srgb, var(--v5-page) 90%, transparent);
  }

  html[data-bhk-v5-rail="menu"] .bhk-v5-playerRail__pianoKey em {
    color: color-mix(in srgb, var(--v5-muted) 80%, var(--v5-proof));
    font-size: 6px;
    letter-spacing: .04em;
  }

  html[data-bhk-v5-rail="menu"] .bhk-v5-playerRail__pianoKey:hover,
html[data-bhk-v5-rail="menu"] .bhk-v5-playerRail__pianoKey:focus-visible,
html[data-bhk-v5-rail="menu"] .bhk-v5-playerRail__pianoKey.is-current {
    outline: 1px solid color-mix(in srgb, var(--v5-signal) 76%, var(--v5-line-strong));
    outline-offset: -2px;
    background:
      linear-gradient(90deg, color-mix(in srgb, var(--v5-signal) 50%, transparent) 0 3px, transparent 3px),
      linear-gradient(180deg, color-mix(in srgb, var(--v5-proof) 9%, transparent), transparent 46%),
      color-mix(in srgb, var(--v5-accent) 24%, var(--v5-surface));
    filter: none;
    box-shadow:
      0 0 0 1px color-mix(in srgb, var(--v5-line-strong) 18%, transparent),
      0 0 20px color-mix(in srgb, var(--v5-signal) 18%, transparent),
      inset 0 1px 0 color-mix(in srgb, var(--v5-proof) 9%, transparent);
  }
}

html[data-bhk-v5-mode="default-white"] .bhk-v5-playerRail,
html[data-bhk-v5-mode="default-white"] .bhk-v5-playerRail::before,
html[data-bhk-v5-mode="default-white"] .bhk-v5-playerRail *,
html[data-bhk-v5-mode="default-white"] .bhk-v5-playerRail *::before,
html[data-bhk-v5-mode="default-white"] .bhk-v5-playerRail *::after {
  color: #fff !important;
  background: #fff !important;
  background-color: #fff !important;
  background-image: none !important;
  border-color: #fff !important;
  box-shadow: none !important;
  outline-color: #fff !important;
  text-shadow: none !important;
  filter: none !important;
  fill: #fff !important;
  stroke: #fff !important;
}