@layer components {
  /* An inline notice inside the sheet: a form's error line, or the banner a
     trashed thing wears on its own page. One surface wash, one hairline,
     nothing that competes with the sheet underneath.

     The FLOATING confirmation is a family of its own — see flash.css. They
     are different things: this one is part of the page and stays; that one
     crosses the page and leaves. */
  .banner {
    padding: var(--block-space-half) var(--inline-space);
    background-color: var(--color-surface);
    border: var(--border);
    border-radius: var(--border-radius);
  }

  /* A failure takes the negative tint AND its paired ink — default ink on a
     tint is the one thing the color rules never allow. The hairline goes with
     it, because the wash already bounds the notice. */
  .banner--negative {
    color: var(--color-negative-ink);
    background-color: var(--color-negative-tint);
    border-color: transparent;
  }
}