/* ========================================================================== 
   Revision 22 — compact pedigree header, viewport-safe roster, clean sale rows
   ========================================================================== */

/* A pedigree result header is contextual information, not a hero banner. Keep
   it compact on wide screens and move the filters into the otherwise-unused
   right side. Narrow screens deliberately fall back to the normal stacked flow. */
body.pedigree-page .pedigree-result-header {
  padding: 13px 16px !important;
  margin-bottom: 13px !important;
}
body.pedigree-page .pedigree-result-header h1 {
  margin: 2px 0 !important;
  font-size: clamp(2rem, 3vw, 2.8rem) !important;
  line-height: 1.02 !important;
}
body.pedigree-page .pedigree-count {
  margin: 2px 0 0 !important;
}
body.pedigree-page .refinement-controls {
  margin-top: 10px !important;
  gap: 10px !important;
}
body.pedigree-page .refinement-controls select {
  min-width: 155px !important;
}

@media (min-width: 1050px) {
  body.pedigree-page .pedigree-result-header {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-areas:
      "eyebrow filters"
      "title filters"
      "count filters" !important;
    column-gap: 24px !important;
    align-items: center !important;
  }
  body.pedigree-page .pedigree-result-header .section-eyebrow {
    grid-area: eyebrow !important;
    align-self: end !important;
  }
  body.pedigree-page .pedigree-result-header h1 {
    grid-area: title !important;
  }
  body.pedigree-page .pedigree-result-header .pedigree-count {
    grid-area: count !important;
    align-self: start !important;
  }
  body.pedigree-page .pedigree-result-header .refinement-controls {
    grid-area: filters !important;
    margin: 0 !important;
    flex-wrap: nowrap !important;
    align-items: end !important;
    justify-self: end !important;
  }
}

/* The pedigree roster must always end inside the visible browser viewport on
   desktop. player.js computes this value from the panel's LIVE top position,
   so a taller/shorter header or browser chrome cannot strand results below the
   screen. The inner roster, not the document, owns the scrollbar. */
@media (min-width: 901px) {
  body.pedigree-page .player-layout .playlist-panel {
    height: var(--pedigree-playlist-height, min(62dvh, 700px)) !important;
    max-height: var(--pedigree-playlist-height, min(62dvh, 700px)) !important;
    min-height: 150px !important;
    overflow: hidden !important;
    align-self: start !important;
  }
  body.pedigree-page .player-layout .playlist-scroll {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    overscroll-behavior: contain;
    scrollbar-width: thin;
  }

  /* The sale name already contains its year, so there is no separate orange
     year label. Keep each sale heading to one clean line in the narrow roster. */
  body.pedigree-page .playlist-group-heading {
    display: block !important;
    min-width: 0 !important;
  }
  body.pedigree-page .playlist-group-heading > span {
    display: block !important;
    min-width: 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
}

@media (max-width: 1049px) {
  body.pedigree-page .pedigree-result-header h1 {
    font-size: clamp(1.9rem, 5vw, 2.45rem) !important;
  }
}

@media (max-width: 620px) {
  body.pedigree-page .pedigree-result-header {
    padding: 12px !important;
  }
  body.pedigree-page .refinement-controls {
    display: grid !important;
    grid-template-columns: 1fr !important;
  }
  body.pedigree-page .refinement-controls label,
  body.pedigree-page .refinement-controls select {
    width: 100% !important;
    min-width: 0 !important;
  }
}