/* Focused layout refinements for the HoloTracks catalogue. */
:root {
  --layout-accent: #9c83f4;
  --layout-border: rgba(173, 180, 225, .16);
}

/* Give quick discovery the same deliberate rhythm as the full-width sections. */
@media (min-width: 681px) {
  .quick-discovery {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    align-items: stretch;
    width: 100%;
    max-width: 1080px;
    gap: 12px !important;
    margin-top: 18px;
  }

  .quick-discovery > button {
    width: 100% !important;
    max-width: none !important;
    min-width: 0;
    min-height: 68px;
    flex: initial !important;
    justify-content: space-between;
    padding: 13px 16px;
    border: 1px solid var(--layout-border);
    border-radius: 15px;
    transition: border-color .18s ease, background-color .18s ease, transform .18s ease;
  }

  .quick-discovery > button:hover {
    border-color: rgba(174, 144, 255, .48);
    transform: translateY(-2px);
  }

  .quick-discovery > button:focus-visible {
    outline: 3px solid rgba(158, 131, 244, .7);
    outline-offset: 3px;
  }
}

/* Keep the compact dock useful without taking over the lower third of the page. */
@media (min-width: 681px) {
  #player-column.player-column:not(.queue-expanded) {
    height: 86px !important;
    min-height: 86px !important;
    padding: 4px !important;
    border: 1px solid rgba(174, 164, 229, .22) !important;
    border-radius: 18px !important;
    background: rgba(17, 18, 36, .97) !important;
    box-shadow: 0 16px 48px rgba(4, 5, 16, .48), 0 0 0 1px rgba(255,255,255,.025) inset !important;
    backdrop-filter: blur(18px);
  }

  #player-column.player-column:not(.queue-expanded) .player-card {
    height: 76px !important;
    min-height: 0 !important;
    grid-template-columns: 128px minmax(0, 1fr) !important;
    gap: 10px !important;
    padding: 3px !important;
    border-radius: 13px !important;
  }

  #player-column.player-column:not(.queue-expanded) .video-frame-wrap {
    width: 128px !important;
    height: 72px !important;
    min-height: 0 !important;
    aspect-ratio: 16 / 9 !important;
    border-radius: 10px !important;
    overflow: hidden !important;
  }

  #player-column.player-column:not(.queue-expanded) .now-playing-meta {
    min-height: 0 !important;
    height: 68px !important;
  }

  #player-column.player-column:not(.queue-expanded) .playing-title-row {
    min-height: 34px !important;
  }

  #player-column.player-column:not(.queue-expanded) .dock-action-row {
    align-items: center !important;
  }

  #player-column.player-column:not(.queue-expanded) .dock-controls-slot .player-controls {
    gap: 6px !important;
  }

  #player-column.player-column:not(.queue-expanded) .dock-controls-slot .control-button,
  #player-column.player-column:not(.queue-expanded) .dock-controls-slot .play-toggle {
    width: 34px !important;
    min-width: 34px !important;
    height: 34px !important;
    min-height: 34px !important;
  }
}

/* Let the header breathe on tablet widths where the full wordmark used to collide with search. */
@media (min-width: 681px) and (max-width: 900px) {
  .topbar {
    gap: 9px !important;
    padding-inline: 12px !important;
  }

  .topbar .brand {
    flex: 0 0 154px !important;
    min-width: 0 !important;
    gap: 7px !important;
  }

  .topbar .brand-copy {
    min-width: 0;
  }

  .topbar .brand-copy strong {
    font-size: 19px;
    white-space: nowrap;
  }

  .topbar .brand-copy small,
  .topbar .top-live,
  .topbar .favorite-shortcut b,
  .topbar .talent-picker-toggle b {
    display: none !important;
  }

  .topbar .global-search {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    gap: 6px !important;
  }

  .topbar .global-search input {
    min-width: 0 !important;
  }

  .topbar .talent-picker-toggle {
    flex: 0 0 auto;
    padding-inline: 9px;
  }

  .topbar .global-search-button {
    flex: 0 0 auto;
    padding-inline: 11px;
  }

  .topbar .top-actions {
    flex: 0 0 auto !important;
    gap: 7px !important;
  }

  .topbar .favorite-shortcut,
  .topbar .theme-toggle {
    min-width: 36px;
    padding-inline: 8px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .quick-discovery > button {
    transition: none !important;
  }
}

/* Keep the first visit focused on discovery; show the dock when there is a track to control. */
@media (min-width: 681px) {
  body.player-docked:not(.has-current-track) #player-column.player-column:not(.queue-expanded) {
    display: none !important;
  }
}


/* Focused fixes from the production UI review. */
:root {
  --layout-border: rgba(141, 126, 188, .2);
}

/* Keep navigation results in view when a filter or playlist is selected. */
@media (min-width: 681px) {
  .app-layout { padding-bottom: 132px !important; }
  body { padding-bottom: 0 !important; }
  body.player-docked:not(.has-current-track) .app-layout { padding-bottom: 28px !important; }
  body.player-docked:not(.has-current-track) { padding-bottom: 0 !important; }
}

/* Keep the maximized video inside the viewport, including on wide monitors. */
@media (min-width: 681px) {
  #player-column.queue-expanded.room-maximized {
    inset: 10px !important;
    width: auto !important;
    height: auto !important;
    max-height: calc(100dvh - 20px) !important;
    overflow: hidden !important;
    grid-template-rows: 36px minmax(0, 1fr) !important;
  }
  #player-column.queue-expanded.room-maximized .player-card {
    min-height: 0 !important;
    overflow: hidden !important;
  }
  #player-column.queue-expanded.room-maximized .video-frame-wrap {
    min-height: 0 !important;
    max-height: calc(100dvh - 240px) !important;
    aspect-ratio: 16 / 9 !important;
  }
}

/* Give playlist names room while keeping Save visible. */
#player-column .playlist-select-row {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: stretch;
  gap: 8px !important;
}
#player-column .playlist-select-row select {
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  padding-inline: 10px !important;
  font-size: 13px !important;
  text-overflow: ellipsis;
}

/* Reduce dock width and avoid a second, oversized footer spacer. */
@media (min-width: 681px) {
  #player-column.player-column:not(.queue-expanded) { width: min(840px, calc(100vw - 32px)) !important; }
}

/* Keep keyboard focus visible without the cyan rectangle around the whole search. */
.global-search:focus-within {
  border-color: #9b83c6 !important;
  box-shadow: 0 0 0 2px rgba(155, 131, 198, .16) !important;
}
#search-input:focus-visible { outline: none !important; }
body.theme-light .global-search:focus-within {
  border-color: #a58bb4 !important;
  box-shadow: 0 0 0 2px rgba(165, 139, 180, .18) !important;
}

/* Pull the featured artwork toward the center to close the dead gap in the hero. */
@media (min-width: 971px) {
  .stage-talent.stage-featured { right: 16% !important; }
  .stage-talent.stage-featured.is-visible { transform: scale(1.08) translateX(-8px) !important; }
  .stage-talent.stage-featured.is-entering { transform: translateY(8px) scale(1.08) translateX(-8px) !important; }
  .stage-talent.stage-featured.is-exiting { transform: translateY(5px) scale(1.08) translateX(-8px) !important; }
}

/* Light theme uses soft surfaces throughout navigation and controls. */
body.theme-light #sidebar .nav-item.active {
  border-color: #e4d3df !important;
  background: #fbf2f8 !important;
  color: #633d58 !important;
  box-shadow: inset 3px 0 #bd6695 !important;
}
body.theme-light #sidebar .clear-filters,
body.theme-light #sidebar .playlist-row,
body.theme-light #sidebar .add-playlist {
  border-color: #e0e4ec !important;
  background: #fff !important;
  color: #596477 !important;
  box-shadow: none !important;
}
body.theme-light #sidebar .playlist-row:hover,
body.theme-light #sidebar .playlist-row.active,
body.theme-light #sidebar .clear-filters:hover,
body.theme-light #sidebar .add-playlist:hover {
  border-color: #dfcbdc !important;
  background: #f9f1f7 !important;
  color: #734c68 !important;
}
body.theme-light .music-type-button {
  border-color: #dfe4ec !important;
  background: #fff !important;
  color: #596477 !important;
}
body.theme-light .music-type-button.active {
  border-color: #dfcbdc !important;
  background: #f9f1f7 !important;
  color: #734c68 !important;
  box-shadow: none !important;
}
body.theme-light .quick-discovery > button {
  border-color: #e0e4ec !important;
  background: #fff !important;
  color: #343b4d !important;
}
body.theme-light .play-all-button,
body.theme-light .mini-action,
body.theme-light .save-button,
body.theme-light .playlist-play,
body.theme-light .control-button:not(.play-toggle) {
  border-color: #dfe3eb !important;
  background: #f7f8fb !important;
  color: #596477 !important;
  box-shadow: none !important;
}
body.theme-light .play-all-button:hover,
body.theme-light .mini-action:hover,
body.theme-light .save-button:hover,
body.theme-light .playlist-play:hover,
body.theme-light .control-button:not(.play-toggle):hover {
  border-color: #dfcbdc !important;
  background: #fbf1f7 !important;
  color: #814d6d !important;
}
body.theme-light .hero-card:before {
  background: linear-gradient(90deg, rgba(255,255,255,.22), rgba(255,255,255,.04) 55%, transparent 86%) !important;
}
body.theme-light .hero-card {
  background: linear-gradient(120deg, #fbf8ff 0%, #f3f3fb 52%, #e8f4f6 100%) !important;
}


/* Let the selected playlist name use the queue panel width. */
#player-column .queue-actions {
  grid-template-columns: minmax(0, 1fr) !important;
}
#player-column .queue-actions .playlist-select-label,
#player-column .queue-actions .playlist-select-row,
#player-column .queue-actions .playlist-play {
  grid-column: 1 / -1 !important;
}
#player-column .playlist-select-row {
  grid-template-columns: minmax(0, 1fr) auto !important;
}
#player-column .playlist-select-row select {
  white-space: nowrap;
  text-overflow: clip !important;
}

#player-column .queue-actions .playlist-play {
  grid-row: auto !important;
  width: 100% !important;
}


/* Responsive refinement: mobile navigation is a true drawer, not a second toolbar action. */
@media (max-width:680px) {
  #mobile-filter-toggle { display:none!important; }
  .mobile-toolbar { gap:8px!important; }
  #mobile-player-toggle { flex:1 1 100%!important; width:100%!important; }
  .sidebar { display:none!important; }
  body.sidebar-open #sidebar.sidebar,
  body.filters-open #sidebar.sidebar {
    display:block!important;
    position:fixed!important;
    z-index:90!important;
    top:116px!important;
    bottom:calc(12px + env(safe-area-inset-bottom))!important;
    left:10px!important;
    right:auto!important;
    width:min(320px,calc(100vw - 20px))!important;
    max-width:calc(100vw - 20px)!important;
    max-height:none!important;
    min-width:0!important;
    margin:0!important;
    padding:15px 13px!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
    overscroll-behavior:contain!important;
    -webkit-overflow-scrolling:touch!important;
    border-radius:18px!important;
    transform:translateX(0)!important;
    visibility:visible!important;
    pointer-events:auto!important;
  }
  body.sidebar-open::before,
  body.filters-open::before {
    content:""!important;
    position:fixed!important;
    inset:108px 0 0!important;
    z-index:65!important;
    background:rgba(17,20,31,.48)!important;
    backdrop-filter:blur(3px);
  }
  body.theme-light.sidebar-open::before,
  body.theme-light.filters-open::before { background:rgba(42,49,63,.22)!important; }
  #player-column .player-expand { display:none!important; }
  #player-column .room-maximize { display:none!important; }
}

/* Keep the featured character fully inside the hero stage on desktop.
   The empty stage space gets useful copy instead of enlarging or shifting artwork. */
@media (min-width:681px) {
  .stage-talent.stage-featured,
  .stage-talent.stage-featured.is-visible,
  .stage-talent.stage-featured.is-entering,
  .stage-talent.stage-featured.is-exiting {
    right:3%!important;
    top:auto!important;
    bottom:30px!important;
    width:auto!important;
    height:calc(100% - 58px)!important;
    max-height:420px!important;
    max-width:43%!important;
    object-fit:contain!important;
    object-position:center bottom!important;
    transform:none!important;
  }
  .hero-stage-note {
    position:absolute;
    z-index:6;
    left:3%;
    top:49%;
    width:clamp(150px,24%,220px);
    transform:translateY(-50%);
    padding:15px 16px;
    border:1px solid rgba(202,198,255,.24);
    border-radius:16px;
    background:rgba(19,21,49,.52);
    color:#f7f5ff;
    box-shadow:0 12px 35px rgba(4,7,26,.15);
    backdrop-filter:blur(12px);
  }
  .hero-stage-note span { display:block;color:#9ca7d1;font:9px 'DM Mono',monospace;letter-spacing:.1em; }
  .hero-stage-note strong { display:block;margin:8px 0 5px;font:800 17px/1.2 'Space Grotesk',sans-serif; }
  .hero-stage-note small { display:block;color:#bfc4df;font-size:11px;line-height:1.5; }
  body.theme-light .hero-stage-note {
    border-color:#e0dce8;
    background:rgba(255,255,255,.78);
    color:#39425a;
    box-shadow:0 12px 35px rgba(58,67,87,.10);
  }
  body.theme-light .hero-stage-note span { color:#7d718d; }
  body.theme-light .hero-stage-note small { color:#667186; }
  body.theme-light .hero-stage-note strong { color:#443950; }
}
@media (max-width:970px) {
  .hero-stage-note { display:none!important; }
}

/* Rebalance white theme controls and artwork overlays for consistent contrast. */
body.theme-light .hero-stage::before,
body.theme-light .hero-stage::after {
  background:none!important;
  opacity:.24!important;
}
body.theme-light .hero-stage {
  background:radial-gradient(ellipse at 72% 72%,rgba(144,180,209,.18),transparent 58%)!important;
}
body.theme-light .hero-card:before {
  background:linear-gradient(110deg,rgba(255,255,255,.10),rgba(255,255,255,0) 72%)!important;
}
body.theme-light .hero-card,
body.theme-light .hero-stage {
  box-shadow:inset 0 0 0 1px rgba(99,113,138,.05)!important;
}
body.theme-light .result-count,
body.theme-light .nav-count,
body.theme-light .muted-count,
body.theme-light .queue-track-number {
  color:#6b6076!important;
}
body.theme-light .result-count {
  border-color:#e5dce8!important;
  background:#faf7fb!important;
}
body.theme-light .queue-track-number {
  border:1px solid #e5e1e9!important;
  border-radius:8px!important;
  background:#f7f5f9!important;
}
body.theme-light .music-type-button,
body.theme-light .mini-action,
body.theme-light .song-card-actions .mini-action,
body.theme-light .queue-track-play,
body.theme-light .queue-track-remove,
body.theme-light .play-all-button,
body.theme-light .soft-action,
body.theme-light .save-button,
body.theme-light .playlist-play {
  border-color:#dfe3eb!important;
  background:#f6f7fa!important;
  color:#58667b!important;
  box-shadow:none!important;
}
body.theme-light .mini-action[data-action="play"],
body.theme-light .song-card-actions .mini-action[data-action="play"] {
  color:#8f5278!important;
}
body.theme-light .music-type-button.active,
body.theme-light .pagination-button.active {
  border-color:#e4d5e3!important;
  background:#fbf2f8!important;
  color:#96527b!important;
}
body.theme-light .talent-card {
  border-color:#e4e6ed!important;
  background:#fff!important;
}
body.theme-light .talent-card:hover,
body.theme-light .talent-card.selected {
  border-color:#d9c9dc!important;
  background:#fbf8fc!important;
  box-shadow:0 8px 20px rgba(58,67,87,.10)!important;
}
body.theme-light .talent-card::before {
  background:linear-gradient(90deg,transparent,#d8c5db,transparent)!important;
}
body.theme-light .talent-image::after {
  background:linear-gradient(transparent 76%,rgba(255,255,255,.68))!important;
}
body.theme-light .talent-card strong { color:#455269!important; }
body.theme-light .talent-card:hover strong { color:#40364b!important; }
body.theme-light .talent-picker-dialog::backdrop {
  background:rgba(37,43,57,.44)!important;
  backdrop-filter:blur(4px);
}
body.theme-light .talent-picker-dialog .artist-filters {
  max-height:min(52vh,460px)!important;
  overflow-y:auto!important;
  overscroll-behavior:contain!important;
  -webkit-overflow-scrolling:touch!important;
}
body.theme-light .talent-picker-dialog .artist-check {
  background:#f7f8fb!important;
  color:#46536a!important;
}
body.theme-light .talent-picker-dialog .artist-check:hover {
  background:#fff!important;
  border-color:#d8c4da!important;
  color:#45354b!important;
}
body.theme-light .talent-picker-dialog .artist-check span { color:inherit!important; }
body.theme-light .talent-picker-dialog .artist-check small { color:#748095!important; }
body.theme-light .talent-picker-dialog .artist-category-filter button {
  background:#f5f6f9!important;
  border-color:#e0e4ec!important;
  color:#5d697d!important;
}
body.theme-light .talent-picker-dialog .artist-category-filter button.is-active {
  background:#fbf1f7!important;
  border-color:#e1ccdd!important;
  color:#8a4e70!important;
}
body.theme-light .talent-picker-dialog .talent-picker-toolbar {
  background:#fff!important;
  color:#58657a!important;
}
@media (max-width:680px) {
  #talent-picker-dialog.talent-picker-dialog {
    inset:0!important;
    width:100vw!important;
    max-width:100vw!important;
    max-height:100dvh!important;
    height:100dvh!important;
    margin:0!important;
    padding:12px!important;
    border-radius:0!important;
  }
  #talent-picker-dialog .talent-picker-shell {
    max-height:calc(100dvh - 24px)!important;
    overflow:hidden!important;
    display:flex!important;
    flex-direction:column!important;
  }
  #talent-picker-dialog .artist-filters {
    flex:1 1 auto!important;
    min-height:0!important;
    max-height:none!important;
    overflow-y:auto!important;
    overscroll-behavior:contain!important;
    -webkit-overflow-scrolling:touch!important;
  }
}


/* Specific contrast fixes for nested pills and compact spotlight labels. */
body.theme-light .music-type-filter .music-type-button span,
body.theme-light .music-type-filter .music-type-button.active span {
  border:1px solid #e3dce7!important;
  background:#f3f2f6!important;
  color:#665b70!important;
}
body.theme-light .talent-section #talent-strip .talent-card strong,
body.theme-light #talent-strip .talent-card strong {
  color:#465269!important;
}
body.theme-light .talent-section #talent-strip .talent-card:hover strong,
body.theme-light #talent-strip .talent-card:hover strong,
body.theme-light #talent-strip .talent-card.selected strong {
  color:#3e344a!important;
}
body.theme-light .talent-section #talent-strip .talent-card small,
body.theme-light #talent-strip .talent-card small {
  color:#667287!important;
}


/* Separate the animated artist signature from the discovery callout. */
@media (min-width:971px) {
  .hero-stage-note {
    left:2%!important;
    width:clamp(134px,22%,190px)!important;
    padding:13px!important;
  }
  .hero-stage-note strong { font-size:15px!important; }
  .hero-artist-name {
    left:25%!important;
    width:30%!important;
    max-width:180px!important;
  }
}


/* Preserve the light palette in the smart playlist badge and active queue index. */
body.theme-light .playlist-row .playlist-smart-badge {
  border-color:#e2d0df!important;
  background:#fbf1f7!important;
  color:#8b4f72!important;
}
body.theme-light #queue-list .queue-track-number,
body.theme-light #player-column .queue-track-number {
  border-color:#e5e1e9!important;
  background:#f7f5f9!important;
  color:#665b70!important;
}
body.theme-light #queue-list .queue-track.current .queue-track-number,
body.theme-light #player-column .queue-track.current .queue-track-number {
  border-color:#e4cedd!important;
  background:#fbf0f6!important;
  color:#98547b!important;
}


/* Keep discovery card titles readable on the white surface. */
body.theme-light .discovery-card strong {
  color:#374158!important;
}
body.theme-light .discovery-card small {
  color:#667287!important;
}