/* =====================================================================================
   gi-pages.css — HF GameImpact, additions to gi.css for the multi-page site.
   2026-09-28 07:36 MDT. Loaded after gi.css by Content/Snippets/gi-head.html.

   ONLY ported rules live here: each block is an RMF rule restated for a case gi.css's
   single-page port did not have (a second table on one page, extra home panels). Nothing
   is restyled. Declared differences are numbered P1..P5 and listed in site/README.md.
   Sources as in gi.css: S3 = RMF fantasy/cfb/index.html, S4 = RMF fantasy/cfb/players.html.
   ===================================================================================== */

/* [P1] S4:39-45 + S4:471 + gi.css section 11 — the players-table look, as a CLASS.
   gi.css keys it to the id #playersTable, and a page here can hold several tables
   (home: Game Impact + Player of the Game + four boards). gi-ui.js sortableTable() puts
   .gi-ptable on each one. Same declarations, same !important where the source has it. */
table.gi-ptable { --row-hover:#e4eef8; }
table.gi-ptable tbody tr:hover td { background:var(--row-hover) !important; }
table.gi-ptable td { vertical-align:middle; }
table.gi-ptable td.num { font-size:15px; }
table.gi-ptable th:nth-child(1), table.gi-ptable td:nth-child(1) { text-align:center !important; }
/* [P5] one line per record. RMF's players table never wraps a cell (fixed column widths, a
   nowrap .pname); here widths are content-sized, so the rule is stated directly and a narrow
   screen scrolls the table inside its .tscroll box instead of breaking "W 13-1" or "#11 name"
   over two lines. Measured at 390: without it the result chip and jersey+name cells wrapped. */
table.gi-ptable td { white-space:nowrap; }

/* [P2] a row that opens a page (schedule / POG rows -> the game page). Cursor only. */
table.gi tr[data-href] { cursor:pointer; }

/* [P3] S3:13-62 home ordering, extended to this home's extra panels. RMF orders its home by
   panel id once the rail leaves column three: This Week first, League Info last. Here the main
   column also holds #pogPanel (RMF's #txPanel slot) and the rail holds #giBoards (the four
   Overall boards), so they get order values between the ones gi.css already sets. */
#giBoards { display:flex; flex-direction:column; gap:14px; margin-top:14px; }
@media (max-width:1280px){
  #giBoards { order:3; margin-top:0; }
  #infoPanel { order:4; }
}
@media (max-width:640px){
  #pogPanel { order:3; }
  #giBoards { order:4; }
  #infoPanel { order:5; }
}

/* [P4] Data notes: a <details> window. Its <summary> IS the gold .ph band; this only hides the
   browser's disclosure triangle and says it can be clicked. */
details.gi-notes > summary { list-style:none; cursor:pointer; }
details.gi-notes > summary::-webkit-details-marker { display:none; }

/* [SP1] retired 2026-09-28: the Total page's one-column freeze (.gi-freeze) moved to SP6 (freeze:2) when the
   jersey card got its own column (C5). No page uses .gi-freeze any more. */

/* [PS1] RMF settings.html:1152-1159 (md5 6d5a4c12105af7f28d4a3bbc1e5940fe) — #evalPrompt, the
   read-only "copy the prompt" field, as a CLASS (gi-ui codeBox()). Used by the Sync page for the
   HF Sync bookmarklet code and nothing else yet. Same declarations and !important as the source;
   they beat gi.css section 7's bare `textarea` rule on specificity. ONE DECLARED DIFFERENCE:
   height:300px -> auto, so the rows attribute sizes it (RMF's field holds a 40-line prompt; this
   one holds 2-8 lines of code). 2026-09-28 07:58 MDT. */
textarea.gi-code { width:100%; height:auto; background:#fff !important; color:var(--text) !important;
  border:1px solid rgba(0,0,0,.25) !important; border-radius:4px;
  padding:12px 14px !important; font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:12px !important; line-height:1.5; resize:vertical; }
textarea.gi-code:focus { background:#fff !important; color:var(--text) !important;
  border-color:var(--accent) !important; outline:none; }
textarea.gi-code::selection { background:var(--row-hover, #e4eef8); color:var(--text); }
textarea.gi-code::-moz-selection { background:var(--row-hover, #e4eef8); color:var(--text); }

/* [PS2] RMF settings.html:429 (md5 6d5a4c12105af7f28d4a3bbc1e5940fe) — table.pos-tbl, as a CLASS
   (sortableTable cls:'gi-minw'). Craig on that table, 2026-08-27: "This table should be 100% width
   until it collapses down" — full width while it fits, then it holds its width and scrolls inside
   its .tscroll box. Used by the Sync page's Coach inputs table, whose long "What it is" column was
   squeezed to one word per line at 390 (rows 110px tall). ONE DECLARED DIFFERENCE: no
   table-layout:fixed — that rule exists for pos-tbl's colgroup, and this table's columns size to
   their content. width:100% is already table.gi's. 2026-09-28 08:20 MDT. */
table.gi-minw { min-width:838px; }

/* [P10] the game page's top — S3:13-62 ordering, extended to /gameimpact/game/<n>. #gameTop is a
   .home-grid: main column = #gameHead (the game) + #gameImpact / #gamePending, rail = #gamePog,
   #gameRunner, #gameInfo. RMF stacks its home by panel id once the rail leaves column two, and the
   rail's windows then land ABOVE the whole main column. On a game page the game's own header has to
   stay first, so the main column opens up (display:contents, the same move RMF's <=640 rule makes)
   and each window takes an order: header, Player of the Game, Runner-up, Game Impact, Game Info.
   Order only. The flex gap replaces the 14px top margins the two-column layout writes inline. */
@media (max-width:1280px){
  #gameTop > div { display:contents; }
  #gameHead { order:1; }
  #gamePog { order:2; }
  #gameRunner { order:3; }
  #gameImpact, #gamePending { order:4; }
  #gameInfo { order:5; }
  #gameTop .panel { margin-top:0 !important; }
}

/* [SP2] the Awards page STATS cell (Player of the Game text, 2-3 lines of up to ~110 characters) is the
   one cell allowed to wrap: P5's nowrap is this site's addition, RMF's own table cells wrap (table.gi sets
   no white-space). Without it the STATS column pushed RUNNER-UP, IMPACT and MAXPREPS out of view at 1440.
   The floor keeps a line readable on a phone, where the table scrolls inside its .tscroll box. */
table.gi-ptable td.gi-stats { white-space:normal; min-width:280px; }

/* [SP6] RMF players.html:428-446 (md5 369e4f1806e4b0d5ea6aff4a378a3878) — frozen leading columns, as a
   CLASS for any table (gi-ui sortableTable({ freeze:n }) adds .gi-fz and marks the cells .fz). RMF freezes
   Rnk / Player / Team / Pos at fixed pixel offsets against fixed column widths; these tables size their
   columns to content, so gi-ui MEASURES each frozen column's offset off the rendered header and writes it
   as the cell's inline `left` (re-measured on resize and font load), which is what keeps a frozen column
   from sliding under its neighbour (the table-layout trap in Spartan-Local CLAUDE.md cannot arise).
   Same opaque panel fill, header fill, z-index and edge shadow as RMF. ONE DECLARED DIFFERENCE: the
   shadow shows only while the table is wider than its box (.fz-scroll), so a table that fits at 1440
   gets no stray line down its middle. Row hover still reaches the frozen cells (table.gi / P1 hover
   rules outrank this one). 2026-09-28 MDT. */
table.gi-fz { border-collapse:separate; border-spacing:0; }
table.gi-fz th.fz, table.gi-fz td.fz { position:sticky; z-index:2; background:var(--panel); }
table.gi-fz thead th.fz { background:var(--panel-2); z-index:3; }
table.gi-fz.fz-scroll .fz-last { box-shadow:6px 0 8px -6px rgba(0,0,0,.30); }

/* [SP8] RMF matchup.html:410-418 + :647 and team.html:791-792 + :962 (md5 c9e14f64c3f96eade877565c7a868550)
   — FIRST INITIAL, LAST NAME ON A PHONE ("N. Whitlock", Craig 2026-09-28: "when space is tight"). Both
   forms are in the DOM (gi-ui pname(): .pnm-full / .pnm-abbr) and CSS picks one. 700px = RMF matchup's
   phone tier. ONE DECLARED DIFFERENCE: RMF abbreviates every row at that width; here only a frozen
   table that side-scrolls with full names (.fz-tight, set by gi-ui measureFreeze) does, so a table that
   fits on the phone (Roster, the rail boards) keeps full names. (0,4,1) beats the base (0,2,0) at any
   sheet order. 2026-09-28 MDT. */
.pname .pnm-abbr { display:none; }
@media (max-width:700px){
  table.gi-fz.fz-tight .pname .pnm-full { display:none; }
  table.gi-fz.fz-tight .pname .pnm-abbr { display:inline; }
}
/* [SP9] the frozen OPPONENT on a tight phone table (Schedule, POG, Awards, Sync freeze through the
   opponent) gets RMF's fixed-width frozen name column back (players.html:481-482: a 120px Player column,
   ellipsis): content-sized, one raw GameChanger name ("Legend Varsity Titans Softball", 194px) made the
   Schedule's frozen block 304 of 374px at 390 and left 70px to scroll in. 130px keeps every other 2026
   opponent whole (widest: "Columbine Rebels", 119px). vertical-align:top keeps the text on the row's line
   (an inline-block with overflow:hidden sits on its bottom edge). 2026-09-28 MDT. */
@media (max-width:700px){
  table.gi-fz.fz-tight td.fz-last > a { display:inline-block; max-width:130px; overflow:hidden;
    text-overflow:ellipsis; white-space:nowrap; vertical-align:top; }
}

/* [P7b] the rail boards' rank column is labelled "Rk" (RMF players.html's rank label) instead of "#",
   which on this site means the jersey (2026-09-28 review: "1 Lindsey Morris" read as jersey 1). "Rk" is
   8px wider than "#", and the Pitching board then ran 2px past the 320px rail. Its first cell takes
   the Season Info card's 14px inset (table.linfo, the card in the same rail) instead of table.gi's
   22px; !important because the rule it replaces has it (gi.css section 5). */
#giBoards table.gi th:first-child, #giBoards table.gi td:first-child { padding-left:14px !important; }

/* =====================================================================================
   CRAIG'S DESIGN CALLS — 2026-09-28 MDT. Not RMF rules: his own decisions for this site, quoted.
   ===================================================================================== */
/* HF purple = the Holy Family brand's --color1 (holyfamilytigers.com ID Colors; the fill of
   /img/logo/HolyFamilyTigers/icon_onLt.svg). These pages load no brand chain ("Don't Use Template"),
   so it is declared here once and read through the token. */
:root { --hf-purple:#31006f; }
/* [C1] "Overall needs to be BOLD font: purple / Batting: Gold / Fielding: Green / Pitching: Orange".
   The category totals everywhere they show: Overall (and a game's TOTAL, which is that game's overall),
   Off / batting, Def / fielding, Pitch / pitching — tables and the Player of the Game card. Off+Def and
   the per-PA / per-game averages were not named and keep the table ink. Bold = 700 (a score is never 800).
   Tokens: --gold / --green / --warn are the theme's own gold, green and orange. */
.gi-ovr { color:var(--hf-purple); font-weight:700; }
.gi-bat { color:var(--gold); }
.gi-fld { color:var(--green); }
.gi-pit { color:var(--warn); }
/* [C2] "Rank should always be something like 50% gray" — the rank numbers take the header gray
   (--muted #697080, L* 47), so a rank never reads as a jersey or a score. */
table.gi td.gi-rank { color:var(--muted); }
/* [C3] "Jersey Number square should be purple with white text" — S2's card, filled HF purple; the
   border takes the fill so the square stays one color at the same 1px geometry. */
.jerseyno { background:var(--hf-purple); color:var(--pill-text); border-color:var(--hf-purple); }
/* [C4] "Do NOT bold the result" — a W/L result chip (gi-ui resultChip / lastResults, .res) keeps the
   cell's weight; gi.css S3 bolds .wk-chip.w. Other green chips (Entered, Written) are not results. */
.wk-chip.w.res, .wk-chip.l.res { font-weight:inherit; }
/* ...except inside a bold line — the kv card's name (#gameHead "vs Longmont Trojans  W 13-1"), which is 700:
   there it takes the card's regular weight (its rows are 400) instead of inheriting the bold. */
.linfo-name .wk-chip.res { font-weight:400; }
/* [C5] "jersey chip should be centered within it's own column" — sortableTable({ center:true }) marks
   the # column's th + td .ctr. The name sits in its own column, left (gi-ui playerCols), so names line
   up down the table whatever the card's width. */
table.gi th.ctr, table.gi td.ctr { text-align:center; }