/* The demo toast. One component, every site, `PLAT-95`.

   A short confirmation in the corner that takes itself away. It is for the
   one class of message nobody has to act on: "the thing you asked for
   happened". Dave's ask, 2026-08-06, about the reset confirmations
   specifically: a banner for those pushes the page down and then sits there
   in front of a room describing housekeeping, when the SC has already moved
   on to the next thing.

   Grown out of `.portal-toast`, which did exactly this for the portal's
   sign-out notice from 2026-07-30 and was renamed here. Nothing about it was
   portal-specific except the name and the palette.

   **THIS FILE IS COPIED PER SITE AND THE COPIES MUST STAY IDENTICAL.** The
   same deal `js/sc-panel.js` takes and for the same reason: each site's
   public tree deploys on its own and there is no shared asset host to point
   at. Nothing in CI enforces it. What keeps the copies byte-identical is that
   the palette is NOT in here: a site themes the toast by setting the four
   `--toast-*` variables in its own stylesheet, and the fallbacks below are
   what a site that sets none of them gets.

   **It needs no JavaScript and that is deliberate.** It removes itself with a
   delayed animation rather than a timer, so it still clears on a page with
   scripting off, and it never has to be told to. `visibility` is animated
   alongside `opacity` so the finished toast stops swallowing clicks aimed at
   whatever is underneath it. A page that wants click-to-dismiss on top of
   that hooks `[data-toast]` itself; portal.js does. */

.demo-toast {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 200;
  max-width: 330px;
  background: var(--toast-bg, #22252B);
  color: var(--toast-text, #FFFFFF);
  border-left: 3px solid var(--toast-edge, #E9A13B);
  border-radius: 6px;
  padding: 12px 15px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .3);
  cursor: pointer;
  animation: demo-toast-in .2s ease-out both,
             demo-toast-out .45s ease-in 5.6s both;
}

/* The failure case. Same six seconds: a reset that did not run is still not
   something to act on from here, it is something to try again or read about
   on the page underneath. */
.demo-toast.is-bad {
  border-left-color: var(--toast-edge-bad, #C62134);
}

.toast-text {
  display: block;
  font: 700 13.5px inherit;
  font-family: inherit;
}

.toast-note {
  display: block;
  margin-top: 3px;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--toast-note, #D8DCE3);
}

@keyframes demo-toast-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}

@keyframes demo-toast-out {
  from { opacity: 1; visibility: visible; }
  to   { opacity: 0; visibility: hidden; }
}

/* No slide, and no fade worth the name, but it must still go away. */
@media (prefers-reduced-motion: reduce) {
  .demo-toast { animation: demo-toast-out .01s linear 6s both; }
}

@media (max-width: 560px) {
  .demo-toast { right: 12px; left: 12px; bottom: 12px; max-width: none; }
}