/*
 * Shared front-end UI for the plugin's React islands: skeleton placeholders
 * (includes/skeleton.php, src/blocks/shared/skeleton.js) and the swipe
 * feedback slide (src/blocks/shared/swipe.js).
 *
 * Skeletons:
 * Neutral blocks shaped like the content that's loading, gently pulsing —
 * no shimmer gradient, per design-system.md. Colors resolve through the
 * dark-mode-aware theme tokens, with light-mode fallbacks so the plugin
 * still works under any theme.
 */

.npl-skeleton {
	display: flex;
	flex-direction: column;
	gap: var( --wp--preset--spacing--spacing-16, 1rem );
	padding-block: var( --wp--preset--spacing--spacing-8, 0.5rem );
}

.npl-skel {
	display: block;
	border-radius: var( --wp--custom--radius--sm, 8px );
	background-color: var( --wp--custom--color--neutral-fill, #F0F0F1 );
	animation: npl-skel-pulse 1.1s ease-in-out infinite alternate;
}

@keyframes npl-skel-pulse {
	from {
		opacity: 1;
	}
	to {
		opacity: 0.45;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.npl-skel {
		animation: none;
	}
}

.npl-skel--bar {
	height: 12px;
}

.npl-skel--thin {
	height: 10px;
}

.npl-skel--tall {
	height: 40px;
}

.npl-skel--w100 {
	width: 100%;
}

.npl-skel--w60 {
	width: 60%;
}

.npl-skel--w40 {
	width: 40%;
}

.npl-skel--w35 {
	width: 35%;
}

/* Round selector: arrows + select across the full width, like the real one. */
.npl-skel--pill {
	align-self: stretch;
	width: 100%;
	height: 41px;
	border-radius: 999px;
}

.npl-skel--center {
	align-self: center;
}

.npl-skel--circle {
	flex: 0 0 auto;
	width: 36px;
	height: 36px;
	border-radius: 999px;
}

.npl-skel--num {
	flex: 0 0 auto;
	width: 48px;
	height: 16px;
}

.npl-skel--pitch {
	width: 100%;
	min-height: 320px;
	/* Phones: the real Points pitch is a tall column (331 x 704). */
	aspect-ratio: 331 / 704;
	border-radius: var( --wp--custom--radius--lg, 20px );
}

.npl-skel--tile {
	height: 87px;
	border-radius: var( --wp--custom--radius--md, 12px );
}

.npl-skel-row {
	display: flex;
	align-items: center;
	gap: var( --wp--preset--spacing--spacing-16, 1rem );
	min-height: 44px;
	padding-block: 4px;
	border-bottom: 1px solid var( --wp--custom--color--border, #E1E1E3 );
}

.npl-skel-row__lines {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
}

.npl-skel-tiles {
	display: grid;
	grid-template-columns: repeat( 3, 1fr );
	gap: var( --wp--preset--spacing--spacing-16, 1rem );
}

.npl-skel-cols {
	display: grid;
	gap: var( --wp--preset--spacing--spacing-24, 1.5rem );
}

@media ( min-width: 768px ) {
	.npl-skel-cols {
		grid-template-columns: 3fr 2fr;
	}
}

.npl-skel-card {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: var( --wp--preset--spacing--spacing-16, 1rem );
	border: 1px solid var( --wp--custom--color--border, #E1E1E3 );
	border-radius: var( --wp--custom--radius--md, 12px );
}

/* Visually hidden label for the aria-busy region, in case the active
   theme doesn't define WordPress's usual .screen-reader-text. */
.npl-skeleton .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect( 0 0 0 0 );
	white-space: nowrap;
}

/* Swipe between rounds (Leaderboard, My Team → Points): the content —
   not the round navigator — slides in from the side it came from. */
.npl-swiped > :not( .npl-matches-block__gw-nav ) {
	animation: 180ms ease-out both npl-swipe-in-next;
}

.npl-swiped--prev > :not( .npl-matches-block__gw-nav ) {
	animation-name: npl-swipe-in-prev;
}

@keyframes npl-swipe-in-next {
	from {
		opacity: 0.4;
		transform: translateX( 24px );
	}
}

@keyframes npl-swipe-in-prev {
	from {
		opacity: 0.4;
		transform: translateX( -24px );
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.npl-swiped > * {
		animation: none;
	}
}

@media ( min-width: 768px ) {
	.npl-skel--pitch {
		aspect-ratio: 3 / 2;
	}

	.npl-skel--switch {
		display: none;
	}
}

/* My Team first paint: tab row, transfer card, budget header, panel switch. */
.npl-skel-tabs {
	display: flex;
	gap: var( --wp--preset--spacing--spacing-24, 1.5rem );
	align-items: center;
	height: 45px;
	border-bottom: 1px solid var( --wp--custom--color--border, #E1E1E3 );
}

.npl-skel--w15 {
	width: 15%;
}

.npl-skel--w20 {
	width: 20%;
}

.npl-skel--card {
	height: 170px;
	border-radius: var( --wp--custom--radius--md, 12px );
}

.npl-skel--headerbar {
	/* The real header butts up against the transfer card (no gap). */
	margin-top: calc( var( --wp--preset--spacing--spacing-16, 1rem ) * -1 );
	height: 66px;
	border-radius: var( --wp--custom--radius--md, 12px );
}

.npl-skel--detail {
	width: 96px;
	height: 12px;
	margin-block: 7px;
}

.npl-skel--switch {
	margin-top: -8px;
	height: 54px;
	border-radius: var( --wp--custom--radius--md, 12px );
}

@media ( max-width: 767px ) {
	/* Phones open on the Player Pool panel, so the pitch placeholder would be wrong. */
	.npl-skeleton--myteam-squad .npl-skel--pitch {
		display: none;
	}
}

.npl-skeleton--myteam-points,
.npl-skeleton--myteam-squad {
	padding-block: 0;
}

.npl-skeleton--myteam-squad .npl-skel-cols {
	margin-top: -8px;
}

/* Season fantasy My team and Leaderboard loading shapes (mirror the real layouts). */
.npl-skeleton--myteam,
.npl-skeleton--myteam-board {
	padding-block: 0;
}

/* Playing XI ground: the real one is landscape from 768px, a tall column on phones. */
@media ( min-width: 768px ) {
	.npl-skel--pitch-xi {
		min-height: 0;
		aspect-ratio: 736 / 490;
	}
}

.npl-skel-controls {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var( --wp--preset--spacing--spacing-8, 0.5rem );
}

.npl-skel--segmented {
	width: 150px;
	height: 36px;
	border-radius: 999px;
}

.npl-skel--search {
	width: 100%;
	height: 44px;
	border-radius: var( --wp--custom--radius--sm, 8px );
}

/* Match fantasy loading shapes (mirror the real page: header card, tabs, steps, name card / pitch). */
.npl-skeleton--matchxi-wizard,
.npl-skeleton--matchxi-saved {
	padding-block: 0;
}

.npl-skel--matchhead {
	height: 96px;
	border-radius: var( --wp--custom--radius--md, 12px );
}

.npl-skel-steps {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var( --wp--preset--spacing--spacing-16, 1rem );
}

.npl-skel--namecard {
	align-self: center;
	width: min( 480px, 100% );
	height: 270px;
	border-radius: var( --wp--custom--radius--md, 12px );
}

/* Match fantasy list (Team page): placeholder match cards. */
.npl-skel-matchgrid {
	display: grid;
	gap: var( --wp--preset--spacing--spacing-16, 1rem );
}

@media ( min-width: 768px ) {
	.npl-skel-matchgrid {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	}
}

.npl-skel-matchcard {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: var( --wp--preset--spacing--spacing-16, 1rem );
	border: 1px solid var( --wp--custom--color--border, #E1E1E3 );
	border-radius: var( --wp--custom--radius--md, 12px );
}

.npl-skel-matchcard__top {
	display: flex;
	align-items: center;
	gap: var( --wp--preset--spacing--spacing-8, 0.5rem );
}

.npl-skel-matchcard__top .npl-skel--bar {
	flex: 1 1 auto;
}

.npl-skel--badge {
	flex: 0 0 auto;
	width: 64px;
	height: 20px;
	margin-left: auto;
	border-radius: 999px;
}

.npl-skel--button {
	width: 100%;
	height: 44px;
	margin-top: 4px;
	border-radius: var( --wp--custom--radius--sm, 8px );
}