/*
 * Toast: the outcome of an operation, and only that.
 *
 * It names what happened, in the same precise voice as the rest of the interface: "Item
 * archived", not "Done". It never asks anything and never guards anything — confirmation
 * happens in the dialog, before the action.
 */

/*
 * The stack is a popover for the same reason the tooltip is one: a modal window lives in the
 * browser's top layer, and an outcome reported while a form is open must be readable over it.
 * The reset lines undo what the browser gives a popover of its own — a centred box with a
 * border and a background. The stack has neither; its toasts do.
 */
.app-toasts {
    position: fixed;
    inset: auto;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    overflow: visible;
    z-index: 200;
    right: var(--space-5);
    bottom: var(--space-5);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    max-width: min(var(--w-toast), calc(100vw - 2 * var(--space-4)));
}

.app-toast {
    display: flex;
    /* Centred, not top-aligned: a one-line text beside the 40px close button otherwise sits at the
       top edge of the box and leaves it looking empty below. */
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--border);
    border-left-width: var(--toast-bar);
    border-radius: var(--radius-control);
    background: var(--surface);
    box-shadow: var(--shadow-pop);
    /* Entry motion: keyframes in base.css; none under prefers-reduced-motion. */
    animation: app-toast-in var(--transition) ease-out;
}

.app-toast--success {
    border-left-color: var(--positive);
}

.app-toast--error {
    border-left-color: var(--negative);
}

.app-toast--info {
    border-left-color: var(--neutral);
}

.app-toast__text {
    flex: 1;
    min-width: 0;
}

@media (max-width: 720px) {
    .app-toasts {
        right: var(--space-4);
        bottom: var(--space-4);
        left: var(--space-4);
        max-width: none;
    }
}