/* ─────────────────────────────────────────────────────────────────────
   TITLETOWN PROPS — sticky group + ladder headers on scroll
   styles-append-props-sticky-groups-v0.19.6.css   (roadmap P3.7r)

   Pins the grouped board's headers as you scroll a long board, so you
   always know which PLAYER (group head) and which MARKET (ladder head)
   you're reading. Post-P1.1 the board is player -> market-ladder ->
   line-rung, so both header tiers get pinned.

   Anchoring: the app top-bar is `position: sticky; top: 0; z-index: 10`
   (styles.css). The column header (.pg-th) shipped at `top: 0`, so it
   pinned UNDER the top-bar. A group head pinned below a header that is
   itself hidden under the bar is useless — so this file first offsets the
   column header below the top-bar, then stacks the two header tiers below
   it. Everything anchors to three CSS vars so the offsets re-tune in one
   place if the top-bar / header / group-head layout changes.

   Vertical sticky resolves against the PAGE here (.props-grid-scroll is
   overflow-y: visible, so it is not a vertical scroll container) — the
   same frame .pg-th already relies on.

   Scope: the shared props board (serves NBA too). Sport-agnostic — the
   header tiers exist on both boards. Zero JS. Additive only.

   z-index stack (must stay in this order):
     top-bar 10  >  column-header-left 9  >  column-header 8
       >  group head 6  >  ladder head-left 5  >  ladder head 4
       >  body sticky-left 1  >  body rows 0
   Header tiers sit at DIFFERENT tops, so their z only matters at the
   brief overlap when one scrolls up into another — the one physically
   higher (and higher-z) wins cleanly.
   ───────────────────────────────────────────────────────────────────── */

.props-grid {
    /* Tuned to the current chrome. Re-measure if the top-bar, column
       header, or group-head row height changes. A JS-measured offset
       (reuse the sizeGroupHeads resize hook to set these from
       getBoundingClientRect) is the robust upgrade if they ever drift. */
    --tt-topbar-h: 52px;   /* .top-bar height (inner padding 14px + brand) */
    --pg-thead-h: 40px;    /* .pg-th column-header row height */
    --pg-ghead-h: 56px;    /* .pg-group-head row height (avatar band)     */
}

/* 1) Offset the column header below the sticky top-bar (was top: 0, i.e.
      under the bar). Sport-agnostic improvement to the shared board. */
.props-grid .pg-th {
    top: var(--tt-topbar-h, 52px);
    z-index: 8;                     /* below top-bar(10), above headers */
}
.props-grid .pg-th-sticky {
    z-index: 9;                     /* left column of the header row     */
}

/* 2) Group head (player) pins just below the column header. Single
      colspan="16" <td>, so one rule. Opaque header surface prevents body
      rows bleeding through when pinned. */
.pg-group-head > td {
    position: sticky;
    top: calc(var(--tt-topbar-h, 52px) + var(--pg-thead-h, 40px));
    z-index: 6;
    background: var(--bg-elev-2, #131313);   /* matches the thead surface */
}

/* 3) Ladder head (market) pins just below the group head. Full 16-cell
      row (renderRow path) — every cell needs the vertical sticky + an
      opaque bg (pg-ladder-head was an unstyled hook, so this is additive,
      not a clobber). The first cell is also sticky-left (pg-td-sticky) —
      dual-axis sticky is fine; just raise its z above its siblings. */
.pg-ladder-head > td {
    position: sticky;
    top: calc(var(--tt-topbar-h, 52px) + var(--pg-thead-h, 40px) + var(--pg-ghead-h, 56px));
    z-index: 4;
    background: var(--bg-elev-1, #0d0d0d);   /* matches pg-td-sticky bg    */
}
.pg-ladder-head > td.pg-td-sticky {
    z-index: 5;
}

/* 4) Mobile: the board shrinks (.pg-td/.pg-th padding 8px 6px at
      <=768px in styles.css), so the chrome is shorter. Re-tune the vars;
      the sticky rules above pick them up via inheritance. */
@media (max-width: 768px) {
    .props-grid {
        --tt-topbar-h: 48px;
        --pg-thead-h: 34px;
        --pg-ghead-h: 50px;
    }
}