/**
 * Booknetic for Theme V4 — Skeleton loaders premium.
 *
 * Inline-friendly: the .bft-skel base + shimmer keyframe live in
 * critical-base.css (so skeletons paint instantly without waiting for the
 * main stylesheet). This file adds the variants.
 */

.bft-skel { display: block; }

/* Variants — sizes match real components so the swap doesn't shift layout. */

.bft-skel--text     { height: 1em; width: 70%; margin: .25em 0; border-radius: 4px; }
.bft-skel--text-sm  { height: .85em; width: 50%; }
.bft-skel--text-lg  { height: 1.4em; width: 90%; border-radius: 6px; }

.bft-skel--title    { height: 28px; width: 60%; border-radius: 8px; margin-bottom: 12px; }
.bft-skel--subtitle { height: 14px; width: 80%; border-radius: 6px; margin-bottom: 6px; }

.bft-skel--avatar   { width: 40px; height: 40px; border-radius: 50%; }
.bft-skel--avatar-lg{ width: 64px; height: 64px; border-radius: 50%; }

.bft-skel--button   { width: 140px; height: 44px; border-radius: 12px; }
.bft-skel--button-sm{ width: 92px;  height: 36px; border-radius: 10px; }

.bft-skel--img      { width: 100%; aspect-ratio: 4/3; border-radius: 12px; }
.bft-skel--img-square { width: 100%; aspect-ratio: 1/1; border-radius: 12px; }
.bft-skel--img-banner { width: 100%; aspect-ratio: 21/9; border-radius: 16px; }

.bft-skel--card {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 18px;
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(255, 255, 255, 0.06);
	border-radius: 16px;
}

.bft-skel--row {
	display: grid;
	grid-template-columns: 40px 1fr 80px;
	gap: 12px;
	align-items: center;
	padding: 12px 14px;
	background: rgba(255, 255, 255, 0.03);
	border-radius: 10px;
}

.bft-skel--hero {
	display: grid;
	gap: 24px;
	padding: 48px 24px;
}
@media (min-width: 768px) {
	.bft-skel--hero { grid-template-columns: 1fr 1fr; align-items: center; }
}

.bft-skel--grid {
	display: grid;
	gap: 16px;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}

/* Group helpers — render a list of N text lines in a single declaration. */
.bft-skel-lines > * + * { margin-top: 8px; }

/* Hide skeletons when data is ready (set [data-loaded="true"] on parent). */
[data-loaded="true"] .bft-skel { display: none !important; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
	.bft-skel {
		animation: none !important;
		background: rgba(255, 255, 255, 0.06) !important;
	}
}

/* Light-mode tone */
html[data-color-scheme="light"] .bft-skel {
	background: linear-gradient(
		90deg,
		rgba(15, 23, 42, 0.04) 0%,
		rgba(15, 23, 42, 0.08) 50%,
		rgba(15, 23, 42, 0.04) 100%
	);
	background-size: 200% 100%;
}