/* Toasts: a white card with a coloured status icon, stacked in the top right corner. */

.toast-stack {
  position: fixed; top: 18px; right: 18px; z-index: 1000;
  display: flex; flex-direction: column; gap: 10px;
  width: min(380px, calc(100vw - 36px));
}

.toast {
  --tone: var(--brand-text); --on-tone: var(--on-brand);
  display: flex; align-items: flex-start; gap: 11px; padding: 13px 14px;
  border: 1px solid var(--line); border-radius: var(--r-l);
  background: var(--panel); box-shadow: var(--sh-pop);
  animation: toast-in .18s var(--ease);
}
.toast.success { --tone: var(--ok); --on-tone: var(--on-ok); }
.toast.warning { --tone: var(--warn); --on-tone: var(--on-warn); }
.toast.error { --tone: var(--bad); --on-tone: var(--on-bad); }
.toast.leaving { opacity: 0; transform: translateX(10px); transition: opacity .25s ease, transform .25s ease; }

.toast .t-icon {
  display: grid; place-items: center; flex: none; width: 22px; height: 22px; margin-top: 1px;
  border-radius: 50%; background: var(--tone); color: var(--on-tone); font-size: var(--fs-xs); font-weight: 700;
}
.toast .t-body { flex: 1; min-width: 0; }
.toast .t-title { font-size: var(--fs-s); font-weight: 600; color: var(--ink); }
.toast .t-msg { margin-top: 1px; font-size: var(--fs-s); line-height: 1.5; color: var(--ink-3); overflow-wrap: anywhere; }
.toast .t-close {
  flex: none; padding: 2px; border: 0; background: none; cursor: pointer;
  color: var(--ink-4); font-size: var(--fs-l); line-height: 1;
}
.toast .t-close:hover { color: var(--ink); }

@keyframes toast-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

@media (max-width: 520px) {
  .toast-stack { top: 12px; right: 12px; width: calc(100vw - 24px); }
}