@layer components {
  /* Toast notification — fixed to the viewport, OUT of document flow, so a
     success/error message never reflows the page. Reusable across all sites:
     call window.wdToast(message, 'success'|'error') from common/js/toast.js. */
  .wd-toast {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    max-width: min(360px, calc(100vw - 4rem));
    padding: 0.85rem 1.25rem;
    border-radius: 8px;
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.4;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    z-index: 9999;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.25s ease, transform 0.25s ease;
    pointer-events: none;
  }

  .wd-toast.wd-toast--show {
    opacity: 1;
    transform: translateY(0);
  }

  .wd-toast--success {
    background: #d4edda;
    color: #155724;
  }

  .wd-toast--error {
    background: #f8d7da;
    color: #721c24;
  }

  @media (prefers-reduced-motion: reduce) {
    .wd-toast { transition: opacity 0.25s ease; transform: none; }
    .wd-toast.wd-toast--show { transform: none; }
  }
}