.flash {
  animation: flash-in-out 5s both;
  animation-timing-function: var(--ease-bounce-2);
  background-color: var(--color-surface);
  border-radius: var(--rounded-lg);
  border-width: var(--border);
  box-shadow: var(--shadow-md);
  color: var(--color-text);
  font-size: var(--text-sm);
  inline-size: var(--size-full);
  margin: var(--flash-position, var(--size-6)) auto auto;
  max-inline-size: calc(100% - 2rem);

  /*
   * Paused so it can be read -- and shown, because a pause can land on any frame.
   * The corner flash appears under a pointer that has just clicked a bottom-right
   * button, and pausing there froze it at frame 0, opacity 0: invisible until the
   * pointer moved. `!important` is what outranks a running (or paused) animation in
   * the cascade; nothing else here can. Found during usability spec 03, pinned by
   * ThemePolishTest.
   */
  &:is(:hover, :focus-within) {
    animation-play-state: paused;
    opacity: 1 !important;
    transform: none !important;
  }

  @media (width >= 40rem) {
    max-inline-size: var(--flash-size, var(--max-i-sm));
  }
}

.flash__content {
  padding: var(--size-4);
}

.flash--extended {
  animation-duration: 12s;
  animation-name: flash-in-out-extended;
}

/*
 * P10.5 §4 — bottom-right instead of top-centre.
 *
 * The flash is a `popover="manual"`, so it lives in the top layer and is placed by
 * margins on an inset-0 box, not by `position: fixed`. Repositioning it is
 * therefore two changes that must go together: margins move the box to the corner,
 * and the entry/exit transform has to come from the BOTTOM -- the stock
 * `flash-in-out` slides from translateY(-100%), which on a bottom-anchored flash
 * reads as the toast falling upward out of the middle of the page.
 *
 * This lives here, in the owned component file, not as utilities on the layout:
 * css-zero is copy-in, so a component's variants belong with the component
 * (app CLAUDE.md, UI rules). It is also why there is no inline `style=` near it --
 * a style ATTRIBUTE cannot carry a CSP nonce, the same reason the old top-centre
 * offset moved out of the layout at P9.
 */
.flash--corner {
  animation-name: flash-in-out-corner;
  margin: auto var(--size-6) var(--size-6) auto;

  @media (width < 40rem) {
    margin-inline: auto;
  }
}

@keyframes flash-in-out-corner {
  0% {
    opacity: 0;
    transform: translateY(100%);
  }

  8%, 92% {
    opacity: 1;
    transform: translateY(0);
    animation-timing-function: ease-out;
  }

  100% {
    opacity: 0;
    transform: translateY(100%);
  }
}

@keyframes flash-in-out {
  0% {
    opacity: 0;
    transform: translateY(-100%);
  }

  8%, 92% {
    opacity: 1;
    transform: translateY(0);
    animation-timing-function: ease-out;
  }

  100% { 
    opacity: 0;
    transform: translateY(-100%);
  }
}

@keyframes flash-in-out-extended {
  0% {
    opacity: 0;
    transform: translateY(-100%);
  }

  3.3%, 96.7% {
    opacity: 1;
    transform: translateY(0);
    animation-timing-function: ease-out;
  }

  100% {
    opacity: 0;
    transform: translateY(-100%);
  }
}