.toasts {
    position: fixed;
    right: var(--sp-5);
    bottom: var(--sp-5);
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    max-width: min(360px, calc(100vw - 2 * var(--sp-4)));
    z-index: var(--z-toast);
}
@media (max-width: 640px) {
    .toasts { right: var(--sp-4); left: var(--sp-4); bottom: var(--sp-4); max-width: none; }
}

/* 5.29.x — toasts are now a 2-column flex (icon + copy) so the
   structured `toast({level, title, body})` form can render a
   bold title above a muted body line. The legacy `toast(level,
   message)` form just passes a body — `.toast__title` is
   omitted by the renderer, so the column collapses to a single
   line with the icon to its left.

   `--toast-accent` cascades from the level modifier classes
   (info / success / warning / error) into both the border-left
   stripe and the icon — keeps the colour story consistent
   across the two visual elements. */
.toast {
    --toast-accent: var(--color-primary);
    display: flex;
    align-items: flex-start;
    gap: var(--sp-3);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-left: 3px solid var(--toast-accent);
    border-radius: var(--radius-lg);
    padding: var(--sp-3) var(--sp-4);
    box-shadow: var(--shadow);
    color: var(--color-text);
    animation: slideIn 200ms ease-out;
    font-size: var(--fs-sm);
}
.toast--info    { --toast-accent: var(--color-primary); }
.toast--success { --toast-accent: var(--color-success); }
.toast--warning { --toast-accent: var(--color-warning); }
.toast--error   { --toast-accent: var(--color-danger);  }

.toast__icon {
    color: var(--toast-accent);
    flex: 0 0 auto;
    line-height: 1;
    margin-top: 1px;
}

/* Copy column — `flex-direction: column` so the title sits
   above the body. `min-width: 0` lets long single-word body
   strings (URLs, IDs) wrap rather than overflow. */
.toast__copy {
    display: flex;
    flex-direction: column;
    gap: var(--sp-half);
    min-width: 0;
    flex: 1 1 auto;
}
.toast__title {
    font-weight: 600;
    color: var(--color-text);
    line-height: 1.3;
}
.toast__body {
    color: var(--color-text-muted);
    line-height: 1.4;
    word-break: break-word;
}

@keyframes slideIn {
    from { transform: translateX(100%); opacity: 0; }
    to   { transform: translateX(0);    opacity: 1; }
}