/* ───────────────────────────────────────────────────────────────────
   dv_toast — transient confirmation toasts (operator / light theme)
   Approved design: Option A, top-right stack (tmp/toast-preview.html).
   Floats over content, stacks newest-on-top, auto-dismisses after 4s
   with a progress bar, manual close. Token-only.
   Spawned by toast_controller.js (flash → toast bridge).
   ─────────────────────────────────────────────────────────────────── */

.toast-stack {
  position: fixed;
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 360px;
  max-width: calc(100vw - 32px);
  pointer-events: none;
}
.toast-stack.tr { top: 16px; right: 16px; }

.toast {
  pointer-events: auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 4px solid var(--text-muted);
  border-radius: var(--radius-md);
  box-shadow: 0 10px 30px rgba(17, 24, 39, 0.16), 0 2px 6px rgba(17, 24, 39, 0.08);
  padding: 12px 14px;
  display: flex;
  gap: 11px;
  align-items: flex-start;
  animation: dv-toast-in 0.22s cubic-bezier(0.2, 0.8, 0.2, 1);
  position: relative;
  overflow: hidden;
}
.toast.out { animation: dv-toast-out 0.18s ease forwards; }

@keyframes dv-toast-in {
  from { opacity: 0; transform: translateX(16px); }
  to   { opacity: 1; transform: none; }
}
@keyframes dv-toast-out {
  to {
    opacity: 0;
    transform: translateX(16px);
    height: 0;
    padding-top: 0;
    padding-bottom: 0;
    margin-top: -10px;
  }
}

.toast__ic { flex-shrink: 0; margin-top: 1px; }
.toast__ic svg { display: block; }
.toast__body { flex: 1; min-width: 0; }
.toast__title { font-size: var(--text-sm); font-weight: 600; color: var(--text-primary); }
.toast__msg { font-size: var(--text-sm); color: var(--text-secondary); margin-top: 1px; }

.toast__x {
  flex-shrink: 0;
  color: var(--text-muted);
  cursor: pointer;
  padding: 2px;
  margin: -2px -2px 0 0;
  border-radius: 4px;
  background: none;
  border: 0;
  line-height: 0;
}
.toast__x svg { display: block; }
.toast__x:hover { background: var(--surface-alt, var(--gray-100)); color: var(--text-primary); }

.toast__bar {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  background: currentColor;
  opacity: 0.4;
  animation: dv-toast-shrink 4s linear forwards;
}
@keyframes dv-toast-shrink {
  from { width: 100%; }
  to   { width: 0; }
}

/* status accents — generic notification semantics from tokens.css */
.toast.success { background: var(--green-100); border-color: var(--success-border); border-left-color: var(--success); }
.toast.success .toast__ic,
.toast.success .toast__bar { color: var(--success); }

.toast.error { background: var(--rose-100); border-color: var(--danger-border); border-left-color: var(--danger); }
.toast.error .toast__ic,
.toast.error .toast__bar { color: var(--danger); }

.toast.warning { background: var(--amber-100); border-color: var(--warning-border); border-left-color: var(--warning); }
.toast.warning .toast__ic,
.toast.warning .toast__bar { color: var(--warning); }

.toast.info { background: var(--sky-100); border-color: var(--info-border); border-left-color: var(--info); }
.toast.info .toast__ic,
.toast.info .toast__bar { color: var(--info); }

@media (prefers-reduced-motion: reduce) {
  .toast, .toast.out { animation-duration: 0.01ms; }
  .toast__bar { animation: none; width: 0; }
}