/* Reusable toast system — used by js/components/toast.js on every page. */

.toast-region{
  position:fixed;left:0;right:0;bottom:calc(76px + var(--space-4));
  z-index:950;display:flex;flex-direction:column;align-items:center;gap:var(--space-2);
  padding-inline:var(--space-4);pointer-events:none;
}
@media(min-width:900px){ .toast-region{bottom:var(--space-6)} }

.toast{
  pointer-events:auto;
  max-width:420px;width:100%;
  display:flex;align-items:center;gap:var(--space-3);
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius-md);box-shadow:var(--shadow-md);
  padding:var(--space-3) var(--space-4);
  font-size:.86rem;font-weight:500;color:var(--text);
  opacity:0;transform:translateY(10px);
  transition:opacity var(--dur-med) var(--ease),transform var(--dur-med) var(--ease);
}
.toast.show{opacity:1;transform:translateY(0)}
@media (prefers-reduced-motion: reduce){ .toast{transition:none} }

.toast-icon{
  width:22px;height:22px;border-radius:var(--radius-pill);flex-shrink:0;
  display:flex;align-items:center;justify-content:center;font-size:.8rem;
}
.toast.tone-success .toast-icon{background:rgba(52,211,153,.16);color:var(--accent-mint-ink)}
.toast.tone-error .toast-icon{background:rgba(240,87,107,.16);color:var(--accent-coral-ink)}
.toast.tone-info .toast-icon{background:var(--surface-2);color:var(--text-muted)}
.toast.tone-warning .toast-icon{background:rgba(242,184,75,.18);color:var(--accent-amber-ink)}

.toast-msg{flex:1;line-height:1.35}
.toast-close{background:none;border:none;color:var(--text-faint);cursor:pointer;padding:4px;flex-shrink:0}