/* ============================================================
   Datamart — DS.toast — action-feedback notifications (THE RULE).
   Confirm a completed, user-initiated action: save, create, move,
   delete, unlock/purchase, export. One short past-tense line, an
   optional status icon (no tile), at most one action + dismiss.
   Bottom-center, non-blocking, auto-dismiss, hover to pause, max 3.
   Imperative API in _ds/toast.js: DS.toast.success("…"), .error,
   .info, .warning, .loading("…").success("…"). Vanilla — callable
   from anywhere. Load AFTER colors_and_type.css + icons.js.
   ============================================================ */
.toast-host {
  position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%);
  z-index: 90; display: flex; flex-direction: column; align-items: center; gap: var(--sp-3);
  width: max-content; max-width: calc(100vw - 32px); pointer-events: none;
}
.toast {
  pointer-events: auto; display: flex; align-items: flex-start; gap: var(--sp-3);
  width: 400px; max-width: 100%; padding: var(--sp-4) var(--sp-3) var(--sp-4) var(--sp-4);
  background: var(--surface-100); border: 1px solid var(--border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-pop); color: var(--fg);
  animation: toast-in 0.22s cubic-bezier(0.2, 0.8, 0.2, 1);
}
[data-theme="dark"] .toast { background: var(--surface-75); }
.toast.leaving { animation: toast-out 0.18s ease forwards; }

.toast-ic { flex: none; width: 18px; height: 18px; display: grid; place-items: center; }
.toast-ic svg { width: 18px; height: 18px; }
.toast.success .toast-ic { color: var(--positive); }
.toast.info .toast-ic { color: var(--accent); }
.toast.warning .toast-ic { color: var(--warning); }
.toast.error .toast-ic { color: var(--critical); }

.toast-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--sp-1); }
.toast-t { font: 400 13px var(--font-sans); color: var(--ink-900); }
.toast-d { font: 400 12px/1.45 var(--font-sans); color: var(--fg-secondary); }

.toast-act { flex: none; align-self: center; }
.toast-btn { border: 0; background: transparent; font: 500 12px var(--font-display); color: var(--accent); cursor: pointer; padding: var(--sp-2) var(--sp-3); border-radius: var(--radius-sm); white-space: nowrap; }
.toast-btn:hover { background: var(--accent-tint); }

.toast-x { flex: none; align-self: center; width: 22px; height: 22px; border-radius: var(--radius-sm); display: grid; place-items: center; border: 0; background: transparent; color: var(--fg-muted); cursor: pointer; }
.toast-x:hover { background: var(--hover-surface); color: var(--fg); }
.toast-x svg { width: 15px; height: 15px; }

/* loading spinner */
.toast-spin { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--line-300); border-top-color: var(--accent); animation: toast-spin 0.7s linear infinite; }

@keyframes toast-in { from { opacity: 0; transform: translateY(8px) scale(0.98); } to { opacity: 1; transform: none; } }
@keyframes toast-out { to { opacity: 0; transform: translateY(6px) scale(0.98); } }
@keyframes toast-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .toast, .toast.leaving { animation: none; }
  .toast-spin { animation-duration: 1.4s; }
}