/* V5.0.270 lane split: bottom dock foundation and pocket console controls. */

/* V5.0.239 — Mobile Spotify-style bottom navigation dock.
   Rehomes LISTEN/BROWSE, transport, and LISTEN bank controls to a fixed safe-area bottom dock.
   Desktop shell, rail, sleeve, colour, JSON, runtime, OAuth/API boundaries remain unchanged. */
@media (max-width: 782px) {
  .bhk-v5-mobilePlayer {
    grid-template-rows: auto auto minmax(300px, 1fr);
    padding-bottom: calc(178px + env(safe-area-inset-bottom));
  }

  .bhk-v5-mobilePlayer--browse {
    grid-template-rows: auto minmax(320px, 1fr);
    padding-bottom: calc(126px + env(safe-area-inset-bottom));
  }

  .bhk-v5-mobilePlayer__bottomNav {
    position: fixed;
    left: 50%;
    bottom: 0;
    z-index: 9990;
    width: min(100%, 480px);
    display: grid;
    gap: 7px;
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
    border-top: 1px solid color-mix(in srgb, var(--v5-line-strong) 54%, transparent);
    background:
      linear-gradient(180deg, color-mix(in srgb, var(--v5-proof) 7%, transparent), transparent 42%),
      color-mix(in srgb, var(--v5-page) 91%, #000 9%);
    box-shadow: 0 -18px 48px color-mix(in srgb, #000 52%, transparent), inset 0 1px 0 color-mix(in srgb, var(--v5-proof) 9%, transparent);
    transform: translateX(-50%);
    -webkit-backdrop-filter: blur(14px) saturate(1.18);
    backdrop-filter: blur(14px) saturate(1.18);
  }

  .bhk-v5-mobilePlayer__bottomNav .bhk-v5-mobilePlayer__modeBar,
  .bhk-v5-mobilePlayer__bottomNav .bhk-v5-mobilePlayer__transport,
  .bhk-v5-mobilePlayer__bottomNav .bhk-v5-mobilePlayer__bankBar {
    width: 100%;
    margin: 0;
  }

  .bhk-v5-mobilePlayer__bottomNav .bhk-v5-mobilePlayer__modeBar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .bhk-v5-mobilePlayer__bottomNav .bhk-v5-mobilePlayer__transport {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .bhk-v5-mobilePlayer__bottomNav .bhk-v5-mobilePlayer__bankBar {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .bhk-v5-mobilePlayer__bottomNav .bhk-v5-mobilePlayer__mode,
  .bhk-v5-mobilePlayer__bottomNav .bhk-v5-mobilePlayer__button,
  .bhk-v5-mobilePlayer__bottomNav .bhk-v5-mobilePlayer__bank {
    min-height: 38px;
    padding: 9px 6px;
  }

  .bhk-v5-mobilePlayer__bottomNav--browse .bhk-v5-mobilePlayer__transport {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .bhk-v5-mobilePlayer__tracks {
    scroll-padding-bottom: calc(178px + env(safe-area-inset-bottom));
  }

  .bhk-v5-mobilePlayer--browse .bhk-v5-mobilePlayer__tracks {
    scroll-padding-bottom: calc(126px + env(safe-area-inset-bottom));
  }
}

@media (max-width: 360px) {
  .bhk-v5-mobilePlayer__bottomNav {
    padding-left: 10px;
    padding-right: 10px;
  }

  .bhk-v5-mobilePlayer__bottomNav .bhk-v5-mobilePlayer__mode,
  .bhk-v5-mobilePlayer__bottomNav .bhk-v5-mobilePlayer__button,
  .bhk-v5-mobilePlayer__bottomNav .bhk-v5-mobilePlayer__bank {
    min-height: 36px;
    padding: 8px 4px;
    font-size: 9px;
    letter-spacing: .1em;
  }
}


/* V5.0.240 — Mobile Pocket Console SVG icon recomposition.
   Inline SVG icons, five-control LISTEN transport, and Pocket Listen Console visual hierarchy.
   Mobile-only override; desktop V5 above 782px remains untouched. */
@media (max-width: 782px) {
  .bhk-v5-mobilePlayer {
    --v5-mobile-pocket-dock-height: 214px;
    --v5-mobile-pocket-dock-bg: color-mix(in srgb, var(--v5-page) 92%, #000 8%);
    --v5-mobile-pocket-dock-edge: color-mix(in srgb, var(--v5-line-strong) 60%, transparent);
    --v5-mobile-pocket-dock-led: color-mix(in srgb, var(--v5-signal) 82%, var(--v5-proof) 18%);
    --v5-mobile-pocket-dock-icon: color-mix(in srgb, var(--v5-text) 92%, transparent);
    --v5-mobile-pocket-dock-muted: color-mix(in srgb, var(--v5-muted) 70%, transparent);
    --v5-mobile-pocket-dock-panel: color-mix(in srgb, #000 38%, var(--v5-surface-2) 62%);
    padding-bottom: calc(var(--v5-mobile-pocket-dock-height) + env(safe-area-inset-bottom));
  }

  .bhk-v5-mobilePlayer--browse {
    --v5-mobile-pocket-dock-height: 146px;
    padding-bottom: calc(var(--v5-mobile-pocket-dock-height) + env(safe-area-inset-bottom));
  }

  .bhk-v5-mobilePlayer__bottomNav {
    width: min(100%, 520px);
    gap: 10px;
    padding: 10px 16px calc(12px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--v5-mobile-pocket-dock-edge);
    background:
      radial-gradient(circle at 22% 0%, color-mix(in srgb, var(--v5-mobile-pocket-dock-led) 24%, transparent), transparent 36%),
      linear-gradient(180deg, color-mix(in srgb, var(--v5-proof) 8%, transparent), transparent 44%),
      var(--v5-mobile-pocket-dock-bg);
    box-shadow:
      0 -24px 58px color-mix(in srgb, #000 58%, transparent),
      inset 0 1px 0 color-mix(in srgb, var(--v5-proof) 12%, transparent),
      inset 0 -1px 0 color-mix(in srgb, #000 46%, transparent);
  }

  .bhk-v5-mobilePlayer__bottomNav .bhk-v5-mobilePlayer__modeBar {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
    min-height: 48px;
    padding: 4px;
    border: 1px solid color-mix(in srgb, var(--v5-line-strong) 64%, transparent);
    background:
      linear-gradient(180deg, color-mix(in srgb, #fff 6%, transparent), transparent 45%),
      color-mix(in srgb, #000 34%, var(--v5-surface-2) 66%);
    box-shadow: inset 0 1px 0 color-mix(in srgb, var(--v5-proof) 8%, transparent);
  }

  .bhk-v5-mobilePlayer__bottomNav .bhk-v5-mobilePlayer__mode {
    display: grid;
    place-items: center;
    min-height: 40px;
    border-color: transparent;
    background: transparent;
    color: var(--v5-mobile-pocket-dock-icon);
    box-shadow: none;
  }

  .bhk-v5-mobilePlayer__bottomNav .bhk-v5-mobilePlayer__mode.is-active {
    border-color: color-mix(in srgb, var(--v5-mobile-pocket-dock-led) 48%, transparent);
    background:
      radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--v5-proof) 14%, transparent), transparent 64%),
      linear-gradient(180deg, color-mix(in srgb, var(--v5-mobile-pocket-dock-led) 28%, transparent), color-mix(in srgb, #000 18%, transparent));
    color: var(--v5-proof);
    box-shadow:
      0 0 22px color-mix(in srgb, var(--v5-mobile-pocket-dock-led) 24%, transparent),
      inset 0 1px 0 color-mix(in srgb, var(--v5-proof) 16%, transparent);
    border-radius: 999px;
  }

  .bhk-v5-mobilePlayer__modeInner {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-width: 0;
  }

  .bhk-v5-mobilePlayer__dockLabel {
    display: block;
    font-family: inherit;
    font-size: 13px;
    font-weight: 900;
    letter-spacing: .04em;
    line-height: 1;
    white-space: nowrap;
  }

  .bhk-v5-mobilePlayer__bottomNav .bhk-v5-mobilePlayer__transport {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    align-items: center;
    gap: 10px;
    min-height: 70px;
    padding: 4px 4px 8px;
    border-bottom: 1px solid color-mix(in srgb, var(--v5-line) 56%, transparent);
  }

  .bhk-v5-mobilePlayer__bottomNav--browse .bhk-v5-mobilePlayer__transport {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    min-height: 62px;
  }

  .bhk-v5-mobilePlayer__dockTransportButton {
    position: relative;
    display: grid;
    place-items: center;
    min-width: 0;
    min-height: 50px;
    padding: 0;
    border-color: transparent;
    background: transparent;
    color: var(--v5-mobile-pocket-dock-icon);
    box-shadow: none;
  }

  .bhk-v5-mobilePlayer__dockTransportButton:not(.is-primary):active {
    transform: translateY(1px) scale(.96);
  }

  .bhk-v5-mobilePlayer__dockTransportButton.is-primary {
    width: 72px;
    height: 72px;
    min-height: 72px;
    justify-self: center;
    align-self: center;
    border: 2px solid color-mix(in srgb, var(--v5-mobile-pocket-dock-led) 70%, transparent);
    border-radius: 999px;
    background:
      radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--v5-proof) 14%, transparent), transparent 54%),
      color-mix(in srgb, var(--v5-mobile-pocket-dock-led) 22%, #000 78%);
    color: var(--v5-proof);
    box-shadow:
      0 0 26px color-mix(in srgb, var(--v5-mobile-pocket-dock-led) 42%, transparent),
      inset 0 1px 0 color-mix(in srgb, var(--v5-proof) 16%, transparent),
      inset 0 -8px 18px color-mix(in srgb, #000 34%, transparent);
  }

  .bhk-v5-mobilePlayer__bottomNav--browse .bhk-v5-mobilePlayer__dockTransportButton.is-active {
    border: 1px solid color-mix(in srgb, var(--v5-mobile-pocket-dock-led) 50%, transparent);
    background: color-mix(in srgb, var(--v5-mobile-pocket-dock-led) 12%, transparent);
    color: var(--v5-proof);
    box-shadow: 0 0 18px color-mix(in srgb, var(--v5-mobile-pocket-dock-led) 18%, transparent);
  }

  .bhk-v5-mobilePlayer__dockIcon {
    display: block;
    width: 23px;
    height: 23px;
    pointer-events: none;
    filter: drop-shadow(0 0 10px color-mix(in srgb, var(--v5-mobile-pocket-dock-led) 18%, transparent));
  }

  .bhk-v5-mobilePlayer__mode .bhk-v5-mobilePlayer__dockIcon {
    width: 20px;
    height: 20px;
  }

  .bhk-v5-mobilePlayer__dockTransportButton.is-primary .bhk-v5-mobilePlayer__dockIcon {
    width: 34px;
    height: 34px;
    transform: translateX(2px);
  }

  .bhk-v5-mobilePlayer__dockText {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .bhk-v5-mobilePlayer__bottomNav .bhk-v5-mobilePlayer__bankBar {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
  }

  .bhk-v5-mobilePlayer__bottomNav .bhk-v5-mobilePlayer__bank {
    min-height: 40px;
    padding: 8px 5px;
    border-color: color-mix(in srgb, var(--v5-line) 70%, transparent);
    background: color-mix(in srgb, #000 26%, var(--v5-surface-2) 74%);
    color: var(--v5-mobile-pocket-dock-muted);
    font-size: 11px;
    letter-spacing: .05em;
    box-shadow: inset 0 1px 0 color-mix(in srgb, var(--v5-proof) 7%, transparent);
  }

  .bhk-v5-mobilePlayer__bottomNav .bhk-v5-mobilePlayer__bank.is-active {
    border-color: color-mix(in srgb, var(--v5-mobile-pocket-dock-led) 70%, transparent);
    background: color-mix(in srgb, var(--v5-mobile-pocket-dock-led) 17%, var(--v5-surface-2) 83%);
    color: var(--v5-proof);
    box-shadow:
      0 0 18px color-mix(in srgb, var(--v5-mobile-pocket-dock-led) 22%, transparent),
      inset 0 1px 0 color-mix(in srgb, var(--v5-proof) 11%, transparent);
  }

  .bhk-v5-mobilePlayer__tracks {
    scroll-padding-bottom: calc(var(--v5-mobile-pocket-dock-height) + env(safe-area-inset-bottom));
  }
}

@media (max-width: 360px) {
  .bhk-v5-mobilePlayer {
    --v5-mobile-pocket-dock-height: 202px;
  }

  .bhk-v5-mobilePlayer--browse {
    --v5-mobile-pocket-dock-height: 138px;
  }

  .bhk-v5-mobilePlayer__bottomNav {
    gap: 8px;
    padding-left: 10px;
    padding-right: 10px;
  }

  .bhk-v5-mobilePlayer__bottomNav .bhk-v5-mobilePlayer__transport {
    gap: 6px;
    min-height: 62px;
  }

  .bhk-v5-mobilePlayer__dockTransportButton.is-primary {
    width: 62px;
    height: 62px;
    min-height: 62px;
  }

  .bhk-v5-mobilePlayer__dockTransportButton.is-primary .bhk-v5-mobilePlayer__dockIcon {
    width: 30px;
    height: 30px;
  }

  .bhk-v5-mobilePlayer__dockLabel {
    font-size: 12px;
  }

  .bhk-v5-mobilePlayer__bottomNav .bhk-v5-mobilePlayer__bank {
    font-size: 10px;
    padding-left: 3px;
    padding-right: 3px;
  }
}


/* V5.0.438 — matching compact BNK geometry inside bottom dock when bank controls are rehomed there. */
@media (max-width: 782px) {
  .bhk-v5-mobilePlayer__bottomNav .bhk-v5-mobilePlayer__bankBar {
    grid-template-columns: repeat(4, 54px) !important;
    grid-auto-rows: 12px !important;
    justify-content: center !important;
    align-items: start !important;
    gap: 6px !important;
    min-height: 12px !important;
    height: 12px !important;
    max-height: 12px !important;
    padding: 0 !important;
    margin: 0 auto !important;
    overflow: visible !important;
  }

  .bhk-v5-mobilePlayer__bottomNav .bhk-v5-mobilePlayer__bank {
    width: 54px !important;
    min-width: 54px !important;
    max-width: 54px !important;
    height: 12px !important;
    min-height: 12px !important;
    max-height: 12px !important;
    padding: 0 !important;
    line-height: 12px !important;
    font-size: 7px !important;
    letter-spacing: .055em !important;
    transform: none !important;
  }
}
/* BHK-V5-MOBILE-DOCK-BNK-54X12-438 */