/*
 * Toasts (toast.js): the answer to what the viewer just did, bottom right, 24 px in; on a phone the full width at the bottom
 * (16 px in), above the dashboard's bottom bar. One design for the public site and the Operations dashboard: every page loads
 * tokens.css, then its own stylesheet, then this. Only transform and opacity move (in from below over 240 ms, out to the side
 * over 160 ms); nothing moves under reduced motion. The region is fixed, so nothing on the page shifts. Classes only: the
 * CSP allows no style attribute (toast.js sets the bar's length, --toast-life, through the CSSOM). Values marked *ours*.
 */

/* Over the site's header (50) and vignette (80) and the dashboard's panel, sheet and scrim (30 to 75); under the skip link
   (100). The region takes no pointer, so the page around the toasts stays usable. *ours*: 400 px wide, 8 px apart. */
.toast-region {
  position: fixed; right: 24px; bottom: 24px; z-index: 90;
  width: min(400px, calc(100vw - 48px));
  display: flex; flex-direction: column; align-items: stretch; gap: 8px;
  pointer-events: none;
}
/* "N earlier" opened: every toast, scrolling within the window (toast.js lowers the top further where it would cover an
   element marked data-toast-keep-clear: the form panel's head and close button) */
.toast-region.expanded {
  max-height: calc(100vh - 48px); max-height: calc(100dvh - 48px);
  overflow-y: auto; overscroll-behavior: contain; pointer-events: auto; scrollbar-width: thin;
}
/* What a screen reader hears (toast.js: one polite and one assertive container, empty at load): out of sight */
.toast-say {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

.toast {
  --toast-tone: var(--text-2);
  position: relative; overflow: hidden; pointer-events: auto;
  display: grid; grid-template-columns: 20px minmax(0, 1fr) 44px; column-gap: 12px; align-items: start;
  padding: 14px 6px 14px 16px;
  border: 1px solid var(--line); border-radius: var(--r3);
  background: var(--s2); color: var(--text);
  box-shadow: 0 18px 44px var(--black-a50), 0 2px 8px var(--black-a28);
  font: 400 var(--fs-ui)/1.45 var(--sans); letter-spacing: 0; text-align: left; text-transform: none;
  transition: opacity var(--t-panel) var(--ease), transform var(--t-panel) var(--ease);
}
.toast.good { --toast-tone: var(--ok); }
/* An error as the site's error banner: its red edge and ground, the red mark */
.toast.bad { --toast-tone: var(--red-text); border-color: var(--red-line); background: var(--red-ink); }
.toast.info { --toast-tone: var(--text-2); }
/* Coming in: from below, clear (toast.js takes it off once the words are in); going: to the side, faded */
.toast.entering { opacity: 0; transform: translate3d(0, 12px, 0) scale(0.98); }
.toast.leaving {
  opacity: 0; transform: translate3d(24px, 0, 0); pointer-events: none;
  transition-duration: 160ms; transition-timing-function: var(--ease-exit);
}

.toast-icon { display: grid; place-items: center; width: 20px; height: 20px; margin-top: 1px; color: var(--toast-tone); }
.toast-icon svg { display: block; stroke: currentColor; }
.toast-words { min-width: 0; padding-top: 1px; }
.toast-title { font-weight: 700; line-height: 1.35; color: var(--text); overflow-wrap: anywhere; }
.toast-text { margin-top: 3px; font-size: var(--fs-small); line-height: 1.45; color: var(--text-2); overflow-wrap: anywhere; }
/* A notice with no title: its line is the title's size and colour */
.toast-words .toast-text:first-child { margin-top: 0; font-size: var(--fs-ui); color: var(--text); }

/* The close button: a 44 px target, drawn small, reaching into the toast's padding */
.toast-close {
  display: grid; place-items: center; width: var(--tap); height: var(--tap); margin: -12px 0;
  border: 0; border-radius: var(--r2); background: none; color: var(--muted); cursor: pointer;
  transition: color var(--t-hover) var(--ease), background-color var(--t-hover) var(--ease);
}
.toast-close svg { display: block; stroke: currentColor; }
.toast-close:hover { color: var(--text); background: var(--white-a05); }
.toast-close:focus-visible { outline: 2px solid var(--red-text); outline-offset: -4px; }

/* How long it has left: a hairline that runs down (stops while the toasts are hovered or focused) */
.toast-bar {
  position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: var(--toast-tone); opacity: 0.55; transform-origin: left center;
}
.toast.live .toast-bar { animation: toast-life var(--toast-life, 6000ms) linear forwards; }
.toast-region.paused .toast-bar { animation-play-state: paused; }
@keyframes toast-life { from { transform: scaleX(1); } to { transform: scaleX(0); } }

/* The older ones folded away: "N earlier" opens them all */
.toast-more {
  align-self: flex-end; pointer-events: auto; height: 36px; padding: 0 14px;
  border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--s1); color: var(--text-2);
  box-shadow: 0 8px 24px var(--black-a35); font: 600 var(--fs-caption)/1 var(--sans); cursor: pointer;
  transition: color var(--t-hover) var(--ease), border-color var(--t-hover) var(--ease);
}
.toast-more:hover { color: var(--text); border-color: var(--line-hover); }
.toast-more:focus-visible { outline: 2px solid var(--red-text); outline-offset: 2px; }

/* The dashboard: beside the docked form panel, so the toasts never cover its Preview and Apply (from 761 px the panel
   stands at the right, docked or over the page; dash.css --panel-w) */
@media (min-width: 761px) {
  body.dash.panel-open .toast-region {
    right: calc(var(--panel-w, 440px) + 24px);
    width: min(400px, calc(100vw - var(--panel-w, 440px) - 48px));
  }
}

/* A phone: the full width at the bottom, 16 px in; on the dashboard 16 px above its bottom bar (dash.css --bottom-h), and
   with a form sheet open above the sheet's Preview and Apply (its foot and the space under it: 97 px; *ours*: 112) */
@media (max-width: 760px) {
  .toast-region { left: 16px; right: 16px; width: auto; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }
  body.dash .toast-region { bottom: calc(var(--bottom-h, 64px) + 16px); }
  body.dash.panel-open .toast-region { bottom: 112px; }
  .toast-region.expanded { max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); }
  body.dash .toast-region.expanded { max-height: calc(100vh - var(--bottom-h, 64px) - 32px); max-height: calc(100dvh - var(--bottom-h, 64px) - 32px); }
  /* The sheet open: one toast shows (toast.js), the rest fold; opened, the list stays within the window and below the sheet's
     head and close button (toast.js, data-toast-keep-clear) */
  body.dash.panel-open .toast-region.expanded { max-height: calc(100vh - 128px); max-height: calc(100dvh - 128px); }
  .toast.entering { transform: translate3d(0, 16px, 0); }
  .toast.leaving { transform: translate3d(0, 16px, 0); }
  .toast-more { height: var(--tap); }
}

/* Reduced motion: no glide in or out, no running bar; a toast simply shows, and goes */
@media (prefers-reduced-motion: reduce) {
  .toast, .toast.entering, .toast.leaving { transition: none; transform: none; }
  .toast-bar { display: none; }
}