@layer components {
  /* ========================================================================
     FLASH MESSAGE CONTAINER
     ======================================================================== */

  .flash-container {
    max-width: var(--main-width);
    margin-inline: auto;
    padding-block-start: var(--space-sm);
    padding-inline: var(--main-padding);
  }

  .flash-container[data-controller="toast"] {
    position: fixed;
    top: var(--space-lg);
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000;
    max-width: none;
    width: auto;
    padding: 0;
  }

  /* ========================================================================
     ALERT BASE — shape + colour tokens
     Variants override --flash-bg and --flash-color only.
     ======================================================================== */

  .alert {
    --flash-bg: oklch(var(--lch-neutral-lighter));
    --flash-color: oklch(var(--lch-ink-darkest));

    background-color: var(--flash-bg);
    color: var(--flash-color);
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-md);
    display: inline-block;
    font-weight: var(--font-weight-semibold);
  }

  .alert--success {
    --flash-bg: oklch(var(--lch-success-lightest));
    --flash-color: oklch(var(--lch-success-darkest));
    border: 1px solid oklch(var(--lch-success-dark));
  }

  .alert--warning {
    --flash-bg: oklch(var(--lch-warning-lightest));
    --flash-color: oklch(var(--lch-warning-darkest));
    border: 1px solid oklch(var(--lch-warning-dark));
  }

  .alert--error {
    --flash-bg: oklch(var(--lch-error-lightest));
    --flash-color: oklch(var(--lch-error-darkest));
    border: 1px solid oklch(var(--lch-error-dark));
  }

  /* ========================================================================
     FLASH MESSAGE — extends .alert with toast layout
     ======================================================================== */

  .flash-message {
    max-width: 28rem;
    display: block;
    padding: var(--space-lg);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    animation: slideIn var(--duration-normal) var(--ease-out-bounce) forwards;
  }

  .flash-message a {
    text-decoration: underline;
    color: inherit;
    font-weight: var(--font-weight-bold);
  }

  .flash-message a:hover {
    opacity: 0.8;
  }

  .flash-message a:focus-visible {
    outline: var(--focus-ring);
    outline-offset: var(--focus-ring-offset);
  }

  /* ========================================================================
     TOAST VARIANT
     ======================================================================== */

  .flash-message.toast {
    box-shadow: var(--shadow-lg);
    position: relative;
    padding-right: 3rem;
  }

  .flash-container[data-controller="toast"] .flash-message {
    padding: var(--space-lg);
  }

  .toast-close {
    position: absolute;
    top: var(--space-lg);
    right: var(--space-lg);
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: inherit;
    padding: 0;
    width: 1.5rem;
    height: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.7;
    transition: opacity 0.2s ease-out;
  }

  .toast-close:hover {
    opacity: 1;
  }

  .toast-close:focus-visible {
    outline: var(--focus-ring);
    outline-offset: var(--focus-ring-offset);
  }

  /* Dark mode: invert flash backgrounds to dark tinted surfaces */
  html[data-theme="dark"] .alert--success {
    --flash-bg: oklch(22% 0.04 149);
    --flash-color: oklch(var(--lch-success-darkest));
    border-color: oklch(var(--lch-success-medium));
  }

  html[data-theme="dark"] .alert--warning {
    --flash-bg: oklch(22% 0.04 90);
    --flash-color: oklch(var(--lch-warning-darkest));
    border-color: oklch(var(--lch-warning-medium));
  }

  html[data-theme="dark"] .alert--error {
    --flash-bg: oklch(22% 0.04 34);
    --flash-color: oklch(var(--lch-error-darkest));
    border-color: oklch(var(--lch-error-medium));
  }

  @media (prefers-color-scheme: dark) {
    html:not([data-theme]) .alert--success {
      --flash-bg: oklch(22% 0.04 149);
      --flash-color: oklch(var(--lch-success-darkest));
      border-color: oklch(var(--lch-success-medium));
    }

    html:not([data-theme]) .alert--warning {
      --flash-bg: oklch(22% 0.04 90);
      --flash-color: oklch(var(--lch-warning-darkest));
      border-color: oklch(var(--lch-warning-medium));
    }

    html:not([data-theme]) .alert--error {
      --flash-bg: oklch(22% 0.04 34);
      --flash-color: oklch(var(--lch-error-darkest));
      border-color: oklch(var(--lch-error-medium));
    }
  }

  @keyframes slideIn {
    from {
      opacity: 0;
      transform: translateY(-1rem);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  @keyframes slideOut {
    from {
      opacity: 1;
      transform: translateY(0);
    }
    to {
      opacity: 0;
      transform: translateY(-1rem);
    }
  }
}