/* * apps/web/players/list.css — UXA-S1-PLAYERS-LIST-0908, rebuilt for CALL-4 * (D-CALL-0926, Brock/Pat call 2026-09-26, screens/call-0926/SNS-ISSUES.md * #11 + #13). * * Pat: "I want to get rid of tiles completely... follow the same look that * the Top Performers banners have... does that include even the thickness * of those [bars]? Literally everything except the red numbers." The List/ * Cards toggle and the tile grid are gone — this is the ONLY browse surface * now, styled as `.leader-row` (apps/web/assets/leader-rows.css), the exact * component the dashboard's Top Performers/Heisman Watch rows use. No new * component is defined here; this file only (a) permanently hides the * leftover tile-grid DOM (list-view.js.buildRow() / TILES-REMOVED-0926 in * script.js no longer populate it, but $grid/$gridAfterAd stay in the markup * so script.js's existing null-guarded references keep working unchanged), * (b) lays out the list shell, and (c) adds the two things Top Performers * rows don't have: the availability dot (CALL-4b) and the injury chip. * * Scoped to html[data-route="/players"], same convention as players.css. * Loaded AFTER /assets/leader-rows.css (see index.html order) so a * route-scoped grid-template-columns override here (dropping the rank * column leader-rows.css reserves) wins on source order; it would win on * specificity either way (attribute-scoped selector beats a bare class). */ /* ── Permanently hide the removed tile grid + its chrome ──────────────── script.js's appendChunk() no longer creates `.pl-card` DOM (TILES- REMOVED-0926) — these containers stay in the markup empty, just off screen, so every existing $grid/$gridAfterAd/$rangeEnd/etc. reference in script.js keeps resolving to a real (inert) node instead of null. */ html[data-route="/players"] [data-slot="grid"], html[data-route="/players"] [data-slot="grid-after-ad"], html[data-route="/players"] .pl-loading-banner, html[data-route="/players"] .pl-grid-progress, html[data-route="/players"] .house-ad-slot[data-ad-slot="list-inline-1"] { display: none; } /* ── List shell ──────────────────────────────────────────────────────── */ html[data-route="/players"] .pl-list { display: flex; flex-direction: column; margin: 4px 0 0; } html[data-route="/players"] .pl-list-body { display: flex; flex-direction: column; } /* ── The row itself is `.leader-row` (leader-rows.css) — this route only overrides the grid template to drop the 24px rank column leader-rows.css reserves for `.lr-rank` (Pat, item #4: no red rank numbers here either), and widens the value column slightly since PROJ+PPG together run wider than Heisman's bare score. `.pl-lrow` carries no rules of its own; it is purely a selector anchor so this override never leaks onto the dashboard's `.perf-card`/`.hw-card` rows sharing the same `.leader-row` base class. */ html[data-route="/players"] .pl-lrow.leader-row { grid-template-columns: 52px minmax(0, 1fr) auto; } /* ── Availability tag (CALL-4b, relabelled PLAYER-CARD-GROUPED-1001) ── Was a bare 12px dot on the avatar corner that nobody could decode (Pat, 2026-10-01). Now a short text tag in the meta line ("Free agent", "Free in 1 of 3", "Taken", "Your team") plus a one-line key above the list (.pl-avail-key). Guests and users with no leagues never populate it (list-view.js never calls the endpoint for them), so it stays `hidden`. */ html[data-route="/players"] .pl-lrow-avail { display: inline-flex; align-items: center; padding: 1px 7px; border-radius: 999px; border: 1px solid currentColor; font-family: var(--f-body, "Inter", sans-serif); font-size: 16px; font-weight: 600; letter-spacing: 0; white-space: nowrap; line-height: 1.5; color: var(--gray-light, #A8A8A8); } html[data-route="/players"] .pl-lrow-avail[data-avail="free"] { color: var(--green-positive, #3DBA6E); } html[data-route="/players"] .pl-lrow-avail[data-avail="rostered"] { color: var(--gray-light, #A8A8A8); } html[data-route="/players"] .pl-lrow-avail[data-avail="mine"] { color: #FF6B6B; } html[data-route="/players"] .pl-lrow-avail[hidden] { display: none; } html[data-route="/players"] .pl-avail-key { margin: 0 0 8px; padding: 8px 12px; font-family: var(--f-body, "Inter", sans-serif); font-size: 16px; line-height: 1.9; color: var(--text-muted, #C2C2C2); border-bottom: 1px solid var(--hairline-2, rgba(255,255,255,.1)); } html[data-route="/players"] .pl-avail-key[hidden] { display: none; } html[data-route="/players"] .pl-avail-key-lbl { color: var(--text-primary, #F5F5F5); font-weight: 600; } /* ── Injury chip — inline in the meta line, next to the position chip. Reuses assets/injury-status.js's own `.sns-inj` markup/CSS (it injects its own tiered styling); this just keeps it from wrapping onto its own line at the narrowest widths. */ html[data-route="/players"] .lr-meta { flex-wrap: wrap; row-gap: 2px; } /* ── "Stats delayed" note (CALL-1, D-CALL-0926) — replaces the PROJ line in the value column, never adds a column: the player's real game has a live/ final team score but the stat feed hasn't posted his numbers yet (the OSU/WVU ESPN-gap incident). Amber, not red — this is a data-source delay, not an injury/unavailability signal. */ html[data-route="/players"] .pl-lrow-delayed { font-family: var(--f-mono, monospace); font-size: 13px; letter-spacing: .04em; color: var(--orange-accent, #FF6A00); white-space: nowrap; } /* ── Empty / end-of-list / sentinel ──────────────────────────────────── */ html[data-route="/players"] .pl-list-empty { padding: 24px 16px; text-align: center; font-family: var(--f-mono, monospace); font-size: 16px; letter-spacing: .1em; color: var(--gray-light, #8A8A8A); } html[data-route="/players"] .pl-list-endmsg { text-align: center; padding: 16px 0 4px; color: var(--gray-light, #8A8A8A); font-family: var(--f-mono, monospace); font-size: 16px; letter-spacing: .14em; } html[data-route="/players"] .pl-list-sentinel { height: 1px; width: 100%; } @media (prefers-reduced-motion: reduce) { html[data-route="/players"] .leader-row { transition: none; } }