/* ==========================================================================
   GRIDIRON — block internals + the 3D FX layer
   --------------------------------------------------------------------------
   The GRIDIRON theme ships ZERO CSS by design (SPEC 1.1). This is the one
   sanctioned stylesheet in the build: it styles the internals of the plugin's
   33 dynamic blocks, which block attributes cannot reach, and it carries the
   whole "super modern 3D FX" layer the product is sold on. It is registered as
   every block's `style` handle, so it also reaches the editor-canvas iframe.

   RULES THIS FILE OBEYS — please keep them if you edit it
   ------------------------------------------------------
   1. EVERY colour is `var(--wp--preset--color--<slug>, <dark fallback>)`, read
      ONCE into the `--sfgi-*` tokens below and consumed only through those.
      A literal hex applied to a surface is a light-mode bug. Hexes appear in
      exactly three places in this file:
        a) the fallback slot of a `var(--wp--preset--color--*)` lookup,
        b) the `:root.sfgi-light` block at the very bottom, which DEFINES the
           light presets (definitions, not applications),
        c) `--sfgi-on-photo`, text that sits on photography and must stay light
           in both schemes (mirrors GX_ONPHOTO in the theme's tools/lib.php).
   2. A mid-bright brand colour is a BACKGROUND colour, not a text colour.
      Blaze `#ff5a1f` is 6.5:1 on the night ground but only 2.9:1 on the light
      one. Anything that paints a colour onto TEXT uses the `*-ink` token
      (`--sfgi-accent-ink`, `--sfgi-turf-ink`, `--sfgi-gold-ink`, …), which
      aliases the preset in dark and darkens toward `ink` in light. Text ON a
      bright fill uses `--sfgi-on-bright`.
   3. The DEPTH LADDER is the identity (SPEC 2). Every surface declares a
      storey — `--sfgi-d0` … `--sfgi-d4` — and each rung is a soft ambient
      shadow PLUS an `inset 0 1px 0` bright top edge, which is what makes a
      rectangle read as a lit slab instead of a box with a drop shadow.
      Hairlines are `--sfgi-ring` (an inset ring that costs no layout width),
      never a 1px border.
   4. Mobile-first. The base rules are safe at 390px; layout widens at
      `min-width: 600px`, `min-width: 769px` and `min-width: 1025px`, matching
      the stepfox-looks device keys (mobile <=768, tablet <=1024) exactly.
      Wide content scrolls inside `.sfgi-scroll`; the page never scrolls
      sideways.
   5. Every animation and every transform is switched off under
      `prefers-reduced-motion: reduce`, and every pointer effect is gated on
      `(pointer: fine)` as well.
   6. All motion is scoped under `body.sfgi-fx`, a class assets/fx.js adds on
      load — a no-JS visitor gets a clean, flat, complete page.

   THE CLASS CONTRACT — what the block PHP is expected to emit
   ----------------------------------------------------------
   Shared atoms, usable inside any block:
     .sfgi-panel .sfgi-card .sfgi-glass      surfaces on the depth ladder
     .sfgi-head .sfgi-title .sfgi-eyebrow .sfgi-more
     .sfgi-chip (.is-live .is-final .is-win .is-loss .is-gold .is-neon)
     .sfgi-btn (.sfgi-btn--ghost .sfgi-btn--gold) .sfgi-pill
     .sfgi-crest .sfgi-face .sfgi-i (icon svg) .sfgi-num .sfgi-record
     .sfgi-track > .sfgi-bar (width from inline --sfgi-pct)
     .sfgi-meta .sfgi-kv .sfgi-empty .sfgi-scroll .sfgi-col-optional
     .sfgi-filters .sfgi-filter-count .sfgi-noresults
     th.sfgi-sortable[data-sort] + .sfgi-sort-arrow
   FX hooks (assets/fx.js):
     .sfgi-tilt          pointer tilt + glare, JS writes --rx --ry --mx --my
     .sfgi-reveal        IntersectionObserver adds .is-in, --i staggers
     .sfgi-layer[data-depth]   parallax layer inside a tilting card
     .sfgi-holo          holographic foil (player / champion cards)
     .sfgi-field         the perspective yard-line plane (needs NO children)
     .sfgi-count[data-to]      odometer counter
     [data-sfgi-countdown]     live countdown, unix seconds
     .sfgi-strip > .sfgi-strip__track   marquee
     .sfgi-scheme-toggle       light/dark switch
     .sfgi-bracket .sfgi-bk-team[data-team]   winner-path highlight
   Inline custom properties the PHP may set (the only inline styles allowed):
     --sfgi-team / --sfgi-team-2   team livery, from stepfox_gi_team_vars()
     --sfgi-pct                    fill width on a bar
     --i                           reveal stagger index
   ========================================================================== */

:root {
	/* ---- palette bridge: preset first, stadium-night literal as fallback -- */
	--sfgi-base:     var(--wp--preset--color--base, #05070c);
	--sfgi-panel:    var(--wp--preset--color--panel, #0c111c);
	--sfgi-panel-2:  var(--wp--preset--color--panel-2, #131a29);
	--sfgi-line:     var(--wp--preset--color--line, rgba(255, 255, 255, 0.09));
	--sfgi-ink:      var(--wp--preset--color--ink, #f3f6fb);
	--sfgi-muted:    var(--wp--preset--color--muted, #8b97ad);
	--sfgi-accent:   var(--wp--preset--color--accent, #ff5a1f);
	--sfgi-accent-2: var(--wp--preset--color--accent-2, #ffc93c);
	--sfgi-neon:     var(--wp--preset--color--neon, #00e5ff);
	--sfgi-violet:   var(--wp--preset--color--violet, #7b5cff);
	--sfgi-turf:     var(--wp--preset--color--turf, #00d67f);
	--sfgi-gold:     var(--wp--preset--color--gold, #ffd24a);
	--sfgi-glass:    var(--wp--preset--color--glass, rgba(5, 7, 12, 0.82));
	--sfgi-glass-2:  var(--wp--preset--color--glass-2, rgba(19, 26, 41, 0.66));
	--sfgi-edge:     var(--wp--preset--color--edge, rgba(255, 255, 255, 0.10));

	/* ---- colour-as-TEXT variants (rule 2) --------------------------------
	   In the night scheme the brand colours already clear 4.5:1 on `base`, so
	   these alias the presets. `:root.sfgi-light` re-mixes them toward the
	   dark ink. Never paint a brand colour on small text directly. */
	--sfgi-accent-ink: var(--wp--preset--color--accent, #ff5a1f);
	--sfgi-turf-ink:   var(--wp--preset--color--turf, #00d67f);
	--sfgi-gold-ink:   var(--wp--preset--color--gold, #ffd24a);
	--sfgi-neon-ink:   var(--wp--preset--color--neon, #00e5ff);
	--sfgi-violet-ink: var(--wp--preset--color--violet, #7b5cff);

	/* Text sitting ON a bright fill (blaze, turf, gold, neon). Every one of
	   those is a light colour, so the label goes dark in BOTH schemes — in
	   light mode this token is re-pointed at `ink`, which is itself dark. */
	--sfgi-on-bright: var(--wp--preset--color--base, #05070c);

	/* Text on photography. Deliberately a literal and NOT `ink`: over artwork
	   the caption stays light whatever the scheme does (rule 1c). */
	--sfgi-on-photo:     #ffffff;
	--sfgi-on-photo-dim: rgba(255, 255, 255, 0.74);

	/* ---- geometry (SPEC 2, mirrors GX_R / GX_R_SM / GX_R_LG) ---- */
	--sfgi-r:      14px;
	--sfgi-r-sm:   8px;
	--sfgi-r-lg:   22px;
	--sfgi-pill:   999px;
	--sfgi-gap:    16px;
	--sfgi-gap-sm: 10px;
	--sfgi-pad:    18px;

	/* ---- the depth ladder (mirror of GX_D0..GX_D4 in tools/lib.php) ---- */
	--sfgi-d0: inset 0 1px 0 rgba(255, 255, 255, 0.06);
	--sfgi-d1: 0 2px 10px rgba(0, 0, 0, 0.40), inset 0 1px 0 rgba(255, 255, 255, 0.07);
	--sfgi-d2: 0 12px 30px rgba(0, 0, 0, 0.50), inset 0 1px 0 rgba(255, 255, 255, 0.09);
	--sfgi-d3: 0 26px 60px rgba(0, 0, 0, 0.62), inset 0 1px 0 rgba(255, 255, 255, 0.11);
	--sfgi-d4: 0 44px 96px rgba(0, 0, 0, 0.70), inset 0 1px 0 rgba(255, 255, 255, 0.13);
	--sfgi-d2-hi: 0 26px 60px rgba(0, 0, 0, 0.62), 0 0 0 1px color-mix(in srgb, var(--sfgi-accent) 42%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.14);
	--sfgi-d3-hi: 0 44px 96px rgba(0, 0, 0, 0.72), 0 0 0 1px color-mix(in srgb, var(--sfgi-neon) 40%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.16);

	/* Hairlines that hug a radius and cost no layout width. Never a border. */
	--sfgi-ring:      inset 0 0 0 1px rgba(255, 255, 255, 0.10);
	--sfgi-ring-hot:  inset 0 0 0 1px color-mix(in srgb, var(--sfgi-accent) 55%, transparent);
	--sfgi-ring-neon: inset 0 0 0 1px color-mix(in srgb, var(--sfgi-neon) 45%, transparent);
	--sfgi-ring-gold: inset 0 0 0 1px color-mix(in srgb, var(--sfgi-gold) 50%, transparent);

	/* The top-left light wash every surface carries. Combined with the inset
	   top edge of the depth ladder it is what sells the "lit slab" read. */
	--sfgi-sheen: linear-gradient(165deg, rgba(255, 255, 255, 0.055) 0%, rgba(255, 255, 255, 0.012) 34%, rgba(255, 255, 255, 0) 62%);
	--sfgi-glass-blur: blur(18px) saturate(1.4);

	/* Photo scrim, bottom-weighted so the top of the picture stays clean. */
	--sfgi-scrim: linear-gradient(180deg, rgba(5, 7, 12, 0) 16%, rgba(5, 7, 12, 0.58) 56%, rgba(5, 7, 12, 0.96) 100%);

	/* ---- signature gradients, built from tokens so light mode follows ---- */
	--sfgi-g-brand: linear-gradient(135deg, var(--sfgi-accent) 0%, var(--sfgi-accent-2) 100%);
	--sfgi-g-holo:  linear-gradient(115deg, var(--sfgi-neon) 0%, var(--sfgi-violet) 52%, var(--sfgi-accent) 100%);
	--sfgi-g-turf:  linear-gradient(180deg, color-mix(in srgb, var(--sfgi-turf) 16%, transparent) 0%, transparent 100%);

	/* ---- motion ---- */
	--sfgi-ease:  cubic-bezier(.2, .7, .3, 1);
	--sfgi-t:     .26s;
	--sfgi-t-fast: .16s;
	--sfgi-persp: 1000px;

	/* ---- type (SPEC 2) ---- */
	--sfgi-f-display: var(--wp--preset--font-family--anton, Anton, "Arial Narrow", Impact, sans-serif);
	--sfgi-f-ui:      var(--wp--preset--font-family--barlow, "Barlow Condensed", "Arial Narrow", sans-serif);
	--sfgi-f-body:    var(--wp--preset--font-family--inter, Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
	--sfgi-f-num:     var(--wp--preset--font-family--rajdhani, Rajdhani, "DIN Alternate", ui-monospace, monospace);
}

/* ==========================================================================
   BASE GUARDS
   Nothing here paints. It stops the plugin's markup pushing the page sideways
   at 390px and normalises the browser defaults on the semantic elements the
   blocks emit.
   ========================================================================== */

[class^="sfgi-"],
[class*=" sfgi-"],
[class^="sfgi-"] *,
[class*=" sfgi-"] * {
	box-sizing: border-box;
}

[class^="sfgi-"],
[class*=" sfgi-"] {
	max-width: 100%;
	font-family: var(--sfgi-f-body);
	color: var(--sfgi-ink);
}

[class^="sfgi-"] img,
[class*=" sfgi-"] img {
	max-width: 100%;
	height: auto;
	display: block;
}

[class^="sfgi-"] p,
[class*=" sfgi-"] p,
[class^="sfgi-"] h1,
[class^="sfgi-"] h2,
[class^="sfgi-"] h3,
[class^="sfgi-"] h4,
[class*=" sfgi-"] h1,
[class*=" sfgi-"] h2,
[class*=" sfgi-"] h3,
[class*=" sfgi-"] h4 {
	margin: 0;
}

[class^="sfgi-"] ul,
[class*=" sfgi-"] ul,
[class^="sfgi-"] ol,
[class*=" sfgi-"] ol {
	margin: 0;
	padding: 0;
	list-style: none;
}

[class^="sfgi-"] table,
[class*=" sfgi-"] table {
	width: 100%;
	border-collapse: collapse;
	border-spacing: 0;
	font-variant-numeric: tabular-nums;
}

[class^="sfgi-"] button,
[class*=" sfgi-"] button {
	font: inherit;
	color: inherit;
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
}

.sfgi-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-family: var(--sfgi-f-ui);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--sfgi-accent-ink);
}
.sfgi-more .sfgi-i { transition: transform var(--sfgi-t-fast) var(--sfgi-ease); }
.sfgi-more:hover .sfgi-i { transform: translateX(3px); }

/* The mandatory empty state (SPEC 4.2). A block never renders nothing. */
.sfgi-empty {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 22px 18px;
	border-radius: var(--sfgi-r);
	background: color-mix(in srgb, var(--sfgi-panel) 70%, transparent);
	box-shadow: var(--sfgi-ring);
	color: var(--sfgi-muted);
	font-size: 13px;
	line-height: 1.5;
}
.sfgi-empty::before {
	content: "";
	width: 3px;
	align-self: stretch;
	border-radius: 2px;
	background: var(--sfgi-g-brand);
	opacity: 0.55;
	flex: 0 0 auto;
}

/* ==========================================================================
   ATOMS
   ========================================================================== */

/* ---- icons ---- */
.sfgi-i {
	width: 18px;
	height: 18px;
	flex: 0 0 auto;
	stroke-width: 1.7;
	vertical-align: middle;
}
.sfgi-i--xs { width: 12px; height: 12px; }

/* ---- team crest ---- */
.sfgi-crest {
	width: 40px;
	height: 40px;
	flex: 0 0 auto;
	border-radius: 50%;
	object-fit: contain;
	background:
		radial-gradient(circle at 50% 32%, color-mix(in srgb, var(--sfgi-team, var(--sfgi-accent)) 26%, transparent), transparent 68%),
		var(--sfgi-panel-2);
	box-shadow: var(--sfgi-ring), 0 4px 14px rgba(0, 0, 0, 0.35);
	padding: 3px;
}

/* ---- player headshot ---- */
.sfgi-face {
	width: 44px;
	height: 44px;
	flex: 0 0 auto;
	border-radius: 50%;
	object-fit: cover;
	object-position: 50% 16%;
	background: var(--sfgi-panel-2);
	box-shadow: var(--sfgi-ring), 0 6px 18px rgba(0, 0, 0, 0.4);
}
.sfgi-face--mono {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: var(--sfgi-f-num);
	font-weight: 700;
	color: var(--sfgi-muted);
}

/* ---- chips / badges ---- */
.sfgi-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 10px;
	border-radius: var(--sfgi-pill);
	font-family: var(--sfgi-f-ui);
	font-size: 11px;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	white-space: nowrap;
	color: var(--sfgi-muted);
	background: color-mix(in srgb, var(--sfgi-panel-2) 78%, transparent);
	box-shadow: var(--sfgi-ring);
	text-decoration: none;
}
.sfgi-chip.is-ink   { color: var(--sfgi-ink); }
.sfgi-chip.is-hot   { color: var(--sfgi-accent-ink); box-shadow: var(--sfgi-ring-hot); }
.sfgi-chip.is-neon  { color: var(--sfgi-neon-ink); box-shadow: var(--sfgi-ring-neon); }
.sfgi-chip.is-gold  { color: var(--sfgi-gold-ink); box-shadow: var(--sfgi-ring-gold); }
.sfgi-chip.is-win   { color: var(--sfgi-turf-ink); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sfgi-turf) 45%, transparent); }
.sfgi-chip.is-loss  { color: var(--sfgi-muted); }
.sfgi-chip.is-final { color: var(--sfgi-ink); }
.sfgi-chip.is-solid {
	color: var(--sfgi-on-bright);
	background: var(--sfgi-g-brand);
	box-shadow: 0 6px 18px color-mix(in srgb, var(--sfgi-accent) 32%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.sfgi-chip.is-team {
	color: var(--sfgi-ink);
	background: color-mix(in srgb, var(--sfgi-team, var(--sfgi-accent)) 22%, transparent);
	box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sfgi-team, var(--sfgi-accent)) 45%, transparent);
}

/* LIVE — blaze fill, dark label, and the pulse ring the FX layer animates. */
.sfgi-chip.is-live,
.sfgi-live {
	position: relative;
	color: var(--sfgi-on-bright);
	background: var(--sfgi-accent);
	box-shadow: 0 4px 16px color-mix(in srgb, var(--sfgi-accent) 45%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.28);
}
.sfgi-live__dot,
.sfgi-chip.is-live .sfgi-dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--sfgi-on-bright);
	flex: 0 0 auto;
}

/* ---- pills (filter controls) ---- */
.sfgi-pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 7px 13px;
	border-radius: var(--sfgi-pill);
	font-family: var(--sfgi-f-ui);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	white-space: nowrap;
	color: var(--sfgi-muted);
	background: color-mix(in srgb, var(--sfgi-panel-2) 70%, transparent);
	box-shadow: var(--sfgi-ring);
	cursor: pointer;
	transition: color var(--sfgi-t-fast) var(--sfgi-ease), background-color var(--sfgi-t-fast) var(--sfgi-ease), box-shadow var(--sfgi-t-fast) var(--sfgi-ease);
}
.sfgi-pill:hover { color: var(--sfgi-ink); background: var(--sfgi-panel-2); }
.sfgi-pill.is-active {
	color: var(--sfgi-on-bright);
	background: var(--sfgi-g-brand);
	box-shadow: 0 6px 20px color-mix(in srgb, var(--sfgi-accent) 34%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.28);
}

/* ---- buttons ---- */
.sfgi-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	padding: 12px 20px;
	border-radius: var(--sfgi-pill);
	font-family: var(--sfgi-f-ui);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	color: var(--sfgi-on-bright);
	background: var(--sfgi-g-brand);
	box-shadow: 0 10px 26px color-mix(in srgb, var(--sfgi-accent) 34%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.28);
	transition: box-shadow var(--sfgi-t) var(--sfgi-ease), filter var(--sfgi-t-fast) var(--sfgi-ease);
}
.sfgi-btn:hover {
	filter: brightness(1.06);
	box-shadow: 0 16px 38px color-mix(in srgb, var(--sfgi-accent) 44%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.34);
}
.sfgi-btn[disabled],
.sfgi-btn.is-disabled { opacity: 0.5; cursor: default; box-shadow: var(--sfgi-ring); }

/* ---- horizontal scroller: wide content scrolls here, never the page ---- */
.sfgi-scroll {
	overflow-x: auto;
	overflow-y: hidden;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
	scrollbar-color: color-mix(in srgb, var(--sfgi-ink) 22%, transparent) transparent;
	overscroll-behavior-x: contain;
	scroll-behavior: smooth;
}
.sfgi-scroll::-webkit-scrollbar { height: 8px; }
.sfgi-scroll::-webkit-scrollbar-track { background: transparent; }
.sfgi-scroll::-webkit-scrollbar-thumb {
	border-radius: var(--sfgi-pill);
	background: color-mix(in srgb, var(--sfgi-ink) 18%, transparent);
}
.sfgi-scroll::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--sfgi-ink) 30%, transparent); }
.sfgi-scroll > table { min-width: 620px; }

/* ==========================================================================
   FILTER BAR  (team-grid / player-grid / standings-full)
   ========================================================================== */

.sfgi-filters {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--sfgi-gap-sm);
	padding: 12px;
	margin-bottom: var(--sfgi-gap);
	border-radius: var(--sfgi-r);
	background-color: color-mix(in srgb, var(--sfgi-panel) 82%, transparent);
	background-image: var(--sfgi-sheen);
	box-shadow: var(--sfgi-d1), var(--sfgi-ring);
	position: relative;
	z-index: 3;
}
.sfgi-filters__search {
	flex: 1 1 190px;
	min-width: 0;
	padding: 10px 14px;
	border: 0;
	border-radius: var(--sfgi-pill);
	font-family: var(--sfgi-f-body);
	font-size: 13px;
	color: var(--sfgi-ink);
	background: color-mix(in srgb, var(--sfgi-base) 60%, transparent);
	box-shadow: var(--sfgi-ring);
	appearance: none;
	-webkit-appearance: none;
}
.sfgi-filters__search::placeholder { color: var(--sfgi-muted); opacity: 1; }
.sfgi-filters__select {
	padding: 10px 32px 10px 14px;
	border: 0;
	border-radius: var(--sfgi-pill);
	font-family: var(--sfgi-f-ui);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--sfgi-ink);
	background-color: color-mix(in srgb, var(--sfgi-base) 60%, transparent);
	background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
	background-position: right 16px center, right 11px center;
	background-size: 5px 5px, 5px 5px;
	background-repeat: no-repeat;
	box-shadow: var(--sfgi-ring);
	appearance: none;
	-webkit-appearance: none;
	cursor: pointer;
	max-width: 100%;
}
.sfgi-filters__select option { background: var(--sfgi-panel); color: var(--sfgi-ink); }
.sfgi-filters__pills {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	min-width: 0;
}
.sfgi-filter-count {
	margin-left: auto;
	font-family: var(--sfgi-f-num);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--sfgi-muted);
	white-space: nowrap;
}
.sfgi-noresults {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	padding: 48px 20px;
	border-radius: var(--sfgi-r);
	text-align: center;
	color: var(--sfgi-muted);
	background: color-mix(in srgb, var(--sfgi-panel) 60%, transparent);
	box-shadow: var(--sfgi-ring);
}
.sfgi-noresults b {
	font-family: var(--sfgi-f-display);
	font-size: 18px;
	text-transform: uppercase;
	color: var(--sfgi-ink);
}
[hidden] { display: none !important; }

/* ==========================================================================
   FOCUS — every interactive element gets a visible neon ring
   ========================================================================== */

.sfgi-btn:focus-visible,
.sfgi-pill:focus-visible,
.sfgi-chip:focus-visible,
.sfgi-more:focus-visible,
.sfgi-tcell:focus-visible,
.sfgi-card:focus-visible,
.sfgi-scroll:focus-visible,
.sfgi-filters__search:focus-visible,
.sfgi-filters__select:focus-visible,
.sfgi-scheme-toggle:focus-visible,
.sfgi-pick-opt:focus-visible,
.sfgi-bk-team:focus-visible,
.sfgi-tick:focus-visible,
.sfgi-strip__item:focus-visible,
th.sfgi-sortable:focus-visible,
[class^="sfgi-"] a:focus-visible,
[class*=" sfgi-"] a:focus-visible,
[class^="sfgi-"] button:focus-visible,
[class*=" sfgi-"] button:focus-visible,
[class^="sfgi-"] input:focus-visible,
[class*=" sfgi-"] input:focus-visible,
[class^="sfgi-"] select:focus-visible,
[class*=" sfgi-"] select:focus-visible {
	outline: 2px solid var(--sfgi-neon);
	outline-offset: 2px;
	border-radius: var(--sfgi-r-sm);
}
.sfgi-filters__search:focus-visible,
.sfgi-filters__select:focus-visible { border-radius: var(--sfgi-pill); }

.sfgi-gcard__top .sfgi-chip { margin-left: auto; }
.sfgi-box .sfgi-scroll > table { min-width: 460px; }

/* ---- 6. countdown ------------------------------------------------------- */
.sfgi-countdown {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: var(--sfgi-pad);
	border-radius: var(--sfgi-r);
	background-color: var(--sfgi-panel);
	background-image: var(--sfgi-sheen);
	box-shadow: var(--sfgi-d2), var(--sfgi-ring);
	position: relative;
	overflow: hidden;
}
.sfgi-countdown::before {
	content: "";
	position: absolute;
	inset: auto 0 0 0;
	height: 2px;
	background: var(--sfgi-g-brand);
	opacity: 0.85;
}
.sfgi-countdown.is-done .sfgi-cd-units { opacity: 0.5; }
.sfgi-roster .sfgi-scroll > table { min-width: 640px; }

/* ---- 10. team-grid / 18. player-grid — the filterable grids -------------
   Contract (SPEC 6, assets/filters.js):
     .sfgi-grid              block root
       .sfgi-filters         controls, [data-filter] / [data-value]
       [data-grid]           card wrapper, optional [data-visible-max]
         .sfgi-card          one item, data-* facets
       .sfgi-noresults       empty state
   ------------------------------------------------------------------------ */
.sfgi-grid { position: relative; }
.sfgi-grid [data-grid] {
	display: grid;
	gap: var(--sfgi-gap);
	grid-template-columns: repeat(2, minmax(0, 1fr));
}
.sfgi-grid[data-cols="1"] [data-grid] { grid-template-columns: minmax(0, 1fr); }

/* Hundreds of cards can exist on /players/ — keep the ones off-screen out of
   layout and paint. The intrinsic size stops the scrollbar jumping. */
.sfgi-grid [data-grid] > .sfgi-card {
	content-visibility: auto;
	contain-intrinsic-size: auto 260px;
}

/* ---- 13. team-strip — the marquee -------------------------------------- */
.sfgi-strip {
	position: relative;
	overflow: hidden;
	-webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 1) 8%, rgba(0, 0, 0, 1) 92%, rgba(0, 0, 0, 0) 100%);
	mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 1) 8%, rgba(0, 0, 0, 1) 92%, rgba(0, 0, 0, 0) 100%);
}
.sfgi-strip__item img,
.sfgi-strip__item .sfgi-crest { filter: grayscale(1); opacity: 0.7; transition: filter var(--sfgi-t-fast) var(--sfgi-ease), opacity var(--sfgi-t-fast) var(--sfgi-ease); }
.sfgi-strip__item:hover img,
.sfgi-strip__item:hover .sfgi-crest { filter: none; opacity: 1; }
.sfgi-sfull .sfgi-scroll > table { min-width: 760px; }
.sfgi-bracket.is-compact .sfgi-bk-team .sfgi-crest { display: none; }

/* ==================================================== shared base (audit fix)
   These generic classes are emitted by the component renderers but had no
   rule anywhere — the block theme composed its pages from field blocks, so
   the gap never surfaced there. Sized against the block demo's equivalents. */

.sfgi-title {
	font-family: var(--sfgi-f-display);
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 0.01em;
	line-height: 1.02;
	color: var(--sfgi-ink);
	margin: 0;
}

.sfgi-sub {
	font-family: var(--sfgi-f-body);
	font-size: 15px;
	line-height: 1.6;
	color: var(--sfgi-muted);
	margin: 0;
}

.sfgi-meta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 12px;
	font-family: var(--sfgi-f-ui);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.04em;
	color: var(--sfgi-muted);
	margin: 0;
}

.sfgi-kv {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 14px;
	padding: 8px 0;
	border-bottom: 1px solid var(--sfgi-line);
	font-family: var(--sfgi-f-ui);
	font-size: 13.5px;
	letter-spacing: 0.04em;
}

.sfgi-kv:last-child {
	border-bottom: 0;
}

.sfgi-kv > :first-child {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--sfgi-muted);
}

.sfgi-kv > :last-child {
	font-weight: 600;
	color: var(--sfgi-ink);
	text-align: right;
}

/* A hero-grade rounded surface. Components that go full-bleed (the front
   field hero) reset the radius themselves or via the page CSS. */
.sfgi-stage {
	position: relative;
	overflow: hidden;
	border-radius: var(--sfgi-r-lg);
	background: var(--sfgi-panel);
	box-shadow: var(--sfgi-d2), var(--sfgi-ring);
}

/* Crest + headshot size ladder. */
.sfgi-crest--xs {
	width: 18px;
	height: 18px;
}

.sfgi-crest--sm {
	width: 28px;
	height: 28px;
}

.sfgi-crest--lg {
	width: 64px;
	height: 64px;
}

.sfgi-crest--xl {
	width: 92px;
	height: 92px;
}

.sfgi-crest--xxl {
	width: 128px;
	height: 128px;
}

.sfgi-face--xs {
	width: 28px;
	height: 28px;
}

.sfgi-face--sm {
	width: 36px;
	height: 36px;
}

.sfgi-face--lg {
	width: 72px;
	height: 72px;
}

/* Inline icon modifiers. */
.sfgi-i--sm {
	width: 14px;
	height: 14px;
}

.sfgi-i--muted {
	color: var(--sfgi-muted);
}

.sfgi-icon--hot {
	color: var(--sfgi-accent);
}

.sfgi-eyebrow--gold {
	color: var(--sfgi-gold-ink);
}

.sfgi-btn--ghost {
	background: transparent;
	color: var(--sfgi-ink);
	box-shadow: var(--sfgi-ring);
}

.sfgi-btn--ghost:hover {
	background: var(--sfgi-panel-2);
	box-shadow: var(--sfgi-ring-hot);
}

/* Small furniture. */
.sfgi-sep {
	display: inline-block;
	width: 3px;
	height: 3px;
	border-radius: 999px;
	background: var(--sfgi-muted);
	opacity: 0.55;
	flex: 0 0 auto;
}

.sfgi-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.sfgi-empty-cell,
.sfgi-bye-mark {
	color: var(--sfgi-muted);
	opacity: 0.6;
}

.sfgi-chip-label {
	font-size: 10px;
	letter-spacing: 0.16em;
	opacity: 0.8;
}

.sfgi-stat {
	font-family: var(--sfgi-f-num);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	color: var(--sfgi-ink);
}

.sfgi-stat--hot {
	color: var(--sfgi-accent-ink);
}

.sfgi-tile-label {
	font-family: var(--sfgi-f-ui);
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--sfgi-muted);
}

.sfgi-tile-sub {
	font-size: 12px;
	line-height: 1.45;
	color: var(--sfgi-muted);
}