/* ---- the monogram fallback ----------------------------------------------
   Almost every player on the live site has no headshot attachment, so
   stepfox_ih_pl_face() returns a .sfih-face--mono span. ice-hockey.css sizes the
   CREST monograms but never the FACE ones, which left a 16px numeral adrift in
   a 168px circle. When a real photo does arrive it is an <img>, and the base
   guard's `[class^="sfih-"] img { height: auto }` outranks .sfih-phero__photo's
   own height — hence the element-qualified override, which must FILL the
   circle rather than letterbox inside it. */
.sfih-phero__photo.sfih-face--mono {
	font-family: var(--sfih-f-display);
	font-size: 62px;
	line-height: 1;
	letter-spacing: 0.02em;
	color: color-mix(in srgb, var(--sfih-ink) 72%, transparent);
	background:
		radial-gradient(circle at 50% 28%, color-mix(in srgb, var(--sfih-team, var(--sfih-accent)) 40%, transparent), transparent 70%),
		var(--sfih-panel-2);
}

/* ==========================================================================
   6. PLAYER GRID — .sfih-grid--players
   Live DOM:
     <div class="sfih-grid sfih-grid--players" data-cols="4" data-noun="players">
       <div class="sfih-filters"> … </div>
       <div class="sfih-cards sfih-cards--players" data-grid data-visible-max="0">
         <a class="sfih-card sfih-pcard sfih-tilt sfih-reveal sfih-holo" …>
   829 players ship on /players/, so the card wrapper stays on
   content-visibility. ice-hockey.css already turns that on for
   `.sfih-grid [data-grid] > .sfih-card` with a 260px placeholder; a player
   card is taller than that, and an under-guess makes the scrollbar jump.
   ========================================================================== */

.sfih-grid--players {
	--sfih-pcols: 2;
	scroll-margin-top: 24px;
}
.sfih-grid--players [data-grid] {
	grid-template-columns: repeat(var(--sfih-pcols), minmax(0, 1fr));
	gap: var(--sfih-gap-sm);
	min-width: 0;
}
.sfih-grid--players [data-grid] > .sfih-card {
	contain-intrinsic-size: auto 322px;
}
/* A grid pinned to one column by the block author stays pinned at every
   width; the rest step up with the viewport, capped by data-cols. */
.sfih-grid--players[data-cols="1"] { --sfih-pcols: 1; }

@media (min-width: 600px) {
	.sfih-grid--players { --sfih-pcols: 3; }
	.sfih-grid--players [data-grid] { gap: var(--sfih-gap); }
	.sfih-grid--players[data-cols="1"] { --sfih-pcols: 1; }
	.sfih-grid--players[data-cols="2"] { --sfih-pcols: 2; }
}
@media (min-width: 769px) {
	.sfih-grid--players { --sfih-pcols: 4; }
	.sfih-grid--players[data-cols="1"] { --sfih-pcols: 1; }
	.sfih-grid--players[data-cols="2"] { --sfih-pcols: 2; }
	.sfih-grid--players[data-cols="3"] { --sfih-pcols: 3; }
}
@media (min-width: 1025px) {
	.sfih-grid--players[data-cols="5"] { --sfih-pcols: 5; }
	.sfih-grid--players[data-cols="6"] { --sfih-pcols: 6; }
}
.sfih-pcard__chips .sfih-chip {
	max-width: 100%;
	padding: 3px 9px;
	font-size: 10px;
	letter-spacing: 0.16em;
}

/* The card's own monogram fallback, and the object-fit that makes a real
   headshot FILL the round tile instead of letterboxing inside it (the base
   guard's `img { height: auto }` outranks .sfih-pcard__face on its own). */
.sfih-pcard__face.sfih-face--mono {
	font-family: var(--sfih-f-display);
	font-size: calc(var(--sfih-pface) * 0.36);
	line-height: 1;
	color: color-mix(in srgb, var(--sfih-ink) 66%, transparent);
	background:
		radial-gradient(circle at 50% 30%, color-mix(in srgb, var(--sfih-team, var(--sfih-accent)) 38%, transparent), transparent 72%),
		var(--sfih-panel-2);
}
.sfih-leadcard__face .sfih-face--mono {
	font-family: var(--sfih-f-display);
	font-size: 28px;
	line-height: 1;
	color: color-mix(in srgb, var(--sfih-ink) 78%, transparent);
}
/* Fill the square crop; do not letterbox. Element-qualified so it outranks the
   `[class^="sfih-"] img { height: auto }

/* ==========================================================================
   10. MOTION — cooperating with assets/fx.js
   fx.js writes, on a `.sfih-tilt` card: --rx --ry (deg, capped at 7),
   --mx --my (0-100%) and --lift (px); on a `.sfih-layer[data-depth]` inside
   it: --px --py --z; and on a `.sfih-holo` element: --holo (0-200%). It adds
   `sfih-fx` to <body> on boot and `sfih-fx-pointer` only when the pointer
   effects are actually allowed to run, so all of this is dead weight for a
   no-JS visitor, a touch device or anyone who asked for reduced motion.

   The tilt is deliberately scoped to `sfih-fx-pointer`: /players/ paints 829
   cards, and a non-none transform on every one of them is a cost worth paying
   only where the effect is real.
   ========================================================================== */

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

	/* The parallax layers. .sfih-pcard and .sfih-leadcard both clip their
	   overflow, which flattens preserve-3d, so --z is left alone and the shift
	   is done in the plane — which is the half of the effect that survives. */
	body.sfih-fx-pointer .sfih-pcard .sfih-layer,
	body.sfih-fx-pointer .sfih-leadcard .sfih-layer,
	body.sfih-fx-pointer .sfih-phero .sfih-layer {
		transform: translate3d(var(--px, 0px), var(--py, 0px), 0);
		transition: transform var(--sfih-t) var(--sfih-ease);
	}

	/* The scroll reveal. Gated on `sfih-fx-reveal`, which fx.js adds ONLY when
	   an IntersectionObserver is present and motion is allowed — gating on
	   `sfih-fx` alone would leave an older browser staring at a blank page.
	   Every selector also demands `.sfih-reveal` itself: fx.js only ever adds
	   `.is-in` to elements carrying that class, so hiding anything else would
	   hide it for good. `.sfih-leaders__item` is NOT one of them — the anchor
	   inside it is. */
	body.sfih-fx-reveal .sfih-pcard.sfih-reveal,
	body.sfih-fx-reveal .sfih-lead.sfih-reveal,
	body.sfih-fx-reveal .sfih-prank__row.sfih-reveal {
		opacity: 0;
		transform: translate3d(0, 14px, 0);
		transition:
			opacity .5s var(--sfih-ease) var(--fxd, 0ms),
			transform .5s var(--sfih-ease) var(--fxd, 0ms);
	}
	body.sfih-fx-reveal .sfih-pcard.sfih-reveal.is-in,
	body.sfih-fx-reveal .sfih-lead.sfih-reveal.is-in,
	body.sfih-fx-reveal .sfih-prank__row.sfih-reveal.is-in {
		opacity: 1;
		transform: none;
	}
	/* Once revealed, a card must go back to answering the tilt. */
	body.sfih-fx-pointer.sfih-fx-reveal .sfih-pcard.sfih-reveal.is-in {
		transform: perspective(var(--sfih-persp)) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translate3d(0, var(--lift, 0px), 0);
	}
}

@media (prefers-reduced-motion: reduce) {
	.sfih-pcard,
	.sfih-leadcard,
	.sfih-phero,
	.sfih-lead,
	.sfih-leaders__item,
	.sfih-prank__row,
	.sfih-pcard .sfih-layer,
	.sfih-leadcard .sfih-layer,
	.sfih-phero .sfih-layer {
		opacity: 1;
		transform: none;
		transition: none;
		animation: none;
	}
}

/* ==========================================================================
   COMPONENT SHELLS (orphan audit, 2026-08) — appended, never edit above.
   The renderers in includes/blocks-player.php emit complete components
   (player grid cards, player hero, bio, rank, statline, leaders, and the
   roster-table column helpers) whose classes had no rule anywhere: the block
   theme composed those pages from field blocks, so the gap never surfaced
   there. Numbers are taken from the block demo's measured reference
   (#block_f-ldr-* in scratchpad/ref/rules-f.css) and the design language in
   assets/ice-hockey.css. Tokens only — no literal colors.
   ========================================================================== */

/* ---- 1. headshot size modifiers -----------------------------------------
   Base .sfih-face is 44px. The element-qualified img selectors exist to
   outrank the `[class^="sfih-"] img { height: auto }` guard in ice-hockey.css
   (0,1,1 vs 0,1,1, later in the cascade), so a real photo fills the circle. */
.sfih-face--lg,
img.sfih-face--lg {
	width: 72px;
	height: 72px;
}
.sfih-face--sm,
img.sfih-face--sm {
	width: 38px;
	height: 38px;
}
.sfih-face--xs,
img.sfih-face--xs {
	width: 26px;
	height: 26px;
}
.sfih-face--mono.sfih-face--lg { font-size: 26px; }
.sfih-face--mono.sfih-face--sm { font-size: 13px; }
.sfih-face--mono.sfih-face--xs { font-size: 10px; }

/* ---- 2. roster-table column helpers -------------------------------------
   blocks-team.php / blocks-player.php print the roster with one class per
   column. Numeric columns read right-aligned in Rajdhani tabular numerals;
   the player column stays left and wide; .sfih-col-optional drops under
   768px so the table survives a phone without growing a scrollbar it does
   not need. */
.sfih-col-num,
.sfih-col-ht,
.sfih-col-wt,
.sfih-col-age,
.sfih-col-exp,
.sfih-col-pct,
.sfih-col-rk,
.sfih-col-stat,
.sfih-col-strk {
	text-align: right;
	font-family: var(--sfih-f-num);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}
.sfih-col-num  { width: 44px; }
.sfih-col-ht   { width: 54px; }
.sfih-col-wt   { width: 54px; }
.sfih-col-age  { width: 48px; }
.sfih-col-exp  { width: 48px; }
.sfih-col-pct  { width: 64px; }
.sfih-col-rk   { width: 44px; }
.sfih-col-strk { width: 56px; }
.sfih-col-stat { width: 84px; }
.sfih-col-player {
	text-align: left;
	min-width: 180px;
}
.sfih-col-pos {
	text-align: left;
	width: 64px;
}
.sfih-col-college {
	text-align: left;
	white-space: nowrap;
}
/* Non-media base so the class is never a no-op on wide screens either. */
.sfih-col-optional { transition: opacity var(--sfih-t-fast) var(--sfih-ease); }
@media (max-width: 768px) {
	.sfih-col-optional { display: none; }
}

.sfih-roster-num {
	font-family: var(--sfih-f-num);
	font-weight: 600;
	color: var(--sfih-muted);
}
.sfih-roster-stat-value {
	font-family: var(--sfih-f-num);
	font-weight: 700;
	color: var(--sfih-ink);
}
.sfih-roster-stat-unit {
	margin-left: 5px;
	font-family: var(--sfih-f-ui);
	font-size: 9.5px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--sfih-muted);
}

/* The position tag, in club colour wherever --sfih-team is set. */
.sfih-pos {
	display: inline-flex;
	align-items: center;
	padding: 2px 8px;
	border-radius: var(--sfih-r-sm);
	font-family: var(--sfih-f-ui);
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	white-space: nowrap;
	color: var(--sfih-ink);
	background: color-mix(in srgb, var(--sfih-team, var(--sfih-accent)) 18%, transparent);
	box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sfih-team, var(--sfih-accent)) 40%, transparent);
}

/* ---- 3. player card — .sfih-pcard__* ------------------------------------
   <a.sfih-card.sfih-pcard> > __media (number watermark + face)
   + __body (name / sub / chips) + __stats (three <span><b>v</b><span>u</span>). */
.sfih-pcard {
	display: flex;
	flex-direction: column;
	height: 100%;
	position: relative;
	overflow: hidden;
	border-radius: var(--sfih-r);
	background-color: var(--sfih-panel);
	background-image: var(--sfih-sheen);
	box-shadow: var(--sfih-d2), var(--sfih-ring);
	color: var(--sfih-ink);
	text-decoration: none;
	transition: box-shadow var(--sfih-t) var(--sfih-ease), transform var(--sfih-t) var(--sfih-ease);
}
.sfih-pcard:hover {
	transform: translateY(-2px);
	box-shadow: var(--sfih-d3), var(--sfih-ring-hot);
}
.sfih-pcard__media {
	--sfih-pface: 96px;
	position: relative;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	overflow: hidden;
	min-height: 128px;
	padding: 18px 16px 0;
	border-bottom: 1px solid var(--sfih-line);
	background:
		radial-gradient(circle at 50% 120%, color-mix(in srgb, var(--sfih-team, var(--sfih-accent)) 26%, transparent), transparent 72%),
		var(--sfih-panel-2);
}
.sfih-pcard__face,
img.sfih-pcard__face {
	position: relative;
	z-index: 1;
	width: var(--sfih-pface);
	height: var(--sfih-pface);
	flex: 0 0 auto;
	border-radius: 999px 999px 0 0;
	object-fit: cover;
	object-position: 50% 12%;
	background: color-mix(in srgb, var(--sfih-base) 55%, transparent);
	box-shadow: var(--sfih-ring);
}
.sfih-pcard__no {
	position: absolute;
	top: 4px;
	right: 12px;
	z-index: 0;
	font-family: var(--sfih-f-num);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	font-size: 64px;
	line-height: 1;
	letter-spacing: -0.02em;
	color: color-mix(in srgb, var(--sfih-ink) 13%, transparent);
	pointer-events: none;
}
.sfih-pcard__body {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 13px 16px 4px;
}
.sfih-pcard__name {
	font-family: var(--sfih-f-display);
	font-weight: 400;
	font-size: 17px;
	line-height: 1.08;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--sfih-ink);
}
.sfih-pcard__sub {
	font-family: var(--sfih-f-ui);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--sfih-muted);
}
.sfih-pcard__stats {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 8px;
	margin-top: auto;
	padding: 11px 16px 14px;
	border-top: 1px solid var(--sfih-line);
}
.sfih-pcard__stats > span {
	display: flex;
	flex-direction: column;
	gap: 1px;
	min-width: 0;
}
.sfih-pcard__stats > span > b {
	font-family: var(--sfih-f-num);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	font-size: 16px;
	line-height: 1.1;
	color: var(--sfih-ink);
}
.sfih-pcard__stats > span > span {
	font-family: var(--sfih-f-ui);
	font-size: 9.5px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--sfih-muted);
}

/* ---- 4. player hero — .sfih-phero__* ------------------------------------
   The stage on single-ih_player: headshot left under the giant jersey
   number, identity right, headline tiles across the bottom. */
.sfih-phero {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: center;
	gap: 12px 28px;
	padding: 26px 26px 24px;
	border-radius: var(--sfih-r-lg);
	background-color: var(--sfih-panel);
	background-image:
		radial-gradient(120% 130% at 0% 0%, color-mix(in srgb, var(--sfih-team, var(--sfih-accent)) 20%, transparent), transparent 55%),
		var(--sfih-sheen);
	box-shadow: var(--sfih-d3), var(--sfih-ring);
	color: var(--sfih-ink);
}
.sfih-phero__media {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 200px;
	min-height: 184px;
	flex: 0 0 auto;
}
.sfih-phero__photo,
img.sfih-phero__photo {
	position: relative;
	z-index: 1;
	width: 168px;
	height: 168px;
	border-radius: 50%;
	object-fit: cover;
	object-position: 50% 14%;
	box-shadow: var(--sfih-ring), 0 18px 44px rgba(0, 0, 0, 0.55);
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.sfih-phero__no {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 0;
	transform: translate(-50%, -54%);
	font-family: var(--sfih-f-num);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	font-size: 190px;
	line-height: 1;
	letter-spacing: -0.04em;
	color: color-mix(in srgb, var(--sfih-ink) 9%, transparent);
	pointer-events: none;
	user-select: none;
}
.sfih-phero__body {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
	min-width: 0;
}
.sfih-phero__name {
	margin: 0;
	font-family: var(--sfih-f-display);
	font-weight: 400;
	font-size: clamp(30px, 4.6vw, 54px);
	line-height: 0.98;
	letter-spacing: 0.01em;
	text-transform: uppercase;
	color: var(--sfih-ink);
}
.sfih-phero__team {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-family: var(--sfih-f-ui);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--sfih-ink);
	text-decoration: none;
	transition: color var(--sfih-t-fast) var(--sfih-ease);
}
a.sfih-phero__team:hover { color: var(--sfih-accent-2); }
.sfih-phero__physical {
	font-size: 13px;
	letter-spacing: 0.06em;
	row-gap: 6px;
}
.sfih-phero__physical > span:not(:first-child) {
	position: relative;
	padding-left: 14px;
}
.sfih-phero__physical > span:not(:first-child)::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	width: 3px;
	height: 3px;
	border-radius: 50%;
	transform: translateY(-50%);
	background: color-mix(in srgb, var(--sfih-muted) 70%, transparent);
}
.sfih-phero__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 2px;
}
.sfih-phero__stats {
	grid-column: 1 / -1;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 10px;
	margin-top: 12px;
	padding-top: 18px;
	border-top: 1px solid var(--sfih-line);
}

/* ---- 5. statline + the stat tiles the hero shares -----------------------
   .sfih-statline[data-cols] is a bare grid of .sfih-stat tiles; the same
   tile treatment applies inside .sfih-phero__stats. ice-hockey.css only sets
   the numeral typography on .sfih-stat, so the tile shell lives here,
   scoped to the two containers this family owns. */
.sfih-statline {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--sfih-gap-sm);
}
@media (min-width: 600px) {
	.sfih-statline,
	.sfih-statline[data-cols="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.sfih-statline[data-cols="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.sfih-statline[data-cols="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.sfih-statline[data-cols="5"] { grid-template-columns: repeat(5, minmax(0, 1fr)); }
	.sfih-statline[data-cols="6"] { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
.sfih-statline > .sfih-stat,
.sfih-phero__stats > .sfih-stat {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 2px;
	padding: 12px 14px;
	border-radius: var(--sfih-r);
	background-color: color-mix(in srgb, var(--sfih-panel-2) 78%, transparent);
	box-shadow: var(--sfih-d1), var(--sfih-ring);
}
.sfih-statline > .sfih-stat > b,
.sfih-phero__stats > .sfih-stat > b {
	font-size: 26px;
	line-height: 1.05;
}
.sfih-statline > .sfih-stat > span,
.sfih-phero__stats > .sfih-stat > span {
	font-family: var(--sfih-f-ui);
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--sfih-muted);
}
.sfih-statline > .sfih-stat > i,
.sfih-phero__stats > .sfih-stat > i {
	font-style: normal;
	font-family: var(--sfih-f-ui);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.05em;
	color: color-mix(in srgb, var(--sfih-muted) 78%, transparent);
}
.sfih-statline > .sfih-stat .sfih-i,
.sfih-phero__stats > .sfih-stat .sfih-i {
	margin-bottom: 4px;
}

/* ---- 6. player bio — .sfih-bio ------------------------------------------ */
.sfih-bio {
	padding: var(--sfih-pad);
	border-radius: var(--sfih-r);
	background-color: var(--sfih-panel);
	background-image: var(--sfih-sheen);
	box-shadow: var(--sfih-d2), var(--sfih-ring);
	color: var(--sfih-ink);
}
.sfih-bio__head {
	display: flex;
	align-items: center;
	gap: 9px;
	padding-bottom: 11px;
	margin-bottom: 14px;
	border-bottom: 1px solid var(--sfih-line);
	font-family: var(--sfih-f-ui);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--sfih-accent-2);
}
.sfih-bio__prose {
	font-family: var(--sfih-f-body);
	font-size: 15px;
	line-height: 1.7;
	color: color-mix(in srgb, var(--sfih-ink) 82%, var(--sfih-muted));
}
.sfih-bio__prose p { margin: 0 0 1em; }
.sfih-bio__prose p:last-child { margin-bottom: 0; }
.sfih-bio__prose a {
	color: var(--sfih-accent-ink);
	text-decoration: none;
}
.sfih-bio__prose a:hover { color: var(--sfih-accent-2); }
.sfih-bio__facts {
	margin-top: 16px;
	padding-top: 4px;
	border-top: 1px solid var(--sfih-line);
}
.sfih-bio__prose:only-child,
.sfih-bio__head + .sfih-bio__facts {
	border-top: 0;
	margin-top: 0;
}

/* ---- 7. leaders — .sfih-leaders ------------------------------------------
   Panel numbers from the block demo (#block_f-ldr-pass): radius 22, panel
   background over a 1px ring, head underlined with the accent-2 label, rows
   7x8 with an 8px radius and a soft hover. */
.sfih-leaders {
	padding: 16px 14px;
	border-radius: var(--sfih-r-lg);
	background-color: var(--sfih-panel);
	background-image: var(--sfih-sheen);
	box-shadow: var(--sfih-d2), var(--sfih-ring);
	color: var(--sfih-ink);
}
.sfih-leaders--rows { padding-bottom: 12px; }
.sfih-leaders--cards { padding-bottom: 14px; }
.sfih-leaders__head {
	display: flex;
	align-items: center;
	gap: 9px;
	padding: 0 8px 10px;
	margin-bottom: 10px;
	border-bottom: 1px solid var(--sfih-line);
	font-family: var(--sfih-f-ui);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--sfih-accent-2);
}
.sfih-leaders__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
}
.sfih-lead {
	display: grid;
	grid-template-columns: 18px 38px minmax(0, 1fr) auto;
	grid-template-areas:
		"n face names val"
		"n face track track";
	align-items: center;
	column-gap: 10px;
	row-gap: 5px;
	padding: 7px 8px;
	border-radius: var(--sfih-r-sm);
	color: var(--sfih-ink);
	text-decoration: none;
	transition: background-color var(--sfih-t-fast) var(--sfih-ease);
}
.sfih-lead:hover { background-color: color-mix(in srgb, var(--sfih-ink) 5%, transparent); }
.sfih-lead > .sfih-face { grid-area: face; }
.sfih-lead__n {
	grid-area: n;
	font-family: var(--sfih-f-num);
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	font-size: 12px;
	text-align: right;
	color: var(--sfih-muted);
}
.sfih-lead.is-first .sfih-lead__n { color: var(--sfih-accent-ink); }
.sfih-lead__names {
	grid-area: names;
	display: flex;
	flex-direction: column;
	gap: 1px;
	min-width: 0;
}
.sfih-lead__names > b {
	font-family: var(--sfih-f-ui);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.25;
	color: var(--sfih-ink);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	transition: color var(--sfih-t-fast) var(--sfih-ease);
}
.sfih-lead:hover .sfih-lead__names > b { color: var(--sfih-accent-ink); }
.sfih-lead__names > i {
	font-style: normal;
	font-family: var(--sfih-f-ui);
	font-size: 9.5px;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--sfih-muted);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.sfih-lead__val {
	grid-area: val;
	font-family: var(--sfih-f-num);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	font-size: 17px;
	text-align: right;
	color: var(--sfih-ink);
}
.sfih-lead__track {
	grid-area: track;
	display: block;
	height: 3px;
	border-radius: var(--sfih-pill);
	overflow: hidden;
	background: color-mix(in srgb, var(--sfih-ink) 8%, transparent);
}
.sfih-lead__track > .sfih-bar {
	display: block;
	width: var(--sfih-pct, 0%);
	height: 100%;
	border-radius: inherit;
	background: linear-gradient(90deg, var(--sfih-team, var(--sfih-accent)), color-mix(in srgb, var(--sfih-team, var(--sfih-accent)) 55%, var(--sfih-accent-2)));
}
.sfih-lead.is-first .sfih-lead__track { background: color-mix(in srgb, var(--sfih-accent) 16%, transparent); }

/* The marquee card of layout=cards: face + name, the giant numeral, the
   full-width holo track, then the chasing pack as the same compact rows. */
.sfih-leadcard {
	position: relative;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin: 0 2px;
	padding: 14px 14px 12px;
	border-radius: var(--sfih-r);
	background:
		radial-gradient(140% 110% at 100% 0%, color-mix(in srgb, var(--sfih-team, var(--sfih-accent)) 18%, transparent), transparent 60%),
		color-mix(in srgb, var(--sfih-panel-2) 72%, transparent);
	box-shadow: var(--sfih-d1), var(--sfih-ring);
}
.sfih-leadcard__top {
	display: flex;
	align-items: center;
	gap: 12px;
	color: var(--sfih-ink);
	text-decoration: none;
}
.sfih-leadcard__top .sfih-lead__names > b { font-size: 15px; }
.sfih-leadcard__top:hover .sfih-lead__names > b { color: var(--sfih-accent-ink); }
.sfih-leadcard__face { flex: 0 0 auto; display: inline-flex; }
.sfih-leadcard__val {
	font-family: var(--sfih-f-num);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	font-size: 44px;
	line-height: 1;
	letter-spacing: -0.01em;
	color: var(--sfih-ink);
	margin-top: 4px;
}
.sfih-leadcard__unit {
	font-family: var(--sfih-f-ui);
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--sfih-muted);
	margin-bottom: 4px;
}
.sfih-leadcard > .sfih-track {
	display: block;
	height: 3px;
	border-radius: var(--sfih-pill);
	overflow: hidden;
	background: color-mix(in srgb, var(--sfih-ink) 8%, transparent);
}
.sfih-leadcard > .sfih-track > .sfih-bar {
	display: block;
	width: var(--sfih-pct, 0%);
	height: 100%;
	border-radius: inherit;
	background: var(--sfih-g-holo);
}
.sfih-leadcard__rest {
	margin: 8px -8px 0;
	padding-top: 6px;
	border-top: 1px solid var(--sfih-line);
}

/* ---- 8. player rank — .sfih-prank ---------------------------------------
   League-rank tiles on single-ih_player: the ordinal in Rajdhani, the stat
   label over its "Nth of M players" line, the value right. A top-ten row
   (.is-me) lights up in the accent. */
.sfih-prank {
	padding: 16px 14px 12px;
	border-radius: var(--sfih-r-lg);
	background-color: var(--sfih-panel);
	background-image: var(--sfih-sheen);
	box-shadow: var(--sfih-d2), var(--sfih-ring);
	color: var(--sfih-ink);
}
.sfih-prank__head { margin-bottom: 10px; }
.sfih-prank__row {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 8px;
	border-radius: var(--sfih-r-sm);
	transition: background-color var(--sfih-t-fast) var(--sfih-ease);
}
.sfih-prank__row:hover { background-color: color-mix(in srgb, var(--sfih-ink) 5%, transparent); }
.sfih-prank__row + .sfih-prank__row { border-top: 1px solid color-mix(in srgb, var(--sfih-line) 60%, transparent); }
.sfih-prank__n {
	flex: 0 0 44px;
	font-family: var(--sfih-f-num);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	font-size: 24px;
	line-height: 1;
	text-align: right;
	color: var(--sfih-muted);
}
.sfih-prank__row.is-me .sfih-prank__n { color: var(--sfih-accent-ink); }
.sfih-prank__label { flex: 1 1 auto; }
.sfih-prank__label > b { font-size: 13.5px; }
.sfih-prank__val {
	flex: 0 0 auto;
	font-family: var(--sfih-f-num);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	font-size: 17px;
	text-align: right;
	color: var(--sfih-ink);
}
.sfih-prank__row.is-me .sfih-prank__val { color: var(--sfih-accent-2); }

/* ---- 9. responsive -------------------------------------------------------
   Brief breakpoints: 1024 and 768. The hero stacks and centres, its number
   watermark and tiles step down, the card media shrinks a notch. */
@media (max-width: 1024px) {
	.sfih-phero { gap: 10px 20px; padding: 22px 20px 20px; }
	.sfih-phero__media { width: 168px; min-height: 156px; }
	.sfih-phero__photo,
	img.sfih-phero__photo { width: 140px; height: 140px; }
	.sfih-phero__photo.sfih-face--mono { font-size: 50px; }
	.sfih-phero__no { font-size: 150px; }
	.sfih-leadcard__val { font-size: 38px; }
}
@media (max-width: 768px) {
	.sfih-phero {
		grid-template-columns: minmax(0, 1fr);
		justify-items: center;
		text-align: center;
		padding: 20px 16px 18px;
	}
	.sfih-phero__body { align-items: center; }
	.sfih-phero__media { width: 148px; min-height: 136px; }
	.sfih-phero__photo,
	img.sfih-phero__photo { width: 124px; height: 124px; }
	.sfih-phero__photo.sfih-face--mono { font-size: 44px; }
	.sfih-phero__no { font-size: 120px; }
	.sfih-phero__name { font-size: clamp(26px, 8vw, 38px); }
	.sfih-phero__physical { justify-content: center; }
	.sfih-phero__chips { justify-content: center; }
	.sfih-phero__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.sfih-statline > .sfih-stat > b,
	.sfih-phero__stats > .sfih-stat > b { font-size: 22px; }
	.sfih-pcard__media { --sfih-pface: 84px; min-height: 112px; }
	.sfih-pcard__no { font-size: 52px; }
	.sfih-pcard__name { font-size: 16px; }
	.sfih-bio__prose { font-size: 14px; }
	.sfih-prank__n { flex-basis: 36px; font-size: 20px; }
	.sfih-leadcard__val { font-size: 34px; }
}

/* Fix: integer tile values are span.sfih-count and were caught by the
   10.5px label rule above — floats (<b>) already read 26px. Both value
   shapes now match. */
.sfih-statline > .sfih-stat > span.sfih-count,
.sfih-phero__stats > .sfih-stat > span.sfih-count {
	font-family: var(--sfih-f-num);
	font-size: 26px;
	font-weight: 700;
	line-height: 1.05;
	letter-spacing: 0;
	text-transform: none;
	color: var(--sfih-ink);
	font-variant-numeric: tabular-nums;
}

.sfih-statline > .sfih-stat--hot > span.sfih-count,
.sfih-phero__stats > .sfih-stat--hot > span.sfih-count,
.sfih-statline > .sfih-stat--hot > b,
.sfih-phero__stats > .sfih-stat--hot > b {
	color: var(--sfih-accent-ink);
}

/* Fix: nested reveals stall. The rank PANEL (.sfih-prank) is itself a
   .sfih-reveal, and its rows carried a second, staggered reveal that under
   scroll pressure sat at opacity 0 long after is-in landed — the panel
   painted as an empty slab. One reveal per component: the panel animates,
   the rows are simply visible. */
body.sfih-fx-reveal .sfih-prank__row.sfih-reveal {
	opacity: 1;
	transform: none;
	transition: none;
}

/* The archive renderer's sort buttons predate the newer `.sfih-pills`
   primitive, so give this group the same coherent tray instead of leaving
   four labels floating between the selects and the result count. */
.sfih-grid--players .sfih-filters__pills {
	display: flex;
	align-items: center;
	gap: 4px;
	min-width: 0;
	max-width: 100%;
	padding: 4px;
	border-radius: var(--sfih-pill);
	background: color-mix(in srgb, var(--sfih-base) 48%, transparent);
	box-shadow: var(--sfih-ring-neon);
}

.sfih-grid--players .sfih-filters__pills .sfih-pill {
	flex: 0 0 auto;
	min-height: 32px;
	padding: 6px 10px;
	white-space: nowrap;
}

/* A deliberate two-row desktop toolbar gives each control enough air. The
   facets stay together above; sort and count form a quieter secondary row. */
@media (min-width: 1025px) {
	.sfih-grid--players .sfih-filters {
		display: grid;
		grid-template-columns: minmax(280px, 1fr) 130px 180px;
		gap: 10px;
		align-items: center;
	}

	.sfih-grid--players .sfih-filters__search { grid-column: 1; }
	.sfih-grid--players .sfih-filters__select[data-filter="pos"] { grid-column: 2; }
	.sfih-grid--players .sfih-filters__select[data-filter="team"] { grid-column: 3; }
	.sfih-grid--players .sfih-filters__pills {
		grid-column: 1 / 3;
		grid-row: 2;
		justify-self: start;
	}
	.sfih-grid--players .sfih-filter-count {
		grid-column: 3;
		grid-row: 2;
		justify-self: end;
		margin-left: 0;
	}
}

/* ---- 10. phone archive parity -------------------------------------------
   The Block loop prints its desktop column template inline, while the
   Elementor renderer uses the shared card grid. At phone width both archives
   must resolve to the same two-column roster and the controls need their own
   rows. The !important declarations below only beat those renderer-owned
   inline dimensions; the breakpoint keeps tablet and desktop untouched. */
@media (max-width: 599px) {
	.sfih-grid--players {
		min-width: 0;
		max-width: 100%;
	}

	.sfih-grid--players .sfih-filters {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		align-items: stretch;
		gap: 10px;
		max-width: 100%;
		overflow: hidden;
	}

	.sfih-grid--players .sfih-filters__search,
	.sfih-grid--players .sfih-filters__select {
		width: 100%;
		min-width: 0;
		max-width: 100%;
	}

	.sfih-grid--players .sfih-filters__pills {
		display: flex;
		flex-wrap: nowrap;
		align-items: center;
		gap: 4px;
		width: 100%;
		min-width: 0;
		overflow-x: auto;
		scrollbar-width: none;
	}
	.sfih-grid--players .sfih-filters__pills::-webkit-scrollbar { display: none; }

	.sfih-grid--players .sfih-filter-count {
		justify-self: end;
		margin-left: 0;
	}

	.sfih-grid--players [data-grid] {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		gap: 12px;
		width: 100%;
		min-width: 0;
	}

	/* Elementor player card portrait stage. */
	.sfih-grid--players .sfih-pcard__media {
		aspect-ratio: 4 / 5;
		min-height: 0;
		padding: 0;
	}
	.sfih-grid--players .sfih-pcard__face,
	.sfih-grid--players img.sfih-pcard__face {
		width: 100%;
		height: 100%;
		border-radius: 0;
		object-fit: cover;
		object-position: 50% 10%;
	}

	/* Block player card portrait stage. Repeated IDs come from the field-loop
	   renderer, so scope them beneath the one archive root. */
	#block_pra-grid-b .block_pra-grid-b-c-media {
		aspect-ratio: 4 / 5;
		min-height: 0;
	}
	#block_pra-grid-b .block_pra-grid-b-c-photo {
		width: 100% !important;
		height: 100% !important;
		object-fit: cover;
		object-position: 50% 10%;
	}
}

/* ---- 11. Elementor / Block single-player parity ------------------------
   Player portraits are editorial photography, not team marks: keep a 4:5
   rounded stage and reserve circles for crests. The Theme Builder section
   supplies the open full-width band, so remove the nested hero card chrome. */
.wp-theme-ice-hockey-elementor.single-ih_player .sfih-phero {
	grid-template-columns: 190px minmax(0, 1fr);
	align-items: center;
	gap: 30px;
	padding: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	overflow: visible;
}

.wp-theme-ice-hockey-elementor.single-ih_player .sfih-phero__media {
	width: 190px;
	min-height: 0;
	aspect-ratio: 4 / 5;
	border-radius: 22px;
	overflow: hidden;
	background: var(--sfih-panel-2);
	box-shadow: var(--sfih-d3), var(--sfih-ring);
}

.wp-theme-ice-hockey-elementor.single-ih_player .sfih-phero__photo,
.wp-theme-ice-hockey-elementor.single-ih_player img.sfih-phero__photo {
	width: 100%;
	height: 100%;
	aspect-ratio: 4 / 5;
	border-radius: 0;
	object-fit: cover;
	object-position: 50% 10%;
	box-shadow: none;
}

.wp-theme-ice-hockey-elementor.single-ih_player .sfih-phero__no,
.wp-theme-ice-hockey-elementor.single-ih_player .sfih-phero__stats {
	display: none;
}

.wp-theme-ice-hockey-elementor.single-ih_player .sfih-phero__body {
	gap: 13px;
}

.wp-theme-ice-hockey-elementor.single-ih_player .sfih-phero__name {
	font-size: 62px;
	line-height: 0.94;
	letter-spacing: 0;
}

.wp-theme-ice-hockey-elementor.single-ih_player .sfih-phero__physical {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
}

.wp-theme-ice-hockey-elementor.single-ih_player .sfih-phero__physical > span {
	padding: 6px 13px;
	border-radius: var(--sfih-pill);
	background: var(--sfih-panel-2);
	box-shadow: var(--sfih-ring);
	font-family: var(--sfih-f-num);
	font-size: 13px;
	font-weight: 700;
	line-height: 1.1;
	color: var(--sfih-ink);
}

.wp-theme-ice-hockey-elementor.single-ih_player .sfih-phero__physical > span:not(:first-child) {
	padding-left: 13px;
}

.wp-theme-ice-hockey-elementor.single-ih_player .sfih-phero__physical > span::before {
	display: none;
}

@media (max-width: 768px) {
	.wp-theme-ice-hockey-elementor.single-ih_player .sfih-phero {
		grid-template-columns: minmax(0, 1fr);
		justify-items: start;
		gap: 18px;
		text-align: left;
	}

	.wp-theme-ice-hockey-elementor.single-ih_player .sfih-phero__media {
		width: 132px;
		min-height: 0;
		aspect-ratio: 4 / 5;
		border-radius: 22px;
	}

	.wp-theme-ice-hockey-elementor.single-ih_player .sfih-phero__body {
		align-items: flex-start;
		gap: 10px;
	}

	.wp-theme-ice-hockey-elementor.single-ih_player .sfih-phero__name {
		font-size: 34px;
	}

	.wp-theme-ice-hockey-elementor.single-ih_player .sfih-phero__physical,
	.wp-theme-ice-hockey-elementor.single-ih_player .sfih-phero__chips {
		justify-content: flex-start;
	}
}

/* ---- 12. Editorial player-card parity ---------------------------------
   The Elementor renderer now emits the same information hierarchy as the
   Block archive: full 4:5 portrait, number and position on the image, then
   name, circular club crest and physical details. */
.sfih-pcard--editorial {
	gap: 0;
	background: var(--sfih-panel);
}

.sfih-pcard--editorial .sfih-pcard__media {
	position: relative;
	display: block;
	width: 100%;
	min-height: 0;
	aspect-ratio: 4 / 5;
	padding: 0;
	border-bottom: 0;
	background: var(--sfih-panel-2);
}

.sfih-pcard--editorial .sfih-pcard__face,
.sfih-pcard--editorial img.sfih-pcard__face,
.elementor .sfih-card.sfih-pcard--editorial img.sfih-pcard__face {
	position: absolute;
	inset: 0;
	z-index: 1;
	display: block;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	aspect-ratio: 4 / 5;
	border-radius: 0 !important;
	object-fit: cover;
	object-position: 50% 10%;
	background: var(--sfih-panel-2);
	box-shadow: none;
}

.sfih-pcard--editorial .sfih-pcard__no,
.sfih-pcard--editorial .sfih-pcard__position {
	position: absolute;
	top: 11px;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	min-height: 24px;
	border-radius: var(--sfih-pill);
	font-family: var(--sfih-f-ui);
	font-size: 10px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: #fff;
	background: rgba(5, 7, 12, .72);
	box-shadow: 0 1px 8px rgba(5, 7, 12, .2);
}

.sfih-pcard--editorial .sfih-pcard__no {
	left: 11px;
	right: auto;
	padding: 5px 8px;
}

.sfih-pcard--editorial .sfih-pcard__position {
	right: 11px;
	padding: 5px 9px;
}

.sfih-pcard--editorial .sfih-pcard__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 8px;
	padding: 13px 14px 15px;
}

.sfih-pcard--editorial .sfih-pcard__name {
	font-size: 19px;
	line-height: 1.04;
}

.sfih-pcard--editorial .sfih-pcard__team {
	display: flex;
	align-items: center;
	gap: 7px;
	min-width: 0;
	font-family: var(--sfih-f-ui);
	font-size: 9.5px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: .15em;
	text-transform: uppercase;
	color: var(--sfih-muted);
}

.sfih-pcard--editorial .sfih-pcard__team .sfih-crest {
	width: 20px;
	height: 20px;
	flex: 0 0 20px;
	padding: 2px;
	border-radius: 50%;
	object-fit: contain;
	background: var(--sfih-panel-2);
	box-shadow: var(--sfih-ring);
}

.sfih-pcard--editorial .sfih-pcard__physical {
	display: flex;
	flex-wrap: wrap;
	gap: 5px 10px;
	font-family: var(--sfih-f-num);
	font-size: 12px;
	font-weight: 700;
	line-height: 1.2;
	color: var(--sfih-muted);
}

.sfih-pcard--editorial .sfih-pcard__honours {
	margin-top: auto;
	font-family: var(--sfih-f-ui);
	font-size: 9px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--sfih-gold);
}

@media (max-width: 599px) {
	.sfih-pcard--editorial .sfih-pcard__body {
		gap: 6px;
		padding: 10px 10px 12px;
	}
	.sfih-pcard--editorial .sfih-pcard__name { font-size: 16px; }
	.sfih-pcard--editorial .sfih-pcard__physical {
		font-size: 10.5px;
		gap: 4px 7px;
	}
	.sfih-pcard--editorial .sfih-pcard__no,
	.sfih-pcard--editorial .sfih-pcard__position {
		top: 8px;
		font-size: 9px;
	}
	.sfih-pcard--editorial .sfih-pcard__no { left: 8px; }
	.sfih-pcard--editorial .sfih-pcard__position { right: 8px; }
}

/* Desktop archive cards share the Block template's full square player stage.
   The first Block loop item carries the authored custom ID while later items
   carry only its class, so state the geometry on both forms to prevent the
   first portrait from collapsing to a shorter crop. The two-column phone view
   intentionally keeps its taller 4:5 crop. */
@media (min-width: 600px) {
	#block_pra-grid-b .block_pra-grid-b-c-media,
	.sfih-pcard--editorial .sfih-pcard__media {
		height: auto !important;
		aspect-ratio: 1 / 1;
		overflow: hidden;
	}
	#block_pra-grid-b .block_pra-grid-b-c-photo,
	.sfih-pcard--editorial .sfih-pcard__face,
	.sfih-pcard--editorial img.sfih-pcard__face,
	.elementor .sfih-card.sfih-pcard--editorial img.sfih-pcard__face {
		width: 100% !important;
		height: 100% !important;
		aspect-ratio: 1 / 1;
		object-fit: cover;
	}
	.sfih-pcard--editorial {
		gap: 10px;
	}
	.sfih-pcard--editorial .sfih-pcard__body {
		padding: 0 14px 14px;
	}
}

/* The canonical Season Numbers panel is a compact six-up desktop matrix and
   three-up phone matrix. Short hockey labels carry the meaning, so duplicate
   descriptive lines and decorative icons are removed here. */
.wp-theme-ice-hockey-elementor.single-ih_player .sfih-statline,
.wp-theme-ice-hockey-elementor.single-ih_player .sfih-statline[data-cols] {
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: 10px;
}

.wp-theme-ice-hockey-elementor.single-ih_player .sfih-statline > .sfih-stat {
	min-height: 74px;
	gap: 2px;
	padding: 11px 12px;
	border-radius: var(--sfih-r-sm);
}

.wp-theme-ice-hockey-elementor.single-ih_player .sfih-statline > .sfih-stat > i,
.wp-theme-ice-hockey-elementor.single-ih_player .sfih-statline > .sfih-stat .sfih-i {
	display: none;
}

.wp-theme-ice-hockey-elementor.single-ih_player .sfih-statline > .sfih-stat > b,
.wp-theme-ice-hockey-elementor.single-ih_player .sfih-statline > .sfih-stat > span.sfih-count {
	font-size: 23px;
	line-height: 1;
}

.wp-theme-ice-hockey-elementor.single-ih_player .sfih-statline > .sfih-stat > span:not(.sfih-count) {
	font-size: 9px;
	line-height: 1.25;
}

@media (max-width: 599px) {
	.wp-theme-ice-hockey-elementor.single-ih_player .sfih-statline,
	.wp-theme-ice-hockey-elementor.single-ih_player .sfih-statline[data-cols] {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 8px;
	}
	.wp-theme-ice-hockey-elementor.single-ih_player .sfih-statline > .sfih-stat {
		min-height: 68px;
		padding: 9px 10px;
	}
	.wp-theme-ice-hockey-elementor.single-ih_player .sfih-statline > .sfih-stat > b,
	.wp-theme-ice-hockey-elementor.single-ih_player .sfih-statline > .sfih-stat > span.sfih-count {
		font-size: 20px;
	}
}