/**
 * Loading — skeletons, spinner, progress
 */
.fc-spinner {
	display: inline-block;
	width: 1.25rem;
	height: 1.25rem;
	border: 2px solid var(--fc-color-border);
	border-top-color: var(--fc-color-deep-blue);
	border-radius: var(--fc-radius-full);
	animation: fc-spin var(--fc-duration-slow) linear infinite;
	vertical-align: middle;
}

.fc-spinner--lg {
	width: 2rem;
	height: 2rem;
	border-width: 3px;
}

.fc-skeleton {
	display: block;
	height: 1rem;
	border-radius: var(--fc-radius-sm);
	background: linear-gradient(
		90deg,
		var(--fc-color-light-sand) 0%,
		var(--fc-color-skeleton-mid) 50%,
		var(--fc-color-light-sand) 100%
	);
	background-size: 200% 100%;
	animation: fc-shimmer 1.2s ease-in-out infinite;
}

.fc-skeleton--title { height: 1.5rem; width: 60%; }
.fc-skeleton--text { height: 0.9rem; width: 100%; margin-bottom: var(--fc-space-2); }
.fc-skeleton--avatar {
	width: 3rem;
	height: 3rem;
	border-radius: var(--fc-radius-full);
}

.fc-progress {
	width: 100%;
	height: 0.5rem;
	border: 0;
	border-radius: var(--fc-radius-full);
	background: var(--fc-color-light-sand);
	overflow: hidden;
}

.fc-progress::-webkit-progress-bar { background: var(--fc-color-light-sand); }
.fc-progress::-webkit-progress-value { background: var(--fc-color-seafoam); }
.fc-progress::-moz-progress-bar { background: var(--fc-color-seafoam); }

.fc-portal-loading-state {
	display: flex;
	align-items: center;
	gap: var(--fc-space-3);
	padding: var(--fc-space-5);
	border: 1px solid var(--fc-color-border);
	border-radius: var(--fc-radius-lg);
	background: var(--fc-color-bg);
}

.fc-portal-loading-state::before {
	content: "";
	width: 1.25rem;
	height: 1.25rem;
	border: 2px solid var(--fc-color-border);
	border-top-color: var(--fc-color-deep-blue);
	border-radius: var(--fc-radius-full);
	animation: fc-spin var(--fc-duration-slow) linear infinite;
}