/* ===== Skeleton (shadcn Skeleton, vanilla) =====
   A muted block that pulses while content loads. Each placeholder is shaped
   and sized like the content it stands in for, so nothing jumps when the
   data lands. skeleton.js builds the common shapes. ===== */
.sk {
	display: block;
	flex: none;
	max-width: 100%;
	border-radius: 8px;
	background: color-mix(in srgb, var(--txt) 9%, transparent);
	animation: sk-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
.sk.round {
	border-radius: 999px;
}
.sk.circle {
	border-radius: 50%;
}
.sk.inline {
	display: inline-block;
	vertical-align: middle;
}
.sk-wrap {
	display: flex;
	flex-direction: column;
	gap: 12px;
	width: 100%;
	min-width: 0;
}
.sk-row {
	display: flex;
	align-items: center;
	gap: 12px;
	min-width: 0;
}
.sk-stack {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 7px;
	min-width: 0;
}
.sk-list {
	gap: 16px;
	padding: 6px 2px;
}
.sk-fill {
	height: 100%;
}
.sk-fill > .sk {
	min-height: 120px;
}
.sk-trow {
	display: grid;
	grid-auto-columns: minmax(0, 1fr);
	grid-auto-flow: column;
	gap: 16px;
	align-items: center;
	padding: 12px 4px;
	border-bottom: 1px solid var(--border);
}
.sk-trow:last-child {
	border-bottom: 0;
}
@keyframes sk-pulse {
	50% {
		opacity: 0.45;
	}
}
@media (prefers-reduced-motion: reduce) {
	.sk {
		animation: none;
	}
}