/*
 * Toasts — transient, animated confirmations for actions that happen without a page reload.
 *
 * The region is an empty live region rendered by `partials/flash.php`; `toasts.js` fills it.
 *
 * The countdown is the progress bar, not a timer in the script: the bar runs a single animation for
 * `--toast-duration`, and when that animation ends the JavaScript dismisses the toast. Hovering or
 * focusing a toast pauses the animation, which pauses the countdown with it — reading a message must
 * not be a race against it. Because the bar's animation is functional rather than decorative,
 * `prefers-reduced-motion` keeps it and only removes the slide and fade.
 *
 * The look is quiet premium: a slightly translucent, blurred surface, a tinted disc behind the icon,
 * a hairline border and one soft shadow. Nothing flashes, nothing bounces; the accent colour and the
 * icon carry the meaning, the polish carries the feel.
 */

.toasts {
    position: fixed;
    bottom: var(--space-5);
    inset-inline-end: var(--space-5);
    z-index: var(--layer-overlay);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    max-width: min(24rem, calc(100vw - 2 * var(--space-5)));
    pointer-events: none;
}

.toast {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-4);
    padding-block-end: calc(var(--space-4) + 4px);
    background: color-mix(in srgb, var(--toast-surface, var(--colour-surface-raised)) 86%, transparent);
    border: 1px solid color-mix(in srgb, var(--colour-border) 80%, transparent);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    pointer-events: auto;

    /* The frosted surface: content behind the toast softens instead of cutting through it. The
       filter is an enhancement — without support the near-opaque mix above still reads cleanly. */
    -webkit-backdrop-filter: blur(10px) saturate(1.3);
    backdrop-filter: blur(10px) saturate(1.3);

    /* Entrance and exit are the same transition: the script adds `is-visible` one frame after the
       toast enters the document, and `is-leaving` when its time is up. The curve eases out hard at
       the end, which is what makes the arrival feel placed rather than dropped. */
    opacity: 0;
    transform: translateY(0.6rem) scale(0.97);
    transition:
        opacity var(--duration-base) var(--easing),
        transform var(--duration-base) cubic-bezier(0.21, 0.9, 0.35, 1.1);
}

.toast.is-visible {
    opacity: 1;
    transform: none;
}

.toast.is-leaving {
    opacity: 0;
    transform: translateX(1.25rem) scale(0.98);
    transition: opacity var(--duration-base) var(--easing), transform var(--duration-base) var(--easing);
}

/* ---- Variants — colour alone never carries the meaning; the icon does too -------------------- */

.toast--success { --toast-accent: var(--colour-success-ink); --toast-surface: var(--colour-success-surface); }
.toast--error   { --toast-accent: var(--colour-error-ink);   --toast-surface: var(--colour-error-surface); }
.toast--warning { --toast-accent: var(--colour-warning-ink); --toast-surface: var(--colour-warning-surface); }
.toast--info    { --toast-accent: var(--colour-info-ink);    --toast-surface: var(--colour-info-surface); }

/* ---- Parts ------------------------------------------------------------------------------------ */

/* The icon sits on a tinted disc: the variant colour announced by shape as well as hue, which reads
   calmer than a full-coloured card and survives a translucent surface. */
.toast__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 2rem;
    height: 2rem;
    border-radius: var(--radius-full);
    background: color-mix(in srgb, var(--toast-accent, var(--colour-info-ink)) 12%, transparent);
    color: var(--toast-accent, var(--colour-info-ink));
}

.toast__message {
    flex: 1;
    margin: 0;
    padding-block-start: 0.15rem;
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    line-height: 1.45;
    color: var(--colour-ink);
    overflow-wrap: anywhere;
}

.toast__close {
    display: inline-flex;
    flex-shrink: 0;
    margin: -0.25rem -0.25rem 0 0;
    padding: 0.3rem;
    background: none;
    border: none;
    border-radius: var(--radius-full);
    color: var(--colour-ink-faint);
    cursor: pointer;
    transition: color var(--duration-fast) var(--easing), background-color var(--duration-fast) var(--easing);
}

.toast__close:hover {
    color: var(--colour-ink);
    background-color: color-mix(in srgb, var(--colour-ink) 8%, transparent);
}

/* ---- Progress bar — the countdown -------------------------------------------------------------- */

/* Kept deliberately thin and at full accent strength: it is the one element allowed to be obvious,
   because it is the timer. The rounded head softens the shrink without decoration. */
.toast__progress {
    position: absolute;
    inset-block-end: 0;
    inset-inline-start: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(
        to right,
        var(--toast-accent, var(--colour-info)),
        color-mix(in srgb, var(--toast-accent, var(--colour-info)) 55%, var(--colour-surface))
    );
    transform-origin: left;
    animation: toast-progress var(--toast-duration) linear forwards;
}

.toast:hover .toast__progress,
.toast:focus-within .toast__progress {
    animation-play-state: paused;
}

@keyframes toast-progress {
    from {
        transform: scaleX(1);
    }

    to {
        transform: scaleX(0);
    }
}

/* ---- Responsive and reduced motion ------------------------------------------------------------- */

@media (max-width: 640px) {
    .toasts {
        inset-inline: var(--space-4);
        bottom: var(--space-4);
        max-width: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    /* The slide and fade go; the bar stays, because ending it is what clears the toast. */
    .toast {
        transition: none;
        transform: none;
    }
}