/* Toast styles (separate file for lightweight site toasts) */
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&display=swap');

:root {
    --warn: #c58b1a;
    --danger: #b23a3a;
    /* --accent and other theme variables may be provided by page-specific CSS (e.g. admin.css) */
}

.site-toast-stack {
    position: fixed;
    right: 16px;
    top: 16px;
    width: min(420px, calc(100vw - 28px));
    display: grid;
    gap: 10px;
    /* Must be above all modals and overlays. 2147483647 is the max for most browsers. */
    z-index: 2147483647;
    pointer-events: none;
}

.site-toast {
    pointer-events: auto;
    border-radius: 12px;
    border: 1px solid var(--line, rgba(0,0,0,0.06));
    background: #fff;
    box-shadow: 0 12px 28px rgba(20,36,27,0.12);
    padding: 10px 12px;
    max-width: 520px;
    position: relative;
    transform: translateY(0);
    opacity: 1;
    transition: opacity 160ms ease, transform 160ms ease;
}

.site-toast.hiding { opacity: 0; transform: translateY(-6px); }

.site-toast.success { border-left: 4px solid var(--accent, #136f4d); }
.site-toast.warn { border-left: 4px solid var(--warn); }
.site-toast.error { border-left: 4px solid var(--danger, #b23a3a); }

.site-toast-head { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:6px; }
.site-toast-head strong { font-size:0.9rem; font-weight:800; line-height:1; }

.site-toast-body { margin:0; color:var(--ink, #1e2d24); font-size:0.85rem; line-height:1.35; }

.site-toast-close {
    border:1px solid var(--line, rgba(0,0,0,0.06));
    background:#fff;
    color:var(--ink, #1e2d24);
    border-radius:8px;
    width:24px;
    height:24px;
    cursor:pointer;
    display:inline-grid;
    place-items:center;
    font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    font-weight: 700;
    font-size: 0.95rem;
    line-height: 1;
    margin-left: 8px;
}
.site-toast-close:hover { background:#f3f8f4; }

.site-toast.success .site-toast-head strong { color: var(--accent-strong, #0d5a3f); }
.site-toast.warn .site-toast-head strong { color: var(--warn); }
.site-toast.error .site-toast-head strong { color: var(--danger); }

/* Make toasts that perform navigation or actions feel clickable */
.site-toast.clickable { cursor: pointer; }
.site-toast.clickable:hover { transform: translateY(-2px); }