/* =============================================================================
   COMPONENT: toast — transient client-side status messages (e.g. an optimistic
   action that failed and rolled back, D-03). Sits above the thumb-zone chrome.
   ========================================================================== */
@layer components {
  .toasts {
    position: fixed;
    inset-block-end: calc(var(--bottom-nav-h) + var(--safe-bottom) + var(--space-md));
    inset-inline: 0;
    z-index: var(--z-toast, 100);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2xs);
    padding-inline: var(--space-md);
    pointer-events: none;
  }

  .toast {
    max-inline-size: min(28rem, 100%);
    padding: var(--space-2xs) var(--space-sm);
    border-radius: var(--radius-md);
    border: var(--border-width) solid transparent;
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    box-shadow: var(--shadow-md);
  }
  .toast--success { background: var(--status-success-bg); color: var(--status-success-fg); border-color: color-mix(in srgb, var(--status-success-fg) 25%, transparent); }
  .toast--danger  { background: var(--status-danger-bg);  color: var(--status-danger-fg);  border-color: color-mix(in srgb, var(--status-danger-fg) 25%, transparent); }
  .toast--action { display: flex; align-items: center; gap: var(--space-sm); pointer-events: auto; }
  .toast__action { color: inherit; font-weight: var(--weight-semibold); text-decoration: underline; }
}