/* =============================================================
   Unified toast region (#flash): a solid card that morphs in.

   Served as PLAIN CSS by Propshaft (NOT through Tailwind v4's Lightning
   CSS compiler), which collapses `color-mix(in oklab, var(...) N%,
   transparent)` because it cannot constant-fold a runtime variable. Keep
   this file outside app/assets/tailwind/.

   #flash is a DaisyUI .toast.toast-top.toast-center container; each
   message is an .alert child. Styles are scoped to `.toast .alert` so
   page-level alerts are untouched. Loaded after tailwind.css.

   Look: a raised surface (--surface-raised) with one soft drop shadow,
   because a toast floats over the page (DESIGN.md: shadows only for
   elevation; no hairline beside a large blur). No glass, no gradient, no
   tinted slab. The status colour lives only in the icon and the progress line.

   Motion: the ConfirmMorph vocabulary. The card grows out of the top edge
   (scale + blur + opacity, the compositor runs all three) on the impact
   curve, and leaves faster than it came.
   ============================================================= */

@keyframes toast-in {
	from {
		opacity: 0;
		filter: blur(6px);
		transform: translateY(-10px) scale(0.6, 0.7);
	}
	40% {
		opacity: 1;
	}
	to {
		opacity: 1;
		filter: blur(0);
		transform: none;
	}
}

@keyframes toast-out {
	to {
		opacity: 0;
		filter: blur(4px);
		transform: translateY(-6px) scale(0.92);
	}
}

.toast .alert {
	--toast-accent: var(--color-info);

	animation: toast-in 0.36s cubic-bezier(0.16, 1, 0.3, 1) both;
	transform-origin: top center;
	overflow: hidden;

	color: var(--color-base-content);
	background: var(--surface-raised);
	border: 0;
	border-radius: var(--radius-box);
	box-shadow: 0 18px 40px -16px oklch(0% 0 0 / 0.4);
}

.toast .alert.toast-exit {
	animation: toast-out 0.2s cubic-bezier(0.4, 0, 1, 1) forwards;
}

.toast .alert > svg {
	color: var(--toast-accent);
}

.toast .alert .text-xs {
	color: color-mix(in oklab, var(--color-base-content) 70%, transparent);
	opacity: 1;
}

/* The status is an accent on the icon, never a coloured slab. */
.toast .alert.alert-success { --toast-accent: var(--color-success); }
.toast .alert.alert-error { --toast-accent: var(--color-error); }
.toast .alert.alert-warning { --toast-accent: var(--color-warning); }
.toast .alert.alert-info { --toast-accent: var(--color-info); }

.toast .alert.alert-success,
.toast .alert.alert-error,
.toast .alert.alert-warning,
.toast .alert.alert-info {
	color: var(--color-base-content);
	background: var(--surface-raised);
}

/* Auto-dismiss progress line along the bottom edge of the card. */
.toast-progress {
	height: 2px;
	width: 100%;
	transform-origin: left center;
	transform: scaleX(0);
	background: var(--toast-accent);
	opacity: 0.55;
}

.toast-progress-running {
	animation: toast-progress linear forwards;
}

@keyframes toast-progress {
	from {
		transform: scaleX(0);
	}
	to {
		transform: scaleX(1);
	}
}

/* Reduced motion: no growth, no blur, no progress; a short fade in, and the
   exit is instant (effects.css already sets .toast-exit to animation: none). */
@media (prefers-reduced-motion: reduce) {
	.toast .alert {
		animation: toast-fade 0.12s linear both;
	}
	.toast-progress-running {
		animation: none !important;
	}
}

@keyframes toast-fade {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}