/*
 * Design system — component patterns (docs/design-system.md is the
 * source of truth; tokens live in theme.json → legacy-vars.css).
 *
 * Loaded after components.css and every block stylesheet, so the shared
 * patterns below win over older per-component values without editing
 * each of those files. New CSS should use the design-system tokens
 * (--ink, --surface, --crimson, …) directly.
 *
 * Rules this file enforces site-wide:
 * - No drop shadows: depth is --surface on --ink plus 1px --line borders.
 * - Radius by purpose: hero 20px, cards 16px, buttons 10px, badges 5px,
 *   pills 20px. List rows inside a card are plain (no radius/shadow).
 * - Space Grotesk for headings and every number; Manrope for the rest.
 * - Sentence-case labels — no decorative all-caps eyebrows (short data-
 *   table headers and genuine status words like LIVE are the exceptions).
 * - Crimson means something (live, primary action, alert, "yours"); gold
 *   is only for captaincy and awards; green only for gains.
 */

/* ---- Base --------------------------------------------------------------- */

body {
	background-color: var(--ink);
	color: var(--paper);
	font-family: var(--font-body);
	/* Manrope's standard ligatures turn "(c)" into "©" — which rewrites
	   real data (a captain marked "Anil Karki (c)"). */
	font-variant-ligatures: no-common-ligatures;
}

:where(h1, h2, h3) {
	font-family: var(--font-display);
}

:focus-visible {
	outline: 2px solid var(--crimson);
	outline-offset: 2px;
}

/* ---- Typography ----------------------------------------------------------- */

.section__header h2,
.npl-insight__title,
.card h2 {
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: -0.01em;
}

/* Every "number" rule in components.css reads --font-family-mono, which
   now resolves to Space Grotesk; these are the numeric classes that set
   their own family. */
.standings-table__num,
.npl-dash-card__value,
.npl-rank-move,
.npl-poll__share,
.npl-myteam__points,
.npl-league__rank,
.npl-league__total,
.credit-bar__label,
.pitch__token-stat {
	font-family: var(--font-display);
	font-variant-numeric: tabular-nums;
}

/* Sentence-case labels: the decorative all-caps eyebrows go. */
.section__label,
.win-prediction__label,
.match-hero__label,
.cta-banner__eyebrow,
.team-snapshot__label,
.fantasy-tips__byline,
.hof-teaser__eyebrow,
.match-header__meta,
.auth-divider,
.my-rank-bar__label,
.fanbuzz-intro__eyebrow,
.pitch__row-label,
.pitch__divider-label,
.leaderboard-preview__head,
.npl-transfer-bar__label,
.npl-transfer-review__tag,
.npl-round-summary__label,
.npl-round-breakdown__head,
.npl-round-breakdown__label,
.npl-dash-card__label,
.npl-deadline__eyebrow,
.npl-match-awards__type,
.npl-matches-block__label,
.npl-match-sidebar__label,
.npl-match-stats__label,
.npl-news-item__meta-item,
.npl-series-awards__type,
.npl-series-header__format {
	text-transform: none;
	letter-spacing: 0;
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--muted);
}

/* ---- Surfaces ------------------------------------------------------------- */

.card,
.cta-banner,
.npl-dash-card,
.npl-deadline {
	background-color: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius-md);
	box-shadow: none;
}

/* Any lingering elevation from older component CSS. */
.card,
.cta-banner,
.token-menu,
.drawer,
.notif-panel,
.npl-transfer-review,
.team-builder-footer {
	box-shadow: none;
}

/* ---- Buttons -------------------------------------------------------------- */

.btn {
	min-height: 44px;
	padding: 10px 18px;
	border-radius: var(--radius-sm);
	font-family: var(--font-display);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0;
}

/* #C8102E (--crimson-fill), not #E11D3C: the paper label needs 4.5:1. */
.btn--primary,
.btn--primary:visited {
	background-color: var(--crimson-fill);
	color: #F5F3EF;
}

.btn--primary:active:not(:disabled) {
	background-color: var(--crimson-deep);
}

/* No second button color: a de-emphasised action is a crimson text link. */
.btn--outline,
.btn--secondary {
	min-height: 44px;
	padding-inline: 4px;
	border-color: transparent;
	background-color: transparent;
	color: var(--crimson-text);
}

.btn--outline:active:not(:disabled) {
	opacity: 0.7;
}

.btn-link {
	color: var(--crimson-text);
	font-weight: 600;
}

/* ---- Tabs ------------------------------------------------------------------ */

.tabs {
	border-bottom-color: var(--line);
}

.tabs__tab {
	font-family: var(--font-body);
	font-weight: 600;
	color: var(--muted);
}

.tabs__tab--active {
	color: var(--paper);
}

.tabs__tab--active::after {
	background-color: var(--crimson);
}

/* ---- Forms ----------------------------------------------------------------- */

.form-input {
	border-color: var(--line-strong);
	border-radius: var(--radius-sm);
	background-color: var(--surface-2);
	color: var(--paper);
}

.form-input::placeholder {
	color: var(--muted);
}

/* ---- Tables ---------------------------------------------------------------- */

.standings-table th,
.npl-match-scorecard__table th,
.npl-match-summary__table th,
.npl-points-table__table th,
.npl-match-stats__phase-table th,
.npl-transfers__table th {
	padding-top: 6px;
	padding-bottom: 6px;
	border-bottom: 1px solid var(--line-strong);
	background: none;
	font-family: var(--font-body);
	font-size: 0.625rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	color: var(--muted);
}

.standings-table td,
.npl-transfers__table td {
	border-bottom: 1px solid var(--line);
	background: none;
}

.standings-table tbody tr:nth-child(even) td {
	background: none;
}

.standings-table tbody tr:last-child td {
	border-bottom: 0;
}

/* ---- Badges, markers ------------------------------------------------------- */

/* Captain / Vice-Captain: 16px gold square, ink letter. Gold is reserved
   for captaincy and awards. */
.pitch__token-badge,
.pitch__token-badge--captain,
.pitch__token-badge--vice,
.npl-myteam__badge,
.npl-myteam__badge--captain,
.npl-myteam__badge--vice,
.npl-cvc-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 16px;
	height: 16px;
	padding: 0 3px;
	border: 0;
	border-radius: var(--radius-badge);
	background-color: var(--gold);
	color: var(--on-gold);
	font-family: var(--font-display);
	font-size: 9px;
	font-weight: 700;
	line-height: 1;
}

/* "Your pick" / "You" — crimson-tinted pill. */
.npl-poll__mine,
.npl-you-pill {
	display: inline-flex;
	align-items: center;
	gap: 3px;
	padding: 2px 7px;
	border-radius: var(--radius-pill);
	background-color: var(--crimson-tint-strong);
	color: var(--crimson-text);
	font-size: 0.6875rem;
	font-weight: 700;
}

.npl-league__you {
	margin-left: 4px;
	padding: 2px 7px;
	border-radius: var(--radius-pill);
	background-color: var(--crimson-tint-strong);
	color: var(--crimson-text);
	font-size: 0.625rem;
	font-weight: 700;
}

/* Live dot: green for "happening now", crimson for "locking soon", each
   with a soft glow ring. */
.npl-live-dot,
.npl-dot {
	display: inline-block;
	flex: none;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background-color: var(--positive);
	box-shadow: 0 0 0 4px rgba(52, 199, 123, 0.18);
	animation: none;
}

.npl-dot--urgent {
	background-color: var(--crimson);
	box-shadow: 0 0 0 4px rgba(225, 29, 60, 0.18);
}

/* LIVE status tag — a genuine status word, so it keeps its caps. */
.badge--live {
	background-color: var(--crimson);
	color: #F5F3EF;
	animation: none;
}

/* ---- Progress & poll bars -------------------------------------------------- */

.npl-poll__bar,
.credit-bar__track {
	height: 8px;
	border-radius: 4px;
	background-color: var(--surface-2);
}

.npl-poll__bar {
	overflow: hidden;
}

.npl-poll__fill,
.npl-poll__option--mine .npl-poll__fill {
	display: block;
	height: 100%;
	border-radius: 4px;
	background-color: var(--crimson);
}

.npl-poll__option:not(.npl-poll__option--mine) .npl-poll__fill {
	background-color: var(--muted);
}

.credit-bar__fill {
	border-radius: 4px;
}

/* ---- Navigation ------------------------------------------------------------ */

/* Phones: fixed, frosted bottom tab bar. */
.app-nav {
	background-color: rgba(23, 24, 27, 0.92);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	border-top: 1px solid var(--line);
}

html[data-theme="light"] .app-nav {
	background-color: rgba(255, 255, 255, 0.92);
}

.app-nav__item {
	color: var(--muted);
	font-family: var(--font-body);
}

.app-nav__item--active,
.app-nav__item[aria-current="page"] {
	color: var(--crimson-text);
}

.app-nav__icon svg {
	stroke-width: 1.8;
}

.app-nav__label {
	font-weight: 600;
}

/* The brand and the account card only show in the sidebar. */
.app-nav__brand,
.npl-nav-account {
	display: none;
}

/* "More" in the tab bar replaces the top bar's hamburger. */
#menu-toggle {
	display: none;
}

@media (max-width: 767px) {
	.app-nav__item {
		gap: 4px;
	}
}

/* ≥ 768px: a full-height left sidebar — logo mark + wordmark, the five
   items (active = crimson-tinted pill), the account card pinned below. */
@media (min-width: 768px) {
	.app-nav {
		top: 0;
		bottom: 0;
		/* height, not bottom: 0 — the account card is now a real flex child
		   pinned to the bottom with margin-top: auto (below), so the
		   sidebar needs an explicit box for that to size against. dvh
		   (not vh) so it's the actual visible viewport, not a taller one a
		   mobile browser's collapsible chrome would otherwise leave stuck
		   behind. Fixed 2026-09-28: the account card could read as
		   clipped, with its second line invisible, on a short viewport —
		   see .npl-nav-account's own comment. */
		height: 100dvh;
		z-index: 40;
		width: var(--sidebar-width);
		display: flex;
		flex-direction: column;
		padding: 20px 14px 16px;
		gap: 4px;
		overflow-y: auto;
		background-color: var(--ink);
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
		border-top: 0;
		border-right: 1px solid var(--line);
	}

	html[data-theme="light"] .app-nav {
		background-color: var(--ink);
	}

	body.admin-bar .app-nav {
		top: 32px;
		height: calc(100dvh - 32px);
	}

	.app-nav__brand {
		display: flex;
		align-items: center;
		gap: 10px;
		margin: 0 6px 20px;
		color: var(--paper);
		text-decoration: none;
	}

	.app-nav__mark {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 30px;
		height: 30px;
		border-radius: 8px;
		background-color: var(--crimson);
		color: #F5F3EF;
	}

	.app-nav__mark svg {
		width: 18px;
		height: 18px;
	}

	.app-nav__wordmark {
		font-family: var(--font-display);
		font-size: 1rem;
		font-weight: 700;
		letter-spacing: -0.01em;
	}

	.app-nav__item {
		width: 100%;
		min-height: 44px;
		padding: 10px 12px;
		border-radius: var(--radius-sm);
		font-size: 0.875rem;
	}

	.app-nav__item:hover {
		background-color: var(--surface);
		color: var(--paper);
	}

	.app-nav__item--active,
	.app-nav__item[aria-current="page"],
	.app-nav__item--active:hover {
		background-color: var(--crimson-tint);
		color: var(--crimson-text);
	}

	.npl-nav-account {
		/* A real flex child of .app-nav (parts/nav.html renders it inside
		   <nav>, not as a following sibling), pushed to the bottom of that
		   column with margin-top: auto — not position: fixed pinned to the
		   real viewport independently of the sidebar's own (now explicit,
		   100dvh) box. Fixed 2026-09-28: the old fixed positioning could
		   read as clipped, with this card's second line invisible, on a
		   short viewport — this can't happen now: at worst (an unusually
		   tall set of nav items on a very short screen) .app-nav's own
		   overflow-y: auto scrolls the whole column, card included, same
		   as any other flex child, rather than the card silently landing
		   outside the visible viewport. */
		flex: none;
		margin-top: auto;
		display: flex;
		width: 100%;
		padding: 10px 12px;
		border: 1px solid var(--line);
		border-radius: var(--radius-card);
		background-color: var(--surface);
		color: var(--paper);
		text-decoration: none;
	}

	.npl-nav-account:hover {
		border-color: var(--line-strong);
	}

	.npl-nav-account__avatar {
		display: flex;
		flex: none;
		align-items: center;
		justify-content: center;
		width: 34px;
		height: 34px;
		border-radius: 50%;
		background-color: var(--surface-2);
		font-family: var(--font-display);
		font-size: 0.75rem;
		font-weight: 700;
	}

	.npl-nav-account__text {
		display: flex;
		flex-direction: column;
		min-width: 0;
	}

	.npl-nav-account__name {
		overflow: hidden;
		font-size: 0.8125rem;
		font-weight: 700;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.npl-nav-account__meta {
		overflow: hidden;
		font-size: 0.6875rem;
		color: var(--muted);
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	/* The sidebar now runs full height; the top bar sits beside it and
	   drops its duplicate title (the wordmark is in the sidebar). */
	.top-bar {
		margin-left: var(--sidebar-width);
	}

	.top-bar__title {
		visibility: hidden;
	}
}

.top-bar {
	background-color: rgba(14, 15, 17, 0.92);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	border-bottom-color: var(--line);
}

html[data-theme="light"] .top-bar {
	background-color: rgba(246, 245, 242, 0.92);
}

.top-bar__title {
	font-family: var(--font-display);
	font-weight: 700;
}

/* Drawer (More). */
.drawer {
	background-color: var(--surface);
	border-left: 1px solid var(--line);
}

.drawer__link {
	color: var(--paper);
}

/* ---- Horizontal chip rows (tickers) --------------------------------------- */

.scroll-row,
.npl-chip-row {
	overflow-x: auto;
	scrollbar-width: none;
}

.scroll-row::-webkit-scrollbar,
.npl-chip-row::-webkit-scrollbar {
	display: none;
}

.scroll-row > *,
.npl-chip-row > * {
	flex-shrink: 0;
}

/* ---- Page padding ---------------------------------------------------------- */

@media (max-width: 767px) {
	.app-content {
		padding-inline: 20px;
	}
}

/* ---- Home layout ----------------------------------------------------------
   Hero row (deadline + three stat cards), a full-width matches strip, then
   a two-column grid ≥ 1024px: left = primary/dense (My Team, league,
   Top Performers), right = widgets (alerts, next match, poll, market,
   news). Below 1024px the two columns dissolve (display: contents) and
   `npl-home-order-N` interleaves them in priority order. */

.npl-home-grid {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.npl-home-col {
	display: contents;
}

.npl-home-grid > *,
.npl-home-col > * {
	margin-block: 0 !important; /* flow-layout margins; the grid gap spaces these */
}

.npl-home-order-1 { order: 1; }
.npl-home-order-2 { order: 2; }
.npl-home-order-3 { order: 3; }
.npl-home-order-4 { order: 4; }
.npl-home-order-5 { order: 5; }
.npl-home-order-6 { order: 6; }
.npl-home-order-7 { order: 7; }
.npl-home-order-8 { order: 8; }
.npl-home-order-9 { order: 9; }
.npl-home-order-10 { order: 10; }
.npl-home-order-11 { order: 11; }

@media (min-width: 1024px) {
	.npl-home-grid {
		display: grid;
		grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
		align-items: start;
	}

	.npl-home-col {
		display: flex;
		flex-direction: column;
		gap: 16px;
		min-width: 0;
	}
}

/* Section spacing on Home — cards carry their own padding. */
.npl-fantasy-dashboard,
.npl-fantasy-insights {
	margin-bottom: 16px;
}

.npl-home-grid .npl-fantasy-dashboard,
.npl-home-grid .npl-fantasy-insights {
	margin-bottom: 0;
}

/* ---- Hero: deadline card + stat cards ------------------------------------ */

.npl-dash-hero {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 8px;
}

.npl-dash-hero > .npl-deadline,
.npl-dash-hero > .npl-dash-join {
	grid-column: 1 / -1;
}

@media (min-width: 1024px) {
	.npl-dash-hero {
		grid-template-columns: minmax(0, 1.3fr) repeat(3, minmax(0, 1fr));
		gap: 16px;
	}

	.npl-dash-hero > .npl-deadline {
		grid-column: auto;
	}

	.npl-dash-hero--join {
		grid-template-columns: minmax(0, 1.3fr) minmax(0, 3fr);
	}

	.npl-dash-hero--join > .npl-dash-join {
		grid-column: auto;
	}
}

/* The one gradient per screen: the deadline hero. */
.npl-deadline {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 20px;
	border: 1px solid rgba(225, 29, 60, 0.35);
	border-radius: var(--radius-lg);
	background: linear-gradient(155deg, rgba(225, 29, 60, 0.16), var(--surface) 58%);
}

.npl-deadline__eyebrow {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--muted);
}

.npl-deadline__timer {
	margin: 4px 0 0;
	font-family: var(--font-display);
	font-size: clamp(2.125rem, 3vw + 1rem, 2.5rem);
	font-weight: 700;
	line-height: 1.05;
	letter-spacing: -0.5px;
	font-variant-numeric: tabular-nums;
	color: var(--paper);
}

.npl-deadline--final .npl-deadline__timer,
.npl-deadline--closed .npl-deadline__timer {
	color: var(--crimson-text);
}

.npl-deadline__when {
	margin: 0;
	font-size: 0.8125rem;
	color: var(--muted);
}

.npl-deadline__nudge {
	margin: 4px 0 0;
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--crimson-text);
}

.npl-deadline__foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px 16px;
	margin-top: auto;
	padding-top: 12px;
}

.npl-deadline__transfers {
	font-size: 0.8125rem;
	color: var(--muted);
}

.npl-dash-card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
	padding: 14px;
	padding-right: 26px;
	border-radius: var(--radius-card);
	color: var(--paper);
	text-decoration: none;
}

.npl-dash-card:hover {
	border-color: var(--line-strong);
}

.npl-dash-card:active {
	background-color: var(--surface-2);
}

.npl-dash-card__label {
	display: flex;
	align-items: center;
	gap: 6px;
}

.npl-dash-card__value {
	font-size: clamp(1.25rem, 1vw + 1rem, 1.625rem);
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -0.3px;
}

.npl-dash-card__extra {
	font-size: 0.75rem;
}

.npl-dash-card__sub {
	font-size: 0.75rem;
	color: var(--muted);
}

.npl-dash-card__go {
	position: absolute;
	top: 14px;
	right: 8px;
	color: var(--muted);
}

@media (max-width: 1023px) {
	/* Three narrow cards side by side on a phone: tighter. */
	.npl-dash-hero .npl-dash-card {
		padding: 12px 10px;
	}

	.npl-dash-hero .npl-dash-card__go {
		display: none;
	}
}

/* Rank movement: a small tinted pill (arrow + number). Green up, crimson down,
   a muted dash for no change, an outlined "NEW" for a manager with no previous
   rank. 10+ places is "big": a stronger tint and a ring (no shadows). The arrow,
   the number and the screen-reader text carry the meaning, never colour alone.
   Shared by Leaderboard, My Leagues, Home (React RankMove + the PHP twin in
   leaderboard-preview). */
.npl-rank-move {
	display: inline-flex;
	align-items: center;
	gap: 3px;
	padding: 1px 7px;
	border: 1px solid transparent;
	border-radius: 20px;
	font-size: 0.6875rem;
	font-weight: 700;
	line-height: 1.5;
	white-space: nowrap;
}

.npl-rank-move__arrow {
	font-size: 0.5625rem;
	line-height: 1;
}

.npl-rank-move--up {
	color: var(--positive-text);
	background-color: color-mix(in srgb, var(--positive) 14%, transparent);
}

.npl-rank-move--down {
	color: var(--crimson-text);
	background-color: rgba(225, 29, 60, 0.14);
}

.npl-rank-move--same {
	padding-inline: 8px;
	color: var(--muted);
}

.npl-rank-move--new {
	border-color: var(--line-strong);
	color: var(--paper);
	font-size: 0.625rem;
	letter-spacing: 0.06em;
}

.npl-rank-move--up.npl-rank-move--big {
	border-color: color-mix(in srgb, var(--positive) 45%, transparent);
	background-color: color-mix(in srgb, var(--positive) 22%, transparent);
}

.npl-rank-move--down.npl-rank-move--big {
	border-color: rgba(225, 29, 60, 0.45);
	background-color: rgba(225, 29, 60, 0.22);
}

/* Biggest climber / biggest drop: two hairline cards above the table. */
.npl-movers {
	margin: 0 0 var(--space-16);
}

.npl-movers__caption {
	margin: 0 0 var(--space-8);
	color: var(--muted);
	font-size: 0.75rem;
}

.npl-movers__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--space-8);
}

.npl-movers__item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-8);
	min-width: 0;
	padding: 10px 12px;
	border: 1px solid var(--line);
	border-radius: var(--radius-card, 14px);
}

.npl-movers__text {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.npl-movers__label {
	color: var(--muted);
	font-size: 0.6875rem;
}

.npl-movers__name {
	overflow: hidden;
	font-size: 0.875rem;
	font-weight: 600;
	text-overflow: ellipsis;
	white-space: nowrap;
}

@media (max-width: 420px) {
	.npl-movers__grid {
		grid-template-columns: 1fr;
	}
}

/* ---- List cards: plain rows, hairline dividers --------------------------- */

.npl-myteam,
.npl-league,
.npl-poll,
.npl-transfers,
.npl-alerts {
	padding: 16px;
	border-radius: var(--radius-md);
}

.npl-myteam .section__header,
.npl-league .section__header {
	align-items: center;
	margin-bottom: 8px;
}

.npl-myteam__summary,
.npl-insight__sub,
.npl-insight__footnote {
	margin: 0 0 8px;
	font-size: 0.75rem;
	color: var(--muted);
}

.npl-insight__footnote {
	margin: 10px 0 0;
}

.npl-myteam__row,
.npl-alert,
.npl-poll__option {
	padding: 10px 0;
	border-top: 1px solid var(--line);
}

.npl-myteam__name {
	display: flex;
	align-items: center;
	gap: 6px;
	overflow: hidden;
	font-size: 0.875rem;
	font-weight: 600;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.npl-myteam__meta,
.npl-league__manager,
.npl-transfers__meta,
.npl-alert__detail,
.npl-poll__result {
	font-size: 0.75rem;
	color: var(--muted);
}

.npl-myteam__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px;
}

.npl-live-tag {
	padding: 1px 6px;
	font-size: 0.625rem;
}

.npl-match-state--none {
	font-style: italic;
}

.npl-myteam__points {
	display: flex;
	flex: none;
	flex-direction: column;
	align-items: flex-end;
}

.npl-myteam__total {
	font-size: 1.25rem;
	font-weight: 700;
	letter-spacing: -0.3px;
}

.npl-myteam__equation {
	font-size: 0.6875rem;
	color: var(--muted);
	white-space: nowrap;
}

.npl-myteam__footer {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding-top: 10px;
	border-top: 1px solid var(--line);
}

.leaderboard-preview__avatar {
	background-color: var(--surface-2);
	color: var(--paper);
	font-family: var(--font-display);
}

/* League table: plain rows; "you" is marked by a pill and a thin crimson
   rule, not a filled row. */
.npl-league__title {
	margin: 0 0 8px;
	font-weight: 600;
}

.npl-league__row {
	padding: 10px 4px;
	border-top: 1px solid var(--line);
	border-radius: 0;
}

.npl-league__row--me {
	background: none;
	box-shadow: inset 2px 0 0 var(--crimson);
	padding-left: 10px;
}

.npl-league__rank,
.npl-league__total {
	font-weight: 700;
}

.npl-league__rank {
	flex: none;
	width: 2ch;
	text-align: right;
}

.npl-league__move {
	flex: none;
	width: 4ch;
}

.npl-league__name {
	overflow: hidden;
	font-size: 0.875rem;
	font-weight: 600;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.npl-league__gap {
	padding: 0 8px;
	color: var(--muted);
}

.npl-league__chase {
	margin: 10px 0 0;
	font-size: 0.8125rem;
	font-weight: 600;
}

.npl-dash-join {
	padding: 20px;
}

.npl-dash-join h2 {
	margin: 0 0 8px;
}

/* Insights. */
.npl-insight__title {
	margin: 0 0 4px;
}

.npl-alert {
	color: var(--paper);
	text-decoration: none;
}

.npl-alert__tag {
	flex: none;
	min-width: 72px;
	padding: 3px 6px;
	border-radius: var(--radius-badge);
	background-color: var(--surface-2);
	font-size: 0.6875rem;
	font-weight: 700;
	text-align: center;
	color: var(--paper);
}

.npl-alert__tag--out,
.npl-alert__tag--fall {
	color: var(--crimson-text);
}

.npl-alert__tag--rise {
	color: var(--positive-text);
}

.npl-alert__title {
	font-size: 0.875rem;
	font-weight: 600;
}

.npl-alert__cta {
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--crimson-text);
}

.npl-alerts__more {
	margin-top: 8px;
}

.npl-poll__head {
	display: flex;
	justify-content: space-between;
	gap: 8px;
}

.npl-poll__name {
	font-size: 0.875rem;
	font-weight: 600;
}

.npl-poll__team {
	font-weight: 400;
	color: var(--muted);
}

.npl-poll__mine {
	margin-left: 6px;
}

.npl-poll__share {
	font-weight: 700;
}

.npl-poll__bar {
	margin-top: 6px;
}

.npl-poll__result {
	margin: 4px 0 0;
}

.npl-transfers__tabs {
	margin-bottom: 8px;
}

.npl-transfers__table td {
	padding: 10px 0;
	vertical-align: top;
}

.npl-transfers__table .npl-num {
	width: 3.5em;
	font-family: var(--font-display);
	text-align: right;
}

.npl-transfers__name {
	display: block;
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--paper);
}

.npl-transfers__net.is-up { color: var(--positive-text); }
.npl-transfers__net.is-down { color: var(--crimson-text); }

/* Compact Next Match (Home). */
.npl-next-match--compact .npl-next-match__hero {
	padding: 16px;
	border-radius: var(--radius-md);
	background: var(--surface);
}

.npl-next-match--compact .cta-banner__match {
	font-size: 1.125rem;
}

.npl-live-state {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--positive-text);
	font-weight: 600;
}

/* Player pool rows: `.squad-pool-table td { display: block }` (components.css)
   outranked the flex layout of the player cell, stacking the avatar above
   the name. */
.squad-pool-table td.squad-pool-table__player {
	display: flex;
}

/* "This is yours": every own-row marker site-wide — a tinted pill and a
   thin crimson rule, never a filled row. */
.npl-you-tag {
	display: inline-flex;
	align-items: center;
	padding: 2px 7px;
	border-radius: var(--radius-pill);
	background-color: var(--crimson-tint-strong);
	color: var(--crimson-text);
	font-size: 0.625rem;
	font-weight: 700;
}

.leaderboard-preview__row--you,
.npl-leaderboard__table tr.is-you {
	background: none;
	box-shadow: inset 2px 0 0 var(--crimson);
}

/* Native file picker (Profile photo): same text-link treatment as any
   secondary action. */
input[type="file"] {
	color: var(--muted);
	font-size: 0.8125rem;
}

input[type="file"]::file-selector-button {
	margin-right: 10px;
	padding: 8px 14px;
	border: 1px solid var(--line-strong);
	border-radius: var(--radius-sm);
	background-color: var(--surface-2);
	color: var(--paper);
	font-family: var(--font-display);
	font-weight: 700;
	cursor: pointer;
}

/* Disabled primary action, everywhere: neutral and dashed — never a dim
   crimson that reads as "the same button, slightly different". */
.btn--primary:disabled,
.btn--primary[aria-disabled="true"],
.team-builder-footer .btn--primary:disabled {
	opacity: 1;
	border: 1px dashed var(--line-strong);
	background-color: var(--surface-2);
	color: var(--muted);
	cursor: not-allowed;
}

/* ---- Captain / Vice-Captain and Transfer-in markers (clearer) ---------------
   Multipliers are written number-first everywhere: 2×, 1.5×. */
.pitch .pitch__token-badge {
	top: -9px;
	left: -9px;
	gap: 3px;
	min-width: 22px;
	height: 22px;
	padding: 0 6px;
	border: 2px solid var(--color-background);
	border-radius: var(--radius-full);
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.02em;
	white-space: nowrap;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

.pitch .pitch__token-badge-mult {
	font-size: 9px;
	font-weight: 700;
	opacity: 0.85;
}

/* Captain: solid gold. Vice-Captain: ink fill, gold letters + ring, so the
   two read apart at a glance without a new colour. */
.pitch .pitch__token-badge--captain {
	background-color: var(--gold);
	color: var(--on-gold);
}

.pitch .pitch__token-badge--vice {
	background-color: var(--color-background);
	color: var(--gold);
	border-color: var(--gold);
}

/* Transferred in: green circle (the design system's positive state) with an
   ink "enter" glyph, and a matching ring on the card. */
.pitch .pitch__token-in {
	/* Bottom-right: the top corners belong to the C / VC badge of the
	   neighbouring card. */
	top: auto;
	bottom: -9px;
	right: -9px;
	width: 22px;
	height: 22px;
	border: 2px solid var(--color-background);
	background-color: var(--positive);
	color: #0e0f11;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

.pitch .pitch__token-in svg {
	width: 12px;
	height: 12px;
}

.pitch .pitch__token--in {
	outline: 2px solid var(--positive);
	outline-offset: 1px;
}

/* Every jersey card is the same height: the name bar always reserves two
   lines (and centres a one-line name in it), so "K. Shrestha" wrapping no
   longer makes its card taller than its neighbours. */
.pitch .pitch__token-name {
	box-sizing: border-box;
	min-height: calc(2.4em + 7px);
	-webkit-box-pack: center;
	box-pack: center;
}

/* Rank movement, smaller, with a long arrow (stem + head) instead of a triangle. */
.npl-rank-move {
	gap: 2px;
	padding: 0 5px;
	font-size: 0.625rem;
	line-height: 1.4;
}

.npl-rank-move__arrow--long {
	width: 7px;
	height: 10px;
	flex: 0 0 auto;
}

/* Leaderboard: the movement sits on the same line as the rank number. */
.npl-leaderboard__rankcell {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 6px;
	white-space: nowrap;
}

.npl-leaderboard__table .npl-leaderboard__rank {
	width: 5.5em;
}

/* Climber / drop: team name on top, the manager's name beneath it. */
.npl-movers__sub {
	overflow: hidden;
	font-size: 0.75rem;
	color: var(--muted);
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* ---- Winner banner (Match fantasy, Season fantasy and main leaderboards) ------
   Full width, text on the left, a gold cup on the right with a short celebration:
   confetti bursts once, sparkles keep twinkling. Everything stops for reduced motion. */
.npl-movers__grid--single {
	grid-template-columns: 1fr;
}

.npl-winner {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-16);
	width: 100%;
	margin-bottom: var(--space-8);
	padding: var(--space-16) var(--space-24);
	overflow: hidden;
	border: 1px solid var(--gold);
	border-radius: var(--radius-card, 14px);
	background: color-mix(in srgb, var(--gold) 8%, transparent);
}

.npl-winner__text {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.npl-winner__label {
	color: var(--gold);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.npl-winner__name {
	overflow: hidden;
	font-family: var(--font-display, inherit);
	font-size: 1.25rem;
	font-weight: 700;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.npl-winner__sub {
	overflow: hidden;
	color: var(--muted);
	font-size: 0.8125rem;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.npl-winner__points {
	margin-top: 4px;
	font-size: 1.5rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.npl-winner__cup {
	position: relative;
	flex: 0 0 auto;
	width: 84px;
	height: 84px;
	color: var(--gold);
}

.npl-winner__trophy {
	position: relative;
	width: 100%;
	height: 100%;
	transform-origin: 50% 90%;
	animation: npl-winner-pop 0.7s cubic-bezier(0.2, 1.4, 0.4, 1) both, npl-winner-bob 3.2s ease-in-out 0.8s infinite;
}

.npl-winner__spark {
	position: absolute;
	width: 8px;
	height: 8px;
	background: var(--gold);
	clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
	opacity: 0;
	animation: npl-winner-twinkle 2.4s ease-in-out infinite;
}

.npl-winner__spark--1 { top: 4px; left: 6px; animation-delay: 0.2s; }
.npl-winner__spark--2 { top: 0; right: 4px; width: 11px; height: 11px; animation-delay: 1s; }
.npl-winner__spark--3 { bottom: 14px; left: 0; width: 6px; height: 6px; animation-delay: 1.5s; }
.npl-winner__spark--4 { bottom: 20px; right: 0; animation-delay: 0.6s; }

.npl-winner__confetti {
	position: absolute;
	top: 30%;
	left: 50%;
	width: 6px;
	height: 10px;
	border-radius: 1px;
	background: var(--gold);
	opacity: 0;
	animation: npl-winner-confetti 1.4s ease-out 0.25s 1 both;
}

.npl-winner__confetti--1,
.npl-winner__confetti--4,
.npl-winner__confetti--7 { background: var(--crimson, var(--gold)); }
.npl-winner__confetti--2,
.npl-winner__confetti--5,
.npl-winner__confetti--8 { background: var(--paper, var(--gold)); }

.npl-winner__confetti--0 { --x: -64px; --y: -48px; --r: 220deg; }
.npl-winner__confetti--1 { --x: -38px; --y: -70px; --r: -160deg; }
.npl-winner__confetti--2 { --x: -8px; --y: -80px; --r: 300deg; }
.npl-winner__confetti--3 { --x: 24px; --y: -74px; --r: -240deg; }
.npl-winner__confetti--4 { --x: 52px; --y: -58px; --r: 180deg; }
.npl-winner__confetti--5 { --x: 70px; --y: -30px; --r: -280deg; }
.npl-winner__confetti--6 { --x: -72px; --y: -14px; --r: 140deg; }
.npl-winner__confetti--7 { --x: 76px; --y: 2px; --r: -120deg; }
.npl-winner__confetti--8 { --x: -50px; --y: -34px; --r: 260deg; }
.npl-winner__confetti--9 { --x: 40px; --y: -42px; --r: -200deg; }

@keyframes npl-winner-pop {
	from { opacity: 0; transform: scale(0.4) rotate(-12deg); }
	to { opacity: 1; transform: scale(1) rotate(0); }
}

@keyframes npl-winner-bob {
	0%, 100% { transform: translateY(0) rotate(0); }
	50% { transform: translateY(-4px) rotate(2deg); }
}

@keyframes npl-winner-twinkle {
	0%, 100% { opacity: 0; transform: scale(0.4); }
	50% { opacity: 1; transform: scale(1); }
}

@keyframes npl-winner-confetti {
	0% { opacity: 1; transform: translate(0, 0) rotate(0); }
	70% { opacity: 1; }
	100% { opacity: 0; transform: translate(var(--x), calc(var(--y) + 56px)) rotate(var(--r)); }
}

@media (prefers-reduced-motion: reduce) {
	.npl-winner__trophy { animation: none; }
	.npl-winner__spark { animation: none; opacity: 0.8; transform: none; }
	.npl-winner__confetti { display: none; }
}

@media (max-width: 480px) {
	.npl-winner { padding: var(--space-16); }
	.npl-winner__cup { width: 64px; height: 64px; }
	.npl-winner__name { font-size: 1.0625rem; }
}

/* Round winner card: the points sit where the climber card shows its rank arrow. */
.npl-movers__points {
	flex: 0 0 auto;
	font-weight: 700;
	white-space: nowrap;
}

/* Leaderboard: season picker (past seasons' final tables). A pill select in the site's dark system:
   surface fill, hairline border, crimson on hover/focus, a chevron that follows the text colour. */
.npl-leaderboard__season {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-8) var(--space-16);
	margin-bottom: var(--space-16);
}

.npl-leaderboard__season-label {
	color: var(--muted);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.npl-select {
	position: relative;
	display: inline-flex;
	max-width: 100%;
}

.npl-select select {
	min-height: 44px;
	max-width: 100%;
	padding: 0 44px 0 var(--space-16);
	border: 1px solid var(--line);
	border-radius: 999px;
	background-color: var(--surface);
	color: var(--paper);
	font-family: inherit;
	font-size: 0.9375rem;
	font-weight: 600;
	appearance: none;
	cursor: pointer;
	text-overflow: ellipsis;
}

.npl-select::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 18px;
	width: 7px;
	height: 7px;
	border-right: 2px solid var(--muted);
	border-bottom: 2px solid var(--muted);
	transform: translateY(-70%) rotate(45deg);
	pointer-events: none;
}

.npl-select select:hover,
.npl-select select:focus-visible {
	border-color: var(--crimson);
	outline: none;
}

.npl-select select:focus-visible {
	box-shadow: 0 0 0 2px color-mix(in srgb, var(--crimson) 35%, transparent);
}

.npl-leaderboard__champ {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 14px;
	border: 1px solid var(--gold);
	border-radius: 999px;
	background: color-mix(in srgb, var(--gold) 8%, transparent);
	font-size: 0.8125rem;
	font-weight: 600;
}

@media (max-width: 480px) {
	.npl-leaderboard__season {
		flex-direction: column;
		align-items: stretch;
		gap: 6px;
	}

	.npl-select,
	.npl-select select {
		width: 100%;
	}

	.npl-leaderboard__champ {
		align-self: flex-start;
		margin-top: 4px;
	}
}