/* Player Ranking spreadsheet — dense table, sortable columns,
   highlight column for the active archetype lens. */

.ranking-layout {
  /* 2026-05-19: same "wrap" pattern as the team-builder layout —
     single-column grid with minmax(0, 1fr) so the layout track stops
     growing to fit the table's intrinsic min-width: 160em. The
     .ranking-table-wrap inside scrolls horizontally instead of pushing
     the page wider than the viewport. */
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  padding: 1.2rem 1.5rem 2rem;
}

.ranking-controls {
  margin-bottom: 1rem;
}
.ranking-controls-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 0.4rem;
}
.ranking-controls-row input[type="text"] {
  flex: 0 1 320px;
  font-size: 1rem;
  padding: 0.45rem 0.75rem;
}
.ranking-toggle,
.ranking-archetype {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.92rem;
  color: var(--ink-soft);
}
.ranking-toggle span,
.ranking-archetype span {
  color: var(--ink-soft);
}
.ranking-archetype select {
  padding: 0.3rem 0.5rem;
  font-size: 0.95rem;
}
.ranking-count {
  margin-left: auto;
  font-style: italic;
  color: var(--ink-soft);
  font-size: 0.92rem;
}
.ranking-controls .hint {
  margin: 0.2rem 0;
  font-size: 0.82rem;
  color: var(--ink-soft);
  font-style: italic;
}

/* Table */
.ranking-table-wrap {
  /* Explicit overflow-x for the wrap pattern (was `overflow: auto` which
     covered both axes — kept here as the same effective behavior).
     Sticky-positioned thead works inside this container. */
  overflow-x: auto;
  overflow-y: auto;
  border: 1px solid var(--rule);
  border-radius: 6px;
  max-height: calc(100vh - 250px);
}
.ranking-table {
  width: 100%;
  /* 2026-05-18: min-width forces the table to its natural sum-of-columns
     width when the column set exceeds the panel — wrapper's overflow-x:
     auto kicks in and the table scrolls horizontally instead of squeezing
     ~30 columns into the panel width. Bumped alongside the master-parity
     extension (REL/Pure $/Yahoo $/Role/Vol Wt/Top Build + default-on
     letter grades). */
  min-width: 160em;
  border-collapse: collapse;
  font-size: 0.88rem;
  font-family: var(--serif-body, "EB Garamond", Georgia, serif);
}
.ranking-table thead th {
  position: sticky;
  top: 0;
  background: rgba(195, 139, 227, 0.12);
  border-bottom: 2px solid var(--accent);
  padding: 0.5rem 0.6rem;
  text-align: left;
  font-weight: 600;
  letter-spacing: 0.04em;
  font-size: 0.78rem;
  text-transform: uppercase;
  color: #C38BE3;
  white-space: nowrap;
  z-index: 2;
}
.ranking-table thead th.right { text-align: right; }
.ranking-table thead th.muted { color: var(--ink-soft); font-weight: 500; }
.ranking-table thead th.highlight {
  background: rgba(195, 139, 227, 0.12);
  color: #C38BE3;
}
.ranking-table thead th.sortable {
  cursor: pointer;
  user-select: none;
}
.ranking-table thead th.sortable:hover {
  background: var(--light-accent);
}
.ranking-table thead th.sort-asc::after  { content: "  ▲"; font-size: 0.7em; color: var(--dark-accent); }
.ranking-table thead th.sort-desc::after { content: "  ▼"; font-size: 0.7em; color: var(--dark-accent); }

.ranking-table tbody td {
  padding: 0.35rem 0.6rem;
  border-bottom: 1px solid var(--rule);
  white-space: nowrap;
  background: rgba(195, 139, 227, 0.10);
  color: #C38BE3;
}
.ranking-table tbody td.right { text-align: right; }
.ranking-table tbody td.muted { color: var(--ink-soft); font-size: 0.85em; }
.ranking-table tbody td.highlight {
  background: rgba(195, 139, 227, 0.10);
  font-weight: 600;
  color: #C38BE3;
}
.ranking-table tbody tr:hover td {
  background: var(--white);
  filter: brightness(0.97);
}
.ranking-table tbody tr.drafted td {
  opacity: 0.45;
  text-decoration: line-through;
  text-decoration-color: var(--coral);
}
.ranking-table tbody tr.drafted td.highlight {
  opacity: 0.55;
}

/* Injury status color coding (Yahoo-driven). Cell text is the short
   code; the longer Yahoo note (status_full / injury_note) shows on hover
   via the title attribute set in JS. */
.ranking-table tbody td[data-injury] {
  font-weight: 600;
  font-style: normal;
  letter-spacing: 0.04em;
  text-align: left;
}
.ranking-table tbody td[data-injury="DTD"],
.ranking-table tbody td[data-injury="GTD"]   { color: #c97a00; } /* amber */
.ranking-table tbody td[data-injury="O"],
.ranking-table tbody td[data-injury="OUT"]   { color: var(--coral); }
.ranking-table tbody td[data-injury="INJ"],
.ranking-table tbody td[data-injury="IL"],
.ranking-table tbody td[data-injury="IR"],
.ranking-table tbody td[data-injury="PUP"]   { color: var(--coral); background: rgba(240, 82, 61, 0.08); }
.ranking-table tbody td[data-injury="SUSP"],
.ranking-table tbody td[data-injury="NA"]    { color: var(--ink-soft); font-style: italic; }

/* ── Player profile modal ──────────────────────────── */

.player-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(12, 13, 13, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 2rem;
  animation: yahoo-toast-in 0.18s ease-out;
}
.player-modal {
  background: var(--bg-inset);
  color: var(--text-primary);
  border: 1px solid var(--accent);
  border-radius: 8px;
  max-width: 720px;
  width: 100%;
  max-height: 88vh;
  overflow-y: auto;
  padding: 1.4rem 1.6rem;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
}
.player-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  border-bottom: 1px solid var(--rule);
  padding-bottom: 0.8rem;
  margin-bottom: 1rem;
}
.player-modal-name {
  margin: 0 0 0.3rem;
  font-family: var(--serif-head);
  font-size: 1.55rem;
}
.player-modal-meta {
  font-style: italic;
  color: var(--ink-soft);
  font-size: 0.9rem;
}
.player-modal-injury {
  display: inline-block;
  margin-top: 0.4rem;
  padding: 0.2rem 0.55rem;
  border-radius: 4px;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
}
.player-modal-injury[data-injury="DTD"],
.player-modal-injury[data-injury="GTD"]    { background: #fff1d4; color: #c97a00; }
.player-modal-injury[data-injury="O"],
.player-modal-injury[data-injury="OUT"]    { background: rgba(240, 82, 61, 0.15); color: var(--coral); }
.player-modal-injury[data-injury="INJ"],
.player-modal-injury[data-injury="IL"],
.player-modal-injury[data-injury="IR"],
.player-modal-injury[data-injury="PUP"]    { background: rgba(240, 82, 61, 0.18); color: var(--coral); }
.player-modal-close {
  background: none;
  border: none;
  font-size: 1.6rem;
  font-family: var(--serif-head);
  color: var(--ink-soft);
  cursor: pointer;
  padding: 0 0.4rem;
  line-height: 1;
}
.player-modal-close:hover { color: var(--coral); }

.player-modal-section {
  margin-bottom: 1.4rem;
}
.player-modal-section h3 {
  margin: 0 0 0.5rem;
  font-family: var(--serif-head);
  font-size: 1.05rem;
  text-transform: lowercase;
  letter-spacing: 0.05em;
  color: var(--ink-soft);
}

.player-modal-archetypes,
.player-modal-stats {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}
.player-modal-archetypes thead th,
.player-modal-stats thead th {
  text-align: left;
  padding: 0.35rem 0.5rem;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
  border-bottom: 1px solid var(--rule);
}
.player-modal-archetypes tbody td,
.player-modal-stats tbody td {
  padding: 0.32rem 0.5rem;
  border-bottom: 1px solid var(--rule);
}
.player-modal-archetypes tbody td.right,
.player-modal-stats tbody td.right { text-align: right; }
.player-modal-archetypes tbody tr[data-strength="anchor"] td:first-child {
  color: var(--magenta); font-weight: 600;
}
.player-modal-archetypes tbody tr[data-strength="strong"] td:first-child {
  color: var(--gold); font-weight: 500;
}
.player-modal-archetypes tbody tr[data-strength="anti"] td:first-child {
  color: var(--coral);
}
/* All remaining build-strength rows (neutral/weak/etc) inherit modal text
   color — readable on the new --bg-inset purple. 5.11 fix: previously they
   were invisible because text inherited cream on cream-background. */
.player-modal-archetypes tbody td { color: var(--text-primary); }
.player-modal-archetypes tbody tr[data-strength="anchor"] td:first-child,
.player-modal-archetypes tbody tr[data-strength="strong"] td:first-child,
.player-modal-archetypes tbody tr[data-strength="anti"] td:first-child {
  /* These three override the inherited color above — no change needed */
}

.player-modal-loading {
  font-style: italic;
  color: var(--ink-soft);
  font-size: 0.85rem;
  margin: 0.4rem 0 0;
}
.player-modal-loading.error {
  color: var(--coral);
}

/* Compact thin scrollbar inside the table */
.ranking-table-wrap::-webkit-scrollbar { width: 10px; height: 10px; }
.ranking-table-wrap::-webkit-scrollbar-track { background: var(--white); }
.ranking-table-wrap::-webkit-scrollbar-thumb {
  background: var(--accent);
  border-radius: 4px;
}

/* Pure $ vs Ev $ disagreement explainer — always-on small panel
   between the controls row and the table. Reads as a glanceable
   key when the user spots a $62 vs $4 row and wants to know why. */
.pure-ev-callout {
  margin: 0 0 1rem;
  padding: 0.7rem 1rem;
  border: 1px solid var(--accent);
  border-left: 3px solid var(--accent);
  background: var(--white);
  border-radius: 4px;
  font-size: 0.85rem;
  color: var(--ink);
  max-width: 64rem;
}
.pure-ev-callout-title {
  font-weight: 600;
  margin-bottom: 0.4rem;
  color: var(--ink);
  font-size: 0.92rem;
}
.pure-ev-callout-list {
  margin: 0 0 0.45rem;
  padding-left: 1.1rem;
  line-height: 1.5;
}
.pure-ev-callout-list li { margin-bottom: 0.1rem; }
.pure-ev-callout-list strong { color: var(--ink); }
.pure-ev-callout-list em { color: var(--ink-soft); font-style: italic; }
.pure-ev-callout-hint {
  margin: 0;
  font-size: 0.8rem;
  color: var(--ink-soft);
  font-style: italic;
}