/* toast.css: Toast (component 22). Owner: group D (P2.T7). Tokens only (L-01), logical properties only (L-04), box-shadow only
   var(--shadow-overlay) on overlays (L-03). The stack sits in the bottom inline-end corner (bottom-right, bottom-left in right to left; owner-approved,
   CL-144), positioned from the inline-end edge so it mirrors by itself. It never needs the nav rail (that sits at the inline-start).
   It steps inward past what opens over the inline-end: a 480 open drawer or approvals tray (1024 and up). It does not step past the in-flow context rail: the toast is transient and the rail stays readable around it (owner-pending, CL-144);
   below 1024 a drawer is full width and the toast, above it at --z-toast, stays readable on top. */

.toast-stack {
  position: fixed;
  inset-block-end: 0;
  inset-inline-end: 0;
  z-index: var(--z-toast);
  inline-size: calc(var(--size-toast) + 2 * var(--space-7));
  max-inline-size: 100%;
  padding: var(--space-7);
  display: flex;
  flex-direction: column; /* newest is appended last, so it sits at the bottom */
  gap: var(--space-3);
  align-items: flex-end;
  pointer-events: none;
}
@media (width >= 1024px) {
  body:has([data-component="drawer"][data-state="open"]:not([data-static])) .toast-stack,
  body:has([data-component="menu"][data-panel="Approvals waiting for you"]) .toast-stack { inset-inline-end: var(--size-drawer); }
}
@media (width < 1024px) {
  .toast-stack { padding: var(--space-5); }
}

[data-component="toast"] {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  inline-size: var(--size-toast);
  max-inline-size: 100%;
  min-block-size: var(--size-control);
  padding: var(--space-4) var(--space-5);
  background: var(--surface-raised);
  color: var(--text);
  border: var(--border-width) solid var(--border-strong);
  border-radius: var(--radius-overlay);
  box-shadow: var(--shadow-overlay);
  pointer-events: auto;
}
.toast-stack [data-component="toast"] {
  opacity: 0;
  transform: translateY(var(--size-rise));
  transition: opacity var(--duration-base) var(--ease-standard), transform var(--duration-base) var(--ease-standard);
}
.toast-stack [data-component="toast"][data-state="open"] { opacity: 1; transform: none; }
.toast-stack [data-component="toast"][data-state="closing"] { opacity: 0; transition-duration: var(--duration-fast); }

.toast__icon { display: inline-flex; flex: none; }
[data-component="toast"][data-tone="success"] .toast__icon { color: var(--good); }
[data-component="toast"][data-tone="error"] .toast__icon { color: var(--critical); }
[data-component="toast"][data-tone="undo"] .toast__icon { color: var(--text-secondary); }
.toast__message { flex: 1 1 auto; min-inline-size: 0; margin: 0; font: var(--type-body); overflow-wrap: anywhere; max-inline-size: none; }
[data-component="toast"] .dialog-btn--ghost { flex: none; }