/* ============================================================
   CIVIL ENGINEERS FORUM — one-time messages
   Corner toasts (public site + admin panel) and the in-form
   message style. Nothing is ever shown as a bar across the top
   of the page: a page with a form shows its message in the form
   (partials/flash), anything else arrives here as a toast.
   ============================================================ */

.toast-stack {
    position: fixed; z-index: 1200; right: 24px; bottom: 92px;
    display: grid; gap: 12px; width: min(420px, calc(100vw - 32px));
    pointer-events: none;
}
.toast {
    pointer-events: auto; position: relative; overflow: hidden;
    display: grid; grid-template-columns: 42px minmax(0, 1fr) 32px; align-items: start; gap: 12px;
    padding: 14px 12px 16px 14px; border-radius: 16px;
    background: #fff; color: #0f172a;
    border: 1px solid rgba(15, 23, 42, 0.08);
    box-shadow: 0 26px 60px -20px rgba(8, 22, 64, 0.42), 0 3px 10px rgba(8, 22, 64, 0.08);
    font-family: var(--font-body, 'Inter', system-ui, sans-serif);
    animation: cefToastIn 460ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.toast__icon { width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; font-size: 18px; }
.toast__text { margin: 0; padding-top: 10px; font-size: 14px; line-height: 1.55; font-weight: 600; overflow-wrap: anywhere; }
.toast__close {
    width: 32px; height: 32px; border: 0; border-radius: 10px; margin-top: 4px;
    display: grid; place-items: center; cursor: pointer;
    background: transparent; color: #64748b; font-size: 14px;
    transition: background-color 160ms ease, color 160ms ease;
}
.toast__close:hover, .toast__close:focus-visible { background: #f1f5f9; color: #0f172a; outline: none; }
.toast__timer { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; transform-origin: left center; background: currentColor; opacity: 0.85; }
.toast.is-timing .toast__timer { animation: cefToastTimer var(--toast-ms, 6500ms) linear forwards; }
.toast:hover .toast__timer, .toast:focus-within .toast__timer { animation-play-state: paused; }
.toast.is-leaving { animation: cefToastOut 340ms ease forwards; }

.toast--success .toast__icon { background: #ecfdf5; color: #059669; }
.toast--success .toast__timer { color: #10b981; }
.toast--error .toast__icon { background: #fef2f2; color: #dc2626; }
.toast--error .toast__timer { color: #ef4444; }
.toast--warning .toast__icon { background: #fffbeb; color: #d97706; }
.toast--warning .toast__timer { color: #f59e0b; }
.toast--info .toast__icon { background: #eff6ff; color: #2563eb; }
.toast--info .toast__timer { color: #3b82f6; }

@keyframes cefToastIn { from { opacity: 0; transform: translateY(18px) scale(0.98); } to { opacity: 1; transform: none; } }
@keyframes cefToastOut { to { opacity: 0; transform: translateX(28px); } }
@keyframes cefToastTimer { from { transform: scaleX(1); } to { transform: scaleX(0); } }

/* Admin dark theme */
html.admin-dark .toast { background: #101c33; color: #e2e8f0; border-color: rgba(255, 255, 255, 0.08); }
html.admin-dark .toast__close { color: #94a3b8; }
html.admin-dark .toast__close:hover { background: rgba(255, 255, 255, 0.08); color: #fff; }

/* In-form messages: a little lift so they read as the answer to the form */
.alert--flash { box-shadow: 0 10px 30px -18px rgba(8, 22, 64, 0.35); animation: cefFlashIn 520ms cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.alert--flash:focus { outline: none; }
@keyframes cefFlashIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* Anchors a redirect lands on sit below the sticky header */
[id] { scroll-margin-top: calc(var(--header-h, 76px) + 24px); }

@media (max-width: 640px) {
    .toast-stack { left: 16px; right: 16px; bottom: 84px; width: auto; }
}
@media (prefers-reduced-motion: reduce) {
    .toast, .toast.is-leaving, .alert--flash { animation: none; }
    .toast.is-timing .toast__timer { animation: none; }
}
@media print { .toast-stack { display: none !important; } }