/* ==========================================================================
   2. .sfgi-tile — the stat tile
   Markup (stepfox_gi_p3_tile, includes/blocks-team.php):
     <div class="sfgi-tile sfgi-reveal [is-win|is-loss|…]">
       <span class="sfgi-tile-icon"><svg class="sfgi-i"></span>
       <span class="sfgi-tile-value"><span class="sfgi-count" data-to></span>
       <span class="sfgi-tile-label">W</span>
       <span class="sfgi-tile-sub">Wins</span>
     </div>
   It is dropped straight into somebody else's grid (.sfgi-record-tiles,
   .sfgi-thero__stats …), so it declares no width of its own — only that it may
   shrink (min-width:0) and must not push its container sideways.
   ========================================================================== */

.sfgi-tile {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 2px;
	min-width: 0;
	padding: 13px 13px 14px;
	border-radius: var(--sfgi-r-sm);
	background-color: color-mix(in srgb, var(--sfgi-base) 45%, transparent);
	background-image: var(--sfgi-sheen);
	box-shadow: var(--sfgi-ring), var(--sfgi-d1);
	overflow: hidden;
	isolation: isolate;
	transition: box-shadow var(--sfgi-t) var(--sfgi-ease);
}

/* The club-coloured wash. --sfgi-team is set inline by the PHP when the tile
   belongs to a team; it degrades to the brand accent everywhere else. */
.sfgi-tile::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background: radial-gradient(240px 130px at 6% -40%, color-mix(in srgb, var(--sfgi-team, var(--sfgi-accent)) 22%, transparent), transparent 72%);
}

.sfgi-tile:hover { box-shadow: var(--sfgi-ring), var(--sfgi-d2); }

/* State tints. The block PHP puts is-win / is-loss / is-hot / is-gold on the
   tile; without these the win and loss tiles are indistinguishable. */
.sfgi-tile.is-win  { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sfgi-turf) 38%, transparent), var(--sfgi-d1); }
.sfgi-tile.is-win  .sfgi-tile-icon,
.sfgi-tile.is-win  .sfgi-tile-value { color: var(--sfgi-turf-ink); }
.sfgi-tile.is-loss .sfgi-tile-icon { color: var(--sfgi-muted); }
.sfgi-tile.is-hot  { box-shadow: var(--sfgi-ring-hot), var(--sfgi-d1); }
.sfgi-tile.is-hot  .sfgi-tile-icon,
.sfgi-tile.is-hot  .sfgi-tile-value { color: var(--sfgi-accent-ink); }
.sfgi-tile.is-gold { box-shadow: var(--sfgi-ring-gold), var(--sfgi-d1); }
.sfgi-tile.is-gold .sfgi-tile-icon,
.sfgi-tile.is-gold .sfgi-tile-value { color: var(--sfgi-gold-ink); }

@media (min-width: 769px) {
	.sfgi-tile { padding: 15px 15px 16px; }
}

/* A labelled chip is a two-line object on a phone, not a ticker pill. Only the
   box model is touched here — the chip's own fill and ring (and its .is-gold /
   .is-hot / .is-live variants in gridiron.css) are left alone. */
.sfgi-chips .sfgi-chip {
	flex-wrap: wrap;
	max-width: 100%;
	min-width: 0;
	padding: 5px 11px;
}
.sfgi-chip-icon .sfgi-i { width: 100%; height: 100%; }

/* Inside a coloured chip the two halves follow the chip's own ink. */
.sfgi-chip.is-gold .sfgi-chip-value,
.sfgi-chip.is-hot  .sfgi-chip-value,
.sfgi-chip.is-neon .sfgi-chip-value { color: currentColor; }

/* ==========================================================================
   5. .sfgi-btn--accent — the primary call to action
   .sfgi-btn (gridiron.css) is already the brand GRADIENT. The accent variant
   is the flat, louder one: a solid blaze fill, a hot ring and a bigger glow,
   with a holographic sweep on hover. Used for "Log in to play" on /pickem/.
   ========================================================================== */

.sfgi-btn--accent {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	color: var(--sfgi-on-bright);
	background-color: var(--sfgi-accent);
	background-image: none;
	box-shadow:
		0 14px 34px color-mix(in srgb, var(--sfgi-accent) 46%, transparent),
		var(--sfgi-ring-hot),
		var(--sfgi-d1);
}
.sfgi-btn--accent::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	opacity: 0;
	background: var(--sfgi-g-holo);
	mix-blend-mode: overlay;
	transition: opacity var(--sfgi-t) var(--sfgi-ease);
}
.sfgi-btn--accent:hover {
	box-shadow:
		0 20px 46px color-mix(in srgb, var(--sfgi-accent) 56%, transparent),
		var(--sfgi-ring-hot),
		var(--sfgi-d2);
}
.sfgi-btn--accent:hover::after { opacity: 0.42; }

/* ==========================================================================
   6. FILTER ROW — .sfgi-input .sfgi-select .sfgi-select-wrap
      .sfgi-select-arrow .sfgi-pills .sfgi-pills--sort .sfgi-filters-icon
   Markup (stepfox_gi_p3_filters, includes/blocks-team.php — /teams/ and
   /players/):
     <div class="sfgi-filters">
       <div class="sfgi-filters-search">
         <span class="sfgi-filters-icon"><svg></span>
         <input class="sfgi-input" type="search" data-filter="search">
       </div>
       <div class="sfgi-pills" role="group"> <button class="sfgi-pill">…
       <div class="sfgi-select-wrap">
         <select class="sfgi-select"> … </select>
         <span class="sfgi-select-arrow"><svg></span>
       </div>
       <div class="sfgi-pills sfgi-pills--sort"> … </div>
   Every control is a sunken well on the panel: inset ring, no border, pill
   radius, and a neon focus ring that a keyboard user cannot miss.
   ========================================================================== */

/* The search field's positioning context. The icon is a SIBLING of the input,
   so something has to be `position: relative` for it; the :has() guard makes
   the icon work in any wrapper, present or future, without this sheet having
   to know the wrapper's name. */
.sfgi-filters-search {
	position: relative;
	display: flex;
	align-items: center;
	flex: 1 1 220px;
	min-width: 0;
	max-width: 100%;
}

.sfgi-input {
	/* flex-basis, not width: the input is sometimes a lone child of
	   .sfgi-filters-search and sometimes a direct child of the .sfgi-filters
	   row, and `width: 100%` would claim a whole line in the second case. */
	flex: 1 1 200px;
	width: 100%;
	min-width: 0;
	max-width: 100%;
	padding: 10px 14px;
	border: 0;
	border-radius: var(--sfgi-pill);
	font-family: var(--sfgi-f-body);
	font-size: 13px;
	line-height: 1.5;
	color: var(--sfgi-ink);
	background: color-mix(in srgb, var(--sfgi-base) 62%, transparent);
	box-shadow: var(--sfgi-ring), var(--sfgi-d0);
	appearance: none;
	-webkit-appearance: none;
	transition: box-shadow var(--sfgi-t-fast) var(--sfgi-ease), background-color var(--sfgi-t-fast) var(--sfgi-ease);
}
.sfgi-input::placeholder { color: var(--sfgi-muted); opacity: 1; }
.sfgi-input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.sfgi-input:hover { box-shadow: var(--sfgi-ring-hot), var(--sfgi-d0); }

/* Room for the leading magnifier when the input is inside the search well. */
.sfgi-filters-search .sfgi-input { padding-left: 38px; }
.sfgi-filters-search:focus-within .sfgi-filters-icon { color: var(--sfgi-neon-ink); }

.sfgi-select-wrap {
	position: relative;
	display: inline-flex;
	align-items: center;
	flex: 0 1 auto;
	min-width: 0;
	max-width: 100%;
}

.sfgi-select {
	/* No `width: 100%`: the wrapper is shrink-to-fit, so a percentage width
	   would resolve against a width the select itself is supposed to define.
	   It sizes to its widest option, capped by the wrapper, and ellipsises. */
	min-width: 0;
	max-width: 100%;
	padding: 10px 36px 10px 14px;
	border: 0;
	border-radius: var(--sfgi-pill);
	font-family: var(--sfgi-f-ui);
	font-size: 12px;
	font-weight: 600;
	line-height: 1.5;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-overflow: ellipsis;
	color: var(--sfgi-ink);
	background: color-mix(in srgb, var(--sfgi-base) 62%, transparent);
	box-shadow: var(--sfgi-ring), var(--sfgi-d0);
	appearance: none;
	-webkit-appearance: none;
	cursor: pointer;
	transition: box-shadow var(--sfgi-t-fast) var(--sfgi-ease);
}
.sfgi-select:hover { box-shadow: var(--sfgi-ring-hot), var(--sfgi-d0); }
/* The dropdown list is painted by the OS: it must be told the panel colour or
   it inherits the page's and renders light-on-light. */
.sfgi-select option { background: var(--sfgi-panel); color: var(--sfgi-ink); }
.sfgi-select-wrap:focus-within .sfgi-select-arrow,
.sfgi-select:hover + .sfgi-select-arrow { color: var(--sfgi-neon-ink); }

/* A segmented control: the pills sit in their own sunken tray so a row of
   filters reads as one object instead of a scatter of lozenges. */
.sfgi-pills {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px;
	min-width: 0;
	max-width: 100%;
	padding: 4px;
	border-radius: var(--sfgi-pill);
	background: color-mix(in srgb, var(--sfgi-base) 48%, transparent);
	box-shadow: var(--sfgi-ring);
}
.sfgi-pills .sfgi-pill {
	padding: 6px 12px;
	font-size: 11.5px;
	background: transparent;
	box-shadow: none;
}
.sfgi-pills .sfgi-pill:hover { background: color-mix(in srgb, var(--sfgi-ink) 8%, transparent); }
.sfgi-pills .sfgi-pill.is-active {
	background: var(--sfgi-g-brand);
	box-shadow: 0 6px 18px color-mix(in srgb, var(--sfgi-accent) 32%, transparent), var(--sfgi-d0);
}

/* The sort group is secondary to the facet groups: neon edge, and on a wide
   viewport it is pushed to the far end of the flex row. */
.sfgi-pills--sort { box-shadow: var(--sfgi-ring-neon); }
.sfgi-pills--sort .sfgi-pill.is-active {
	color: var(--sfgi-on-bright);
	background: linear-gradient(135deg, var(--sfgi-neon) 0%, var(--sfgi-violet) 100%);
	box-shadow: 0 6px 18px color-mix(in srgb, var(--sfgi-neon) 30%, transparent), var(--sfgi-d0);
}
@media (min-width: 1025px) {
	.sfgi-pills--sort { margin-left: auto; }
}
.sfgi-is-empty > .sfgi-empty { width: 100%; }

/* ==========================================================================
   9. FOCUS
   gridiron.css rings the elements it knew about. These primitives are new, and
   two of them (.sfgi-select, the pill inside a tray) sit on a surface that
   would otherwise swallow the default outline.
   ========================================================================== */

.sfgi-input:focus-visible,
.sfgi-select:focus-visible,
.sfgi-btn--accent:focus-visible,
.sfgi-pills .sfgi-pill:focus-visible,
a.sfgi-badge:focus-visible,
.sfgi-tile:focus-visible {
	outline: 2px solid var(--sfgi-neon);
	outline-offset: 2px;
}
.sfgi-input:focus-visible,
.sfgi-select:focus-visible,
.sfgi-pills .sfgi-pill:focus-visible { border-radius: var(--sfgi-pill); }

/* Focus-within lifts the whole well, so the control reads as active even when
   the outline is clipped by an ancestor's overflow. */
.sfgi-filters-search:focus-within .sfgi-input,
.sfgi-select-wrap:focus-within .sfgi-select { box-shadow: var(--sfgi-ring-neon), var(--sfgi-d1); }

/* ==========================================================================
   10. MOTION
   Nothing above animates by itself; these are the pointer-driven flourishes,
   and they exist only when the visitor has not asked for less motion and
   assets/fx.js has actually booted.
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {
	body.sfgi-fx .sfgi-tile { transition: box-shadow var(--sfgi-t) var(--sfgi-ease), transform var(--sfgi-t) var(--sfgi-ease); }
	body.sfgi-fx .sfgi-tile:hover { transform: translate3d(0, -2px, 0); }
	body.sfgi-fx .sfgi-btn--accent { transition: box-shadow var(--sfgi-t) var(--sfgi-ease), transform var(--sfgi-t-fast) var(--sfgi-ease); }
	body.sfgi-fx .sfgi-btn--accent:hover { transform: translate3d(0, -2px, 0); }
	body.sfgi-fx .sfgi-btn--accent:active { transform: translate3d(0, 0, 0); }
}

@keyframes sfgi-ring-breathe {
	0%, 100% { opacity: 0.75; transform: scale(1); }
	50%      { opacity: 1;    transform: scale(1.035); }
}

@media (prefers-reduced-motion: reduce) {
	.sfgi-ring,
	.sfgi-tile,
	.sfgi-btn--accent,
	.sfgi-btn--accent::after,
	.sfgi-input,
	.sfgi-select,
	.sfgi-select-arrow,
	.sfgi-filters-icon {
		animation: none;
		transition: none;
	}
	.sfgi-tile:hover,
	.sfgi-btn--accent:hover,
	.sfgi-btn--accent:active { transform: none; }
}