/* /search (Oct 2026): big search box, player matches, deal-type switch.
   Tiles, filters and picks reuse pdp-v2.css + deals-v2.css. */
.sx-box { display: flex; align-items: center; gap: var(--space-2); margin-top: var(--space-6); padding: 6px 6px 6px var(--space-4); background: var(--background); border: 1px solid var(--border-strong, var(--border)); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm, none); }
.sx-box:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px var(--ring); }
.sx-box > svg { flex: none; width: 20px; height: 20px; color: var(--muted-fg); }
.sx-box input { flex: 1; min-width: 0; height: 44px; border: 0; background: transparent; font-size: var(--text-lg); color: var(--foreground); }
.sx-box input:focus { outline: none; }
.sx-box .ui-btn { height: 44px; padding: 0 var(--space-5); }

.sx-players { margin-top: var(--space-8); }
.sx-players__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-3); }
.sx-player { display: flex; align-items: center; gap: var(--space-3); min-width: 0; padding: var(--space-3) var(--space-4); background: var(--background); border: 1px solid var(--border); border-radius: var(--radius-lg); color: inherit; text-decoration: none; transition: border-color var(--duration) var(--ease), box-shadow var(--duration) var(--ease); }
.sx-player:hover { border-color: var(--border-strong); box-shadow: var(--shadow-lg); }
.sx-player__txt { display: flex; flex-direction: column; min-width: 0; }
.sx-player__txt b { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sx-player__txt small { font-size: var(--text-xs); color: var(--muted-fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sx-player__rank { margin-left: auto; font: 600 var(--text-sm) var(--font-mono); color: var(--primary); }
.sx-player .ui-badge { margin-left: auto; }

.sx .dl2-picks { margin-top: var(--space-8); }
#sxResults { margin-top: var(--space-10); }
.sx-deal .ui-segmented button { font-family: var(--font-sans); font-size: var(--text-sm); height: 32px; }
#sxGrid.is-loading { opacity: .5; transition: opacity .15s; }

@media (max-width: 1099px) { .sx-players__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px) {
  .sx-box { padding-left: var(--space-3); }
  .sx-box input { font-size: var(--text-base); height: 40px; }
  .sx-box .ui-btn { height: 40px; padding: 0 var(--space-4); }
  .sx-players__grid { grid-template-columns: minmax(0, 1fr); }
  .sx-deal { order: 3; flex: 1 1 100%; }
  .sx-deal .ui-segmented { flex: 1; display: flex; }
  .sx-deal .ui-segmented button { flex: 1; }
}
/* search box sits inside the results section, between the heading and Deal type */
#sxResults .sx-box { margin: var(--space-4) 0 var(--space-4); }
.sx .pcr-kpis { margin-top: var(--space-6); }
#sxResults .sx-players { margin: 0 0 var(--space-6); }
.sx-players h3 { font-size: var(--text-lg); letter-spacing: var(--tracking-tight); }
/* Keep the page from shifting sideways when results get short (scrollbar
   appearing/disappearing) or the grid empties between loads. */
html { scrollbar-gutter: stable; }
#sxGrid { min-height: 420px; }
/* Replace the browser's blue clear "x" with one in the site's grey. */
.sx-box input::-webkit-search-cancel-button {
  -webkit-appearance: none; appearance: none; width: 16px; height: 16px; margin-right: 4px; cursor: pointer;
  background: var(--muted-fg);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E") center / contain no-repeat;
}
.sx-box input::-webkit-search-cancel-button:hover { background: var(--foreground); }
/* Top deals rail reserves its height while loading so nothing below it jumps. */
#dl2Picks[hidden] { display: block !important; visibility: hidden; min-height: 210px; }
#sxResults .sx-players { margin: var(--space-4) 0 var(--space-6); }