/*--------------------------------------------------------------
# The header's toast slot (js/header-toast.js): the global toasts (_GlobalToast, _ToastScripts, the admin layout's)
# and the in-app notification toast (notifications.js) slide down from the top of the window and rest on the
# header's middle, between the logo and the icons, then slide back up. header-toast.js sets --ht-x (the slot's
# centre), --ht-top (the toast's top) and max-width (the room there). .showing is the slid-up state: Bootstrap sets
# it while it shows and hides a toast, and notifications.js does the same for its own.
# Loaded by every layout that shows toasts.
--------------------------------------------------------------*/
.header-toast {
    position: fixed;
    top: var(--ht-top, 16px);
    left: var(--ht-x, 50%);
    z-index: 2100; /* over the header (997), the bell's panel and the page-load bar (2000) */
    margin: 0;
    transform: translate(-50%, 0);
    transition: transform 0.32s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.32s ease;
}

    /* Out of sight above the window: as it arrives, and as it leaves. 48px clear of the top, so not even the shadow
       (24px blur, 8px down) shows. */
    .header-toast.showing {
        transform: translate(-50%, calc(-100% - var(--ht-top, 16px) - 48px));
        opacity: 1;
    }

/* Bootstrap's toasts: as wide as their text, up to the room the slot has (Bootstrap fixes them at 350px). */
.toast.header-toast {
    width: max-content;
    box-shadow: 0 8px 24px rgba(12, 7, 74, 0.22);
}

@media (prefers-reduced-motion: reduce) {
    .header-toast {
        transition: opacity 0.2s ease;
    }

        .header-toast.showing {
            transform: translate(-50%, 0);
            opacity: 0;
        }
}