/* projections.css — the position-by-position projections table.

   Part of the Teleport stylesheet, split by concern. index.html links these
   in source order; keep that order, the cascade depends on it. This one sits
   after grades.css and before news.css — it borrows .shell, .blank/.empty,
   .btn, .search, .field-select (modals.css) and the whole .board-filters/
   .bf-* chip shell (board.css) from earlier slices, plus .gr-year (grades.css,
   just above this file) and .pct-chip/.face (players.css) for individual
   cells, and adds nothing any of those already own. */

/* ─── Hero ────────────────────────────────────────────────────────────────── */
.proj-hero {
  display: flex; align-items: center; gap: 16px;
  padding: 20px 22px; margin-bottom: 16px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-xl);
  box-shadow: var(--shadow-sm);
}
/* Tinted the same way a conference/team mark is (team-mark.css) rather than
   plain currentColor — this is the one glyph on the page that names the
   whole screen, so it earns a little more weight than an inline icon. */
.proj-hero-mark {
  display: grid; place-items: center; flex-shrink: 0;
  width: 48px; height: 48px; border-radius: var(--r-lg);
  background: var(--accent-light); color: var(--accent-deep);
}
:root[data-theme="dark"] .proj-hero-mark { color: var(--accent); }
.proj-hero-mark svg { width: 25px; height: 25px; }
.proj-hero-title { font-size: 22px; font-weight: 800; letter-spacing: -0.02em; color: var(--label); }
.proj-hero-sub { margin-top: 2px; font-size: 13px; color: var(--label-2); }

/* ─── Toolbar ─────────────────────────────────────────────────────────────── */
.proj-toolbar {
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
  margin-bottom: 12px;
}
.proj-toolbar-spacer { flex: 1 1 auto; }
.proj-position-select { width: auto; min-width: 210px; }
.proj-search { width: 260px; }

/* ─── Filter bar's own bits ──────────────────────────────────────────────────
   The chips, the group, the head — all .bf-* from board.css. Only the
   height/weight range's "min – max" pairing is new here; board.css's own
   numeric filter (Critical Factor Threshold) is a single value, not a range. */
.bf-group--cf .proj-range-sep { color: var(--label-3); font-size: 12px; }
.bf-group--cf .bf-cf-input { width: 64px; }

/* ─── Result strip ────────────────────────────────────────────────────────── */
.proj-result-head {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin-bottom: 10px;
}
.proj-result-count { font-size: 12.5px; font-weight: 600; color: var(--label-2); }
.proj-resolving {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12px; color: var(--label-3);
}

/* ─── The grid ────────────────────────────────────────────────────────────── */
/* One sticky header, one sticky first column — same two-axis reasoning
   grades.css's .grades-grid documents (a `<th>`'s z-index is what lets the
   corner outrank both a plain header cell and a plain row). Unlike the grade
   sheet this table's column SET changes with position (STAT_SETS), so
   there's no fixed column count to hang `table-layout: fixed` widths off of
   the way grades.css does — columns size to their content instead, and the
   scroll container is the safety net once they don't fit. */
.proj-scroll {
  position: relative;
  overflow: auto;
  max-height: calc(100vh - var(--nav-h) - 320px);
  min-height: 280px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  overscroll-behavior: contain;
}
.proj-grid {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
  min-width: 720px;
}

.pr-head {
  position: sticky; top: 0; z-index: 2;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.pr-head--sticky { left: 0; z-index: 4; border-right: 1px solid var(--border); }

.pr-sort-btn {
  display: flex; align-items: center; gap: 5px;
  width: 100%; height: 40px; padding: 0 14px;
  border: 0; background: transparent; cursor: pointer; font-family: inherit;
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--label-3);
  transition: color .12s var(--ease-out);
}
.pr-sort-btn:hover { color: var(--label-2); }
.pr-sort-btn.is-active { color: var(--accent-deep); }
:root[data-theme="dark"] .pr-sort-btn.is-active { color: var(--accent); }
/* Always present, not just on hover/active — a header with no visible sort
   cue anywhere invites a click nobody knows is available. Dim until the
   column is actually the one in force, then it takes the accent colour and
   rotates to point up for ascending (chevD is drawn pointing down). */
.pr-sort-ic { display: inline-flex; flex-shrink: 0; opacity: 0.35; transition: transform .14s var(--ease-out), opacity .12s var(--ease-out); }
.pr-sort-ic svg { width: 11px; height: 11px; display: block; }
.pr-sort-ic.is-active { opacity: 1; }
.pr-sort-ic.is-asc { transform: rotate(180deg); }

.pr-row:hover .pr-cell { background: var(--surface-2); }
/* Padding lives here, on every body cell alike, rather than only on the type-
   specific classes below — found live: a `.proj-grid td { padding: 0 }` reset
   (copied from grades.css, whose own padding lives on an *inner* wrapper div
   inside each `<td>`, never the cell itself) was sitting at higher
   specificity than a bare `.pr-team`/`.pr-num` class and winning, so every
   cell's content sat flush against its own edges and the next cell's. No
   reset here, and the padding is declared on the `<td>` directly, so there is
   nothing left for a later rule to quietly outrank. */
.pr-cell {
  height: 44px; padding: 0 14px;
  background: var(--surface);
  border-bottom: 1px solid var(--border-2);
  font-size: 13px; color: var(--label);
  transition: background .12s var(--ease-out);
  white-space: nowrap;
}
.pr-num { text-align: right; font-variant-numeric: tabular-nums; }
.pr-team, .pr-year { color: var(--label-2); }

.pr-name {
  position: sticky; left: 0; z-index: 1;
  border-right: 1px solid var(--border);
}
.pr-name a {
  display: flex; align-items: center; gap: 10px;
  height: 100%; text-decoration: none; color: inherit;
}
.pr-name .face { --face-size: 28px; flex-shrink: 0; }
.pr-name-text {
  font-weight: 650; color: var(--label);
  overflow: hidden; text-overflow: ellipsis;
}
.pr-name a:hover .pr-name-text { color: var(--accent); text-decoration: underline; }
.pr-jersey { flex-shrink: 0; font-size: 11px; font-weight: 700; color: var(--label-3); font-variant-numeric: tabular-nums; }