@layer blocks {
  /* A flash message: plain text on the first line of the sheet's content
     column, above the page. No box (brief 2.5: no bordered panels). One or
     two lines fill exactly one cell, so the page below still starts on a dot
     row; a longer message pushes it off the pitch. */
  .notice {
    min-block-size: var(--space-cell);
    align-content: center;
    font-size: var(--notice-font-size);
    line-height: calc(var(--grid-cell) / 2);
    color: var(--notice-color);
  }

  .notice[data-variant="warning"] {
    --notice-color: var(--color-danger);
  }

  /* A success notice floats at the top of the viewport, over the sheet, and
     leaves on its own (toast_controller.js). Glass with the nav's hairline, no box. */
  .notice[data-variant="toast"] {
    position: fixed;
    inset-block-start: var(--space-half);
    inset-inline: 0;
    inline-size: fit-content;
    max-inline-size: calc(100% - var(--space-cell));
    margin-inline: auto;
    padding-inline: var(--space-half);
    background: var(--color-bg-glass);
    box-shadow: var(--shadow-hairline-below);
    z-index: 150;
    animation: notice-slide-down 250ms ease-out;
  }

  .notice[data-variant="toast"][data-state="leaving"] {
    animation: notice-slide-up 250ms ease-in forwards;
  }

  /* From and back to just above the viewport, past the top offset. */
  @keyframes notice-slide-down {
    from {
      translate: 0 calc(-100% - var(--space-half));
    }
  }

  @keyframes notice-slide-up {
    to {
      translate: 0 calc(-100% - var(--space-half));
    }
  }
}