/* ══════════════════════════════════════════════════════════════════
   pick_matrix.css — R4c-continued Slice 3 pick matrix styles.
   Completely isolated from styles.css — no shared selectors.
   All rules prefixed with .pm-, .g-, or .pick-matrix- to avoid conflicts.

   Class contract (set by schedule.js):
     .pm-table                     → outer table
     .pm-header-row                → angled name header row
     .pm-h-{game,player,filler,…} → header cells
     .g-row-{away,home}            → team rows within a game
     .g-td-{abbrev,name,…}         → sticky left-side info cells
     .pm-td                        → picker column cells (circles)
     .pm-col-mine                  → column belongs to logged-in user
     .pm-circle / .pm-picked / .pm-correct / .pm-wrong / .pm-clickable
                                    → per-circle states
     .pm-circle-filler             → hollow filler columns
     .pm-unpick-preview            → hover on _me's picked circle
     .pm-empty                     → "No games scheduled" state

   Adapted (not verbatim) from v1-styles.css lines 874-1237. Not ported:
   .g-flag, .g-venue-city, .g-abbrev[data-outcome="DRAW"], .pm-fade-mask,
   .g-status-warmup, tennis set-score overlay rules.

   .pm-scroller ported here (2026-09-01) after human-player expansion
   required horizontal scroll — v2 rebuild originally dropped it when
   10 personas was the ceiling. Fade-mask itself was display:none in v1
   (visual fade lives on the sticky .pm-h-gap gradient); not re-added.
══════════════════════════════════════════════════════════════════ */

/* ── Outer wrap ──────────────────────────────────────────────── */
.pick-matrix-wrap { width: 100%; }
#pick-matrix      { position: relative; }

/* ── Scroll container ─────────────────────────────────────────
   Wraps .pm-table. Horizontal scroll when total column count
   exceeds viewport width (esp. as human players are added on top
   of the 10 personas). Scrollbar hidden — the fade gradient on
   the sticky .pm-h-gap column signals overflow visually, and
   users can drag anywhere on empty scroller space to pan.
   isolation:isolate keeps the sticky columns' stacking context
   independent from anything outside the scroller.
   Ported from v1-styles.css lines 1152-1162.
──────────────────────────────────────────────────────────────── */
.pm-scroller {
  width: 100%;
  overflow-x: auto;
  overflow-y: visible;
  scrollbar-width: none;        /* Firefox */
  position: relative;
  cursor: grab;
  isolation: isolate;
}
.pm-scroller::-webkit-scrollbar { display: none; }  /* Chrome/Safari */
.pm-scroller.pm-dragging { cursor: grabbing; }

/* ── Table structure ─────────────────────────────────────────── */
.pm-table {
  border-collapse: separate;   /* not collapse — per-row borders render reliably */
  border-spacing: 0;
  table-layout: fixed;          /* colgroup widths are authoritative */
  width: max-content;
  /* No min-width: 100% — with table-layout: fixed, stretching the table
     to fill container distributes extra width across columns unevenly,
     breaking the declared sticky left-offsets on .g-td-status / .g-td-pct
     when the natural table width is less than container width (e.g. 10
     player columns @ 43px + 490px sticky area = 920 < 940 usable). Table
     sizes to max-content instead; narrow tables leave right-edge
     whitespace inside .pm-scroller rather than mis-stretching. See
     handoff 2026-09-02 for the diagnosis. */
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 400;
}
.pm-table td, .pm-table th { padding: 0; vertical-align: middle; }

.g-team-line { min-height: 22px; }

/* Signed-in user's column: subtle off-white background across body + head. */
.pm-table tbody .pm-col-mine,
.pm-table thead .pm-col-mine {
  background: var(--off-white) !important;
}

/* Row spacing — tight pair within a game; grey rule between games.
   Widths keyed off explicit .g-row-away / .g-row-home in the markup. */
.pm-table tbody td {
  padding-top: 3px;
  padding-bottom: 3px;
  line-height: 1;
  transition: background-color 0.15s ease;
}

/* Away (first) row of each game: extra space above to separate from prior game.
   9px matches leaderboard row padding for unified vertical rhythm. */
.pm-table tbody tr.g-row-away td            { padding-top: 9px; }
.pm-table tbody tr:first-child td           { padding-top: 9px; }

/* Home (second) row: separating rule below + matching bottom space. */
.pm-table tbody tr.g-row-home td {
  padding-bottom: 9px;
  border-bottom: 1px solid #e2e2e2;
}

/* ── Sticky left-side info columns ───────────────────────────────
   All 7 game-info columns must be sticky as a chain — a gap would
   cause columns to slide away when the picker section scrolls. Widths
   and cumulative left-offsets are duplicated in schedule.js's colgroup;
   the two must agree. Cumulative left offsets:
     abbrev=0, name=65, record=175, score=229, status=272, pct=344, gap=432.
──────────────────────────────────────────────────────────────── */
.g-td-abbrev,
.g-td-name,
.g-td-record,
.g-td-score,
.g-td-status,
.g-td-pct,
.g-td-gap {
  position: sticky;
  background: var(--white);
  z-index: 2;
  background-clip: padding-box;
  overflow: hidden;             /* hard-clamp to colgroup width */
}
.g-td-abbrev  { width: 65px;  white-space: nowrap; vertical-align: bottom; left: 0px;   }
.g-td-name    { width: 110px; white-space: nowrap; vertical-align: bottom; left: 65px;  }
.g-td-record  { width: 54px;  white-space: nowrap; font-variant-numeric: tabular-nums; left: 175px; }
.g-td-score   { width: 43px;  text-align: right;   white-space: nowrap; left: 229px; }
.g-td-status  { width: 100px; text-align: right;   white-space: nowrap; left: 272px; }
.g-td-pct     { width: 88px;  white-space: nowrap; text-align: right;   left: 372px; }
.g-td-gap     { width: 30px;  left: 460px; }

/* ── Player columns (circles) ────────────────────────────────── */
.pm-td, .pm-h-player {
  z-index: 1;
  width: 43px;              /* circle column pitch */
  text-align: center;
}

.pm-circle {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 1px solid #d8d8d8;      /* hollow light-grey = unpicked */
  background: transparent;
  box-sizing: border-box;
  vertical-align: middle;
}

/* Picked states — filled circles, border matches fill (no visible ring). */
.pm-circle.pm-picked   { background: #BCBCBC; border-color: #BCBCBC; }
.pm-circle.pm-correct  { background: #7FA8D9; border-color: #7FA8D9; }
.pm-circle.pm-wrong    { background: #E89A82; border-color: #E89A82; }

/* Cursor: full cell is the hit area when clickable. */
.pm-circle.pm-clickable         { cursor: pointer; }
.pm-td:has(.pm-clickable)       { cursor: pointer; }

/* Hover on _me's own picked circle: darker border + slight dim signal
   "click to unpick". Only applied by _previewHover in schedule.js when
   the hovered outcome equals the stored pick. */
.pm-circle.pm-unpick-preview {
  background: #BCBCBC !important;
  border-color: #666 !important;
  opacity: 0.6;
}

/* Filler placeholders — hollow, lighter stroke so they recede vs real
   unpicked circles. */
.pm-circle-filler { border-color: #e8e8e8; }

/* ── Info cell typography ────────────────────────────────────── */
.g-abbrev {
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 400;
  text-align: left;
  line-height: 1;
}

.g-fullname {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--black);
  white-space: nowrap;
  display: block;
  max-width: 110px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.g-record {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.02em;
  color: var(--black);
  white-space: nowrap;
  text-align: left;
  font-variant-numeric: tabular-nums;
}

/* Pct + PICK label share one cell, right-aligned. */
.g-td-pct { }   /* alignment already set above */
.g-pct-num {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 400;
  color: var(--black);
}
.g-pct-lbl {
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 300;
  letter-spacing: 0.08em;
  color: var(--mid-gray);
  text-transform: uppercase;
  line-height: 1;
  margin-left: 4px;
}

.g-score-val {
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 400;
  line-height: 1;
  color: var(--black);
  white-space: nowrap;
  text-align: right;
}

.g-status-val {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--black);
  white-space: nowrap;
  text-align: right;
  padding-left: 4px;
}

/* ── Table header (angled names) ─────────────────────────────── */
.pm-header-row th {
  height: 78px;                 /* headroom for the angled names */
  vertical-align: bottom;
  padding: 8px 0 0;
}

/* Game-info header cells — one per column, each sticky at the same left
   offset as its corresponding body <td>. No colspan — sticky requires
   individual cells for column-position tracking. */
.pm-h-game {
  position: sticky;
  background: var(--white);
  z-index: 3;
  border-bottom: 1px solid #e8e8e8;
}
.pm-h-abbrev   { left: 0px;   width: 65px;  }
.pm-h-name-col { left: 65px;  width: 110px; }
.pm-h-record   { left: 175px; width: 54px;  }
.pm-h-score    { left: 229px; width: 43px;  }
.pm-h-status   { left: 272px; width: 100px; }
.pm-h-pct      { left: 372px; width: 88px;  }
/* Header gap: gradient fades angled names as they scroll in. */
.pm-h-gap {
  left: 460px;
  width: 30px;
  background: linear-gradient(to left, transparent, var(--white) 60%);
}

.pm-h-player {
  z-index: 1;
  position: relative;
  border-bottom: 1px solid #e8e8e8;
}
.pm-h-name {
  position: absolute;
  bottom: 6px;
  left: 50%;
  transform-origin: left bottom;
  transform: rotate(-45deg);
  white-space: nowrap;
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--black);
  max-width: 85px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}

/* Empty state — "No games scheduled" or Wed-visitor placeholder.
   Documented Wed-visitor UX gap in schedule.js docstring; resolved by
   week/event switcher slice. */
.pm-empty {
  font-family: var(--sans);
  font-size: 13px;
  color: var(--mid-gray);
  padding: 20px 0;
}

/* ── Game-row hover (2026-09-29) ─────────────────────────────────
   Each game is TWO trs (.g-row-away then .g-row-home). Hover on either
   row highlights BOTH — the game reads as one unit, matching the
   leaderboard row hover pattern.

   Sticky game-info cells set their own background:var(--white) which
   would mask a plain row-level background, so the hover color is
   applied to the tds too. .pm-col-mine keeps its permanent off-white
   override (still !important elsewhere) so the signed-in user's column
   never loses its persistent tint.

   :has() is the key — the "hover on home also lights the away above"
   direction can't be done with sibling combinators (+/~ only look
   forward), so the last rule targets an away row that has a home
   sibling being hovered. Modern browsers only (Chrome 105+, Firefox
   121+, Safari 15.4+); older browsers gracefully degrade to hovering
   the single row. */
.pm-table tbody tr.g-row-away:hover,
.pm-table tbody tr.g-row-away:hover + tr.g-row-home,
.pm-table tbody tr.g-row-home:hover,
.pm-table tbody tr.g-row-away:has(+ tr.g-row-home:hover) {
  background-color: var(--off-white);
}
.pm-table tbody tr.g-row-away:hover td,
.pm-table tbody tr.g-row-away:hover + tr.g-row-home td,
.pm-table tbody tr.g-row-home:hover td,
.pm-table tbody tr.g-row-away:has(+ tr.g-row-home:hover) td {
  background-color: var(--off-white);
}