/* ========================================================================== 
   Revision 23 — pedigree roster scrolling / sale-group contrast / select focus
   ========================================================================== */

/* Pedigree rosters can be much taller than the player. Give the panel an
   explicit viewport-safe height and make the list itself the scrolling region.
   JS supplies the exact live height; this fallback still behaves sensibly if
   scripting is delayed. */
@media (min-width: 901px) {
  body.pedigree-page .player-layout .playlist-panel {
    height: var(--pedigree-playlist-height, min(64dvh, 720px)) !important;
    max-height: var(--pedigree-playlist-height, min(64dvh, 720px)) !important;
    min-height: 220px !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
  }

  body.pedigree-page .player-layout .playlist-scroll {
    flex: 1 1 0 !important;
    height: 0 !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow-y: scroll !important;
    overflow-x: hidden !important;
    overscroll-behavior-y: contain !important;
    scrollbar-gutter: stable;
    scrollbar-width: thin;
  }
}

/* Sale groups should read as section dividers rather than blending into horse
   names. Keep the existing one-line/ellipsis behavior, but give them a subdued
   gold treatment that is distinct from both the white horse names and the
   brighter hip-number accent. */
body.pedigree-page .playlist-group-heading > span {
  color: #e8cf82 !important;
  letter-spacing: .01em;
}

/* The global focus ring is intentionally generous, but these compact filter
   selects need the same skinny treatment used by the playlist/quality selects. */
body.pedigree-page .refinement-controls select:focus,
body.pedigree-page .refinement-controls select:focus-visible {
  outline: 1px solid rgba(255,255,255,.72) !important;
  outline-offset: 1px !important;
  box-shadow: none !important;
}