/* Toast — C12 (tel quel, tokens A). */
.toasts {
  position: fixed; right: var(--space-4); bottom: var(--space-4); z-index: 60;
  display: flex; flex-direction: column; gap: var(--space-2); width: min(420px, calc(100vw - 32px));
  pointer-events: none;
}
.toast {
  display: flex; align-items: start; gap: var(--space-3); padding: 12px 8px 12px 16px;
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border); border-left: 4px solid var(--accent); border-radius: var(--radius);
  box-shadow: var(--shadow-overlay); font-size: var(--text-sm); line-height: 20px;
  pointer-events: auto; animation: overlay-enter var(--enter) ease-out;
}
.toast > .ui-icon { margin-top: 0; }
.toast-info { border-left-color: var(--accent); } .toast-info > .ui-icon { color: var(--accent); }
.toast-success { border-left-color: var(--success); } .toast-success > .ui-icon { color: var(--success); }
.toast-error { border-left-color: var(--danger); } .toast-error > .ui-icon { color: var(--danger); }
.toast-text { flex: 1; padding-top: 1px; overflow-wrap: anywhere; }
.toast-close { display: inline-grid; place-items: center; width: 28px; height: 28px; padding: 0; margin: -4px 0; border: 0; border-radius: 4px; background: none; color: var(--text-muted); }
.toast-close:hover { background: var(--surface-2); color: var(--text); }
@media (max-width: 600px) {
  .toasts { left: var(--space-4); width: auto; bottom: max(var(--space-4), env(safe-area-inset-bottom)); }
}