/* Toast: a short confirmation after an action that has no better place to report
   ("Code sent again"). Never for errors the user must act on (use .alert inline).
   The region lives in index.html (#toasts, role="status"); call toast(text, kind) from js/lib/ui.js. */

.toasts {
  position: fixed;
  z-index: var(--z-toast);
  left: 50%;
  bottom: calc(var(--s-5) + env(safe-area-inset-bottom, 0px));
  display: grid;
  gap: var(--s-2);
  width: min(420px, calc(100vw - 2rem));
  transform: translateX(-50%);
  pointer-events: none;
}
.toast {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  color: var(--text);
  font-size: var(--fs-sm);
  background: var(--ink-3);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-3);
  box-shadow: var(--edge), var(--e-3);
  pointer-events: auto;
  transition: opacity var(--dur-3) var(--ease-out), transform var(--dur-3) var(--ease-out);
}
@starting-style { .toast { opacity: 0; transform: translateY(12px); } }
.toast.is-leaving { opacity: 0; transform: translateY(6px); }
.toast .icon { color: var(--accent); margin-top: 0.15em; }
.toast[data-kind="success"] .icon { color: var(--ok); }
.toast[data-kind="error"] { border-color: rgb(242 160 142 / 0.5); }
.toast[data-kind="error"] .icon { color: var(--danger); }