@layer components {
  .flash {
    max-inline-size: var(--measure);
    margin-inline: auto;
    margin-block-end: var(--block-space);
    padding: var(--block-space-half) var(--block-space);
    color: var(--color-text);
    background: var(--color-brand-soft);
    border: var(--border-width) solid var(--color-brand);
    border-radius: var(--radius);
    font-size: var(--text-small);
    transition: opacity 0.5s ease;
  }
  /* auto-dismiss fades the notice out before removing it (see auto_dismiss_controller). */
  .flash.is-dismissed { opacity: 0; }

  .flash--alert {
    background: oklch(var(--lch-danger) / 0.08);
    border-color: oklch(var(--lch-danger) / 0.3);
  }
}