/* ==========================================================================
   Feedback — Toasts, banners, skeleton screens, offline indicator
   ========================================================================== */

/* ── Toast notification ──────────────────────────────────────────────────── */

.toast {
	position: fixed;
	bottom: calc(var(--sc-nav-height) + var(--sc-space-lg));
	left: 50%;
	transform: translateX(-50%) translateY(0);
	padding: var(--sc-space-sm) var(--sc-space-lg);
	background-color: var(--sc-text-primary);
	color: var(--sc-text-inverse);
	font-size: var(--sc-text-sm);
	border-radius: var(--sc-radius-full);
	box-shadow: var(--sc-shadow-md);
	z-index: var(--sc-z-toast);
	opacity: 0;
	pointer-events: none;
	transition: opacity var(--sc-transition-normal) var(--sc-ease-default),
		transform var(--sc-transition-normal) var(--sc-ease-default);
}

.toast.toast-visible {
	opacity: 1;
	pointer-events: auto;
}

.toast-success {
	background-color: var(--sc-success);
}

.toast-error {
	background-color: var(--sc-error);
}

@media (min-width: 1024px) {
	.toast {
		bottom: var(--sc-space-xl);
	}
}

/* ── Offline indicator ───────────────────────────────────────────────────── */

.offline-banner {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	padding: var(--sc-space-sm) var(--sc-space-md);
	background-color: var(--sc-warning);
	color: var(--sc-text-inverse);
	font-size: var(--sc-text-sm);
	font-weight: var(--sc-weight-medium);
	text-align: center;
	z-index: var(--sc-z-sticky);
	transform: translateY(-100%);
	transition: transform var(--sc-transition-normal) var(--sc-ease-out);
}

.offline-banner.offline-visible {
	transform: translateY(0);
}

/* ── Inline alert ────────────────────────────────────────────────────────── */

.alert {
	padding: var(--sc-space-md);
	border-radius: var(--sc-radius-md);
	font-size: var(--sc-text-sm);
	line-height: var(--sc-leading-normal);
}

.alert-error {
	background-color: var(--sc-error-subtle);
	color: var(--sc-error);
	border: var(--sc-border-width) solid var(--sc-error);
}

.alert-success {
	background-color: var(--sc-success-subtle);
	color: var(--sc-success);
	border: var(--sc-border-width) solid var(--sc-success);
}

.alert-warning {
	background-color: var(--sc-warning-subtle);
	color: var(--sc-warning);
	border: var(--sc-border-width) solid var(--sc-warning);
}

/* ── Skeleton screen ─────────────────────────────────────────────────────── */

.skeleton {
	background: linear-gradient(
		90deg,
		var(--sc-border-subtle) 25%,
		var(--sc-surface) 50%,
		var(--sc-border-subtle) 75%
	);
	background-size: 200% 100%;
	animation: skeleton-shimmer 1.5s var(--sc-ease-in-out) infinite;
	border-radius: var(--sc-radius-sm);
}

.skeleton-text {
	height: 1em;
	margin-bottom: var(--sc-space-sm);
}

.skeleton-text:last-child {
	width: 60%;
}

.skeleton-heading {
	height: 1.5em;
	width: 40%;
	margin-bottom: var(--sc-space-md);
}

.skeleton-card {
	height: 6rem;
	border-radius: var(--sc-radius-md);
}

.skeleton-avatar {
	width: 2.5rem;
	height: 2.5rem;
	border-radius: var(--sc-radius-full);
}

@keyframes skeleton-shimmer {
	0% {
		background-position: 200% 0;
	}
	100% {
		background-position: -200% 0;
	}
}

/* ── Loading spinner (for inline use only) ───────────────────────────────── */

.spinner {
	display: inline-block;
	width: 1.25em;
	height: 1.25em;
	border: 2px solid var(--sc-border);
	border-top-color: var(--sc-accent);
	border-radius: var(--sc-radius-full);
	animation: spin 0.6s linear infinite;
}

@keyframes spin {
	to {
		transform: rotate(360deg);
	}
}

/* ── Error page ─────────────────────────────────────────────────────────── */

.error-page {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: 100dvh;
	padding: var(--sc-space-xl);
	text-align: center;
	background-color: var(--sc-bg);
	position: relative;
	overflow: hidden;
}

/* Subtle warm radial glow behind the content */
.error-page::before {
	content: '';
	position: absolute;
	top: 35%;
	left: 50%;
	width: 40rem;
	height: 40rem;
	transform: translate(-50%, -50%);
	background: radial-gradient(
		ellipse at center,
		var(--sc-warm-1) 0%,
		transparent 70%
	);
	opacity: 0.25;
	pointer-events: none;
}

.error-content {
	position: relative;
	max-width: 28rem;
	animation: error-fade-in var(--sc-transition-slow) var(--sc-ease-out) both;
}

@keyframes error-fade-in {
	from {
		opacity: 0;
		transform: translateY(var(--sc-space-md));
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* Decorative botanical flourish — CSS-only */
.error-flourish {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: var(--sc-space-xl);
}

.error-flourish::before,
.error-flourish::after {
	content: '';
	width: 3.5rem;
	height: 1px;
	background: linear-gradient(
		to var(--direction, right),
		var(--sc-accent),
		transparent
	);
	opacity: 0.5;
}

.error-flourish::before {
	--direction: right;
	margin-right: var(--sc-space-md);
}

.error-flourish::after {
	--direction: left;
	margin-left: var(--sc-space-md);
}

.error-flourish-leaf {
	width: 1.5rem;
	height: 1.5rem;
	color: var(--sc-accent);
	opacity: 0.6;
	flex-shrink: 0;
}

/* Error code — large serif "chapter number" */
.error-code {
	font-family: var(--sc-font-display);
	font-size: 5rem;
	font-weight: var(--sc-weight-bold);
	line-height: 1;
	color: var(--sc-accent);
	opacity: 0.2;
	letter-spacing: var(--sc-tracking-tight);
	margin-bottom: var(--sc-space-sm);
	animation: error-code-in var(--sc-transition-slow) var(--sc-ease-out) 100ms both;
}

@keyframes error-code-in {
	from {
		opacity: 0;
		transform: scale(0.9);
	}
	to {
		opacity: 0.2;
		transform: scale(1);
	}
}

/* Error title */
.error-title {
	font-family: var(--sc-font-display);
	font-size: var(--sc-text-2xl);
	font-weight: var(--sc-weight-semibold);
	color: var(--sc-text-primary);
	line-height: var(--sc-leading-tight);
	margin-bottom: var(--sc-space-md);
}

/* Error message */
.error-message {
	font-size: var(--sc-text-base);
	color: var(--sc-text-secondary);
	line-height: var(--sc-leading-normal);
	margin-bottom: var(--sc-space-xl);
}

/* Error actions */
.error-actions {
	display: flex;
	flex-direction: column;
	gap: var(--sc-space-sm);
	align-items: center;
}

@media (min-width: 640px) {
	.error-actions {
		flex-direction: row;
		justify-content: center;
	}
}

.error-actions .btn {
	min-width: 10rem;
}

/* Subtle decorative footer line */
.error-footer {
	position: absolute;
	bottom: var(--sc-space-xl);
	left: 50%;
	transform: translateX(-50%);
	font-size: var(--sc-text-xs);
	color: var(--sc-text-tertiary);
	letter-spacing: var(--sc-tracking-wide);
}

.error-footer a {
	color: var(--sc-accent-text);
	text-decoration: none;
}

.error-footer a:hover {
	text-decoration: underline;
}

/* ── Empty state ─────────────────────────────────────────────────────────── */

.empty-state {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: var(--sc-space-3xl) var(--sc-space-lg);
	color: var(--sc-text-secondary);
	gap: var(--sc-space-xs);
}

/* SVG icon directly inside empty-state — constrain size and force stroke-only rendering */
.empty-state > svg {
	width: 48px;
	height: 48px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.5;
	opacity: 0.4;
	margin-bottom: var(--sc-space-sm);
	flex-shrink: 0;
}

/* Both BEM and flat naming variants used across pages */
.empty-state-icon,
.empty-state__icon {
	font-size: 2.5rem;
	margin-bottom: var(--sc-space-md);
	opacity: 0.5;
}

.empty-state-title,
.empty-state__title {
	font-family: var(--sc-font-display);
	font-size: var(--sc-text-lg);
	color: var(--sc-text-primary);
	margin: 0;
}

.empty-state-text,
.empty-state__desc,
.empty-state__text {
	font-size: var(--sc-text-sm);
	max-width: 20rem;
	margin: 0;
	color: var(--sc-text-tertiary);
}