/* =========================================================================
   Top 400 rankings v2 (Phase 4, Oct 2026). Loads after tokens/base/components,
   pdp-v2.css (filters, segments, footer), market-radar.css and home-v2.css
   (shared table, stats, player cell). Page layout only; classes prefixed rk2-.
   ========================================================================= */
.rk2 [hidden] { display: none !important; }
.rk2 { max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter) var(--space-12); }
.rk2-sec { margin-top: var(--space-12); }
.rk2-sec .hm2-sec__head h2, .rk2-sec .pdp2-head h2 { font-size: var(--text-2xl); letter-spacing: var(--tracking-tight); }

/* Hero: title and share on one line, the lede runs the full width under them */
.rk2-disclose { margin-top: var(--space-3); font-size: var(--text-xs); color: var(--muted-fg); }

/* Filters (search box shared look with /deals-v2) */
.rk2-search { position: relative; display: inline-flex; align-items: center; height: 36px; min-width: 240px; background: var(--background); border: 1px solid var(--border); border-radius: var(--radius); }
.rk2-search:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px var(--ring); }
.rk2-search svg { width: 16px; height: 16px; margin-left: 10px; color: var(--muted-fg); flex: none; }
.rk2-search input { flex: 1; min-width: 0; height: 34px; padding: 0 10px 0 8px; font-size: var(--text-sm); border: 0; background: transparent; outline: none; }
.rk2-filters__row { align-items: center; }
.rk2-clear { height: 32px; font-size: var(--text-xs); }
.rk2-clear[hidden] { display: none; }

/* Table */
.rk2-table-wrap { margin-top: var(--space-4); background: var(--background); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }
.rk2-th button { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.rk2-th button:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; border-radius: 4px; }
.rk2-th[aria-sort] button { color: var(--foreground); font-weight: 600; }
.rk2-th[aria-sort='descending'] button::after { content: '\2193'; }
.rk2-th[aria-sort='ascending'] button::after { content: '\2191'; }
.rk2-table td.rk { width: 56px; }
.rk2-rank { display: block; font: 600 var(--text-sm) var(--font-mono); color: var(--primary-ink); }
.rk2-mov { display: block; margin-top: 2px; font: 600 10px var(--font-mono); }
.rk2-table .hm2-av { width: 36px; height: 36px; }
.rk2-table .hm2-player__t { max-width: 280px; }
.rk2-mlb { display: inline-block; margin-left: 4px; padding: 0 5px; font: 600 10px/16px var(--font-mono); color: var(--foreground); background: var(--muted); border-radius: var(--radius-sm); vertical-align: 1px; }
.rk2-shop .ui-btn { height: 30px; padding: 0 10px; font-size: var(--text-xs); gap: 4px; }
.rk2-shop svg { width: 12px; height: 12px; }
.rk2-noauto { white-space: normal !important; }

/* Movement + badges from js/rankings-row.js (PCRRow) */
.mov-up { color: var(--up); }
.mov-down { color: var(--down); }
.mov-flat, .mov-weak { color: var(--subtle-fg); }
.mov-tag { display: inline-block; white-space: nowrap; padding: 0 3px; font: 600 8px/13px var(--font-mono); letter-spacing: .04em; color: var(--muted-fg); border: 1px solid var(--border); border-radius: var(--radius-sm); }
.mov-tag-new { color: var(--foreground); }
.prospect-badge.badge-draft { display: inline-block; margin: 4px 0 0 48px; padding: 0 6px; font: 600 10px/16px var(--font-mono); color: var(--foreground); background: var(--muted); border-radius: var(--radius-sm); }
.no-first-auto { font: 500 var(--text-xs) var(--font-sans); color: var(--muted-fg); }

/* How it works */
.rk2-about h2 { font-size: var(--text-xl); letter-spacing: var(--tracking-tight); }
.rk2-about .dl2-how { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); margin-top: var(--space-4); }
.rk2-about .dl2-how div { padding: var(--space-5); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.rk2-about .dl2-how b { display: block; font-size: var(--text-sm); margin-bottom: var(--space-1); }
.rk2-about .dl2-how p { font-size: var(--text-sm); color: var(--muted-fg); line-height: var(--leading-body); }

@media (max-width: 1099px) {
  .rk2-table .hide-md { display: none; }
}
@media (max-width: 767px) {
  .rk2-search { flex: 1 1 100%; min-width: 0; order: -1; }
  .rk2-table .hm2-player__t { max-width: 130px !important; }
  .rk2-table td, .rk2-table th { padding-left: 8px; padding-right: 8px; }
  .rk2-table-wrap { margin-left: calc(var(--gutter) * -1); margin-right: calc(var(--gutter) * -1); border-radius: 0; border-left: 0; border-right: 0; }
  .rk2-table td.rk { width: 36px; }
  .rk2-table .hm2-player__t { max-width: 150px; }
  .prospect-badge.badge-draft { margin-left: 42px; }
  .rk2-about .dl2-how { grid-template-columns: 1fr; }
}