/* ==========================================================================
   Revision 17 — search-result containment + smoother SVG matrix separators
   ========================================================================== */

/* Matrix header polygons provide the hit area and fill. Their shared borders
   are drawn once by a single SVG path instead of twice by adjacent polygons.
   Besides looking cleaner, this avoids the darker/stair-stepped double-stroke
   artifacts that are especially noticeable on diagonal lines at some zooms. */
@media (min-width: 901px) {
  .sale-header-polygon {
    stroke: transparent !important;
    stroke-width: 1.4 !important;
    shape-rendering: auto !important;
  }

  .matrix-header-lines {
    fill: none;
    stroke: rgba(170, 178, 194, .48);
    stroke-width: 1.2;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
    shape-rendering: auto;
    pointer-events: none;
    opacity: .92;
    filter: drop-shadow(0 0 .22px rgba(255,255,255,.18));
  }

  .sale-header-link:hover .sale-header-polygon,
  .sale-header-link.column-hover .sale-header-polygon,
  .sale-header-link:focus-visible .sale-header-polygon {
    stroke: #e8b92f !important;
    stroke-width: 1.45 !important;
  }
}

/* Search results have no playlist, and legacy rules in main.css still carried
   minimum widths for catalog panes from older three-column experiments. At a
   particular width those minimums could be wider than the CSS-grid catalog
   track, causing the entire catalog panel to intrude beneath the video. Make
   this two-column geometry self-contained and allow neither child to exceed
   the track it actually owns. */
@media (min-width: 901px) {
  body.search-result-page.player-page .player-layout.layout-search-split {
    display: grid !important;
    grid-template-columns: minmax(0, var(--v14-catalog-width, 410px)) minmax(0, 1fr) !important;
    grid-template-areas: "catalog video" !important;
    column-gap: 12px !important;
    row-gap: 0 !important;
    width: min(var(--v14-layout-width, 1700px), 100%) !important;
    max-width: 100% !important;
    overflow: visible !important;
    align-items: start !important;
  }

  body.search-result-page.player-page .player-layout.layout-search-split .catalog-panel,
  body.search-result-page.player-page .player-layout.layout-search-split .catalog-viewer,
  body.search-result-page.player-page .player-layout.layout-search-split .video-column,
  body.search-result-page.player-page .player-layout.layout-search-split .player-stage,
  body.search-result-page.player-page .player-layout.layout-search-split .now-playing-card {
    box-sizing: border-box !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  body.search-result-page.player-page .player-layout.layout-search-split .catalog-panel {
    grid-area: catalog !important;
    width: 100% !important;
    justify-self: stretch !important;
    overflow: hidden !important;
    contain: paint;
  }

  body.search-result-page.player-page .player-layout.layout-search-split .catalog-viewer {
    width: 100% !important;
    overflow-x: hidden !important;
    contain: paint;
  }

  body.search-result-page.player-page .player-layout.layout-search-split #catalogCanvas {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
  }

  body.search-result-page.player-page .player-layout.layout-search-split .video-column {
    grid-area: video !important;
    width: 100% !important;
    justify-self: stretch !important;
    overflow: hidden !important;
  }

  /* Expanded search mode follows the same hard track containment; only the
     requested catalog track width changes. */
  body.search-result-page.player-page .player-layout.layout-search-split.catalog-expanded {
    grid-template-columns: minmax(0, var(--v14-expanded-catalog-width, 650px)) minmax(0, 1fr) !important;
    width: min(var(--v14-expanded-layout-width, 1850px), 100%) !important;
  }
}