/* ==========================================================================
   GRIDIRON — assets/css/standings.css
   Component internals for the STANDINGS family:
       gridiron/standings        .sfgi-standings   compact rail table
       gridiron/standings-full   .sfgi-sfull       the /standings/ page block
       gridiron/power-ranking    .sfgi-power       ranked cards + rationale
   plus the shared table-column contract (.sfgi-col-*) and the generic
   .sfgi-bar-fill used by the team and player cards.
   --------------------------------------------------------------------------
   Markup ground truth: includes/standings.php (frozen), read together with the
   live DOM of /gridiron/standings/, /gridiron/, /gridiron/teams/ and
   /gridiron/team/<slug>/ on 2026-08-16.

   RULES THIS FILE OBEYS
   ---------------------
   1. Colour, radius, shadow, easing and type come ONLY from the `--sfgi-*`
      tokens declared in assets/gridiron.css. There is not one literal hex in
      this file, so the visitor light/dark toggle keeps working.
   2. Depth is the identity: `--sfgi-d0`..`--sfgi-d4` plus an inset
      `--sfgi-ring` hairline. No 1px borders anywhere.
   3. Team livery arrives per row / per card as the inline `--sfgi-team`
      custom property. It is always consumed through `color-mix()` so a pure
      black or pure white team colour still resolves to something visible; the
      local `--sfgi-team-edge` token lifts it toward `ink` for that reason.
   4. Mobile first. The base rules are safe at 390px; layout widens at
      `min-width: 640px`, `min-width: 769px` and `min-width: 1025px`. Wide
      tables scroll inside `.sfgi-scroll`; the page never scrolls sideways.
   5. Motion is scoped to `body.sfgi-fx` / `body.sfgi-fx-reveal` /
      `body.sfgi-fx-pointer`, exactly as assets/fx.js documents, and is
      switched off again under `prefers-reduced-motion: reduce`.
   6. This sheet loads AFTER gridiron.css and may override it, but only where
      gridiron.css targets markup this family does not emit. Those overrides
      are individually commented — every one of them is a real bug fix.

   OVERRIDES OF gridiron.css, and why
   ----------------------------------
   a) `.sfgi-grid [data-grid] { display: grid }` was written for the card
      grids. `.sfgi-sfull-conf` carries `.sfgi-grid` and its `<tbody data-grid>`
      was being turned into a two-column CSS grid — that is what stacked the
      standings cells on top of each other. Reset to `table-row-group`.
   b) `.sfgi-bar` is declared in gridiron.css as the FILL of a
      `.sfgi-track > .sfgi-bar` pair. standings.php and blocks-team.php emit it
      as the TRACK, with an `<i>` / `.sfgi-bar-fill` child. Only the
      track-shaped instances are re-declared here; `.sfgi-track > .sfgi-bar` is
      left completely alone.
   c) `.sfgi-card` is on `<tr class="sfgi-srow sfgi-card">`. A rounded, shadowed,
      panel-filled table ROW is not a thing browsers agree on, so the slab is
      neutralised on the row and re-expressed on its cells.

   @package stepfox-gridiron-stats
   ========================================================================== */

/* ==========================================================================
   1. LOCAL TOKENS
   Derived from the global ones — nothing new is invented, and nothing here
   paints on its own.
   ========================================================================== */

.sfgi-standings,
.sfgi-sfull,
.sfgi-power {
	/* Column geometry, so the three tables agree without repeating numbers. */
	--sfgi-c-rk:   56px;
	--sfgi-c-num:  54px;
	--sfgi-c-pct:  74px;
	--sfgi-c-strk: 78px;
	--sfgi-cell-x: 8px;
	--sfgi-cell-y: 9px;

	/* Row state washes. Low alpha so the light scheme survives them. */
	--sfgi-wash-playoff: color-mix(in srgb, var(--sfgi-turf) 7%, transparent);
	--sfgi-wash-bye:     color-mix(in srgb, var(--sfgi-gold) 9%, transparent);
	--sfgi-wash-leader:  color-mix(in srgb, var(--sfgi-accent) 8%, transparent);
}
.sfgi-streak .sfgi-i { width: 12px; height: 12px; }
.sfgi-streak.is-hot .sfgi-i { color: var(--sfgi-on-bright); }
.sfgi-standings-foot .sfgi-i { color: var(--sfgi-accent-ink); }
.sfgi-standings .sfgi-scroll > .sfgi-standings-table { min-width: 500px; }
/* gridiron.css pushes `.sfgi-filter-count` right with `margin-left: auto`;
   in this row it is the leading item. */
.sfgi-sfull-count .sfgi-filter-count {
	margin-left: 0;
	margin-right: auto;
	color: var(--sfgi-ink);
}
/* The holographic foil on rank 1. It rides the SAME pseudo element as the team
   wash — the card cannot use `overflow: hidden` without flattening its 3D
   layers, so a rounded pseudo does the containing. fx.js drives --holo
   (0-200%) on pointer move; plain opacity rather than a blend mode, because
   `screen` would wash the foil out in the light scheme. */
.sfgi-power-card.sfgi-holo::before {
	background-image:
		var(--sfgi-g-holo),
		linear-gradient(
			100deg,
			color-mix(in srgb, var(--sfgi-team, var(--sfgi-accent)) 26%, transparent) 0%,
			transparent 46%
		);
	background-size: 240% 100%, auto;
	background-position: var(--holo, 50%) 50%, 0 0;
	background-repeat: no-repeat;
	opacity: 0.24;
	transition: background-position var(--sfgi-t) var(--sfgi-ease),
	            opacity var(--sfgi-t) var(--sfgi-ease);
}
.sfgi-power-card.sfgi-holo.is-foiled::before { opacity: 0.4; }
.sfgi-power-delta .sfgi-i { width: 14px; height: 14px; }
.sfgi-power-foot .sfgi-i { flex: 0 0 auto; color: var(--sfgi-accent-ink); }

/* ==========================================================================
   13. THE TEAM GRID ROOT — .sfgi-grid--teams
   blocks-team.php emits `.sfgi-grid.sfgi-grid--teams` with a `[data-grid]`
   card wrapper. gridiron.css hard-codes two columns for every grid; 32 team
   cards want to reflow with the container instead.
   ========================================================================== */

.sfgi-grid--teams [data-grid] {
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 224px), 1fr));
}

/* ==========================================================================
   14. THE FX LAYER — cooperation with assets/fx.js
   Every rule is gated on a body class fx.js only adds when the effect can
   actually run (`sfgi-fx-reveal` requires IntersectionObserver AND motion
   allowed; `sfgi-fx-pointer` additionally requires a fine pointer). A visitor
   with JavaScript off gets the finished flat page and none of this.
   Note: the reveal offset is `--sfgi-rise`, NOT `--ry` — fx.js owns --rx/--ry.
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {

	/* ---- scroll reveal. Applied to the ITEMS, never to a block root, so a
	   failed observer can never blank a whole table. ---- */
	body.sfgi-fx-reveal .sfgi-sfull-head.sfgi-reveal,
	body.sfgi-fx-reveal .sfgi-split.sfgi-reveal,
	body.sfgi-fx-reveal .sfgi-power-card.sfgi-reveal {
		transition: opacity .55s var(--sfgi-ease) var(--fxd, 0ms),
		            transform .55s var(--sfgi-ease) var(--fxd, 0ms),
		            box-shadow var(--sfgi-t) var(--sfgi-ease);
	}
	body.sfgi-fx-reveal .sfgi-sfull-head.sfgi-reveal:not(.is-in),
	body.sfgi-fx-reveal .sfgi-split.sfgi-reveal:not(.is-in),
	body.sfgi-fx-reveal .sfgi-power-card.sfgi-reveal:not(.is-in) {
		opacity: 0;
		--sfgi-rise: 16px;
	}
	body.sfgi-fx-reveal .sfgi-split.sfgi-reveal {
		transform: translate3d(0, var(--sfgi-rise, 0px), 0);
	}

	body.sfgi-fx .sfgi-sfull-head.sfgi-tilt,
	body.sfgi-fx .sfgi-power-card.sfgi-tilt {
		transform:
			translate3d(0, calc(var(--sfgi-rise, 0px) + var(--lift, 0px)), 0)
			rotateX(var(--rx, 0deg))
			rotateY(var(--ry, 0deg));
		transform-style: preserve-3d;
	}

	/* ---- parallax layers. fx.js writes --z on load and --px / --py per
	   frame; a layer without data-depth is left alone on purpose.
	   `will-change` is fx.js's job — it takes and releases the compositor
	   layer per card, so declaring it here would hand the browser hundreds. */
	body.sfgi-fx .sfgi-sfull-head.sfgi-tilt .sfgi-layer[data-depth],
	body.sfgi-fx .sfgi-power-card.sfgi-tilt .sfgi-layer[data-depth] {
		transform: translate3d(var(--px, 0px), var(--py, 0px), var(--z, 0px));
		transition: transform var(--sfgi-t) var(--sfgi-ease);
	}
}

/* Whatever the body classes say, reduced motion means still. */
@media (prefers-reduced-motion: reduce) {

	.sfgi-sfull-head,
	.sfgi-sfull-head.sfgi-tilt,
	.sfgi-split,
	.sfgi-power-card,
	.sfgi-power-card.sfgi-tilt,
	.sfgi-sfull-head .sfgi-layer,
	.sfgi-power-card .sfgi-layer,
	.sfgi-bar-fill,
	.sfgi-pctcell > .sfgi-bar > i,
	.sfgi-col-bar > .sfgi-bar > i,
	.sfgi-seed,
	.sfgi-streak,
	.sfgi-th-caret,
	.sfgi-th-label,
	.sfgi-power-name,
	.sfgi-power-card.sfgi-holo > .sfgi-power-rank::after,
	.sfgi-sfull-head::after {
		opacity: 1;
		transform: none !important;
		transition: none !important;
		animation: none !important;
		will-change: auto;
	}
}

/* The horizontal scrollers are keyboard-reachable (`tabindex="0"` in the PHP),
   so the focused one has to announce itself. */
.sfgi-sfull-conf > .sfgi-scroll:focus-visible,
.sfgi-standings > .sfgi-scroll:focus-visible {
	outline: 2px solid var(--sfgi-neon);
	outline-offset: -2px;
	border-radius: var(--sfgi-r-sm);
}

/* ==========================================================================
   17. PRINT
   The tables are the content; the glass and the depth are not.
   ========================================================================== */

@media print {
	.sfgi-scroll { overflow: visible; }
}

/* ==========================================================================
   18. REBUILT COMPONENT INTERNALS — appended 2026-08-19
   The Elementor conversion audit proved the sections between the local
   tokens (§1) and the FX layer (§14) had been pruned while the block→field
   conversion was mid-flight, leaving 42 component classes with no rule
   anywhere. This section restores them against the markup standings.php
   actually emits today. Nothing above this line is redefined; the handful
   of rules whose subject is a family-owned NON-orphan class (the block
   roots, .sfgi-power-rank, .sfgi-power-foot, …) are individually marked
   "support:" — each one is required for an orphan rule beside it to render,
   no other sheet styles it, and no other family's orphan list names it.
   Reference numbers were read off the block demo's front page
   (#block_f-afc-* and #block_f-pow-* in the measured reference CSS).
   ========================================================================== */

/* ---- 18.1 the shared table base — .sfgi-table --------------------------
   One contract for all three tables (rail, full page, splits): 13px Barlow
   rows, Rajdhani tabular numerals right-aligned, 10.5px uppercase muted
   header cells, hairline row separators drawn with inset shadows (rule 2:
   no borders). Column widths come from the §1 local tokens. The .sfgi-col-*
   rules are scoped under .sfgi-table on purpose: games.css owns its own
   bare .sfgi-col-team look and must not be touched. */

.sfgi-table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	font-family: var(--sfgi-f-ui);
	font-size: 13px;
	line-height: 1.35;
	color: var(--sfgi-ink);
}
.sfgi-table th {
	padding: 0 var(--sfgi-cell-x) 8px;
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	text-align: right;
	white-space: nowrap;
	color: var(--sfgi-muted);
}
.sfgi-table td {
	padding: var(--sfgi-cell-y) var(--sfgi-cell-x);
	vertical-align: middle;
}
.sfgi-table th.sfgi-col-team,
.sfgi-table td.sfgi-col-team { text-align: left; }
.sfgi-table .sfgi-col-rk   { width: var(--sfgi-c-rk); }
.sfgi-table .sfgi-col-strk { width: var(--sfgi-c-strk); text-align: right; }
.sfgi-table td.sfgi-col-num,
.sfgi-table td.sfgi-col-pct {
	width: var(--sfgi-c-num);
	text-align: right;
	font-family: var(--sfgi-f-num);
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}
.sfgi-table td.sfgi-col-pct { width: var(--sfgi-c-pct); font-weight: 700; }
.sfgi-table td.sfgi-col-num > b { font-weight: 700; color: var(--sfgi-ink); }

/* Sortable headers: filters.js flips aria-sort; the caret is a border-drawn
   triangle (a shape, not a hairline) that only shows on the active column. */
.sfgi-table th.sfgi-sortable {
	cursor: pointer;
	user-select: none;
	transition: color var(--sfgi-t-fast) var(--sfgi-ease);
}
.sfgi-table th.sfgi-sortable:hover,
.sfgi-table th[aria-sort="ascending"],
.sfgi-table th[aria-sort="descending"] { color: var(--sfgi-ink); }
.sfgi-th-caret {
	display: inline-block;
	width: 0;
	height: 0;
	margin-left: 5px;
	vertical-align: middle;
	border-left: 4px solid transparent;
	border-right: 4px solid transparent;
	border-top: 5px solid currentColor;
	opacity: 0;
	transition: opacity var(--sfgi-t-fast) var(--sfgi-ease),
	            transform var(--sfgi-t-fast) var(--sfgi-ease);
}
.sfgi-table th.sfgi-sortable:hover .sfgi-th-caret { opacity: 0.45; }
.sfgi-table th[aria-sort="descending"] .sfgi-th-caret,
.sfgi-table th[aria-sort="ascending"] .sfgi-th-caret {
	opacity: 1;
	color: var(--sfgi-accent-ink);
}
.sfgi-table th[aria-sort="ascending"] .sfgi-th-caret { transform: rotate(180deg); }

/* ---- rows. Base = flat separator rows (full page + splits); the rail
   re-expresses them as panel-2 slabs in 18.2. State washes ride the §1
   tokens; hover comes LAST so it wins over a wash at equal specificity. */
.sfgi-srow > td {
	background: transparent;
	box-shadow: inset 0 1px 0 var(--sfgi-line);
	transition: background-color var(--sfgi-t-fast) var(--sfgi-ease),
	            opacity var(--sfgi-t-fast) var(--sfgi-ease);
}
.sfgi-srow.is-playoff    > td { background: var(--sfgi-wash-playoff); }
.sfgi-srow.is-bye        > td { background: var(--sfgi-wash-bye); }
.sfgi-srow.is-leader     > td { background: var(--sfgi-wash-leader); }
.sfgi-srow.is-eliminated > td { opacity: 0.58; }
.sfgi-srow:hover         > td { background: color-mix(in srgb, var(--sfgi-ink) 6%, transparent); }

/* ---- the dashed playoff-cut line under seed 7. The dashes are a repeating
   gradient on the pseudo elements, never a border. */
.sfgi-cut > td {
	padding: 4px var(--sfgi-cell-x) 6px;
	background: transparent;
	box-shadow: none;
}
.sfgi-cut-label {
	display: flex;
	align-items: center;
	gap: 10px;
	font-family: var(--sfgi-f-ui);
	font-size: 10px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	white-space: nowrap;
	color: var(--sfgi-accent-ink);
}
.sfgi-cut-label::before,
.sfgi-cut-label::after {
	content: "";
	height: 1px;
	background: repeating-linear-gradient(
		90deg,
		color-mix(in srgb, var(--sfgi-accent) 65%, transparent) 0 7px,
		transparent 7px 14px
	);
}
.sfgi-cut-label::before { flex: 0 0 24px; }
.sfgi-cut-label::after  { flex: 1 1 0; }

/* ---- the signed point-differential figure (full table + power meta). */
.sfgi-diff {
	font-family: var(--sfgi-f-num);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}
.sfgi-diff.is-pos  { color: var(--sfgi-turf-ink); }
.sfgi-diff.is-neg  { color: var(--sfgi-accent-ink); }
.sfgi-diff.is-even { color: var(--sfgi-muted); }

/* ---- the odometer target (fx.js counts data-to up on reveal): tabular so
   the chip does not breathe while the digits spin. */
.sfgi-count {
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

/* ---- 18.2 the compact rail — gridiron/standings ------------------------
   Reference: the block demo's AFC/NFC conference rails — a panel card
   (padding 14/12, radius 14, d1 + ring), an 11px uppercase head band over a
   hairline, then rounded panel-2 slab rows (radius 8, 8px cell padding) and
   a 6px team-coloured win bar. */

/* support: the rail's block root — carries the §1 tokens already; the panel
   card itself was pruned. No other sheet or orphan list names it. */
.sfgi-standings {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 14px 12px;
	border-radius: var(--sfgi-r);
	background-color: var(--sfgi-panel);
	background-image: var(--sfgi-sheen);
	box-shadow: var(--sfgi-d1), var(--sfgi-ring);
}
.sfgi-standings-head {
	display: flex;
	align-items: baseline;
	gap: 10px;
	padding: 0 2px 10px;
	box-shadow: inset 0 -1px 0 var(--sfgi-line);
}
.sfgi-standings-label {
	font-family: var(--sfgi-f-ui);
	font-size: 11px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--sfgi-gold-ink);
}
.sfgi-standings-note {
	margin-left: auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-family: var(--sfgi-f-ui);
	font-size: 12px;
	font-weight: 500;
	color: var(--sfgi-muted);
}
/* Slab rows: the card look is re-expressed on the CELLS (§ note c — a
   rounded, shadowed table row is not a thing browsers agree on). */
.sfgi-standings-table { border-spacing: 0 6px; }
.sfgi-standings-table th { padding-bottom: 2px; }
.sfgi-standings-table td { padding-top: 8px; padding-bottom: 8px; }
.sfgi-standings-table .sfgi-srow > td {
	background: var(--sfgi-panel-2);
	box-shadow: var(--sfgi-d0);
}
.sfgi-standings-table .sfgi-srow > td:first-child { border-radius: var(--sfgi-r-sm) 0 0 var(--sfgi-r-sm); }
.sfgi-standings-table .sfgi-srow > td:last-child  { border-radius: 0 var(--sfgi-r-sm) var(--sfgi-r-sm) 0; }
.sfgi-standings-table .sfgi-srow.is-playoff > td { background: color-mix(in srgb, var(--sfgi-turf)   7%, var(--sfgi-panel-2)); }
.sfgi-standings-table .sfgi-srow.is-bye     > td { background: color-mix(in srgb, var(--sfgi-gold)   9%, var(--sfgi-panel-2)); }
.sfgi-standings-table .sfgi-srow.is-leader  > td { background: color-mix(in srgb, var(--sfgi-accent) 8%, var(--sfgi-panel-2)); }
.sfgi-standings-table .sfgi-srow:hover      > td { background: color-mix(in srgb, var(--sfgi-ink)    7%, var(--sfgi-panel-2)); }
.sfgi-standings-table .sfgi-cut > td {
	background: transparent;
	box-shadow: none;
	border-radius: 0;
}
/* The rail's win bar: standings.php emits .sfgi-bar as the TRACK with an
   <i> fill (§ note b) — scoped here so the .sfgi-track > .sfgi-bar fill
   contract elsewhere is left alone. Track ref: 76×6, radius 999. */
.sfgi-table td.sfgi-col-bar { width: 76px; }
.sfgi-table .sfgi-col-bar > .sfgi-bar {
	display: block;
	width: 100%;
	min-width: 56px;
	height: 6px;
	border-radius: var(--sfgi-pill);
	background: var(--sfgi-line);
	overflow: hidden;
}
.sfgi-table .sfgi-col-bar > .sfgi-bar > i,
.sfgi-table .sfgi-pctcell > .sfgi-bar > i {
	display: block;
	height: 100%;
	border-radius: inherit;
	background: color-mix(in srgb, var(--sfgi-team, var(--sfgi-accent)) 85%, var(--sfgi-ink) 15%);
}
/* support: the rail footnote — its icon colour survived §1; the row itself
   was pruned. */
.sfgi-standings-foot {
	display: flex;
	align-items: center;
	gap: 7px;
	margin: 0 2px;
	font-family: var(--sfgi-f-ui);
	font-size: 11.5px;
	font-weight: 500;
	line-height: 1.4;
	color: var(--sfgi-muted);
}

/* ---- 18.3 the full page — gridiron/standings-full ----------------------
   Two conference panels (.sfgi-standings-sort is the filters.js sort root
   AND the visible panel card), each with the crest header, count row,
   sortable fifteen-column table, then the division splits and the legend. */

/* support: the block root — stacks the two panels and the legend. */
.sfgi-sfull {
	display: flex;
	flex-direction: column;
	gap: 28px;
}
.sfgi-standings-sort {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: var(--sfgi-pad);
	border-radius: var(--sfgi-r-lg);
	background-color: var(--sfgi-panel);
	background-image: var(--sfgi-sheen);
	box-shadow: var(--sfgi-d2), var(--sfgi-ring);
}
/* Bug fix (§ note a, re-pruned by the audit): the panel carries .sfgi-grid,
   so gridiron.css turns its <tbody data-grid> into a two-column CSS grid
   and puts content-visibility on the rows. Both wreck a table. */
.sfgi-standings-sort tbody[data-grid] { display: table-row-group; }
.sfgi-standings-sort [data-grid] > .sfgi-card {
	content-visibility: visible;
	contain-intrinsic-size: none;
}
.sfgi-sfull-head {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px;
	padding: 2px 2px 14px;
	box-shadow: inset 0 -1px 0 var(--sfgi-line);
}
.sfgi-sfull-crest {
	flex: 0 0 64px;
	width: 64px;
	height: 64px;
	display: grid;
	place-items: center;
	filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.45));
}
.sfgi-sfull-crest img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}
.sfgi-sfull-headtext {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
	flex: 1 1 260px;
}
.sfgi-sfull-eyebrow {
	font-family: var(--sfgi-f-ui);
	font-size: 10.5px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--sfgi-accent-ink);
}
.sfgi-sfull-title {
	margin: 0;
	font-family: var(--sfgi-f-display);
	font-size: 24px;
	font-weight: 400;
	line-height: 1.05;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--sfgi-ink);
}
.sfgi-sfull-lead {
	margin: 0;
	max-width: 56ch;
	font-family: var(--sfgi-f-body);
	font-size: 13.5px;
	line-height: 1.5;
	color: var(--sfgi-muted);
}
.sfgi-sfull-chips {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin-left: auto;
}
/* support: the count row above the table — its child rule survived §1. */
.sfgi-sfull-count {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
}
.sfgi-sfull-hint {
	font-family: var(--sfgi-f-ui);
	font-size: 10.5px;
	font-weight: 500;
	line-height: 1;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--sfgi-muted);
}
.sfgi-sfull-table td { padding-top: 10px; padding-bottom: 10px; }
/* The PCT cell stacks the figure over a 48×4 team-coloured mini bar. */
.sfgi-table .sfgi-pctcell {
	display: inline-flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 4px;
}
.sfgi-table .sfgi-pctcell > .sfgi-bar {
	display: block;
	width: 48px;
	height: 4px;
	border-radius: var(--sfgi-pill);
	background: var(--sfgi-line);
	overflow: hidden;
}

/* ---- 18.4 the division splits ------------------------------------------ */

.sfgi-splits {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-top: 6px;
}
.sfgi-splits-title {
	margin: 0;
	font-family: var(--sfgi-f-ui);
	font-size: 11px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--sfgi-gold-ink);
}
.sfgi-splits-grid {
	display: grid;
	gap: 12px;
	grid-template-columns: repeat(4, minmax(0, 1fr));
}
/* support: one division mini-card — only its reveal transition survived. */
.sfgi-split {
	min-width: 0;
	padding: 12px;
	border-radius: var(--sfgi-r-sm);
	background-color: var(--sfgi-panel-2);
	background-image: var(--sfgi-sheen);
	box-shadow: var(--sfgi-d0), var(--sfgi-ring);
}
.sfgi-split-head {
	display: flex;
	align-items: baseline;
	gap: 8px;
	min-width: 0;
	padding-bottom: 8px;
	margin-bottom: 4px;
	box-shadow: inset 0 -1px 0 var(--sfgi-line);
}
.sfgi-split-name {
	font-family: var(--sfgi-f-ui);
	font-size: 12px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	white-space: nowrap;
	color: var(--sfgi-ink);
}
.sfgi-split-lead {
	margin-left: auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-family: var(--sfgi-f-ui);
	font-size: 11px;
	font-weight: 500;
	color: var(--sfgi-muted);
}
.sfgi-split-table { font-size: 12.5px; }
.sfgi-split-table td { padding: 6px 4px; }
/* Inside the panel-2 mini-card the slabs and washes stand down: flat rows,
   hairline separators, no line over the first row (there is no thead). */
.sfgi-split-table .sfgi-srow > td,
.sfgi-split-table .sfgi-srow.is-leader > td { background: transparent; }
.sfgi-split-table .sfgi-srow:first-child > td { box-shadow: none; }
.sfgi-divpos {
	display: inline-block;
	min-width: 16px;
	text-align: right;
	font-family: var(--sfgi-f-num);
	font-size: 12px;
	font-weight: 700;
	line-height: 1;
	font-variant-numeric: tabular-nums;
	color: var(--sfgi-muted);
}
.sfgi-srow.is-leader .sfgi-divpos { color: var(--sfgi-accent-ink); }

/* ---- 18.5 the power ranking — gridiron/power-ranking -------------------
   Ranked slab cards (ref: radius 14, padding 10/14, gap 12, hover lifts
   −2px onto panel-2 with the accent ring): big Rajdhani ordinal, 36px
   crest, name + record/diff/streak meta, one-line rationale, movement chip. */

.sfgi-power-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}
/* support: the card <li> (.sfgi-power-card) — only its holo foil survived
   §1; the slab itself was pruned. Addressed as the list's child so the
   class is not re-declared. */
.sfgi-power-list > li {
	position: relative;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 14px 10px 12px;
	border-radius: var(--sfgi-r);
	background-color: var(--sfgi-panel);
	background-image: var(--sfgi-sheen);
	box-shadow: var(--sfgi-d1), var(--sfgi-ring);
	transition: transform var(--sfgi-t) var(--sfgi-ease),
	            background-color var(--sfgi-t) var(--sfgi-ease),
	            box-shadow var(--sfgi-t) var(--sfgi-ease);
}
.sfgi-power-list > li:hover {
	transform: translateY(-2px);
	background-color: var(--sfgi-panel-2);
	box-shadow: var(--sfgi-d3), var(--sfgi-ring-hot);
}
.sfgi-power-list > li.is-first { box-shadow: var(--sfgi-d2), var(--sfgi-ring-hot); }
/* support: geometry for the §1 holo pseudo — it paints, this shapes. */
.sfgi-power-list > li.sfgi-holo::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	pointer-events: none;
}
/* support: the rank ordinal (ref: Rajdhani 22/34px, right-aligned). */
.sfgi-power-list .sfgi-power-rank {
	flex: 0 0 34px;
	width: 34px;
	text-align: right;
	font-family: var(--sfgi-f-num);
	font-size: 22px;
	font-weight: 700;
	line-height: 1;
	font-variant-numeric: tabular-nums;
	color: var(--sfgi-muted);
}
.sfgi-power-list > li.is-top   .sfgi-power-rank { color: var(--sfgi-ink); }
.sfgi-power-list > li.is-first .sfgi-power-rank { color: var(--sfgi-accent-ink); }
.sfgi-power-crest {
	flex: 0 0 36px;
	width: 36px;
	height: 36px;
	display: grid;
	place-items: center;
}
.sfgi-power-crest img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}
.sfgi-power-body {
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
	flex: 1 1 auto;
}
.sfgi-power-head {
	display: flex;
	align-items: baseline;
	gap: 8px;
	min-width: 0;
}
/* The club name is an <a> when the team has a page, a <span> when not. */
.sfgi-power-head > a,
.sfgi-power-head > span:not(.sfgi-sr) {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-family: var(--sfgi-f-ui);
	font-size: 17px;
	font-weight: 600;
	line-height: 1.15;
	color: var(--sfgi-ink);
	text-decoration: none;
	transition: color var(--sfgi-t-fast) var(--sfgi-ease);
}
.sfgi-power-head > a:hover { color: var(--sfgi-accent-ink); }
.sfgi-power-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	font-family: var(--sfgi-f-ui);
	font-size: 12px;
	font-weight: 500;
	line-height: 1.2;
	color: var(--sfgi-muted);
}
.sfgi-power-record {
	font-family: var(--sfgi-f-num);
	font-size: 13px;
	font-weight: 700;
	line-height: 1;
	font-variant-numeric: tabular-nums;
	color: var(--sfgi-ink);
}
.sfgi-power-note {
	font-family: var(--sfgi-f-body);
	font-size: 12.5px;
	line-height: 1.5;
	color: var(--sfgi-muted);
}
/* support: the movement chip's slot — its icon size survived §1. */
.sfgi-power-delta {
	flex: 0 0 auto;
	margin-left: auto;
}
.sfgi-delta {
	display: inline-flex;
	align-items: center;
	gap: 3px;
	padding: 4px 9px;
	border-radius: var(--sfgi-pill);
	font-family: var(--sfgi-f-num);
	font-size: 12px;
	font-weight: 700;
	line-height: 1;
	font-variant-numeric: tabular-nums;
}
.sfgi-delta.is-up {
	color: var(--sfgi-turf-ink);
	background: color-mix(in srgb, var(--sfgi-turf) 12%, transparent);
	box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sfgi-turf) 40%, transparent);
}
.sfgi-delta.is-down {
	color: var(--sfgi-accent-ink);
	background: color-mix(in srgb, var(--sfgi-accent) 12%, transparent);
	box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sfgi-accent) 40%, transparent);
}
.sfgi-delta.is-flat {
	color: var(--sfgi-muted);
	box-shadow: var(--sfgi-ring);
}
/* support: the methodology footnote — its icon colour survived §1. */
.sfgi-power-foot {
	display: flex;
	align-items: center;
	gap: 7px;
	margin: 12px 2px 0;
	font-family: var(--sfgi-f-ui);
	font-size: 12px;
	font-weight: 500;
	line-height: 1.4;
	color: var(--sfgi-muted);
}

/* ---- 18.6 the legend ---------------------------------------------------- */

.sfgi-legend {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 18px;
	padding: 12px 16px;
	border-radius: var(--sfgi-r-sm);
	background: color-mix(in srgb, var(--sfgi-panel) 72%, transparent);
	box-shadow: var(--sfgi-ring);
	font-family: var(--sfgi-f-ui);
	font-size: 12px;
	font-weight: 500;
	line-height: 1.4;
	color: var(--sfgi-muted);
}
.sfgi-legend-item {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	white-space: nowrap;
}
.sfgi-legend-dot {
	flex: 0 0 auto;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	box-shadow: var(--sfgi-d0);
}
.sfgi-legend-dot.is-top { background: var(--sfgi-gold); }
.sfgi-legend-dot.is-in  { background: var(--sfgi-turf); }
.sfgi-legend-dot.is-cut {
	background: transparent;
	box-shadow: inset 0 0 0 1.5px var(--sfgi-accent);
}
.sfgi-legend-dot.is-out { background: var(--sfgi-muted); opacity: 0.55; }
.sfgi-legend-keys {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 14px;
	margin-left: auto;
}
.sfgi-legend-key {
	display: inline-flex;
	align-items: baseline;
	gap: 5px;
	white-space: nowrap;
}
.sfgi-legend-key > b {
	font-family: var(--sfgi-f-num);
	font-size: 11px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.06em;
	color: var(--sfgi-ink);
}

/* ---- 18.7 the group-stage table SHELL ----------------------------------
   blocks-competition.php reuses this family's table look for its group
   tables; the .sfgi-group__* internals belong to cups.css and are not
   touched here. */
.sfgi-group-table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	font-family: var(--sfgi-f-ui);
	font-size: 13px;
	line-height: 1.35;
	color: var(--sfgi-ink);
}

/* ---- 18.8 the fill modifiers — .sfgi-bar--team / .sfgi-bar--holo -------
   Paint-only: emitted on the FILL inside a .sfgi-track (teams.css owns the
   track geometry, the width comes from the inline --sfgi-pct contract).
   The team colour is lifted toward ink so a near-black livery stays
   visible (§ rule 3). */
.sfgi-bar--team {
	background: color-mix(in srgb, var(--sfgi-team, var(--sfgi-accent)) 85%, var(--sfgi-ink) 15%);
}
.sfgi-bar--holo { background: var(--sfgi-g-holo); }

/* ---- 18.9 responsive ---------------------------------------------------- */

@media (max-width: 1024px) {
	.sfgi-splits-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.sfgi-sfull-title { font-size: 21px; }
}
@media (max-width: 768px) {
	.sfgi-splits-grid { grid-template-columns: minmax(0, 1fr); }
	.sfgi-standings-sort { padding: 14px 12px; }
	.sfgi-sfull-crest {
		flex-basis: 48px;
		width: 48px;
		height: 48px;
	}
	.sfgi-sfull-title { font-size: 19px; }
	.sfgi-sfull-chips { margin-left: 0; }
	.sfgi-sfull-hint { display: none; }
	.sfgi-power-list > li { gap: 10px; padding: 9px 10px; }
	.sfgi-power-list .sfgi-power-rank {
		flex-basis: 26px;
		width: 26px;
		font-size: 18px;
	}
	.sfgi-legend-keys { margin-left: 0; }
}