/*
 * Tailwatch Toast — small in-house toast component.
 * Used by frontend feature scripts (e.g. wptw-disable-keys.js) to surface
 * brief warning messages to visitors. No external dependencies.
 *
 * Backgrounds meet WCAG 2.1 AA contrast (>= 4.5:1) against the white text.
 */

.wptw-toast-container {
	position: fixed;
	top: 20px;
	right: 20px;
	z-index: 999999;
	pointer-events: none;
	max-width: 360px;
}

.wptw-toast {
	display: block;
	margin-bottom: 8px;
	padding: 12px 18px;
	background: #b45309;
	color: #fff;
	font: 14px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
	border-radius: 4px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
	opacity: 0;
	transition: opacity 0.3s ease, transform 0.3s ease;
	transform: translateX(20px);
	pointer-events: auto;
	word-wrap: break-word;
}

.wptw-toast.is-visible {
	opacity: 1;
	transform: translateX(0);
}

.wptw-toast--warning { background: #b45309; }
.wptw-toast--error   { background: #b91c1c; }
.wptw-toast--success { background: #15803d; }
.wptw-toast--info    { background: #1d4ed8; }

/* Narrow phones — full-width with side gutters so the toast doesn't
 * crowd the right edge or get clipped. */
@media (max-width: 480px) {
	.wptw-toast-container {
		top: 12px;
		right: 12px;
		left: 12px;
		max-width: none;
	}
}

/* Honor reduced-motion: keep the fade but skip the slide. */
@media (prefers-reduced-motion: reduce) {
	.wptw-toast {
		transition: opacity 0.15s linear;
		transform: none;
	}
	.wptw-toast.is-visible {
		transform: none;
	}
}