/* ==========================================================================
   WAIVER WIRE
   Requires a synced league (Team Hub). No-league prompt -> ranked,
   filterable available-player list. Tokens only, no new colors. Several
   rules here (.tool-header, .lineup-row, filter buttons) are deliberate
   duplicates of the same rules elsewhere — every tool page on this site
   is a self-contained CSS file (only tokens.css/base.css are actually
   shared), so that's the existing convention, not an oversight.
   ========================================================================== */

.tool-header {
  padding: var(--space-12) 0 var(--space-8);
  border-bottom: var(--border-hair);
}
.tool-header h1 { font-size: var(--text-3xl); margin-top: var(--space-3); }
.tool-header p { color: var(--text-400); max-width: 60ch; margin-top: var(--space-3); }

/* ---- No league synced yet ---- */
.waiver-empty-state {
  padding: var(--space-16) 0;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
}
.waiver-empty-state p { color: var(--text-400); max-width: 50ch; }

/* ---- Ranked list ---- */
.waiver-view { padding: var(--space-8) 0 var(--space-16); }
.waiver-header { margin-bottom: var(--space-6); }
.waiver-header h2 { font-size: var(--text-xl); }
.roster-meta {
  font-family: var(--font-data);
  font-size: var(--text-xs);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-400);
  margin-top: var(--space-2);
}

/* Button group, not a native <select> -- same reasoning as every other
   filter/format control on this site (see Team Hub's format selector). */
.position-filter {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-6);
}
.filter-btn {
  background: var(--ink-800);
  border: 1px solid var(--ink-600);
  color: var(--text-300);
  padding: 0.45rem 0.9rem;
  border-radius: 999px;
  font-family: var(--font-data);
  font-size: var(--text-xs);
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: border-color var(--dur-fast), color var(--dur-fast), background var(--dur-fast);
}
.filter-btn:hover { border-color: var(--lime-500); color: var(--lime-500); }
.filter-btn-active {
  background: var(--lime-500-15);
  border-color: var(--lime-500);
  color: var(--lime-500);
}

.waiver-list { display: flex; flex-direction: column; gap: var(--space-2); }
.waiver-empty { color: var(--text-600); font-size: var(--text-sm); padding: var(--space-6) 0; text-align: center; }

/* ---- One ranked row ----
   Top line (name/meta/score) is the same rhythm as Team Hub's
   .lineup-row rows; below that, an optional tags row (trending / fills-
   a-need badges -- only rendered when there's something to show, see
   waiver-wire.js) and always a one-line "why add" caption. */
.waiver-row {
  padding: var(--space-3) var(--space-4);
  background: var(--ink-900);
  border: var(--border-hair);
  border-radius: var(--radius-sm);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.waiver-row-top {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: var(--space-4);
}
.waiver-row-top .roster-row-name { font-family: var(--font-display); font-size: var(--text-base); text-transform: uppercase; }
.waiver-row-top .roster-row-meta { font-family: var(--font-data); font-size: var(--text-xs); color: var(--text-400); white-space: nowrap; }
.lineup-row-score {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  color: var(--lime-500);
  white-space: nowrap;
}
.lineup-row-score-suffix { font-family: var(--font-data); font-size: var(--text-xs); font-weight: 400; color: var(--text-600); margin-left: 0.15em; }

.waiver-tags { display: flex; gap: var(--space-2); flex-wrap: wrap; }
/* Own copy of the badge-color convention used elsewhere (lime = the
   "positive/highlighted" signal, matching .badge-start's language) --
   trending and need-fill are both positive signals here, just different
   reasons, so trending gets the lime treatment and need-fill a more
   neutral outline so the two read as distinct at a glance. */
.badge-trending { color: var(--lime-500); border-color: var(--lime-500-35); background: var(--lime-500-15); }
.badge-need { color: var(--text-100); border-color: var(--ink-600); }
/* Real Sleeper injury_status flag (see loadPlayers() in sleeper.js) --
   reuses --grade-f, this site's existing "bad" color from the WINNR
   Score grade spectrum, own copy per this file's self-contained-CSS
   convention (same treatment as start-sit.css's .badge-injured). */
.badge-injured { color: var(--grade-f); border-color: var(--grade-f); background: transparent; }

.waiver-why { font-family: var(--font-body); font-size: var(--text-xs); color: var(--text-600); }

@media (max-width: 560px) {
  /* Single explicit column, every child forced to span it -- was a
     partial override (name+score sharing row 1, meta alone on row 2 via
     grid-column:1/-1) that relies on CSS Grid's auto-placement filling
     the gap next to name with score. That's real, subtle behavior this
     environment has no way to render and visually confirm, so rather
     than trust it, every child now gets an explicit full-width span:
     deterministic top-to-bottom stacking regardless of how many
     children exist. */
  .waiver-row-top {
    grid-template-columns: 1fr;
    row-gap: var(--space-1);
  }
  .waiver-row-top > * { grid-column: 1 / -1; }
}