:root {
  color-scheme: dark;
  --bg: #08090d;
  --panel: rgba(15, 17, 24, 0.88);
  --panel-strong: rgba(18, 20, 29, 0.96);
  --panel-soft: rgba(255, 255, 255, 0.055);
  --line: rgba(255, 255, 255, 0.12);
  --line-strong: rgba(255, 255, 255, 0.22);
  --text: #f5f7fb;
  --muted: #aeb5c4;
  --accent: #f1c34a;
  --accent-2: #79d18a;
  --danger: #ff6e7a;
  --radius: 16px;
  --shadow: 0 18px 50px rgba(0,0,0,.34);
  --header-h: 68px;
  --archive-h: 0px;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
html { min-height: 100%; background: var(--bg); }
body { margin: 0; min-height: 100vh; background: rgba(4,5,8,.78); color: var(--text); }
body.is-archive-view { --archive-h: 30px; }
a { color: inherit; }
button, input, select { font: inherit; }
button, select, input[type="checkbox"] { cursor: pointer; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.site-background { position: fixed; inset: 0; z-index: -2; background: #050608 url('../images/background.jpg') center / contain no-repeat; opacity: .47; }
.site-background::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 50% 25%, rgba(7,9,14,.18), rgba(4,5,8,.88) 72%), linear-gradient(to bottom, rgba(3,4,7,.38), rgba(3,4,7,.84)); }
.site-header { position: sticky; top: 0; z-index: 100; min-height: var(--header-h); background: rgba(8,9,13,.9); border-bottom: 1px solid var(--line); backdrop-filter: blur(18px); box-shadow: 0 8px 28px rgba(0,0,0,.22); }
.rainbow-line { position: absolute; inset: 0 0 auto; height: 3px; background: linear-gradient(90deg,#ff476f,#ff9b45,#ffe15a,#61dd91,#55c8ff,#8c78ff,#f160d4,#ff476f); background-size: 220% 100%; animation: rainbow-shift 7s linear infinite; box-shadow: 0 0 18px rgba(130,120,255,.35); }
@keyframes rainbow-shift { to { background-position: -220% 0; } }
.header-inner { width: min(2600px, calc(100% - 32px)); min-height: var(--header-h); margin: auto; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { display: inline-grid; text-decoration: none; line-height: 1.05; }
.brand-company { font-size: .78rem; letter-spacing: .13em; text-transform: uppercase; color: var(--muted); }
.brand-section { margin-top: 4px; font-size: 1.24rem; font-weight: 800; letter-spacing: .015em; }
.header-actions { display: flex; align-items: center; gap: 16px; }
.quiet-link { color: var(--muted); font-size: .86rem; text-decoration: none; }
.quiet-link:hover { color: var(--text); text-decoration: underline; text-underline-offset: 4px; }
.year-picker select { border: 1px solid var(--line); background: rgba(255,255,255,.055); color: var(--text); border-radius: 999px; padding: 7px 28px 7px 12px; font-weight: 700; }
.archive-banner { position: sticky; top: var(--header-h); z-index: 90; text-align: center; padding: 7px 16px; background: rgba(219,149,38,.92); color: #120e06; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; font-size: .74rem; box-shadow: 0 4px 18px rgba(0,0,0,.25); }
.page-shell { width: min(2600px, calc(100% - 32px)); margin: 0 auto; padding: 30px 0 72px; }
.page-nav-row { margin-bottom: 18px; }
.back-link { color: var(--muted); text-decoration: none; font-weight: 700; }
.back-link:hover { color: var(--text); }
.section-eyebrow, .consignor-eyebrow, .catalog-eyebrow { display: block; color: var(--accent); text-transform: uppercase; font-weight: 900; letter-spacing: .13em; font-size: .72rem; }
.empty-state { max-width: 760px; margin: 40px auto; padding: 28px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); text-align: center; color: var(--muted); box-shadow: var(--shadow); }
.empty-state.compact { margin-top: 18px; padding: 18px; }

/* Index */
.index-hero { display: flex; align-items: end; justify-content: space-between; gap: 28px; padding: 24px 0 20px; }
.index-hero h1 { margin: 5px 0 7px; font-size: clamp(2rem, 4vw, 3.8rem); line-height: .98; letter-spacing: -.035em; }
.index-hero p { margin: 0; max-width: 700px; color: var(--muted); }
.secondary-browse { flex: 0 0 auto; color: var(--muted); text-decoration: none; border-bottom: 1px solid var(--line-strong); padding-bottom: 3px; }
.secondary-browse:hover { color: var(--text); }
.search-card { position: relative; margin: 18px 0 26px; padding: 18px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.search-topline { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 10px; }
.search-label { display: block; font-weight: 850; font-size: 1rem; }
.search-scope { margin-top: 4px; color: var(--muted); font-size: .8rem; }
.search-by-control { display: flex; gap: 8px; align-items: center; font-size: .85rem; color: var(--muted); }
.search-by-control select { color: var(--text); background: #11141d; border: 1px solid var(--line); border-radius: 8px; padding: 7px 10px; }
.search-input-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px; align-items: center; }
.autocomplete-wrap { position: relative; }
#yearlingSearch { width: 100%; border: 1px solid var(--line-strong); background: rgba(0,0,0,.28); color: var(--text); border-radius: 12px; padding: 13px 15px; font-size: 1rem; }
#yearlingSearch::placeholder { color: #7f8797; }
.archive-search-toggle { display: flex; gap: 8px; align-items: center; color: var(--muted); white-space: nowrap; font-size: .9rem; }
.archive-search-toggle input { width: 18px; height: 18px; accent-color: var(--accent); }
.search-suggestions { position: absolute; z-index: 80; left: 0; right: 0; top: calc(100% + 7px); overflow: hidden; background: #11141d; border: 1px solid var(--line-strong); border-radius: 12px; box-shadow: 0 20px 50px rgba(0,0,0,.48); }
.suggestion-item { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 16px; min-height: 48px; padding: 9px 12px; border-bottom: 1px solid rgba(255,255,255,.07); text-decoration: none; }
.suggestion-item:last-child { border-bottom: 0; }
.suggestion-item:hover { background: rgba(255,255,255,.08); }
.suggestion-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 800; }
.suggestion-context { display: flex; min-width: 0; align-items: center; gap: 9px; color: var(--muted); font-size: .8rem; white-space: nowrap; }
.suggestion-context span + span::before { content: "·"; margin-right: 9px; color: #666e7d; }
.suggestion-count { color: var(--accent); font-weight: 800; }
.suggestion-empty { padding: 14px; color: var(--muted); }
.matrix-card { overflow: hidden; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.matrix-scroll { overflow-x: auto; }
.consignor-matrix { width: 100%; border-collapse: separate; border-spacing: 0; font-size: .91rem; }
.consignor-matrix th, .consignor-matrix td { border-bottom: 1px solid rgba(255,255,255,.07); }
.consignor-matrix thead th { position: sticky; top: 0; z-index: 3; min-width: 76px; padding: 13px 9px; background: #12151e; color: var(--muted); font-size: .77rem; font-weight: 800; text-align: center; }
.consignor-matrix thead .consignor-column { left: 0; z-index: 5; min-width: 230px; text-align: left; padding-left: 16px; }
.consignor-name-cell { position: sticky; left: 0; z-index: 2; background: #10121a; min-width: 230px; text-align: left; }
.consignor-name-cell a { display: block; padding: 12px 16px; text-decoration: none; font-weight: 780; }
.consignor-name-cell a:hover { color: var(--accent); }
.count-cell { text-align: center; height: 44px; min-width: 70px; }
.count-cell.has-videos a { display: grid; place-items: center; width: 32px; height: 30px; margin: auto; border-radius: 8px; background: rgba(255,255,255,.07); text-decoration: none; font-weight: 900; color: #f0cc68; }
.count-cell.has-videos a:hover { background: rgba(121,209,138,.18); color: #a5eeb2; }
.total-column, .total-cell { min-width: 62px !important; text-align: center; }
.total-cell a { color: var(--muted); text-decoration: none; font-weight: 800; }
.consignor-matrix tbody tr:hover td, .consignor-matrix tbody tr:hover .consignor-name-cell { background-color: rgba(255,255,255,.045); }
.mobile-consignor-list { display: none; }

/* Consignor branding */
.consignor-identity { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 18px; margin: 0 0 20px; padding: 14px 18px; border: 1px solid var(--line); border-radius: var(--radius); background: linear-gradient(135deg, rgba(255,255,255,.055), rgba(255,255,255,.018)); box-shadow: var(--shadow); }
.consignor-header-image { display: block; max-width: min(950px, 100%); max-height: 150px; width: auto; height: auto; object-fit: contain; object-position: left center; }
.consignor-text-fallback { min-width: 0; padding: 8px 4px; }
.consignor-text-fallback h1 { margin: 5px 0 0; font-size: clamp(1.8rem, 4vw, 3.5rem); line-height: .96; letter-spacing: -.035em; text-shadow: 0 4px 24px rgba(0,0,0,.45); }
.context-year { align-self: start; color: rgba(255,255,255,.18); font-weight: 950; font-size: clamp(2.4rem, 7vw, 5rem); line-height: .9; letter-spacing: -.06em; }

/* Player */
.player-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; grid-template-areas: "video playlist" "catalog catalog"; align-items: start; gap: 18px; }
.video-column { grid-area: video; min-width: 0; }
.playlist-panel { grid-area: playlist; min-width: 0; max-height: min(72vh, 800px); display: flex; flex-direction: column; overflow: hidden; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.playlist-filter { display: flex; gap: 7px; overflow-x: auto; padding: 10px; border-bottom: 1px solid var(--line); scrollbar-width: thin; }
.filter-chip { flex: 0 0 auto; border: 1px solid var(--line); background: rgba(255,255,255,.04); color: var(--muted); border-radius: 999px; padding: 7px 10px; font-size: .76rem; font-weight: 800; }
.filter-chip.active { background: rgba(241,195,74,.14); border-color: rgba(241,195,74,.42); color: #ffe18a; }
.playlist-scroll { overflow: auto; padding: 8px; }
.playlist-group + .playlist-group { margin-top: 14px; }
.playlist-group-heading { display: flex; gap: 8px; align-items: center; padding: 5px 5px 7px; font-weight: 900; font-size: .82rem; }
.playlist-group-year { color: var(--accent); }
.group-count { margin-left: auto; color: var(--muted); font-size: .72rem; }
.playlist-group-details { margin: -3px 5px 8px; color: var(--muted); font-size: .72rem; }
.playlist-items { display: grid; gap: 5px; }
.playlist-item { width: 100%; min-height: 48px; display: grid; grid-template-columns: 46px minmax(0,1fr); gap: 9px; align-items: center; text-align: left; border: 1px solid transparent; background: rgba(255,255,255,.045); color: var(--text); border-radius: 10px; padding: 8px 9px; }
.playlist-item:hover { background: rgba(255,255,255,.09); }
.playlist-item.active { border-color: rgba(121,209,138,.48); background: rgba(121,209,138,.12); box-shadow: inset 3px 0 0 #79d18a; }
.playlist-hip { color: var(--accent); font-weight: 900; font-variant-numeric: tabular-nums; }
.playlist-hip:empty { display: none; }
.playlist-hip:empty + .playlist-name { grid-column: 1 / -1; }
.playlist-name { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 800; }
.playlist-consignor { grid-column: 2; min-width: 0; color: var(--muted); font-size: .72rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.player-stage { position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; background: #000; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
#yearlingVideoPlayer { width: 100%; height: 100%; display: block; object-fit: contain; background: #000; }
.player-empty { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; color: var(--muted); background: radial-gradient(circle, rgba(30,33,44,.55), rgba(0,0,0,.82)); }
.next-overlay { position: absolute; inset: 0; z-index: 15; display: grid; place-content: center; text-align: center; background: rgba(0,0,0,.78); backdrop-filter: blur(6px); padding: 20px; }
.next-label { color: var(--accent); text-transform: uppercase; letter-spacing: .12em; font-weight: 900; font-size: .75rem; }
.next-name { margin-top: 5px; font-size: clamp(1.5rem,4vw,3rem); font-weight: 900; }
.countdown { margin-top: 7px; color: var(--muted); }
.next-actions { display: flex; justify-content: center; gap: 10px; margin-top: 18px; }
.next-actions button, .action-button, .selection-toolbar button { border: 1px solid rgba(241,195,74,.4); background: rgba(241,195,74,.14); color: #ffe18a; border-radius: 10px; padding: 9px 12px; font-weight: 850; text-decoration: none; }
.next-actions .secondary, .action-button.secondary, .selection-toolbar .secondary { border-color: var(--line); background: rgba(255,255,255,.055); color: var(--text); }
.now-playing-card { margin-top: 10px; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 12px 14px; background: var(--panel); border: 1px solid var(--line); border-radius: 13px; }
.now-playing-copy { min-width: 0; }
.now-playing-kicker { color: var(--accent); text-transform: uppercase; font-size: .68rem; letter-spacing: .12em; font-weight: 900; }
.now-playing-card h2 { margin: 3px 0 2px; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: clamp(1.2rem,2.1vw,1.8rem); }
.now-playing-meta { color: var(--muted); font-size: .83rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.music-note { margin-top: 3px; color: #a9ddaf; font-size: .76rem; }
.player-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 8px; }
.quality-control { display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: .76rem; }
.quality-control select { background: #11141d; color: var(--text); border: 1px solid var(--line); border-radius: 8px; padding: 7px 8px; }
.toggle-control { display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: .78rem; white-space: nowrap; }
.toggle-control input { accent-color: var(--accent-2); }
.catalog-panel { grid-area: catalog; overflow: hidden; min-width: 0; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.catalog-heading { display: flex; justify-content: space-between; gap: 16px; align-items: center; padding: 10px 13px; border-bottom: 1px solid var(--line); }
.catalog-heading strong { display: block; margin-top: 2px; }
.catalog-heading a { color: var(--muted); font-size: .78rem; }
#catalogFrame { width: 100%; height: min(74vh, 820px); display: block; border: 0; background: #fff; }
.fullscreen-playlist-toggle, .fullscreen-playlist { display: none; }
.player-stage:fullscreen { border-radius: 0; border: 0; background: #000; }
.player-stage:fullscreen #yearlingVideoPlayer { width: 100vw; height: 100vh; }
.player-stage:fullscreen .fullscreen-playlist-toggle { display: block; position: absolute; top: max(16px, env(safe-area-inset-top)); right: max(16px, env(safe-area-inset-right)); z-index: 31; border: 1px solid rgba(255,255,255,.28); background: rgba(0,0,0,.58); color: #fff; backdrop-filter: blur(8px); border-radius: 999px; padding: 8px 12px; }
.player-stage:fullscreen .fullscreen-playlist { display: grid; position: absolute; z-index: 30; top: 0; right: 0; bottom: 0; width: min(390px, 80vw); align-content: start; gap: 5px; overflow-y: auto; padding: 64px 10px 20px; background: linear-gradient(to left, rgba(0,0,0,.88), rgba(0,0,0,.55)); backdrop-filter: blur(8px); }
.player-stage:fullscreen .fullscreen-playlist[hidden] { display: none; }
.player-stage:fullscreen .fullscreen-playlist .playlist-item { background: rgba(20,20,24,.58); border-color: rgba(255,255,255,.12); }
.mobile-content-tabs, .mobile-playlist-host { display: none; }

@media (min-width: 1580px) {
  .player-layout.has-catalog { grid-template-columns: minmax(260px, 330px) minmax(620px, 1fr) minmax(370px, 460px); grid-template-areas: "playlist video catalog"; }
  .player-layout.has-catalog .catalog-panel { align-self: stretch; }
  .player-layout.has-catalog #catalogFrame { height: min(78vh, 860px); }
  .player-layout.has-catalog .playlist-panel { max-height: min(78vh, 860px); }
}

/* Search result */
.search-result-banner { margin-bottom: 15px; padding: 14px 17px; border-left: 3px solid var(--accent); background: rgba(241,195,74,.07); border-radius: 0 12px 12px 0; }
.search-result-banner > span { display: block; color: var(--accent); text-transform: uppercase; letter-spacing: .12em; font-size: .68rem; font-weight: 900; }
.search-result-banner strong { display: block; margin-top: 4px; font-size: 1.35rem; }
.search-result-banner div { color: var(--muted); margin-top: 2px; font-size: .85rem; }
.search-result-page .player-layout { grid-template-columns: minmax(0, 1fr); grid-template-areas: "video" "catalog"; max-width: 1180px; margin: auto; }

/* Pedigree */
.pedigree-result-header { margin-bottom: 18px; padding: 18px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); }
.pedigree-result-header h1 { margin: 4px 0; font-size: clamp(2rem,4vw,3.4rem); }
.pedigree-count { color: var(--muted); }
.refinement-controls { margin-top: 15px; display: flex; gap: 12px; flex-wrap: wrap; }
.refinement-controls label { color: var(--muted); font-size: .78rem; }
.refinement-controls select { display: block; min-width: 170px; margin-top: 4px; color: var(--text); background: #11141d; border: 1px solid var(--line); border-radius: 9px; padding: 9px 10px; }

/* Sale browser */
.sale-browser { max-width: 740px; margin: 0 auto 24px; padding: 22px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.sale-browser h1 { margin: 4px 0 18px; font-size: 2.4rem; }
.large-select-label { display: block; color: var(--muted); }
.large-select-label select { width: 100%; margin-top: 7px; padding: 12px; color: var(--text); background: #11141d; border: 1px solid var(--line); border-radius: 10px; }
.sale-result-heading { max-width: 1000px; margin: 28px auto 15px; text-align: center; }
.sale-result-heading h2 { margin-bottom: 5px; }
.sale-result-heading p { color: var(--muted); margin-top: 0; }
.sale-consignor-grid { max-width: 1000px; margin: auto; display: grid; grid-template-columns: repeat(auto-fit,minmax(240px,1fr)); gap: 10px; }
.sale-consignor-card { display: flex; justify-content: space-between; gap: 12px; padding: 14px; background: var(--panel); border: 1px solid var(--line); border-radius: 11px; text-decoration: none; }
.sale-consignor-card:hover { border-color: var(--line-strong); background: rgba(255,255,255,.08); }
.sale-consignor-card span { color: var(--muted); white-space: nowrap; }

/* Downloads */
.download-page .page-shell { max-width: 1240px; }
.download-header { padding: 20px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.download-header h1 { margin: 4px 0; }
.download-header p { margin: 4px 0 18px; color: var(--muted); }
.download-filters { display: grid; grid-template-columns: 140px minmax(220px,1fr) minmax(220px,1fr); gap: 12px; }
.download-filters label { color: var(--muted); font-size: .8rem; }
.download-filters select { width: 100%; display: block; margin-top: 5px; padding: 10px; color: var(--text); background: #11141d; border: 1px solid var(--line); border-radius: 9px; }
.download-filters label:first-child select { background: rgba(255,255,255,.035); color: var(--muted); font-weight: 700; }
.download-filters label:nth-child(2) select { border-color: var(--line-strong); font-weight: 800; }
.download-results { margin-top: 16px; }
.download-context { margin-bottom: 8px; color: var(--muted); font-weight: 800; }
.selection-toolbar { position: sticky; top: calc(var(--header-h) + 8px); z-index: 50; display: flex; align-items: center; gap: 12px; padding: 10px 12px; margin-bottom: 9px; background: rgba(15,17,24,.95); border: 1px solid var(--line); border-radius: 12px; backdrop-filter: blur(14px); box-shadow: 0 10px 30px rgba(0,0,0,.28); }
.selection-toolbar > label { display: flex; gap: 7px; align-items: center; white-space: nowrap; }
.selection-summary { margin-right: auto; color: var(--muted); font-size: .86rem; }
.selection-toolbar button:disabled { opacity: .42; cursor: not-allowed; }
.download-table-wrap { overflow-x: auto; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); }
.download-table { width: 100%; border-collapse: collapse; }
.download-table th { color: var(--muted); text-align: left; font-size: .75rem; background: #11141d; }
.download-table th, .download-table td { padding: 10px 11px; border-bottom: 1px solid rgba(255,255,255,.07); vertical-align: middle; }
.download-table tr:last-child td { border-bottom: 0; }
.download-table tbody tr.selected { background: rgba(121,209,138,.1); box-shadow: inset 3px 0 0 var(--accent-2); }
.download-table .check-col { width: 34px; }
.download-table .hip-cell { width: 70px; color: var(--accent); font-weight: 850; font-variant-numeric: tabular-nums; }
.download-table .name-cell { min-width: 180px; font-weight: 800; }
.download-table .size-cell { white-space: nowrap; color: var(--muted); }
.row-actions { min-width: 285px; text-align: right; white-space: nowrap; }
.table-action { display: inline-block; margin-left: 6px; padding: 7px 8px; border: 1px solid var(--line); border-radius: 8px; background: rgba(255,255,255,.045); color: var(--text); text-decoration: none; font-size: .75rem; font-weight: 750; }
.table-action:hover { background: rgba(255,255,255,.09); }
.table-action.primary { border-color: rgba(241,195,74,.36); color: #ffe18a; }
.modal { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 24px; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.8); backdrop-filter: blur(8px); }
.modal-card { position: relative; z-index: 1; width: min(1000px, 96vw); padding: 15px; background: #10121a; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 30px 90px rgba(0,0,0,.6); }
.modal-card h2 { margin: 0 45px 12px 0; }
.modal-card video { width: 100%; aspect-ratio: 16/9; background: #000; border-radius: 10px; }
.modal-close { position: absolute; right: 12px; top: 9px; border: 0; background: transparent; color: var(--muted); font-size: 2rem; line-height: 1; }

@media (max-width: 900px) {
  :root { --header-h: 62px; }
  .header-inner, .page-shell { width: min(100% - 20px, 2600px); }
  .page-shell { padding-top: 20px; }
  .brand-company { font-size: .67rem; }
  .brand-section { font-size: 1.05rem; }
  .header-actions { gap: 9px; }
  .quiet-link { font-size: .75rem; }
  .index-hero { align-items: start; flex-direction: column; gap: 10px; }
  .search-input-row { grid-template-columns: 1fr; }
  .archive-search-toggle { white-space: normal; }
  .desktop-matrix { display: none; }
  .mobile-consignor-list { display: grid; gap: 10px; }
  .consignor-card { padding: 14px; background: var(--panel); border: 1px solid var(--line); border-radius: 13px; box-shadow: 0 8px 24px rgba(0,0,0,.22); }
  .consignor-card-heading { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
  .consignor-card-heading a { min-width: 0; font-weight: 900; text-decoration: none; font-size: 1.05rem; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  .consignor-card-heading > span { flex: 0 0 auto; color: var(--muted); font-size: .74rem; }
  .consignor-sale-links { display: grid; gap: 5px; margin-top: 10px; }
  .consignor-sale-links a { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 8px 9px; border-radius: 8px; background: rgba(255,255,255,.04); text-decoration: none; }
  .consignor-sale-links strong { color: var(--accent); }
  .view-all-link { display: inline-block; margin-top: 10px; color: var(--muted); font-size: .8rem; text-decoration: none; }
  .suggestion-context .suggestion-consignor { display: none; }

  .consignor-identity { grid-template-columns: minmax(0,1fr) auto; padding: 11px 13px; }
  .consignor-header-image { max-height: 105px; }
  .context-year { font-size: 2.6rem; }
  .player-layout, .search-result-page .player-layout { display: block; }
  .playlist-panel { display: none; }
  .player-stage { border-radius: 12px; }
  .video-column { min-width: 0; }
  .now-playing-card { align-items: flex-start; flex-direction: column; gap: 10px; }
  .player-actions { width: 100%; justify-content: flex-start; }
  .download-current { margin-right: auto; }
  .mobile-content-tabs { display: flex; gap: 5px; margin-top: 10px; padding: 4px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; }
  .mobile-content-tabs button { flex: 1; border: 0; border-radius: 7px; padding: 8px; background: transparent; color: var(--muted); font-weight: 800; }
  .mobile-content-tabs button.active { background: rgba(255,255,255,.09); color: var(--text); }
  .mobile-playlist-host { display: block; margin-top: 8px; }
  .mobile-playlist-host .playlist-panel { display: flex; max-height: none; }
  .catalog-panel { display: none; margin-top: 8px; }
  .search-result-page .catalog-panel:not([hidden]) { display: block; }
  .catalog-panel.mobile-visible { display: block; }
  #catalogFrame { height: min(65vh, 720px); }
  .video-column { position: relative; }
  .player-stage { position: sticky; top: calc(var(--header-h) + var(--archive-h) + 6px); z-index: 25; }
  .now-playing-card { position: relative; z-index: 26; }
  .download-filters { grid-template-columns: 1fr; }
  .selection-toolbar { top: calc(var(--header-h) + 6px); flex-wrap: wrap; }
  .selection-summary { width: 100%; order: 3; }
}

@media (max-width: 540px) {
  .page-shell { width: calc(100% - 14px); }
  .header-inner { width: calc(100% - 18px); }
  .quiet-link { display: none; }
  .year-picker select { max-width: 84px; }
  .search-card { padding: 13px; }
  .search-topline { align-items: start; }
  .suggestion-item { grid-template-columns: minmax(0,1fr) auto; gap: 8px; }
  .suggestion-context .suggestion-sale, .suggestion-context .suggestion-consignor { display: none; }
  .suggestion-context .suggestion-year::before { content: none !important; }
  .consignor-identity { grid-template-columns: 1fr; }
  .context-year { display: none; }
  .consignor-header-image { margin: auto; max-height: 90px; }
  .consignor-text-fallback { text-align: center; }
  .consignor-text-fallback h1 { font-size: 2rem; }
  .now-playing-meta { white-space: normal; }
  .player-actions { gap: 6px; }
  .action-button { padding: 8px 9px; font-size: .76rem; }
  .toggle-control { order: 4; width: 100%; }
  .quality-control { margin-right: auto; }
  .download-table th:nth-child(4), .download-table td:nth-child(4) { display: none; }
  .row-actions { min-width: 260px; }
  .table-action { margin-left: 3px; padding: 6px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* ========================================================================== 
   Revision 2: feedback pass
   ========================================================================== */

/* Let the original neon horse artwork actually read as the page background. */
body { background: transparent; }
.site-background {
  z-index: -1;
  opacity: .92;
  background-color: #050608;
  background-position: center 38%;
  background-size: min(1650px, 92vw) auto;
}
.site-background::after {
  background:
    radial-gradient(circle at 50% 35%, rgba(4,5,8,.08), rgba(4,5,8,.54) 72%),
    linear-gradient(to bottom, rgba(3,4,7,.20), rgba(3,4,7,.58));
}

/* More of the original rainbow identity, without turning the UI into a carnival. */
.rainbow-line { height: 5px; filter: saturate(1.25); box-shadow: 0 0 24px rgba(130,120,255,.48); }
.site-header { padding-top: 2px; }

/* Header / brand */
.header-inner { min-height: var(--header-h); }
.brand { display: flex; align-items: center; gap: 11px; min-width: 0; }
.brand-mark { width: 64px; height: 42px; object-fit: contain; flex: 0 0 auto; filter: drop-shadow(0 2px 9px rgba(0,0,0,.6)); }
.brand-copy { display: grid; line-height: 1.05; min-width: 0; }
.header-actions { gap: 10px; }
.header-search-button {
  display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--line); border-radius: 999px;
  background: rgba(255,255,255,.045); color: var(--muted); padding: 8px 12px; font-weight: 800;
}
.header-search-button:hover, .header-search-button.active { color: var(--text); background: rgba(255,255,255,.09); border-color: var(--line-strong); }
.search-icon { font-size: 1.2rem; line-height: .7; transform: translateY(-1px); }

/* Purpose-built season/archive menu instead of a native year dropdown. */
.season-menu { position: relative; }
.season-menu > summary {
  list-style: none; display: flex; align-items: center; gap: 9px; min-width: 104px; padding: 7px 11px;
  border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,.05); cursor: pointer;
}
.season-menu > summary::-webkit-details-marker { display: none; }
.season-menu > summary:hover, .season-menu[open] > summary { background: rgba(255,255,255,.09); border-color: var(--line-strong); }
.season-summary-copy { display: grid; line-height: 1.05; }
.season-summary-label { color: var(--muted); text-transform: uppercase; letter-spacing: .09em; font-size: .56rem; font-weight: 900; }
.season-summary-copy strong { margin-top: 3px; font-size: .92rem; }
.season-chevron { width: 7px; height: 7px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg) translateY(-2px); transition: transform .18s ease; }
.season-menu[open] .season-chevron { transform: rotate(225deg) translate(-2px,-1px); }
.season-popover {
  position: absolute; z-index: 180; top: calc(100% + 9px); right: 0; width: 190px; max-height: min(70dvh, 520px); overflow-y: auto;
  padding: 7px; background: #10131a; border: 1px solid var(--line-strong); border-radius: 13px; box-shadow: 0 22px 60px rgba(0,0,0,.58);
}
.season-menu-label { padding: 7px 9px 5px; color: var(--muted); text-transform: uppercase; letter-spacing: .1em; font-size: .59rem; font-weight: 900; }
.season-menu-label.archive-label { margin-top: 4px; border-top: 1px solid rgba(255,255,255,.07); padding-top: 10px; }
.season-link { display: flex; justify-content: space-between; gap: 12px; padding: 9px 10px; border-radius: 9px; text-decoration: none; font-weight: 820; }
.season-link:hover { background: rgba(255,255,255,.075); }
.season-link.active { background: rgba(241,195,74,.13); color: #ffe18a; }
.season-link small { color: var(--muted); font-size: .65rem; align-self: center; }

/* Header search stays out of the way until explicitly requested. */
.header-search-tray { border-top: 1px solid rgba(255,255,255,.06); background: rgba(8,9,13,.96); box-shadow: 0 18px 38px rgba(0,0,0,.36); }
.header-search-card { width: min(1180px, calc(100% - 32px)); margin: 0 auto; padding: 16px 0 18px; position: relative; }
.header-search-card::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; opacity: .6; background: linear-gradient(90deg,#ff476f,#ff9b45,#ffe15a,#61dd91,#55c8ff,#8c78ff,#f160d4); }
select option { color: #15171e; background: #fff; }

/* Back navigation deserves to look like navigation, particularly on the player. */
.back-link { display: inline-flex; align-items: center; min-height: 38px; font-size: .96rem; }
.player-page .back-link { font-size: 1.12rem; font-weight: 850; }

/* Index search is now in the header; keep the landing page about consignments. */
.index-hero { padding-top: 30px; }
.index-utility-link { margin: 28px 0 0; padding-top: 16px; text-align: center; border-top: 1px solid rgba(255,255,255,.07); }
.index-utility-link a { color: #737b8b; font-size: .76rem; text-decoration: none; }
.index-utility-link a:hover { color: var(--muted); text-decoration: underline; text-underline-offset: 4px; }

/* A full season can contain a LOT of sales.  Preserve the original compact
   matrix concept by rotating labels only when the season actually needs it. */
.matrix-scroll { overflow-x: visible; }
.matrix-many-sales .consignor-matrix { width: 100%; table-layout: fixed; }
.matrix-many-sales .consignor-matrix thead th.sale-column { min-width: 0; height: 142px; padding: 7px 1px 9px; vertical-align: bottom; }
.matrix-many-sales .consignor-matrix thead th.sale-column > span {
  display: inline-block; max-height: 124px; writing-mode: vertical-rl; transform: rotate(180deg);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.05;
}
.matrix-many-sales .consignor-matrix thead .consignor-column,
.matrix-many-sales .consignor-name-cell { width: 220px; min-width: 220px; }
.matrix-many-sales .total-column, .matrix-many-sales .total-cell { width: 58px; min-width: 58px !important; }
.matrix-many-sales .count-cell { min-width: 0; padding-left: 1px; padding-right: 1px; }
.matrix-many-sales .count-cell.has-videos a { width: min(30px, 80%); }

/* Consignor identity: center the artwork and stop pretending the wrapper is the
   design.  Custom headers can stand on their own; text fallbacks get a modern masthead. */
.consignor-identity { margin-bottom: 18px; }
.consignor-identity.has-custom-header {
  position: relative; display: flex; justify-content: center; align-items: center; padding: 2px 0 15px;
  border: 0; border-radius: 0; background: transparent; box-shadow: none;
}
.consignor-identity.has-custom-header::after {
  content: ""; position: absolute; left: 18%; right: 18%; bottom: 0; height: 2px; border-radius: 999px;
  background: linear-gradient(90deg,transparent,#ff476f,#ffe15a,#61dd91,#55c8ff,#8c78ff,#f160d4,transparent);
  background-size: 180% 100%; animation: rainbow-shift 8s linear infinite; opacity: .72;
}
.consignor-header-image { max-width: min(1120px, 96%); max-height: 190px; object-position: center; margin: 0 auto; filter: drop-shadow(0 10px 30px rgba(0,0,0,.42)); }
.consignor-identity.text-only-header { display: flex; justify-content: center; text-align: center; padding: 22px; overflow: hidden; position: relative; }
.consignor-identity.text-only-header::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 50% -25%, rgba(241,195,74,.11), transparent 55%); pointer-events: none; }
.consignor-text-fallback { position: relative; padding: 4px 12px; }
.consignor-text-fallback h1 { font-size: clamp(2rem, 4vw, 3.8rem); }
.consignor-season { margin-top: 8px; color: var(--muted); font-size: .8rem; font-weight: 750; letter-spacing: .04em; }
.context-year { display: none !important; }

/* Playlist toolbar: no more horizontal row of sale pills. */
.playlist-toolbar { display: flex; align-items: end; gap: 10px; padding: 9px 10px; border-bottom: 1px solid var(--line); background: rgba(255,255,255,.018); }
.playlist-sale-control { display: grid; min-width: 0; flex: 1 1 auto; color: var(--muted); text-transform: uppercase; letter-spacing: .07em; font-size: .58rem; font-weight: 900; }
.playlist-sale-control select { min-width: 0; width: 100%; margin-top: 4px; padding: 7px 27px 7px 8px; border: 1px solid var(--line); border-radius: 9px; background: #11141d; color: var(--text); font-size: .72rem; font-weight: 800; text-transform: none; letter-spacing: 0; }
.autoplay-switch { display: grid; grid-template-columns: auto auto; grid-template-areas: "label track"; align-items: center; gap: 7px; flex: 0 0 auto; color: var(--muted); font-size: .68rem; font-weight: 800; white-space: nowrap; }
.autoplay-switch > span:first-child { grid-area: label; }
.autoplay-switch input { position: absolute; opacity: 0; pointer-events: none; }
.switch-track { grid-area: track; width: 34px; height: 19px; padding: 2px; border-radius: 999px; background: #3b3f49; border: 1px solid rgba(255,255,255,.12); transition: .18s ease; }
.switch-track > span { display: block; width: 13px; height: 13px; border-radius: 50%; background: #d6dae3; transition: transform .18s ease; box-shadow: 0 1px 3px rgba(0,0,0,.5); }
.autoplay-switch input:checked + .switch-track { background: rgba(121,209,138,.43); border-color: rgba(121,209,138,.65); }
.autoplay-switch input:checked + .switch-track > span { transform: translateX(15px); background: #b8f2c3; }
.autoplay-switch input:focus-visible + .switch-track { outline: 2px solid #fff; outline-offset: 3px; }

/* The video itself is always constrained by CURRENT viewport height.  On very
   wide/short windows the player gets narrower rather than extending below the viewport. */
.player-stage {
  width: min(100%, var(--player-max-width, 100%));
  max-height: var(--player-max-height, calc(100dvh - var(--header-h) - var(--archive-h) - 28px));
  margin-inline: auto;
}
.player-stage:fullscreen { width: 100% !important; max-width: none !important; max-height: none !important; height: 100% !important; aspect-ratio: auto; margin: 0; }

/* Sale browser: year belongs with sale here, not in the global header. */
.sale-browser { max-width: 820px; }
.sale-browser .section-eyebrow { margin-bottom: 3px; }
.sale-browser-controls { display: grid; grid-template-columns: 150px minmax(0,1fr); gap: 12px; align-items: end; }
.sale-result-year { display: inline-block; color: var(--accent); font-weight: 900; letter-spacing: .08em; font-size: .73rem; }

/* Feedback / long-running download UI */
.site-toast {
  position: fixed; z-index: 500; left: 50%; bottom: max(24px, env(safe-area-inset-bottom)); transform: translate(-50%, 12px);
  max-width: min(90vw, 560px); padding: 10px 14px; border: 1px solid var(--line-strong); border-radius: 999px;
  background: rgba(17,20,28,.96); color: var(--text); box-shadow: 0 18px 55px rgba(0,0,0,.55); backdrop-filter: blur(14px);
  opacity: 0; transition: opacity .2s ease, transform .2s ease; font-size: .84rem; font-weight: 750; text-align: center;
}
.site-toast.show { opacity: 1; transform: translate(-50%, 0); }
.site-busy { position: fixed; inset: 0; z-index: 480; display: grid; place-items: center; padding: 20px; background: rgba(0,0,0,.62); backdrop-filter: blur(5px); }
.site-busy-card { width: min(420px, 92vw); display: grid; justify-items: center; gap: 8px; padding: 24px; border: 1px solid var(--line-strong); border-radius: 16px; background: #11141d; box-shadow: 0 30px 90px rgba(0,0,0,.66); text-align: center; }
.site-busy-card > span { color: var(--muted); font-size: .82rem; }
.busy-spinner { width: 32px; height: 32px; margin-bottom: 3px; border-radius: 50%; border: 3px solid rgba(255,255,255,.12); border-top-color: var(--accent); animation: busy-spin .8s linear infinite; }
@keyframes busy-spin { to { transform: rotate(360deg); } }
.busy-progress { width: 100%; height: 7px; overflow: hidden; border-radius: 999px; background: rgba(255,255,255,.08); margin-top: 5px; }
.busy-progress span { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg,#f1c34a,#79d18a); transition: width .15s linear; }
.modal-card video { max-height: calc(100dvh - 150px); object-fit: contain; }

@media (max-width: 900px) {
  .brand-mark { width: 54px; height: 36px; }
  .header-search-button { padding: 7px 10px; }
  .header-search-button .search-icon { display: none; }
  .season-menu > summary { min-width: 91px; padding: 6px 9px; }
  .header-search-card { width: min(100% - 20px, 1180px); }
  .consignor-header-image { max-width: 100%; max-height: 145px; }
  .player-stage { width: 100%; max-height: calc(100dvh - var(--header-h) - var(--archive-h) - 8px); }
  .playlist-toolbar { align-items: center; }
  .sale-browser-controls { grid-template-columns: 1fr; }
}

@media (max-width: 540px) {
  .brand { gap: 7px; }
  .brand-mark { width: 45px; height: 31px; }
  .brand-company { font-size: .56rem; }
  .brand-section { font-size: .92rem; margin-top: 2px; }
  .header-actions { gap: 6px; }
  .header-search-button { font-size: .72rem; padding: 7px 8px; }
  .season-menu > summary { min-width: 78px; padding: 6px 7px; gap: 6px; }
  .season-summary-label { font-size: .49rem; }
  .season-summary-copy strong { font-size: .82rem; }
  .season-popover { width: 175px; }
  .header-search-card { width: calc(100% - 16px); padding: 12px 0 14px; }
  .search-topline { margin-bottom: 8px; }
  .consignor-identity.has-custom-header::after { left: 8%; right: 8%; }
  .playlist-toolbar { flex-wrap: wrap; }
  .playlist-sale-control { flex-basis: 100%; }
  .autoplay-switch { margin-left: auto; }
}
.header-search-tray { position: absolute; left: 0; right: 0; top: 100%; }
.site-background { z-index: 0; pointer-events: none; }
.page-shell { position: relative; z-index: 1; }
.video-column .now-playing-card,
.video-column .mobile-content-tabs,
.video-column .mobile-playlist-host {
  width: min(100%, var(--player-max-width, 100%));
  margin-left: auto;
  margin-right: auto;
}
@media (max-width: 900px) {
  .video-column .now-playing-card,
  .video-column .mobile-content-tabs,
  .video-column .mobile-playlist-host { width: 100%; }
}

/* ========================================================================== 
   Revision 3: density, mobile browse switch, player/catalog polish
   ========================================================================== */

/* Keep the desktop matrix dense.  A few sales should not expand into giant
   empty columns, and a mature season gets readable diagonal headings instead
   of fully vertical text. */
.matrix-few-sales {
  width: max-content;
  max-width: 100%;
  margin-inline: auto;
}
.matrix-few-sales .consignor-matrix { width: auto; table-layout: fixed; }
.matrix-few-sales .consignor-matrix thead .consignor-column,
.matrix-few-sales .consignor-name-cell { width: 260px; min-width: 260px; }
.matrix-few-sales .consignor-matrix thead th.sale-column,
.matrix-few-sales .count-cell { width: 150px; min-width: 150px; }

.matrix-many-sales { width: max-content; max-width: 100%; margin-inline: auto; overflow: hidden; }
.matrix-many-sales .matrix-scroll { overflow-x: auto; overflow-y: hidden; padding-top: 0; }
.matrix-many-sales .consignor-matrix { width: auto; min-width: 0; table-layout: fixed; margin-inline: auto; }
.matrix-many-sales .consignor-matrix thead .consignor-column,
.matrix-many-sales .consignor-name-cell { width: 210px; min-width: 210px; }
.matrix-many-sales .consignor-matrix thead th.sale-column {
  position: relative;
  width: 64px;
  min-width: 64px;
  height: 132px;
  padding: 0;
  overflow: visible;
  vertical-align: bottom;
}
.matrix-many-sales .consignor-matrix thead th.sale-column > span {
  position: absolute;
  left: 31px;
  bottom: 10px;
  display: block;
  width: 174px;
  max-width: none;
  max-height: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  writing-mode: horizontal-tb;
  transform: rotate(-52deg);
  transform-origin: left bottom;
  text-align: left;
  line-height: 1.05;
}
.matrix-many-sales .count-cell { width: 64px; min-width: 64px; padding-inline: 2px; }
.matrix-many-sales .count-cell.has-videos a { width: 30px; height: 28px; }
.matrix-crowded-sales .consignor-matrix thead th.sale-column,
.matrix-crowded-sales .count-cell { width: 56px; min-width: 56px; }
.matrix-crowded-sales .consignor-matrix thead th.sale-column > span { left: 27px; }
.matrix-packed-sales .consignor-matrix thead th.sale-column,
.matrix-packed-sales .count-cell { width: 50px; min-width: 50px; }
.matrix-packed-sales .consignor-matrix thead th.sale-column > span { left: 24px; }

/* The alternate mobile browse mode belongs to the compact/card layout only. */
.mobile-browse-switch,
.mobile-sale-list { display: none; }

/* Player metadata/actions stay on one line on normal desktop layouts. */
@media (min-width: 901px) {
  .now-playing-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
  .player-actions { flex-wrap: nowrap; }
}

/* When all three panes fit, keep the catalog on the LEFT and playlist on the
   RIGHT so the playlist never changes sides as the catalog appears/disappears. */
@media (min-width: 1580px) {
  .player-layout.has-catalog {
    grid-template-columns: minmax(300px, 370px) minmax(620px, 1fr) minmax(285px, 335px);
    grid-template-areas: "catalog video playlist";
  }
  .player-layout.has-catalog .catalog-panel,
  .player-layout.has-catalog .playlist-panel { align-self: start; }
  .player-layout.has-catalog #catalogFrame {
    width: 100%;
    height: auto;
    aspect-ratio: 8.5 / 11;
    max-height: calc(100dvh - var(--header-h) - var(--archive-h) - 120px);
    background: #fff;
  }
  .player-layout.has-catalog .playlist-panel {
    max-height: calc(100dvh - var(--header-h) - var(--archive-h) - 28px);
  }
}

/* Below the three-column threshold, keep a single-page catalog compact and
   centered instead of giving the PDF viewer a huge gray viewport beneath it. */
@media (min-width: 901px) and (max-width: 1579px) {
  .catalog-panel:not([hidden]) { width: min(760px, 100%); justify-self: center; }
  #catalogFrame { width: 100%; height: auto; aspect-ratio: 8.5 / 11; background: #fff; }
}

.player-sound-prompt {
  position: absolute; z-index: 22; left: 50%; bottom: 72px; transform: translateX(-50%);
  border: 1px solid rgba(241,195,74,.55); border-radius: 999px; padding: 9px 14px;
  background: rgba(8,9,13,.88); color: #ffe18a; box-shadow: 0 10px 35px rgba(0,0,0,.5);
  backdrop-filter: blur(8px); font-weight: 850; white-space: nowrap;
}
.fullscreen-exit {
  position: absolute; z-index: 40; top: max(16px, env(safe-area-inset-top)); left: max(16px, env(safe-area-inset-left));
  border: 1px solid rgba(255,255,255,.28); border-radius: 999px; padding: 8px 12px;
  background: rgba(0,0,0,.62); color: #fff; backdrop-filter: blur(8px); font-weight: 850;
}

@media (max-width: 900px) {
  .secondary-browse { display: none; }
  .mobile-browse-switch {
    position: sticky;
    top: calc(var(--header-h) + var(--archive-h) + 8px);
    z-index: 72;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 0 0 10px;
    padding: 7px 8px 7px 12px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: rgba(12,14,20,.94);
    box-shadow: 0 10px 28px rgba(0,0,0,.34);
    backdrop-filter: blur(14px);
  }
  .mobile-browse-switch > span {
    color: var(--muted);
    font-size: .72rem;
    font-weight: 850;
    text-transform: uppercase;
    letter-spacing: .08em;
  }
  .mobile-browse-segments { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 3px; border-radius: 9px; background: rgba(255,255,255,.05); }
  .mobile-browse-segments button {
    border: 0; border-radius: 7px; padding: 7px 11px; background: transparent; color: var(--muted); font-size: .8rem; font-weight: 850;
  }
  .mobile-browse-segments button.active { background: rgba(241,195,74,.15); color: #ffe18a; box-shadow: inset 0 0 0 1px rgba(241,195,74,.25); }

  .mobile-browse-panel { display: none !important; }
  .mobile-browse-panel.active:not([hidden]) { display: grid !important; gap: 10px; }
  .mobile-sale-list.active:not([hidden]) { display: grid !important; }
  .sale-card { padding: 14px; background: var(--panel); border: 1px solid var(--line); border-radius: 13px; box-shadow: 0 8px 24px rgba(0,0,0,.22); }
  .sale-card-heading { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
  .sale-card-heading a { min-width: 0; color: var(--text); font-size: 1.05rem; font-weight: 900; text-decoration: none; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  .sale-card-heading > span { flex: 0 0 auto; color: var(--muted); font-size: .74rem; }
  .sale-consignor-links { display: grid; gap: 5px; margin-top: 10px; }
  .sale-consignor-links a { display: flex; justify-content: space-between; gap: 12px; padding: 8px 9px; border-radius: 8px; background: rgba(255,255,255,.04); text-decoration: none; }
  .sale-consignor-links strong { color: var(--accent); }

  #catalogFrame { aspect-ratio: auto; height: min(65vh, 720px); }
  .player-actions { flex-wrap: nowrap; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
  .player-actions::-webkit-scrollbar { display: none; }
}

/* ========================================================================== 
   Revision 4: matrix readability, catalog expansion, native player polish
   ========================================================================== */

/* The year matrix is still the fastest way to understand a full season. Keep
   it dense, but use the old site's useful diagonal-label trick instead of
   turning sale names into vertical barcodes. */
.index-hero { align-items: end; }
.matrix-card { overflow: visible; }
.matrix-many-sales {
  width: min(1180px, 100%);
  max-width: 100%;
  margin-inline: auto;
  overflow: visible;
}
.matrix-many-sales .matrix-scroll { overflow: visible; }
.matrix-many-sales .consignor-matrix {
  width: 100%;
  table-layout: fixed;
  margin-inline: auto;
}
.matrix-many-sales .consignor-matrix thead { overflow: visible; }
.matrix-many-sales .consignor-matrix thead .consignor-column,
.matrix-many-sales .consignor-name-cell { width: 205px; min-width: 205px; }
.matrix-many-sales .consignor-matrix thead th.sale-column {
  width: auto;
  min-width: 0;
  height: 118px;
  padding: 0;
  overflow: visible;
  vertical-align: bottom;
  background: #12151e;
}
.matrix-many-sales .consignor-matrix thead th.sale-column > a {
  position: absolute;
  left: 48%;
  bottom: 7px;
  display: block;
  width: 154px;
  color: var(--muted);
  text-decoration: none;
  transform: rotate(-48deg);
  transform-origin: left bottom;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.08;
  font-weight: 850;
}
.matrix-many-sales .consignor-matrix thead th.sale-column > a:hover,
.matrix-many-sales .consignor-matrix thead th.sale-column > a:focus-visible { color: var(--text); }
.matrix-many-sales .consignor-matrix thead th.sale-column > a > span {
  position: static;
  display: inline;
  width: auto;
  max-width: none;
  max-height: none;
  overflow: visible;
  writing-mode: horizontal-tb;
  transform: none;
}
.matrix-many-sales .count-cell { width: auto; min-width: 0; padding-inline: 2px; transition: background-color .14s ease, box-shadow .14s ease; }
.matrix-many-sales .count-cell.has-videos a { width: 29px; height: 27px; }
.matrix-many-sales .sale-column.column-hover,
.matrix-many-sales .count-cell.column-hover { background-color: rgba(241,195,74,.055); box-shadow: inset 1px 0 rgba(241,195,74,.15), inset -1px 0 rgba(241,195,74,.15); }
.matrix-many-sales .sale-column.column-hover > a { color: #ffe18a; }

/* Short seasons should stay compact rather than stretching three sale columns
   across the entire monitor. */
.matrix-few-sales .consignor-matrix thead .consignor-column,
.matrix-few-sales .consignor-name-cell { width: 245px; min-width: 245px; }
.matrix-few-sales .consignor-matrix thead th.sale-column,
.matrix-few-sales .count-cell { width: 112px; min-width: 112px; transition: background-color .14s ease, box-shadow .14s ease; }
.matrix-few-sales .sale-column > a { color: inherit; text-decoration: none; }
.matrix-few-sales .sale-column > a:hover,
.matrix-few-sales .sale-column > a:focus-visible { color: var(--text); }
.matrix-few-sales .sale-column.column-hover,
.matrix-few-sales .count-cell.column-hover { background-color: rgba(241,195,74,.055); box-shadow: inset 1px 0 rgba(241,195,74,.15), inset -1px 0 rgba(241,195,74,.15); }
.matrix-few-sales .sale-column.column-hover > a { color: #ffe18a; }

/* Let the season menu use as much vertical room as the current viewport really
   has. A scrollbar appears only when the list genuinely cannot fit. */
.season-popover {
  max-height: calc(100dvh - var(--header-h) - 22px);
  overflow-y: auto;
}
.season-link.active small { display: none; }

/* Catalog controls and expansion. The normal wide layout is always
   Catalog | Video | Playlist. Expanding the catalog gives it a much larger
   left pane and moves the playlist under the player instead of sacrificing
   video size. */
.catalog-heading { cursor: pointer; }
.catalog-heading-actions { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.catalog-expand-button {
  border: 1px solid var(--line); border-radius: 8px; padding: 6px 9px;
  background: rgba(255,255,255,.045); color: var(--muted); font-size: .75rem; font-weight: 800;
}
.catalog-expand-button:hover { color: var(--text); background: rgba(255,255,255,.09); border-color: var(--line-strong); }
.catalog-panel {
  overflow: visible;
  border-radius: var(--radius) var(--radius) 0 0;
  transition: transform .24s ease, box-shadow .24s ease;
}
.catalog-panel #catalogFrame { border-radius: 0; }
.player-layout.catalog-expanded .catalog-panel {
  transform: translateZ(0) scale(1.002);
  box-shadow: 0 24px 70px rgba(0,0,0,.58);
  animation: catalog-expand-in .24s ease both;
}
@keyframes catalog-expand-in {
  from { opacity: .94; transform: scale(.985); }
  to { opacity: 1; transform: scale(1.002); }
}

@media (min-width: 1180px) {
  .player-layout.has-catalog {
    grid-template-columns: minmax(265px, 330px) minmax(500px, 1fr) minmax(255px, 310px);
    grid-template-areas: "catalog video playlist";
  }
  .player-layout.has-catalog .catalog-panel,
  .player-layout.has-catalog .playlist-panel { align-self: start; }
  .player-layout.has-catalog #catalogFrame {
    width: 100%;
    height: auto;
    aspect-ratio: 8.5 / 11;
    max-height: calc(100dvh - var(--header-h) - var(--archive-h) - 100px);
    background: #fff;
  }
  .player-layout.has-catalog .playlist-panel {
    max-height: calc(100dvh - var(--header-h) - var(--archive-h) - 28px);
  }

  .player-layout.has-catalog.catalog-expanded {
    grid-template-columns: minmax(430px, .92fr) minmax(520px, 1.08fr);
    grid-template-areas:
      "catalog video"
      "catalog playlist";
    align-items: start;
  }
  .player-layout.has-catalog.catalog-expanded .catalog-panel {
    grid-row: 1 / span 2;
    width: 100%;
  }
  .player-layout.has-catalog.catalog-expanded #catalogFrame {
    width: 100%;
    height: calc(100dvh - var(--header-h) - var(--archive-h) - 86px);
    max-height: 1050px;
    aspect-ratio: auto;
  }
  .player-layout.has-catalog.catalog-expanded .playlist-panel {
    max-height: min(360px, 36dvh);
    width: min(100%, var(--player-max-width, 100%));
    justify-self: center;
  }
}

@media (min-width: 901px) and (max-width: 1179px) {
  .player-layout.has-catalog { grid-template-columns: minmax(0, 1fr) 320px; grid-template-areas: "video playlist" "catalog catalog"; }
  .player-layout.has-catalog .catalog-panel:not([hidden]) { width: min(720px, 100%); justify-self: center; }
  .player-layout.has-catalog #catalogFrame { width: 100%; height: auto; aspect-ratio: 8.5 / 11; }
  .player-layout.has-catalog.catalog-expanded { grid-template-columns: 1fr; grid-template-areas: "catalog" "video" "playlist"; }
  .player-layout.has-catalog.catalog-expanded .catalog-panel { width: min(900px, 100%); }
  .player-layout.has-catalog.catalog-expanded #catalogFrame { height: min(82dvh, 980px); aspect-ratio: auto; }
}

@media (max-width: 900px) {
  .catalog-expand-button { display: none; }
  .catalog-heading { cursor: default; }
}

/* ========================================================================== 
   Revision 5: viewport-first player, matrix header hit areas, search focus
   ========================================================================== */

/* Search is intentionally modal-ish: opening it clearly moves the rest of the
   site into the background without turning the search itself into a full page. */
.search-focus-backdrop {
  position: fixed;
  z-index: 95;
  inset: var(--header-h) 0 0;
  background: rgba(0,0,0,.66);
  backdrop-filter: blur(2px) saturate(.75);
  animation: search-backdrop-in .16s ease both;
}
@keyframes search-backdrop-in { from { opacity: 0; } to { opacity: 1; } }
.header-search-tray {
  z-index: 2;
  border-top: 1px solid rgba(255,255,255,.09);
  border-bottom: 1px solid var(--line-strong);
  background: rgba(13,15,22,.995);
  box-shadow: 0 24px 60px rgba(0,0,0,.72);
}
.header-search-card {
  padding: 17px 18px 19px;
  border-left: 1px solid rgba(255,255,255,.055);
  border-right: 1px solid rgba(255,255,255,.055);
  background: linear-gradient(180deg, rgba(255,255,255,.022), rgba(255,255,255,.008));
}

/* Let as many archive years fit as the viewport permits before introducing a
   scrollbar. Slightly tighter rows buy useful space without making the list tiny. */
.season-popover { max-height: calc(100dvh - var(--header-h) - 14px); }
.season-link { padding-block: 7px; }

/* The whole diagonal sale header is a link/hit target. The label itself stays
   completely INSIDE the header's height, so long mature-season headings do not
   get chopped off by table painting/clipping rules. */
.matrix-many-sales { width: min(1280px, 100%); }
.matrix-many-sales .consignor-matrix thead th.sale-column {
  position: relative;
  height: 166px;
  overflow: visible;
  transition: background-color .14s ease, box-shadow .14s ease;
}
.matrix-many-sales .consignor-matrix thead th.sale-column > a {
  position: absolute;
  inset: 0;
  display: block;
  width: auto;
  color: var(--muted);
  text-decoration: none;
  transform: none;
  overflow: visible;
}
.matrix-many-sales .consignor-matrix thead th.sale-column > a > span {
  position: absolute;
  left: 50%;
  bottom: 10px;
  width: 200px;
  display: block;
  color: inherit;
  white-space: nowrap;
  overflow: visible;
  text-overflow: clip;
  writing-mode: horizontal-tb;
  transform: rotate(-48deg);
  transform-origin: left bottom;
  line-height: 1.08;
  text-align: left;
  font-weight: 850;
}
.matrix-many-sales .consignor-matrix thead th.sale-column:hover,
.matrix-many-sales .consignor-matrix thead th.sale-column.column-hover {
  background-color: rgba(241,195,74,.075);
  box-shadow: inset 1px 0 rgba(241,195,74,.19), inset -1px 0 rgba(241,195,74,.19);
}
.matrix-many-sales .consignor-matrix thead th.sale-column:hover > a,
.matrix-many-sales .consignor-matrix thead th.sale-column.column-hover > a { color: #ffe18a; }
.matrix-few-sales .consignor-matrix thead th.sale-column,
.matrix-few-sales .count-cell { width: 96px; min-width: 96px; }
.matrix-few-sales .consignor-matrix thead th.sale-column { padding-inline: 5px; }

/* Browse-by-sale result cards keep consignor names on one line. */
.sale-result-year {
  font-size: .95rem;
  line-height: 1;
  padding: 5px 9px;
  border-radius: 999px;
  background: rgba(241,195,74,.12);
  border: 1px solid rgba(241,195,74,.22);
}
.sale-consignor-grid {
  max-width: 1160px;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
}
.sale-consignor-card strong {
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* A transparent surface owns picture-area clicks so native <video> click
   behavior cannot double-toggle play/pause. The native control strip is left
   uncovered. */
.video-click-surface {
  position: absolute;
  z-index: 6;
  inset: 0 0 58px;
  width: auto;
  height: auto;
  padding: 0;
  border: 0;
  border-radius: inherit;
  background: transparent;
  cursor: pointer;
  appearance: none;
}
.video-click-surface:focus-visible { outline: 2px solid rgba(255,255,255,.7); outline-offset: -4px; }
.player-empty:not([hidden]) ~ .video-click-surface { pointer-events: none; }

/* Native fullscreen may fullscreen the VIDEO element rather than our wrapper.
   Explicit centering avoids Chromium shifting a paused frame to the left. */
#yearlingVideoPlayer:fullscreen,
#yearlingVideoPlayer:-webkit-full-screen {
  width: 100vw !important;
  height: 100vh !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  object-fit: contain !important;
  object-position: 50% 50% !important;
  background: #000 !important;
}

/* Player pages should use the viewport rather than casually spilling below it. */
.player-page .page-shell { padding-top: 18px; padding-bottom: 12px; }
.player-page .page-nav-row { margin-bottom: 10px; }
.player-page .consignor-identity { margin-bottom: 12px; }
.player-layout { row-gap: 12px; }
.playlist-panel { max-height: var(--player-row-max-height, min(72vh,800px)); }
.video-column { container-type: inline-size; container-name: video-pane; }
.player-stage {
  max-height: var(--player-max-height, 60dvh);
}

/* A subtle heartbeat makes NOW PLAYING feel alive without flashing at people. */
.now-playing-kicker { animation: now-playing-pulse 2.25s ease-in-out infinite; }
@keyframes now-playing-pulse {
  0%, 100% { opacity: .72; text-shadow: 0 0 0 rgba(241,195,74,0); }
  50% { opacity: 1; text-shadow: 0 0 10px rgba(241,195,74,.34); }
}
@media (prefers-reduced-motion: reduce) { .now-playing-kicker { animation: none; } }

/* When the video column gets squeezed by side panes, preserve the horse name and
   metadata instead of ellipsizing them. Stack the action controls compactly on
   the RIGHT, exactly where the user expects them. */
@container video-pane (min-width: 520px) and (max-width: 760px) {
  .now-playing-card {
    grid-template-columns: minmax(0, 1fr) 168px;
    align-items: center;
    gap: 12px;
  }
  .now-playing-card h2,
  .now-playing-meta {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
  }
  .player-actions {
    width: 168px;
    display: grid;
    grid-template-columns: 1fr;
    gap: 6px;
    justify-items: stretch;
  }
  .player-actions > * { width: 100%; margin: 0; text-align: center; justify-content: space-between; }
  .player-actions .action-button { padding: 7px 8px; font-size: .78rem; white-space: nowrap; }
}
@container video-pane (max-width: 519px) {
  .now-playing-card { grid-template-columns: 1fr; }
  .now-playing-card h2,
  .now-playing-meta { white-space: normal; overflow: visible; text-overflow: clip; }
  .player-actions { width: 100%; justify-content: flex-start; flex-wrap: wrap; overflow: visible; }
}

/* Keep every pane within the same usable viewport row. The PDF/playlist scroll
   internally rather than forcing the entire player page to scroll vertically. */
@media (min-width: 1180px) {
  .player-layout.has-catalog .catalog-panel,
  .player-layout.has-catalog .playlist-panel {
    max-height: var(--player-row-max-height, 78dvh);
  }
  .player-layout.has-catalog.catalog-expanded #catalogFrame {
    height: calc(var(--player-row-max-height, 78dvh) - 50px);
    max-height: none;
  }
}

/* On genuinely roomy windows an expanded catalog does NOT evict the playlist.
   Catalog gets first claim on the spare width, video stays central, playlist
   remains on the right for spatial consistency. */
@media (min-width: 1500px) {
  .player-layout.has-catalog.catalog-expanded {
    grid-template-columns: minmax(470px, .95fr) minmax(480px, 1.05fr) minmax(270px, 320px);
    grid-template-areas: "catalog video playlist";
    align-items: start;
  }
  .player-layout.has-catalog.catalog-expanded .catalog-panel {
    grid-row: auto;
    width: 100%;
  }
  .player-layout.has-catalog.catalog-expanded .playlist-panel {
    width: 100%;
    justify-self: stretch;
    max-height: var(--player-row-max-height, 78dvh);
  }
}

@media (max-width: 900px) {
  .search-focus-backdrop { inset: var(--header-h) 0 0; }
  .header-search-card { padding-inline: 12px; }
  .video-click-surface { bottom: 54px; }
}


/* ==========================================================================
   Revision 6: diagonal matrix v2, viewport-first player geometry, dense wide UI
   ========================================================================== */

/* One diagonal header treatment everywhere on desktop.  This keeps a three-sale
   season compact and scales naturally to a mature season without wrapping. */
@media (min-width: 901px) {
  .desktop-matrix {
    width: max-content !important;
    max-width: 100%;
    margin-inline: auto;
    overflow: visible !important;
  }
  .desktop-matrix .matrix-scroll {
    overflow: visible !important;
  }
  .desktop-matrix .consignor-matrix {
    width: auto !important;
    min-width: 0 !important;
    table-layout: fixed !important;
    margin-inline: auto;
  }
  .desktop-matrix .consignor-matrix thead tr {
    background: #12151e;
  }
  .desktop-matrix .consignor-matrix thead th {
    background: transparent !important;
  }
  .desktop-matrix .consignor-matrix thead .consignor-column,
  .desktop-matrix .consignor-name-cell {
    width: 220px !important;
    min-width: 220px !important;
  }
  .desktop-matrix .consignor-matrix thead th.sale-column,
  .desktop-matrix .count-cell {
    width: 70px !important;
    min-width: 70px !important;
  }
  .desktop-matrix .consignor-matrix thead th.sale-column {
    position: relative;
    height: 165px !important;
    padding: 0 !important;
    overflow: visible !important;
    vertical-align: bottom;
    isolation: isolate;
    transition: none;
  }
  .desktop-matrix .consignor-matrix thead th.sale-column > a {
    position: absolute !important;
    inset: 0 !important;
    z-index: 4;
    display: block !important;
    width: auto !important;
    overflow: visible !important;
    transform: none !important;
    color: var(--muted);
    text-decoration: none;
  }
  /* The hover plate is intentionally diagonal, echoing the old site's slanted
     header blocks while the data column below stays perfectly square. */
  .desktop-matrix .consignor-matrix thead th.sale-column > a::before {
    content: "";
    position: absolute;
    z-index: 0;
    top: 0;
    bottom: 0;
    left: -42px;
    right: -42px;
    opacity: 0;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(241,195,74,.16), rgba(241,195,74,.055));
    border-left: 1px solid rgba(241,195,74,.20);
    border-right: 1px solid rgba(241,195,74,.20);
    clip-path: polygon(58% 0, 100% 0, 42% 100%, 0 100%);
    transition: opacity .13s ease;
  }
  .desktop-matrix .consignor-matrix thead th.sale-column > a > span {
    position: absolute !important;
    z-index: 2;
    left: 50% !important;
    bottom: 10px !important;
    display: block !important;
    width: max-content !important;
    max-width: none !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: clip !important;
    writing-mode: horizontal-tb !important;
    transform: rotate(-48deg) !important;
    transform-origin: left bottom !important;
    line-height: 1.05 !important;
    font-weight: 850;
    text-align: left;
  }
  .desktop-matrix .consignor-matrix thead th.sale-column:hover,
  .desktop-matrix .consignor-matrix thead th.sale-column.column-hover {
    z-index: 12;
    background: transparent !important;
    box-shadow: none !important;
  }
  .desktop-matrix .consignor-matrix thead th.sale-column:hover > a::before,
  .desktop-matrix .consignor-matrix thead th.sale-column.column-hover > a::before {
    opacity: 1;
  }
  .desktop-matrix .consignor-matrix thead th.sale-column:hover > a,
  .desktop-matrix .consignor-matrix thead th.sale-column.column-hover > a {
    color: #ffe18a !important;
  }
  .desktop-matrix .count-cell.column-hover {
    background-color: rgba(241,195,74,.055) !important;
    box-shadow: inset 1px 0 rgba(241,195,74,.15), inset -1px 0 rgba(241,195,74,.15) !important;
  }

  /* Center the index title with the matrix instead of pinning it to the far-left
     edge of an ultrawide canvas. */
  .index-hero {
    justify-content: center;
    text-align: left;
  }
  .index-hero > div {
    width: max-content;
    max-width: 100%;
    margin-inline: auto;
  }
  .index-hero p { max-width: 680px; }

  /* Browser-by-sale cards never wrap consignor names.  Use fewer/wider cards
     before allowing truncation. */
  .sale-consignor-grid {
    max-width: 1260px;
    grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
  }
  .sale-consignor-card strong {
    white-space: nowrap !important;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .sale-result-year {
    font-size: 1.12rem !important;
    padding: 5px 11px;
  }
}

/* Desktop player pages behave like a dashboard: the page itself should almost
   never need to scroll.  The playlist and PDF remain internally scrollable. */
@media (min-width: 1020px) and (min-height: 700px) {
  body.player-page { overflow-y: hidden; }
  .player-page .page-shell {
    height: calc(100dvh - var(--header-h) - var(--archive-h));
    overflow: hidden;
    padding-top: 14px;
    padding-bottom: 7px;
  }
}

/* At desktop widths, reserve only what the playlist genuinely needs, cap the
   video by available HEIGHT, and give every spare horizontal pixel to the
   catalog.  This is especially useful on 21:9 / 32:9 screens. */
@media (min-width: 1020px) {
  .player-layout {
    width: 100%;
    max-width: 1880px;
    margin-inline: auto;
    justify-content: center;
    column-gap: 14px;
    row-gap: 9px;
  }
  .player-layout:not(.has-catalog) {
    grid-template-columns: minmax(480px, var(--player-max-width, 980px)) minmax(285px, 335px) !important;
    grid-template-areas: "video playlist" !important;
  }
  .player-layout.has-catalog {
    grid-template-columns:
      minmax(245px, 1fr)
      minmax(480px, var(--player-max-width, 980px))
      minmax(285px, 335px) !important;
    grid-template-areas: "catalog video playlist" !important;
  }
  .player-layout.has-catalog.catalog-expanded {
    grid-template-columns:
      minmax(390px, 1fr)
      minmax(450px, var(--player-max-width, 920px))
      minmax(285px, 335px) !important;
    grid-template-areas: "catalog video playlist" !important;
  }
  .player-layout .video-column { width: 100%; min-width: 0; }
  .player-layout .player-stage,
  .player-layout .now-playing-card {
    width: min(100%, var(--player-max-width, 100%));
  }
  .player-layout .catalog-panel,
  .player-layout .playlist-panel {
    width: 100% !important;
    max-height: var(--player-row-max-height, 76dvh) !important;
    align-self: start;
  }
  .player-layout.has-catalog #catalogFrame {
    width: 100%;
    height: auto;
    max-height: calc(var(--player-row-max-height, 76dvh) - 49px);
    aspect-ratio: 8.5 / 11;
  }
  .player-layout.has-catalog.catalog-expanded #catalogFrame {
    height: calc(var(--player-row-max-height, 76dvh) - 49px) !important;
    max-height: none !important;
    aspect-ratio: auto !important;
  }

  /* Search-by-name is still a player page; don't maroon a tiny video in the
     center of an ultrawide.  With a catalog, use a generous two-pane layout. */
  .search-result-page .search-result-banner,
  .search-result-page .consignor-identity,
  .search-result-page .player-layout {
    max-width: 1560px;
    margin-left: auto;
    margin-right: auto;
  }
  .search-result-page .player-layout {
    width: 100%;
  }
  .search-result-page .player-layout.has-catalog {
    grid-template-columns: minmax(330px, 1fr) minmax(500px, var(--player-max-width, 980px)) !important;
    grid-template-areas: "catalog video" !important;
  }
  .search-result-page .player-layout:not(.has-catalog) {
    grid-template-columns: minmax(520px, var(--player-max-width, 980px)) !important;
    grid-template-areas: "video" !important;
  }
}

/* The waiting roster state is intentionally neutral; nothing is "Now Playing"
   until the visitor actually chooses a horse. */
.now-playing-card.waiting .now-playing-kicker {
  animation: none;
  color: var(--muted);
}
.now-playing-card.waiting .player-actions { display: none; }

/* Native video receives picture-area click handling directly in JS now. */
.video-click-surface { display: none !important; }

/* Keep native-video fullscreen centered even while paused. */
#yearlingVideoPlayer:fullscreen,
#yearlingVideoPlayer:-webkit-full-screen {
  position: fixed !important;
  inset: 0 !important;
  display: block !important;
  width: 100vw !important;
  height: 100vh !important;
  object-position: center center !important;
}

/* On narrow/card index mode, retain the intentionally left-aligned mobile
   hierarchy rather than inheriting desktop centering. */
@media (max-width: 900px) {
  .index-hero { display: block; text-align: left; }
  .index-hero > div { width: auto; margin: 0; }
}

/* The compact 901-1019px desktop range still gets two panes before the true
   mobile/tab layout.  Catalog stays automatic but compact. */
@media (min-width: 901px) and (max-width: 1019px) {
  .player-layout.has-catalog {
    grid-template-columns: minmax(0, 1fr) 280px !important;
    grid-template-areas: "video playlist" "catalog catalog" !important;
  }
}

/* ==========================================================================
   Revision 7: true diagonal sale headers, black/cover background, wide-screen
   allocation, meaningful catalog expansion, and stable action breakpoints
   ========================================================================== */

:root { --bg: #000; }
html, body { background: #000 !important; }
body { background-color: #000 !important; }
.site-background {
  background-color: #000 !important;
  background-image: url('../images/background.jpg') !important;
  background-position: center center !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  opacity: .52;
}
.site-background::after {
  background:
    radial-gradient(circle at 50% 27%, rgba(0,0,0,.04), rgba(0,0,0,.72) 78%),
    linear-gradient(to bottom, rgba(0,0,0,.22), rgba(0,0,0,.68));
}

/* Desktop index matrix.  Give every sale an honest-to-goodness diagonal header
   lane rather than letting rotated text float across unrelated table cells. */
@media (min-width: 901px) {
  .desktop-matrix {
    width: max-content !important;
    max-width: calc(100vw - 32px) !important;
    margin-inline: auto !important;
    overflow: visible !important;
  }
  .desktop-matrix .matrix-scroll {
    overflow-x: auto !important;
    overflow-y: visible !important;
    scrollbar-width: thin;
  }
  .desktop-matrix .consignor-matrix {
    width: max-content !important;
    min-width: 0 !important;
    table-layout: fixed !important;
    margin: 0 !important;
  }
  .desktop-matrix .consignor-matrix thead tr {
    height: 205px !important;
    background: #12151e !important;
  }
  .desktop-matrix .consignor-matrix thead th {
    position: relative !important;
    top: auto !important;
    background: transparent !important;
    overflow: visible !important;
  }
  .desktop-matrix .consignor-matrix thead .consignor-column,
  .desktop-matrix .consignor-name-cell {
    width: 230px !important;
    min-width: 230px !important;
  }
  .desktop-matrix .consignor-matrix thead .consignor-column {
    padding: 0 !important;
    background: #12151e !important;
  }
  .desktop-matrix .consignor-matrix thead th.sale-column,
  .desktop-matrix .count-cell {
    width: 92px !important;
    min-width: 92px !important;
    padding: 0 !important;
  }
  .desktop-matrix.matrix-few-sales .consignor-matrix thead th.sale-column,
  .desktop-matrix.matrix-few-sales .count-cell {
    width: 128px !important;
    min-width: 128px !important;
  }
  .desktop-matrix .consignor-matrix thead th.sale-column {
    height: 205px !important;
    vertical-align: bottom !important;
    isolation: auto !important;
    z-index: 5;
  }
  .desktop-matrix .consignor-matrix thead th.sale-column > a {
    position: absolute !important;
    inset: 0 !important;
    z-index: 5 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    overflow: visible !important;
    color: var(--muted) !important;
    text-decoration: none !important;
    transform: none !important;
  }
  /* The highlighted header itself is slanted; the vertical highlight below it
     remains square so the eye can follow the sale straight down the matrix. */
  .desktop-matrix .consignor-matrix thead th.sale-column > a::before {
    content: "";
    position: absolute;
    z-index: 0;
    left: -36px;
    right: -36px;
    top: 0;
    bottom: 0;
    opacity: 0;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(241,195,74,.19), rgba(241,195,74,.055));
    border-left: 1px solid rgba(241,195,74,.22);
    border-right: 1px solid rgba(241,195,74,.22);
    clip-path: polygon(47% 0, 100% 0, 53% 100%, 0 100%);
    transition: opacity .14s ease;
  }
  .desktop-matrix .consignor-matrix thead th.sale-column > a > span {
    position: absolute !important;
    z-index: 2 !important;
    left: 50% !important;
    bottom: 13px !important;
    display: block !important;
    width: max-content !important;
    max-width: none !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: clip !important;
    writing-mode: horizontal-tb !important;
    transform: rotate(-48deg) !important;
    transform-origin: left bottom !important;
    line-height: 1 !important;
    font-size: .76rem !important;
    font-weight: 850 !important;
    text-align: left !important;
  }
  .desktop-matrix .consignor-matrix thead th.sale-column:hover,
  .desktop-matrix .consignor-matrix thead th.sale-column.column-hover {
    z-index: 20 !important;
    background: transparent !important;
    box-shadow: none !important;
  }
  .desktop-matrix .consignor-matrix thead th.sale-column:hover > a::before,
  .desktop-matrix .consignor-matrix thead th.sale-column.column-hover > a::before {
    opacity: 1 !important;
  }
  .desktop-matrix .consignor-matrix thead th.sale-column:hover > a,
  .desktop-matrix .consignor-matrix thead th.sale-column.column-hover > a {
    color: #ffe18a !important;
  }
  .desktop-matrix .count-cell.column-hover {
    background-color: rgba(241,195,74,.06) !important;
    box-shadow: inset 1px 0 rgba(241,195,74,.17), inset -1px 0 rgba(241,195,74,.17) !important;
  }

  /* JS measures the real matrix width and mirrors it onto the title block. */
  .index-page .index-hero {
    width: var(--matrix-visual-width, auto);
    max-width: 100%;
    margin-inline: auto;
    justify-content: flex-start !important;
    text-align: left !important;
  }
  .index-page .index-hero > div {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
  }
}

/* Catalog heading must never turn a horse name into a vertical stack of words. */
.catalog-panel { container-type: inline-size; container-name: catalog-pane; }
.catalog-heading {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px !important;
}
.catalog-heading > div:first-child { min-width: 0; }
.catalog-eyebrow { white-space: nowrap; }
.catalog-heading strong {
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.catalog-heading-actions { white-space: nowrap; }
@container catalog-pane (max-width: 330px) {
  .catalog-heading { padding-inline: 9px; gap: 6px !important; }
  .catalog-heading strong { display: none; }
  .catalog-heading-actions { gap: 6px; }
  .catalog-expand-button { padding: 5px 7px; font-size: .68rem; }
  .catalog-heading a { font-size: .68rem; }
}

/* Make genuinely wide displays useful. Height still governs the video size;
   spare WIDTH is intentionally donated to the catalog instead of to empty air. */
@media (min-width: 1020px) {
  .player-layout {
    width: 100% !important;
    max-width: 2380px !important;
    margin-inline: auto !important;
    column-gap: 16px !important;
    row-gap: 10px !important;
  }
  .player-layout:not(.has-catalog) {
    grid-template-columns: minmax(500px, var(--player-max-width, 1040px)) minmax(300px, 350px) !important;
    grid-template-areas: "video playlist" !important;
    justify-content: center;
  }
  .player-layout.has-catalog:not(.catalog-expanded) {
    grid-template-columns:
      minmax(320px, 1fr)
      minmax(500px, var(--player-max-width, 1040px))
      minmax(300px, 350px) !important;
    grid-template-areas: "catalog video playlist" !important;
  }
  .player-layout.has-catalog:not(.catalog-expanded) .catalog-panel,
  .player-layout.has-catalog:not(.catalog-expanded) .playlist-panel {
    align-self: start;
    width: 100% !important;
    max-height: var(--player-row-max-height, 76dvh) !important;
  }
  .player-layout.has-catalog:not(.catalog-expanded) #catalogFrame {
    width: 100% !important;
    height: auto !important;
    max-height: calc(var(--player-row-max-height, 76dvh) - 50px) !important;
    aspect-ratio: 8.5 / 11 !important;
  }

  /* EXPAND is a real mode change: catalog takes the left side for the full usable
     viewport height, video gets deliberately shorter, and the playlist moves
     BELOW it with its own internal scrollbar. */
  .player-layout.has-catalog.catalog-expanded {
    height: var(--player-row-max-height, 76dvh) !important;
    min-height: 520px;
    grid-template-columns: minmax(560px, 1.42fr) minmax(500px, .92fr) !important;
    grid-template-rows: auto minmax(130px, 1fr) !important;
    grid-template-areas:
      "catalog video"
      "catalog playlist" !important;
    align-items: stretch !important;
    justify-content: stretch !important;
  }
  .player-layout.has-catalog.catalog-expanded .catalog-panel {
    grid-area: catalog !important;
    grid-row: 1 / span 2 !important;
    width: 100% !important;
    height: 100% !important;
    max-height: none !important;
    align-self: stretch !important;
    display: flex;
    flex-direction: column;
    min-height: 0;
  }
  .player-layout.has-catalog.catalog-expanded .catalog-heading { flex: 0 0 auto; }
  .player-layout.has-catalog.catalog-expanded #catalogFrame {
    flex: 1 1 auto;
    min-height: 0;
    width: 100% !important;
    height: 100% !important;
    max-height: none !important;
    aspect-ratio: auto !important;
  }
  .player-layout.has-catalog.catalog-expanded .video-column {
    grid-area: video !important;
    align-self: start;
    width: 100% !important;
    min-width: 0;
  }
  .player-layout.has-catalog.catalog-expanded .playlist-panel {
    grid-area: playlist !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 130px;
    max-height: none !important;
    align-self: stretch !important;
    justify-self: stretch !important;
  }
  .player-layout.has-catalog.catalog-expanded .playlist-scroll {
    min-height: 0;
    overflow-y: auto;
  }

  .search-result-page .search-result-banner,
  .search-result-page .consignor-identity,
  .search-result-page .player-layout {
    max-width: 2200px !important;
  }
  .search-result-page .player-layout.has-catalog {
    grid-template-columns: minmax(420px, 1fr) minmax(520px, var(--player-max-width, 1080px)) !important;
    grid-template-areas: "catalog video" !important;
  }
}

/* Stable Now Playing behavior. The previous rules changed display modes without
   always changing display:flex -> grid, which is what caused clipped controls in
   the awkward middle widths. */
@container video-pane (min-width: 520px) and (max-width: 900px) {
  .now-playing-card {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 190px !important;
    align-items: center !important;
    gap: 12px !important;
  }
  .now-playing-card h2,
  .now-playing-meta {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }
  .player-actions {
    width: 190px !important;
    max-width: 190px !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 6px !important;
    overflow: visible !important;
  }
  .player-actions > * {
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    justify-content: space-between !important;
    text-align: center;
  }
  .player-actions .action-button {
    white-space: nowrap;
    padding: 7px 9px;
  }
}
@container video-pane (max-width: 519px) {
  .now-playing-card {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  .now-playing-card h2,
  .now-playing-meta {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }
  .player-actions {
    width: 100% !important;
    max-width: none !important;
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
    gap: 7px !important;
    overflow: visible !important;
  }
  .player-actions > * { width: auto !important; }
}

@media (max-width: 900px) {
  /* Mobile keeps the image full-width and the background seamless black. */
  .site-background { background-size: cover !important; }
}

/* ==========================================================================
   Revision 8: old-school readable diagonal sale tabs, safer intermediate player
   widths, wider ultrawide use, and exact catalog/video/playlist height sharing
   ========================================================================== */

/* The background artwork is meant to disappear into BLACK, not a dark-gray
   canvas. Keep it viewport-filling at every aspect ratio. */
html, body, .page-shell { background-color: transparent !important; }
html, body { background: #000 !important; }
.site-background {
  inset: 0 !important;
  width: 100vw !important;
  height: 100dvh !important;
  background-color: #000 !important;
  background-size: cover !important;
  background-position: center center !important;
}

/* --- Desktop matrix ------------------------------------------------------
   Go back to the geometry that made the original site work: each sale gets a
   compact body column, while its HEADER is a real rotated rectangular tab.
   The whole slanted tab is clickable/hoverable; there is no floating text to
   get painted over by neighboring <th> backgrounds. */
@media (min-width: 901px) {
  .desktop-matrix {
    width: max-content !important;
    max-width: calc(100vw - 28px) !important;
    margin-inline: auto !important;
    overflow: visible !important;
  }
  .desktop-matrix .matrix-scroll {
    overflow: visible !important;
    padding: 0 !important;
  }
  .desktop-matrix .consignor-matrix {
    width: max-content !important;
    min-width: 0 !important;
    table-layout: fixed !important;
    margin: 0 !important;
  }
  .desktop-matrix .consignor-matrix thead tr {
    height: 205px !important;
    background: #12151e !important;
  }
  .desktop-matrix .consignor-matrix thead th {
    position: relative !important;
    top: auto !important;
    padding: 0 !important;
    background: transparent !important;
    overflow: visible !important;
    border-bottom: 1px solid rgba(255,255,255,.09) !important;
  }
  .desktop-matrix .consignor-matrix thead .consignor-column,
  .desktop-matrix .consignor-name-cell {
    width: 230px !important;
    min-width: 230px !important;
  }
  .desktop-matrix .consignor-matrix thead .consignor-column {
    background: #12151e !important;
  }
  .desktop-matrix .consignor-matrix thead th.sale-column,
  .desktop-matrix .count-cell {
    width: 78px !important;
    min-width: 78px !important;
    padding: 0 !important;
  }
  .desktop-matrix.matrix-few-sales .consignor-matrix thead th.sale-column,
  .desktop-matrix.matrix-few-sales .count-cell {
    width: 112px !important;
    min-width: 112px !important;
  }
  .desktop-matrix.matrix-crowded-sales .consignor-matrix thead th.sale-column,
  .desktop-matrix.matrix-crowded-sales .count-cell {
    width: 70px !important;
    min-width: 70px !important;
  }
  .desktop-matrix.matrix-packed-sales .consignor-matrix thead th.sale-column,
  .desktop-matrix.matrix-packed-sales .count-cell {
    width: 64px !important;
    min-width: 64px !important;
  }

  .desktop-matrix .consignor-matrix thead th.sale-column {
    height: 205px !important;
    vertical-align: bottom !important;
    z-index: 4 !important;
  }
  .desktop-matrix .consignor-matrix thead th.sale-column > a {
    position: absolute !important;
    left: 50% !important;
    bottom: -1px !important;
    width: 220px !important;
    height: 39px !important;
    inset: auto auto -1px 50% !important;
    z-index: 5 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    padding: 0 10px !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    color: #d8dce6 !important;
    background: linear-gradient(180deg, #2a2d35, #20232a) !important;
    border: 1px solid rgba(255,255,255,.34) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    text-decoration: none !important;
    transform: rotate(-48deg) !important;
    transform-origin: left bottom !important;
    transition: background .14s ease, color .14s ease, border-color .14s ease, box-shadow .14s ease !important;
  }
  .desktop-matrix .consignor-matrix thead th.sale-column > a::before { display: none !important; }
  .desktop-matrix .consignor-matrix thead th.sale-column > a > span {
    position: static !important;
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    overflow: hidden !important;
    text-overflow: clip !important;
    white-space: nowrap !important;
    transform: none !important;
    font-size: .75rem !important;
    font-weight: 850 !important;
    line-height: 1 !important;
    text-align: left !important;
  }
  .desktop-matrix .consignor-matrix thead th.sale-column:hover,
  .desktop-matrix .consignor-matrix thead th.sale-column.column-hover {
    z-index: 30 !important;
    background: transparent !important;
  }
  .desktop-matrix .consignor-matrix thead th.sale-column:hover > a,
  .desktop-matrix .consignor-matrix thead th.sale-column.column-hover > a,
  .desktop-matrix .consignor-matrix thead th.sale-column > a:focus-visible {
    color: #ffe183 !important;
    background: linear-gradient(180deg, rgba(241,195,74,.30), rgba(117,88,25,.27)) !important;
    border-color: rgba(241,195,74,.88) !important;
    box-shadow: 0 0 18px rgba(241,195,74,.16) !important;
  }
  .desktop-matrix .count-cell.column-hover {
    background: rgba(241,195,74,.065) !important;
    box-shadow: inset 1px 0 rgba(241,195,74,.17), inset -1px 0 rgba(241,195,74,.17) !important;
  }

  .index-page .index-hero {
    width: var(--matrix-visual-width, auto) !important;
    max-width: calc(100vw - 28px) !important;
    margin-inline: auto !important;
  }
}

/* --- Now Playing ---------------------------------------------------------
   Metadata never wraps. If the action block steals too much horizontal room,
   move it BELOW the copy rather than breaking the metadata line. */
.now-playing-meta {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.player-actions .action-button,
.download-current { white-space: nowrap !important; }

@container video-pane (min-width: 761px) and (max-width: 900px) {
  .now-playing-card {
    display: grid !important;
    grid-template-columns: minmax(0,1fr) 190px !important;
    align-items: center !important;
    gap: 12px !important;
  }
  .player-actions {
    width: 190px !important;
    max-width: 190px !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 6px !important;
    overflow: visible !important;
  }
  .player-actions > * { width: 100% !important; min-width: 0 !important; margin: 0 !important; }
}

@container video-pane (min-width: 541px) and (max-width: 760px) {
  .now-playing-card {
    display: grid !important;
    grid-template-columns: 1fr !important;
    align-items: stretch !important;
    gap: 10px !important;
  }
  .player-actions {
    width: 100% !important;
    max-width: none !important;
    display: grid !important;
    grid-template-columns: auto minmax(190px,1fr) auto !important;
    align-items: center !important;
    gap: 7px !important;
    overflow: visible !important;
  }
  .player-actions > * { min-width: 0 !important; margin: 0 !important; }
  .player-actions .download-current { width: 100% !important; text-align: center !important; }
}

@container video-pane (max-width: 540px) {
  .now-playing-card {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  .player-actions {
    width: 100% !important;
    max-width: none !important;
    display: grid !important;
    grid-template-columns: auto minmax(0,1fr) !important;
    gap: 7px !important;
    overflow: visible !important;
  }
  .player-actions > * { min-width: 0 !important; margin: 0 !important; }
  .player-actions .download-current { width: 100% !important; text-align: center !important; }
  .player-actions #appFullscreen { grid-column: 1 / -1 !important; width: 100% !important; }
}

/* --- Responsive player geometry ---------------------------------------- */

/* Do not attempt three squeezed panes in the awkward middle widths. */
@media (min-width: 901px) and (max-width: 1199px) {
  .player-layout,
  .player-layout.has-catalog,
  .player-layout.has-catalog.catalog-expanded {
    width: 100% !important;
    max-width: 1160px !important;
    margin-inline: auto !important;
    grid-template-columns: minmax(0,1fr) 300px !important;
    grid-template-rows: auto auto !important;
    grid-template-areas:
      "video playlist"
      "catalog catalog" !important;
    gap: 12px !important;
    height: auto !important;
  }
  .player-layout .video-column { min-width: 0 !important; width: 100% !important; }
  .player-layout .playlist-panel { min-width: 0 !important; width: 100% !important; }
  .player-layout .catalog-panel:not([hidden]) {
    width: min(760px, 100%) !important;
    max-width: 100% !important;
    justify-self: center !important;
    align-self: start !important;
    height: auto !important;
    max-height: none !important;
  }
  .player-layout #catalogFrame {
    width: 100% !important;
    height: auto !important;
    max-height: min(68dvh, 760px) !important;
    aspect-ratio: 8.5 / 11 !important;
  }
}

@media (min-width: 1200px) {
  .player-layout {
    width: min(2600px, calc(100vw - 28px)) !important;
    max-width: none !important;
    margin-inline: auto !important;
    column-gap: 14px !important;
    row-gap: 9px !important;
    justify-content: center !important;
  }

  .player-layout:not(.has-catalog) {
    grid-template-columns: minmax(560px, var(--player-max-width, 1180px)) minmax(310px, 360px) !important;
    grid-template-areas: "video playlist" !important;
  }

  /* Normal catalog mode: video is the hero, catalog is deliberately narrower,
     and neither side panel is allowed to be taller than video + Now Playing. */
  .player-layout.has-catalog:not(.catalog-expanded) {
    grid-template-columns:
      clamp(300px, 19vw, 430px)
      minmax(600px, var(--player-max-width, 1200px))
      clamp(310px, 18vw, 370px) !important;
    grid-template-areas: "catalog video playlist" !important;
    align-items: start !important;
  }
  .player-layout.has-catalog:not(.catalog-expanded) .video-column {
    width: 100% !important;
    min-width: 0 !important;
  }
  .player-layout.has-catalog:not(.catalog-expanded) .player-stage,
  .player-layout.has-catalog:not(.catalog-expanded) .now-playing-card {
    width: 100% !important;
  }
  .player-layout.has-catalog:not(.catalog-expanded) .catalog-panel,
  .player-layout.has-catalog:not(.catalog-expanded) .playlist-panel {
    width: 100% !important;
    height: min(var(--video-stack-height, 680px), var(--player-row-max-height, 76dvh)) !important;
    max-height: min(var(--video-stack-height, 680px), var(--player-row-max-height, 76dvh)) !important;
    align-self: start !important;
  }
  .player-layout.has-catalog:not(.catalog-expanded) .catalog-panel {
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
  }
  .player-layout.has-catalog:not(.catalog-expanded) .catalog-heading { flex: 0 0 auto !important; }
  .player-layout.has-catalog:not(.catalog-expanded) #catalogFrame {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-height: none !important;
    aspect-ratio: auto !important;
  }
  .player-layout.has-catalog:not(.catalog-expanded) .playlist-scroll {
    min-height: 0 !important;
    overflow-y: auto !important;
  }

  /* Expanded mode: meaningful catalog growth. Playlist always moves beneath
     the video, is EXACTLY the video-column width, and scrolls internally. */
  .player-layout.has-catalog.catalog-expanded {
    width: min(2600px, calc(100vw - 28px)) !important;
    height: var(--player-row-max-height, 76dvh) !important;
    min-height: 520px !important;
    grid-template-columns: minmax(560px, 1.18fr) minmax(520px, .82fr) !important;
    grid-template-rows: auto minmax(145px, 1fr) !important;
    grid-template-areas:
      "catalog video"
      "catalog playlist" !important;
    align-items: stretch !important;
    justify-content: stretch !important;
    column-gap: 14px !important;
    row-gap: 9px !important;
  }
  .player-layout.has-catalog.catalog-expanded .catalog-panel {
    grid-area: catalog !important;
    grid-row: 1 / span 2 !important;
    width: 100% !important;
    height: 100% !important;
    max-height: none !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-self: stretch !important;
  }
  .player-layout.has-catalog.catalog-expanded .catalog-heading { flex: 0 0 auto !important; }
  .player-layout.has-catalog.catalog-expanded #catalogFrame {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-height: none !important;
    aspect-ratio: auto !important;
  }
  .player-layout.has-catalog.catalog-expanded .video-column {
    grid-area: video !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    align-self: start !important;
  }
  .player-layout.has-catalog.catalog-expanded .player-stage,
  .player-layout.has-catalog.catalog-expanded .now-playing-card {
    width: 100% !important;
    max-width: none !important;
  }
  .player-layout.has-catalog.catalog-expanded .playlist-panel {
    grid-area: playlist !important;
    width: 100% !important;
    max-width: none !important;
    height: 100% !important;
    min-height: 145px !important;
    max-height: none !important;
    justify-self: stretch !important;
    align-self: stretch !important;
  }
  .player-layout.has-catalog.catalog-expanded .playlist-scroll {
    min-height: 0 !important;
    overflow-y: auto !important;
  }

  .search-result-page .search-result-banner,
  .search-result-page .consignor-identity,
  .search-result-page .player-layout {
    max-width: min(2200px, calc(100vw - 28px)) !important;
  }
  .search-result-page .player-layout.has-catalog {
    grid-template-columns: clamp(340px, 30vw, 600px) minmax(620px, var(--player-max-width, 1240px)) !important;
    grid-template-areas: "catalog video" !important;
  }
}

/* ========================================================================== 
   Revision 9: true polygon matrix headers + simplified player controls
   ========================================================================== */

html, body { background: #000 !important; }
.site-background {
  background-color: #000 !important;
  background-size: cover !important;
  background-position: center center !important;
}

/* --- Desktop index matrix -------------------------------------------------
   Header/body geometry is now explicit CSS Grid. Each clipped sale tab owns
   the exact same sale index as the body column it terminates above. */
@media (min-width: 901px) {
  .desktop-matrix {
    display: block !important;
    width: var(--matrix-visual-width) !important;
    max-width: calc(100vw - 32px) !important;
    margin-inline: auto !important;
    overflow: visible !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }
  .matrix-grid {
    position: relative;
    width: var(--matrix-visual-width);
    max-width: 100%;
    overflow: visible;
    font-size: .91rem;
  }
  .matrix-header {
    position: relative;
    z-index: 4;
    width: var(--matrix-visual-width);
    height: 198px;
    display: grid;
    grid-template-columns: 230px repeat(var(--sale-count), var(--sale-col)) var(--matrix-slant);
    align-items: stretch;
    overflow: visible;
  }
  .matrix-header::before {
    content: "";
    position: absolute;
    z-index: -2;
    left: 0;
    bottom: 0;
    width: var(--matrix-body-width);
    height: 100%;
    background: rgba(18,21,30,.95);
    border: 1px solid var(--line);
    border-bottom: 0;
    border-radius: 14px 14px 0 0;
  }
  .matrix-corner {
    position: relative;
    z-index: 2;
    min-width: 0;
  }
  .sale-header-slot {
    position: relative;
    z-index: 3;
    min-width: 0;
    height: 100%;
    overflow: visible;
  }
  .sale-header-tab {
    --tab-inner: #242730;
    position: absolute;
    z-index: 1;
    left: 0;
    bottom: 0;
    width: calc(var(--sale-col) + var(--matrix-slant));
    height: 184px;
    display: block;
    color: #dfe3eb;
    text-decoration: none;
    background: #656a76;
    clip-path: polygon(
      0 100%,
      var(--matrix-slant) 0,
      100% 0,
      var(--sale-col) 100%
    );
    filter: drop-shadow(0 1px 0 rgba(255,255,255,.08));
    transition: background .14s ease, filter .14s ease;
  }
  .sale-header-tab::before {
    content: "";
    position: absolute;
    inset: 1px;
    z-index: -1;
    background: linear-gradient(180deg, #292d35, #1d2027);
    clip-path: polygon(
      0 100%,
      calc(var(--matrix-slant) - 1px) 0,
      100% 0,
      calc(var(--sale-col) - 1px) 100%
    );
  }
  .sale-header-tab > span {
    position: absolute;
    left: 14px;
    bottom: 14px;
    width: 196px;
    max-width: 196px;
    transform: rotate(-48deg);
    transform-origin: left bottom;
    white-space: nowrap;
    overflow: visible;
    color: inherit;
    font-size: .74rem;
    font-weight: 850;
    line-height: 1;
    letter-spacing: .005em;
    text-align: left;
    pointer-events: none;
  }
  .sale-header-tab:hover,
  .sale-header-tab.column-hover,
  .sale-header-tab:focus-visible {
    color: #ffe483;
    background: rgba(241,195,74,.96);
    filter: drop-shadow(0 0 13px rgba(241,195,74,.24));
  }
  .sale-header-tab:hover::before,
  .sale-header-tab.column-hover::before,
  .sale-header-tab:focus-visible::before {
    background: linear-gradient(180deg, rgba(89,69,25,.97), rgba(43,35,20,.98));
  }
  .matrix-header-spacer { min-width: 0; }

  .matrix-body {
    width: var(--matrix-body-width);
    overflow: hidden;
    border: 1px solid var(--line);
    border-top: 0;
    border-radius: 0 0 14px 14px;
    background: rgba(12,14,20,.93);
    box-shadow: var(--shadow);
  }
  .matrix-row {
    display: grid;
    width: var(--matrix-body-width);
    grid-template-columns: 230px repeat(var(--sale-count), var(--sale-col));
    min-height: 44px;
    border-bottom: 1px solid rgba(255,255,255,.07);
  }
  .matrix-row:last-child { border-bottom: 0; }
  .matrix-row > * { min-width: 0; }
  .matrix-row:hover > * { background-color: rgba(255,255,255,.04); }
  .matrix-row .consignor-name-cell {
    position: static !important;
    z-index: auto !important;
    width: auto !important;
    min-width: 0 !important;
    display: flex;
    align-items: stretch;
    background: rgba(16,18,26,.97);
    border-right: 1px solid rgba(255,255,255,.04);
  }
  .matrix-row .consignor-name-cell a {
    width: 100%;
    display: flex;
    align-items: center;
    padding: 9px 14px;
    text-decoration: none;
    font-weight: 800;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .matrix-row .count-cell {
    width: auto !important;
    min-width: 0 !important;
    height: auto !important;
    display: grid;
    place-items: center;
    padding: 0 !important;
    transition: background .12s ease, box-shadow .12s ease;
  }
  .matrix-row .count-cell.has-videos a {
    display: grid;
    place-items: center;
    width: 30px;
    height: 29px;
    margin: 0;
    border-radius: 8px;
    background: rgba(255,255,255,.07);
    color: #f0cc68;
    text-decoration: none;
    font-weight: 900;
  }
  .matrix-row .count-cell.column-hover {
    background: rgba(241,195,74,.075) !important;
    box-shadow: inset 1px 0 rgba(241,195,74,.20), inset -1px 0 rgba(241,195,74,.20);
  }
  .index-page .index-hero {
    width: var(--matrix-visual-width, auto) !important;
    max-width: calc(100vw - 32px) !important;
    margin-inline: auto !important;
  }
}

/* --- Player options ------------------------------------------------------ */
.player-options {
  position: absolute;
  z-index: 18;
  right: 10px;
  bottom: 54px;
}
.player-options-toggle {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  padding: 0 0 4px;
  border: 1px solid rgba(255,255,255,.24);
  border-radius: 999px;
  background: rgba(0,0,0,.58);
  color: #fff;
  font-size: 1.35rem;
  font-weight: 900;
  line-height: 1;
  box-shadow: 0 5px 18px rgba(0,0,0,.38);
  backdrop-filter: blur(8px);
}
.player-options-toggle:hover,
.player-options-toggle[aria-expanded="true"] { background: rgba(25,27,34,.90); }
.player-options-menu {
  position: absolute;
  right: 0;
  bottom: 42px;
  width: 142px;
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-radius: 11px;
  background: rgba(16,18,25,.97);
  box-shadow: 0 18px 48px rgba(0,0,0,.60);
  backdrop-filter: blur(12px);
}
.player-options-label {
  padding: 9px 10px 7px;
  color: var(--muted);
  border-bottom: 1px solid rgba(255,255,255,.08);
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: .62rem;
  font-weight: 900;
}
.quality-options { display: grid; padding: 5px; }
.quality-option {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 20px;
  align-items: center;
  gap: 6px;
  padding: 8px 9px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--text);
  text-align: left;
  font-size: .78rem;
  font-weight: 800;
}
.quality-option:hover { background: rgba(255,255,255,.08); }
.quality-option.active { color: #ffe183; background: rgba(241,195,74,.09); }
.quality-check { color: var(--accent-2); text-align: center; }

/* --- Now Playing: information first, one explicit action ---------------- */
.now-playing-card {
  display: grid !important;
  grid-template-columns: minmax(0,1fr) auto !important;
  align-items: center !important;
  gap: 14px !important;
}
.now-playing-copy { min-width: 0 !important; }
.now-playing-meta {
  max-width: 100% !important;
  white-space: nowrap !important;
  overflow: visible !important;
  text-overflow: clip !important;
  font-size: clamp(.70rem, 1.7cqw, .83rem) !important;
}
.player-actions {
  width: auto !important;
  max-width: none !important;
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: flex-end !important;
  overflow: visible !important;
}
.player-actions .download-current {
  width: max-content !important;
  min-width: max-content !important;
  max-width: none !important;
  flex: 0 0 auto !important;
  white-space: nowrap !important;
  overflow: visible !important;
  text-overflow: clip !important;
}
@container video-pane (max-width: 760px) {
  .now-playing-card {
    grid-template-columns: 1fr !important;
    align-items: stretch !important;
    gap: 9px !important;
  }
  .player-actions {
    width: 100% !important;
    justify-content: stretch !important;
  }
  .player-actions .download-current {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    text-align: center !important;
  }
}

/* Autoplay belongs to the playlist and never changes sides. */
.playlist-toolbar {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: flex-start !important;
}
.playlist-sale-control { min-width: 0 !important; flex: 1 1 auto !important; }
.autoplay-switch { margin-left: auto !important; flex: 0 0 auto !important; }
@media (max-width: 540px) {
  .playlist-toolbar { flex-wrap: nowrap !important; }
  .playlist-sale-control { flex-basis: auto !important; }
  .autoplay-switch { margin-left: auto !important; }
}

/* Catalog normal mode ends with the page instead of stretching an iframe into
   gray nothingness. JS computes --catalog-frame-height from the 8.5x11 page. */
#catalogFrame {
  height: var(--catalog-frame-height, 520px) !important;
  flex: 0 0 auto !important;
  background: #fff !important;
}

@media (min-width: 901px) and (max-width: 1199px) {
  .player-layout.has-catalog:not(.catalog-expanded) .catalog-panel:not([hidden]) {
    height: auto !important;
    max-height: none !important;
  }
  .player-layout.has-catalog:not(.catalog-expanded) #catalogFrame {
    height: var(--catalog-frame-height, 620px) !important;
    max-height: none !important;
    aspect-ratio: auto !important;
  }
  .player-layout.has-catalog.catalog-expanded {
    width: min(1180px, calc(100vw - 24px)) !important;
    height: var(--player-row-max-height, 76dvh) !important;
    min-height: 500px !important;
    grid-template-columns: minmax(430px, 1.08fr) minmax(390px, .92fr) !important;
    grid-template-rows: auto minmax(145px, 1fr) !important;
    grid-template-areas:
      "catalog video"
      "catalog playlist" !important;
    gap: 10px !important;
    align-items: stretch !important;
  }
  .player-layout.has-catalog.catalog-expanded .catalog-panel {
    grid-area: catalog !important;
    grid-row: 1 / span 2 !important;
    width: 100% !important;
    height: 100% !important;
    max-height: none !important;
    display: flex !important;
    flex-direction: column !important;
  }
  .player-layout.has-catalog.catalog-expanded .video-column,
  .player-layout.has-catalog.catalog-expanded .player-stage,
  .player-layout.has-catalog.catalog-expanded .now-playing-card,
  .player-layout.has-catalog.catalog-expanded .playlist-panel {
    width: 100% !important;
    max-width: none !important;
  }
  .player-layout.has-catalog.catalog-expanded .playlist-panel {
    grid-area: playlist !important;
    min-height: 145px !important;
    height: 100% !important;
    max-height: none !important;
  }
  .player-layout.has-catalog.catalog-expanded .playlist-scroll {
    min-height: 0 !important;
    overflow-y: auto !important;
  }
}

@media (min-width: 1200px) {
  /* Cohesive dashboard width: no giant 2600px container with fixed tracks
     floating in the middle. Video gets the maximum width permitted by height. */
  .player-layout {
    width: min(calc(var(--player-max-width, 1280px) + 690px), calc(100vw - 28px)) !important;
    max-width: none !important;
    margin-inline: auto !important;
  }
  .player-layout:not(.has-catalog) {
    grid-template-columns: minmax(600px, var(--player-max-width, 1280px)) minmax(310px, 350px) !important;
  }
  .player-layout.has-catalog:not(.catalog-expanded) {
    grid-template-columns: clamp(270px, 16vw, 340px) minmax(620px, var(--player-max-width, 1320px)) clamp(310px, 17vw, 350px) !important;
    grid-template-areas: "catalog video playlist" !important;
  }
  .player-layout.has-catalog:not(.catalog-expanded) .catalog-panel {
    height: auto !important;
    max-height: var(--video-stack-height, 680px) !important;
    display: flex !important;
    flex-direction: column !important;
  }
  .player-layout.has-catalog:not(.catalog-expanded) #catalogFrame {
    height: var(--catalog-frame-height, 520px) !important;
    max-height: none !important;
    flex: 0 0 auto !important;
  }
  .player-layout.has-catalog:not(.catalog-expanded) .playlist-panel {
    height: var(--video-stack-height, 680px) !important;
    max-height: var(--video-stack-height, 680px) !important;
  }

  /* Expansion must look different. Catalog gets a majority column; player is
     deliberately shorter; playlist sits directly below it at IDENTICAL width. */
  .player-layout.has-catalog.catalog-expanded {
    width: min(2500px, calc(100vw - 28px)) !important;
    height: var(--player-row-max-height, 76dvh) !important;
    min-height: 520px !important;
    grid-template-columns: minmax(650px, 1.15fr) minmax(560px, .85fr) !important;
    grid-template-rows: auto minmax(155px, 1fr) !important;
    grid-template-areas:
      "catalog video"
      "catalog playlist" !important;
    column-gap: 14px !important;
    row-gap: 9px !important;
    align-items: stretch !important;
  }
  .player-layout.has-catalog.catalog-expanded .catalog-panel {
    grid-area: catalog !important;
    grid-row: 1 / span 2 !important;
    width: 100% !important;
    height: 100% !important;
    max-height: none !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
  }
  .player-layout.has-catalog.catalog-expanded #catalogFrame {
    height: var(--catalog-frame-height, 620px) !important;
    max-height: none !important;
    flex: 0 0 auto !important;
  }
  .player-layout.has-catalog.catalog-expanded .video-column {
    grid-area: video !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
  }
  .player-layout.has-catalog.catalog-expanded .player-stage,
  .player-layout.has-catalog.catalog-expanded .now-playing-card,
  .player-layout.has-catalog.catalog-expanded .playlist-panel {
    width: 100% !important;
    max-width: none !important;
  }
  .player-layout.has-catalog.catalog-expanded .playlist-panel {
    grid-area: playlist !important;
    height: 100% !important;
    min-height: 155px !important;
    max-height: none !important;
    justify-self: stretch !important;
  }
  .player-layout.has-catalog.catalog-expanded .playlist-scroll {
    min-height: 0 !important;
    overflow-y: auto !important;
  }

  .search-result-page .player-layout.has-catalog {
    width: min(calc(var(--player-max-width, 1320px) + 430px), calc(100vw - 28px)) !important;
    max-width: none !important;
    grid-template-columns: minmax(310px, 390px) minmax(620px, var(--player-max-width, 1320px)) !important;
    grid-template-areas: "catalog video" !important;
  }
  .search-result-page .player-layout.has-catalog .catalog-panel {
    height: auto !important;
  }
}
@media (min-width: 901px) {
  .sale-header-tab::before { z-index: 0 !important; }
  .sale-header-tab > span { z-index: 1 !important; }
}

/* ========================================================================== 
   Revision 10: SVG sale headers + stable player action/layout behavior
   ========================================================================== */

/* --- SVG desktop matrix header ------------------------------------------ */
@media (min-width: 901px) {
  .desktop-matrix {
    width: var(--matrix-visual-width) !important;
    max-width: calc(100vw - 32px) !important;
    overflow: visible !important;
  }
  .matrix-grid {
    width: var(--matrix-visual-width) !important;
    max-width: 100% !important;
    overflow: visible !important;
  }
  .matrix-svg-header {
    width: var(--matrix-visual-width) !important;
    height: var(--matrix-header-height) !important;
    overflow: visible !important;
  }
  .matrix-sale-header-svg {
    display: block;
    width: var(--matrix-visual-width) !important;
    height: var(--matrix-header-height) !important;
    overflow: visible !important;
  }
  .sale-header-link { cursor: pointer; outline: none; }
  .sale-header-polygon {
    fill: #242730;
    stroke: #676d79;
    stroke-width: 1;
    vector-effect: non-scaling-stroke;
    pointer-events: visiblePainted;
    transition: fill .14s ease, stroke .14s ease, filter .14s ease;
  }
  .sale-header-text {
    fill: #dfe3eb;
    font-family: inherit;
    font-weight: 850;
    letter-spacing: .01em;
    pointer-events: none;
    user-select: none;
    transition: fill .14s ease;
  }
  .sale-header-link:hover .sale-header-polygon,
  .sale-header-link.column-hover .sale-header-polygon,
  .sale-header-link:focus-visible .sale-header-polygon {
    fill: rgba(77,61,25,.98);
    stroke: #e8b92f;
    filter: drop-shadow(0 0 10px rgba(241,195,74,.22));
  }
  .sale-header-link:hover .sale-header-text,
  .sale-header-link.column-hover .sale-header-text,
  .sale-header-link:focus-visible .sale-header-text { fill: #ffe485; }

  /* The body begins exactly where the polygon bottoms terminate. */
  .matrix-body {
    margin-top: 0 !important;
    border-top: 1px solid var(--line) !important;
    border-radius: 0 0 14px 14px !important;
  }

  .index-page .index-hero {
    width: var(--matrix-visual-width, auto) !important;
    max-width: calc(100vw - 32px) !important;
    margin-inline: auto !important;
  }
}

/* --- Player actions: Download + optional legacy quality menu ------------ */
.now-playing-card .player-actions {
  display: flex !important;
  width: auto !important;
  max-width: 100% !important;
  align-items: center !important;
  justify-content: flex-end !important;
  flex-wrap: nowrap !important;
  gap: 6px !important;
  overflow: visible !important;
}
.now-playing-card .download-current {
  width: auto !important;
  min-width: max-content !important;
  max-width: 100% !important;
  flex: 0 0 auto !important;
  padding: 7px 10px !important;
  border-radius: 9px !important;
  font-size: .76rem !important;
  line-height: 1.1 !important;
  white-space: nowrap !important;
  overflow: visible !important;
  text-overflow: clip !important;
}
.now-playing-card .player-options {
  position: relative !important;
  z-index: 35 !important;
  right: auto !important;
  bottom: auto !important;
  flex: 0 0 auto !important;
}
.now-playing-card .player-options-toggle {
  width: 31px !important;
  height: 31px !important;
  padding: 0 0 4px !important;
  border-radius: 9px !important;
  background: rgba(255,255,255,.055) !important;
  color: var(--muted) !important;
  font-size: 1.18rem !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}
.now-playing-card .player-options-toggle:hover,
.now-playing-card .player-options-toggle[aria-expanded="true"] {
  color: var(--text) !important;
  background: rgba(255,255,255,.10) !important;
}
.now-playing-card .player-options-menu {
  right: 0 !important;
  bottom: calc(100% + 7px) !important;
  width: 145px !important;
}

/* Metadata is never allowed to wrap. Give it the row first; actions move
   below before stealing enough space to create a second metadata line. */
.now-playing-meta {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
@container video-pane (max-width: 720px) {
  .now-playing-card {
    display: grid !important;
    grid-template-columns: 1fr !important;
    align-items: stretch !important;
    gap: 8px !important;
  }
  .now-playing-card .player-actions {
    width: auto !important;
    justify-content: flex-start !important;
    justify-self: start !important;
  }
  .now-playing-card .download-current {
    width: auto !important;
    min-width: max-content !important;
    max-width: calc(100cqw - 42px) !important;
  }
}
@container video-pane (max-width: 390px) {
  .now-playing-card .download-current {
    padding-inline: 8px !important;
    font-size: .71rem !important;
  }
}
@media (max-width: 540px) {
  .now-playing-meta { white-space: nowrap !important; }
}

/* Autoplay has one permanent conceptual home: upper-right of Playlist. */
.playlist-toolbar {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
}
.playlist-toolbar .autoplay-switch {
  margin-left: auto !important;
  margin-right: 0 !important;
  flex: 0 0 auto !important;
}

/* --- Catalog ------------------------------------------------------------- */
#catalogFrame {
  display: block !important;
  border: 0 !important;
}

/* If the catalog is below the video, Expand is redundant. */
@media (max-width: 1319px) {
  .catalog-expand-button { display: none !important; }
}

/* Intermediate widths are intentionally two-pane. Do not let any earlier
   desktop rule resurrect Catalog | Video | Playlist and crop the side panes. */
@media (min-width: 901px) and (max-width: 1319px) {
  .player-layout,
  .player-layout.has-catalog,
  .player-layout.has-catalog.catalog-expanded {
    display: grid !important;
    width: min(1180px, calc(100vw - 24px)) !important;
    max-width: 100% !important;
    height: auto !important;
    grid-template-columns: minmax(0, 1fr) minmax(275px, 310px) !important;
    grid-template-rows: auto auto !important;
    grid-template-areas:
      "video playlist"
      "catalog catalog" !important;
    gap: 12px !important;
    align-items: start !important;
    overflow: visible !important;
  }
  .player-layout .video-column,
  .player-layout .playlist-panel {
    min-width: 0 !important;
    width: 100% !important;
  }
  .player-layout .catalog-panel:not([hidden]) {
    grid-area: catalog !important;
    width: min(760px, 100%) !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: none !important;
    justify-self: center !important;
    align-self: start !important;
  }
  .player-layout .catalog-panel:not([hidden]) #catalogFrame {
    width: 100% !important;
    height: var(--catalog-frame-height, 620px) !important;
    max-height: none !important;
    flex: 0 0 auto !important;
    aspect-ratio: auto !important;
  }
}

/* Normal wide layout: Catalog is intentionally restrained; Video gets the
   majority of useful space; Playlist stays on the right. */
@media (min-width: 1320px) {
  .player-layout {
    width: min(2520px, calc(100vw - 28px)) !important;
    max-width: none !important;
    margin-inline: auto !important;
    column-gap: 14px !important;
    row-gap: 9px !important;
  }
  .player-layout:not(.has-catalog) {
    grid-template-columns: minmax(620px, 1fr) clamp(300px, 17vw, 360px) !important;
    grid-template-areas: "video playlist" !important;
  }
  .player-layout.has-catalog:not(.catalog-expanded) {
    grid-template-columns:
      clamp(260px, 15vw, 330px)
      minmax(650px, 1fr)
      clamp(300px, 17vw, 360px) !important;
    grid-template-areas: "catalog video playlist" !important;
    align-items: start !important;
  }
  .player-layout.has-catalog:not(.catalog-expanded) .video-column {
    width: min(100%, var(--player-max-width, 1320px)) !important;
    max-width: none !important;
    min-width: 0 !important;
    justify-self: center !important;
  }
  .player-layout.has-catalog:not(.catalog-expanded) .catalog-panel {
    width: 100% !important;
    height: auto !important;
    max-height: var(--video-stack-height, 680px) !important;
    display: flex !important;
    flex-direction: column !important;
    align-self: start !important;
  }
  .player-layout.has-catalog:not(.catalog-expanded) .catalog-panel #catalogFrame {
    width: 100% !important;
    height: var(--catalog-frame-height, 520px) !important;
    max-height: none !important;
    flex: 0 0 auto !important;
    aspect-ratio: auto !important;
  }
  .player-layout.has-catalog:not(.catalog-expanded) .playlist-panel {
    width: 100% !important;
    height: min(var(--video-stack-height, 680px), var(--player-row-max-height, 76dvh)) !important;
    max-height: min(var(--video-stack-height, 680px), var(--player-row-max-height, 76dvh)) !important;
  }

  /* Expanded: catalog earns the extra width. Video shrinks vertically enough
     to reserve a real playlist row underneath; playlist is exactly video width. */
  .player-layout.has-catalog.catalog-expanded {
    width: min(2520px, calc(100vw - 28px)) !important;
    height: var(--player-row-max-height, 76dvh) !important;
    min-height: 520px !important;
    grid-template-columns: minmax(660px, 1.18fr) minmax(560px, .82fr) !important;
    grid-template-rows: auto minmax(155px, 1fr) !important;
    grid-template-areas:
      "catalog video"
      "catalog playlist" !important;
    gap: 10px 14px !important;
    align-items: stretch !important;
  }
  .player-layout.has-catalog.catalog-expanded .catalog-panel {
    grid-area: catalog !important;
    grid-row: 1 / span 2 !important;
    width: 100% !important;
    height: 100% !important;
    max-height: none !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
  }
  .player-layout.has-catalog.catalog-expanded #catalogFrame {
    flex: 1 1 auto !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: auto !important;
  }
  .player-layout.has-catalog.catalog-expanded .video-column {
    grid-area: video !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
  }
  .player-layout.has-catalog.catalog-expanded .playlist-panel {
    grid-area: playlist !important;
    width: 100% !important;
    max-width: none !important;
    height: 100% !important;
    min-height: 155px !important;
    max-height: none !important;
    justify-self: stretch !important;
    align-self: stretch !important;
  }
  .player-layout.has-catalog.catalog-expanded .playlist-scroll {
    min-height: 0 !important;
    overflow-y: auto !important;
  }
}

/* Search-by-name follows the same no-clipping rule. */
@media (min-width: 1320px) {
  .search-result-page .player-layout.has-catalog {
    width: min(1900px, calc(100vw - 28px)) !important;
    grid-template-columns: clamp(300px, 22vw, 430px) minmax(650px, 1fr) !important;
    grid-template-areas: "catalog video" !important;
  }
}

/* ========================================================================== 
   Revision 11: tighter SVG matrix + compact/stable player controls/layout
   ========================================================================== */

/* Matrix text is centered in each SVG parallelogram and rotated parallel to
   its long edge in PHP. The body columns are intentionally denser now. */
@media (min-width: 901px) {
  .sale-header-text {
    font-weight: 900 !important;
    letter-spacing: .005em !important;
  }
  .matrix-row {
    min-height: 39px !important;
  }
  .count-cell {
    min-width: 0 !important;
  }
}

/* The normal legacy quality selector is a compact fallback control. It is
   hidden entirely by JS for HLS/ABR and when only one MP4 rendition exists. */
.now-playing-card .quality-control {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  flex: 0 0 auto !important;
  color: var(--muted) !important;
  font-size: .72rem !important;
  white-space: nowrap !important;
}
.now-playing-card .quality-control[hidden] { display: none !important; }
.now-playing-card .quality-control select {
  min-width: 66px !important;
  padding: 6px 25px 6px 8px !important;
  border: 1px solid var(--line) !important;
  border-radius: 8px !important;
  background: #11141d !important;
  color: var(--text) !important;
  font-size: .74rem !important;
  font-weight: 750 !important;
}

/* Now Playing is information first. Controls never squeeze the metadata into
   a second line; they drop beneath as a unit before that can happen. */
.now-playing-card {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 12px !important;
}
.now-playing-copy { min-width: 0 !important; }
.now-playing-meta {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.now-playing-card .player-actions {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 7px !important;
  width: auto !important;
  max-width: 100% !important;
  min-width: 0 !important;
}
.now-playing-card .download-current {
  width: auto !important;
  min-width: max-content !important;
  max-width: 100% !important;
  padding: 6px 9px !important;
  border-radius: 8px !important;
  font-size: .72rem !important;
  line-height: 1.05 !important;
  white-space: nowrap !important;
  flex: 0 0 auto !important;
}
@container video-pane (max-width: 850px) {
  .now-playing-card {
    grid-template-columns: 1fr !important;
    align-items: stretch !important;
    gap: 8px !important;
  }
  .now-playing-card .player-actions {
    justify-content: flex-start !important;
    justify-self: start !important;
    width: auto !important;
  }
}
@container video-pane (max-width: 430px) {
  .now-playing-card .player-actions {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: auto minmax(0,1fr) !important;
    align-items: end !important;
  }
  .now-playing-card .download-current {
    width: 100% !important;
    min-width: 0 !important;
    text-align: center !important;
  }
}

/* Keep the playlist physically attached to the video. The dashboard width is
   derived from the height-limited 16:9 video plus the two side panes, rather
   than creating an oversized grid track and centering a smaller video inside. */
@media (min-width: 1320px) {
  .player-layout:not(.has-catalog) {
    width: min(calc(var(--player-max-width, 1180px) + clamp(300px, 17vw, 350px) + 14px), calc(100vw - 28px)) !important;
    grid-template-columns: minmax(0, 1fr) clamp(300px, 17vw, 350px) !important;
    grid-template-areas: "video playlist" !important;
    justify-content: stretch !important;
  }
  .player-layout.has-catalog:not(.catalog-expanded) {
    width: min(calc(var(--player-max-width, 1180px) + clamp(260px, 15vw, 330px) + clamp(300px, 17vw, 350px) + 28px), calc(100vw - 28px)) !important;
    grid-template-columns: clamp(260px, 15vw, 330px) minmax(0, 1fr) clamp(300px, 17vw, 350px) !important;
    grid-template-areas: "catalog video playlist" !important;
    justify-content: stretch !important;
  }
  .player-layout.has-catalog:not(.catalog-expanded) .video-column,
  .player-layout:not(.has-catalog) .video-column {
    width: 100% !important;
    max-width: none !important;
    justify-self: stretch !important;
  }
  .player-layout.has-catalog:not(.catalog-expanded) .playlist-panel,
  .player-layout:not(.has-catalog) .playlist-panel {
    justify-self: stretch !important;
    margin-left: 0 !important;
  }

  /* Search-result mode gets the same tightly packed geometry. */
  .search-result-page .player-layout.has-catalog {
    width: min(calc(var(--player-max-width, 1180px) + clamp(300px, 24vw, 470px) + 14px), calc(100vw - 28px)) !important;
    grid-template-columns: clamp(300px, 24vw, 470px) minmax(0, 1fr) !important;
    grid-template-areas: "catalog video" !important;
  }
  .search-result-page .player-layout.has-catalog .video-column {
    width: 100% !important;
    max-width: none !important;
    justify-self: stretch !important;
  }
}

/* Catalog below the video: expansion is intentionally unavailable because it
   would not materially improve the layout at this geometry. */
@media (max-width: 1319px) {
  .catalog-expand-button { display: none !important; }
}

/* ========================================================================== 
   Revision 12: aligned SVG headers + catalog minimums + responsive cleanup
   ========================================================================== */

/* The SVG header and CSS-grid body share the same coordinate system.  Use an
   inset shadow instead of a real body border so the 1px border does not shift
   every body column one pixel to the right of its polygon above. */
@media (min-width: 901px) {
  .matrix-body {
    border: 0 !important;
    box-shadow: inset 0 0 0 1px var(--line), var(--shadow) !important;
  }
  .matrix-sale-header-svg {
    shape-rendering: geometricPrecision;
    text-rendering: geometricPrecision;
  }
  .sale-header-polygon {
    stroke-width: .8 !important;
    stroke-linejoin: round !important;
  }
  .sale-header-text {
    font-weight: 900 !important;
    letter-spacing: .005em !important;
  }
}

/* The sticky video is useful on phones while somebody scrolls a playlist, but
   the Now Playing card must pass BEHIND it rather than sliding over the picture. */
@media (max-width: 900px) {
  .player-stage { z-index: 25 !important; }
  .now-playing-card { z-index: 20 !important; }
}

/* Quality is one compact control.  Older container rules made every action
   child full-width, which could push the word "Quality" away from its select. */
.now-playing-card .quality-control {
  width: auto !important;
  min-width: max-content !important;
  margin: 0 !important;
  justify-content: flex-start !important;
  gap: 5px !important;
}
.now-playing-card .quality-control > span,
.now-playing-card .quality-control > select {
  flex: 0 0 auto !important;
}

/* Normal three-pane mode is only worthwhile when Catalog, Video and Playlist
   can all be useful.  Below 1500px the catalog drops under Video | Playlist
   instead of being squeezed into a postage stamp. */
@media (min-width: 1320px) and (max-width: 1499px) {
  .player-layout,
  .player-layout.has-catalog,
  .player-layout.has-catalog.catalog-expanded {
    width: min(1420px, calc(100vw - 24px)) !important;
    max-width: 100% !important;
    height: auto !important;
    grid-template-columns: minmax(0, 1fr) minmax(285px, 325px) !important;
    grid-template-rows: auto auto !important;
    grid-template-areas:
      "video playlist"
      "catalog catalog" !important;
    gap: 12px !important;
    align-items: start !important;
    overflow: visible !important;
  }
  .player-layout .video-column,
  .player-layout .playlist-panel {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
  }
  .player-layout .catalog-panel:not([hidden]) {
    grid-area: catalog !important;
    width: min(780px, 100%) !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: none !important;
    justify-self: center !important;
  }
  .catalog-expand-button { display: none !important; }
}

/* At true wide-screen sizes, guarantee the catalog a readable normal width.
   The video still remains the hero, but the sale page is no longer allowed to
   collapse to ~250px while hundreds of horizontal pixels sit unused. */
@media (min-width: 1500px) {
  .player-layout.has-catalog:not(.catalog-expanded) {
    width: min(
      calc(var(--player-max-width, 1180px) + clamp(350px, 19vw, 400px) + clamp(300px, 16vw, 345px) + 28px),
      calc(100vw - 28px)
    ) !important;
    grid-template-columns:
      clamp(350px, 19vw, 400px)
      minmax(0, 1fr)
      clamp(300px, 16vw, 345px) !important;
    grid-template-areas: "catalog video playlist" !important;
    justify-content: stretch !important;
  }
  .player-layout.has-catalog:not(.catalog-expanded) .video-column {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    justify-self: stretch !important;
  }
  .player-layout.has-catalog:not(.catalog-expanded) .catalog-panel {
    width: 100% !important;
    min-width: 350px !important;
    max-width: 400px !important;
    justify-self: stretch !important;
  }
  .player-layout.has-catalog:not(.catalog-expanded) .playlist-panel {
    width: 100% !important;
    min-width: 300px !important;
    max-width: 345px !important;
    justify-self: stretch !important;
    margin-left: 0 !important;
  }
  .catalog-expand-button { display: inline-flex !important; }

  /* Name-search pages have no playlist, so the catalog can be a little wider
     while the video still consumes the rest of the useful row. */
  .search-result-page .player-layout.has-catalog {
    width: min(
      calc(var(--player-max-width, 1180px) + clamp(360px, 23vw, 470px) + 14px),
      calc(100vw - 28px)
    ) !important;
    grid-template-columns: clamp(360px, 23vw, 470px) minmax(0, 1fr) !important;
    grid-template-areas: "catalog video" !important;
  }
}

/* The normal one-page PDF panel should end where the page ends. */
.player-layout.has-catalog:not(.catalog-expanded) .catalog-panel {
  overflow: hidden !important;
}

/* ========================================================================== 
   Revision 13: final matrix label alignment + robust desktop breakpoints
   ========================================================================== */

/* Index headings are semantic units. Never split the year from “Consignments”. */
.index-page .index-hero h1 {
  white-space: nowrap !important;
}

/* SVG labels are positioned in PHP on the centerline of each polygon. Keep the
   renderer neutral so the baseline geometry is not distorted by CSS. */
@media (min-width: 901px) {
  .matrix-sale-header-svg {
    shape-rendering: auto !important;
    text-rendering: optimizeLegibility !important;
  }
  .sale-header-text {
    font-weight: 900 !important;
    letter-spacing: .004em !important;
  }
}

/* Administrator-authored sale descriptions may contain a small safe subset of
   HTML (most often a sale-company link). Make rendered links look intentional. */
.sale-result-heading p a,
.playlist-group-details a {
  color: var(--text);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.sale-result-heading p a:hover,
.playlist-group-details a:hover { color: var(--accent); }

/* The one awkward “almost wide enough” range is deliberately two-pane. This
   avoids ever sacrificing or clipping the side panes just to preserve three
   columns. Catalog sits below Video | Playlist and therefore has no Expand. */
@media (min-width: 1320px) and (max-width: 1599px) {
  .player-layout,
  .player-layout.has-catalog,
  .player-layout.has-catalog.catalog-expanded {
    width: min(1540px, calc(100vw - 32px)) !important;
    max-width: 100% !important;
    height: auto !important;
    grid-template-columns: minmax(0, 1fr) minmax(300px, 340px) !important;
    grid-template-rows: auto auto !important;
    grid-template-areas:
      "video playlist"
      "catalog catalog" !important;
    column-gap: 12px !important;
    row-gap: 12px !important;
    align-items: start !important;
    justify-content: stretch !important;
    overflow: visible !important;
  }
  .player-layout .video-column,
  .player-layout .playlist-panel {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    justify-self: stretch !important;
  }
  .player-layout .catalog-panel:not([hidden]) {
    grid-area: catalog !important;
    width: min(820px, 100%) !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: none !important;
    justify-self: center !important;
    align-self: start !important;
  }
  .catalog-expand-button { display: none !important; }
}

/* True wide-screen dashboard. The catalog gets a readable normal width, the
   playlist remains glued to the player, and the video consumes everything in
   between. The layout width never exceeds the page shell. */
@media (min-width: 1600px) {
  .player-layout {
    width: min(2580px, calc(100vw - 36px)) !important;
    max-width: none !important;
    margin-inline: auto !important;
    column-gap: 14px !important;
    row-gap: 9px !important;
    justify-content: stretch !important;
    overflow: visible !important;
  }
  .player-layout:not(.has-catalog) {
    width: min(calc(var(--player-max-width, 1280px) + 350px + 14px), calc(100vw - 36px)) !important;
    grid-template-columns: minmax(0, 1fr) clamp(315px, 15vw, 350px) !important;
    grid-template-areas: "video playlist" !important;
  }
  .player-layout.has-catalog:not(.catalog-expanded) {
    width: min(
      calc(var(--player-max-width, 1280px) + clamp(420px, 20vw, 470px) + clamp(315px, 15vw, 350px) + 28px),
      calc(100vw - 36px)
    ) !important;
    grid-template-columns:
      clamp(420px, 20vw, 470px)
      minmax(0, 1fr)
      clamp(315px, 15vw, 350px) !important;
    grid-template-areas: "catalog video playlist" !important;
    align-items: start !important;
  }
  .player-layout.has-catalog:not(.catalog-expanded) .catalog-panel {
    width: 100% !important;
    min-width: 420px !important;
    max-width: 470px !important;
    height: auto !important;
    max-height: var(--video-stack-height, 700px) !important;
    justify-self: stretch !important;
    align-self: start !important;
  }
  .player-layout.has-catalog:not(.catalog-expanded) #catalogFrame {
    width: 100% !important;
    height: var(--catalog-frame-height, 540px) !important;
    max-height: none !important;
    flex: 0 0 auto !important;
    aspect-ratio: auto !important;
  }
  .player-layout.has-catalog:not(.catalog-expanded) .video-column,
  .player-layout:not(.has-catalog) .video-column {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    justify-self: stretch !important;
  }
  .player-layout.has-catalog:not(.catalog-expanded) .playlist-panel,
  .player-layout:not(.has-catalog) .playlist-panel {
    width: 100% !important;
    min-width: 315px !important;
    max-width: 350px !important;
    justify-self: stretch !important;
    margin-left: 0 !important;
  }
  .catalog-expand-button { display: inline-flex !important; }

  /* Expand is intentionally dramatic: the catalog becomes the dominant pane,
     while Video and Playlist become one equal-width right-hand column. */
  .player-layout.has-catalog.catalog-expanded {
    width: min(2580px, calc(100vw - 36px)) !important;
    height: var(--player-row-max-height, 76dvh) !important;
    min-height: 520px !important;
    grid-template-columns: minmax(760px, 1.30fr) minmax(600px, .70fr) !important;
    grid-template-rows: auto minmax(155px, 1fr) !important;
    grid-template-areas:
      "catalog video"
      "catalog playlist" !important;
    column-gap: 14px !important;
    row-gap: 9px !important;
    align-items: stretch !important;
    justify-content: stretch !important;
  }
  .player-layout.has-catalog.catalog-expanded .catalog-panel {
    grid-area: catalog !important;
    grid-row: 1 / span 2 !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 100% !important;
    max-height: none !important;
    display: flex !important;
    flex-direction: column !important;
    align-self: stretch !important;
  }
  .player-layout.has-catalog.catalog-expanded #catalogFrame {
    flex: 1 1 auto !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: auto !important;
  }
  .player-layout.has-catalog.catalog-expanded .video-column,
  .player-layout.has-catalog.catalog-expanded .playlist-panel {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    justify-self: stretch !important;
  }
  .player-layout.has-catalog.catalog-expanded .video-column {
    grid-area: video !important;
    align-self: start !important;
  }
  .player-layout.has-catalog.catalog-expanded .playlist-panel {
    grid-area: playlist !important;
    height: 100% !important;
    min-height: 155px !important;
    max-height: none !important;
    align-self: stretch !important;
  }
  .player-layout.has-catalog.catalog-expanded .playlist-scroll {
    min-height: 0 !important;
    overflow-y: auto !important;
  }

  /* Name-search pages have no playlist. Give the catalog enough room to read
     without allowing it to dominate the video. */
  .search-result-page .player-layout.has-catalog {
    width: min(calc(var(--player-max-width, 1280px) + clamp(430px, 22vw, 500px) + 14px), calc(100vw - 36px)) !important;
    grid-template-columns: clamp(430px, 22vw, 500px) minmax(0, 1fr) !important;
    grid-template-areas: "catalog video" !important;
  }
}

/* At any geometry where Catalog is below the video, Expand has no useful job. */
@media (max-width: 1599px) {
  .catalog-expand-button { display: none !important; }
}

/* Native-video fullscreen must remain geometrically fixed even while paused
   and while Chromium fades its controls in/out. */
#yearlingVideoPlayer:fullscreen,
#yearlingVideoPlayer:-webkit-full-screen {
  position: fixed !important;
  inset: 0 !important;
  left: 0 !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 100% !important;
  min-height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: none !important;
  object-fit: contain !important;
  object-position: 50% 50% !important;
  background: #000 !important;
}