/* ═══════════════════════════════════════════════════════════
   css/toast.css — Toast notification primitive.
   Phase 21-01 (D-CSS-01..03). Loaded into the components layer
   via style.css @import. Uses ONLY existing tokens.
   ═══════════════════════════════════════════════════════════ */

/* ── Stack container (bottom-center, above HUD + panel) ── */
.toast-stack {
  position: fixed;
  bottom: var(--space-5);
  left: 50%;
  transform: translateX(-50%);
  z-index: 250;            /* HUD=100, panel=200, toast above both (D-TOAST-03) */
  display: flex;
  flex-direction: column-reverse;  /* newest at the bottom near the viewport edge */
  gap: var(--space-2);
  pointer-events: none;    /* stack itself never blocks clicks; children opt in */
  max-width: calc(100vw - var(--space-4));
}

/* ── Toast block ── */
.toast {
  background: var(--bg-surface-2);
  color: var(--text-primary);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius);
  border-left: 3px solid var(--accent-amber);
  font-size: 0.75rem;
  font-family: var(--font-body);
  line-height: 1.4;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.45);
  pointer-events: auto;
  cursor: pointer;
  max-width: 480px;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  animation: toast-in 200ms ease-out both;
}

.toast__message {
  flex: 1 1 auto;
  word-break: break-word;
}

/* ── Variants (border-left accent only — body bg stays consistent) ── */
.toast--info    { border-left-color: var(--accent-amber); }
.toast--success { border-left-color: var(--color-success); }
.toast--warning { border-left-color: var(--color-warning); }
.toast--error   { border-left-color: var(--color-error); }

/* ── Action buttons inside a toast ── */
.toast__action {
  background: transparent;
  color: var(--text-primary);
  border: 1px solid currentColor;
  padding: var(--space-1) var(--space-2);
  margin-left: var(--space-2);
  font-size: 0.7rem;
  font-family: inherit;
  border-radius: var(--radius);
  cursor: pointer;
  flex: 0 0 auto;
}
.toast__action:hover {
  background: rgba(255, 255, 255, 0.08);
}
.toast__action:focus-visible {
  outline: 2px solid var(--accent-amber);
  outline-offset: 1px;
}

/* ── Leaving state (JS applies .is-leaving before removal) ── */
.toast.is-leaving {
  animation: toast-out 150ms ease-in both;
}

/* ── Animations ── */
@keyframes toast-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes toast-out {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0; transform: translateY(8px); }
}

/* ── Reduced-motion: no animation per D-TOAST-06 ── */
@media (prefers-reduced-motion: reduce) {
  .toast,
  .toast.is-leaving {
    animation: none;
  }
}