/* Toast component: templates/components/toast.html */
/* The stack starts a tenth of the way down the screen. */
.toast-stack { position: fixed; top: 10vh; inset-inline: 0; z-index: 1000; display: grid; gap: .6rem; width: min(420px, calc(100% - 2rem)); margin: 0 auto; pointer-events: none; }
/* --toast-color fills the background; --toast-text (white by default) colors the text and icons. */
.toast { --toast-color: var(--primary-dark); --toast-text: #fff; display: flex; align-items: flex-start; gap: .7rem; padding: .8rem 1rem; border-radius: 12px; color: var(--toast-text); background: var(--toast-color); box-shadow: 0 10px 30px rgba(22, 32, 42, .14); pointer-events: auto; animation: toast-in var(--spring-duration) var(--spring); }
.toast.leaving { animation: toast-out .3s ease-in forwards; }
.toast-error { --toast-color: var(--danger); }
.toast-warning { --toast-color: var(--warning); }
.toast-info { --toast-color: var(--primary-dark); }
.toast-success { --toast-color: var(--success); }
.toast-icon { flex: none; width: 1.4rem; height: 1.4rem; }
.toast-icon svg, .toast-close svg { display: block; width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.toast-message { flex: 1; margin: 0; line-height: 1.5; font-weight: 700; }
/* The close button, at the toast's end. Its negative margin keeps the toast from growing around it. */
.toast-close { flex: none; display: grid; place-items: center; width: 1.9rem; height: 1.9rem; margin: -.25rem; padding: .35rem; border: 0; border-radius: 50%; color: inherit; background: transparent; cursor: pointer; opacity: .85; }
.toast-close:hover { opacity: 1; background: rgb(255 255 255 / 15%); }
.toast-close:active { opacity: var(--press-opacity); }
.toast-close:focus-visible { outline: 2px solid #fff; outline-offset: 1px; }
@keyframes toast-in { from { opacity: 0; transform: translateY(-.75rem); } }
@keyframes toast-out { to { opacity: 0; transform: translateY(-.75rem); } }
/* Reduced motion: the toast fades in and out without sliding. */
@media (prefers-reduced-motion: reduce) {
  @keyframes toast-in { from { opacity: 0; } }
  @keyframes toast-out { to { opacity: 0; } }
}
@media (pointer: coarse) {
  .toast-close { width: 2.75rem; height: 2.75rem; margin: -.65rem; padding: .75rem; }
}