/* ATELIER 02 — toast stack. The stylesheet owns every frame.
   JS writes --toasts-before, --offset and --initial-height; nothing else. */

.toaster {
  position: relative;
  width: 300px;
  --gap: 14px;              /* must equal the 14px lift below and GAP in the JS */
}

.toast {
  position: absolute; bottom: 0; left: 0; width: 100%;
  background: var(--gray-2, #f1f6f2);
  border: 1px solid var(--gray-6, #c6d9ca);
  border-radius: 6px;
  padding: var(--sp-3) var(--sp-4);
  height: var(--initial-height, auto);   /* auto until JS has measured it */
  transform: translateY(calc(var(--toasts-before) * -14px))
             scale(calc(1 - var(--toasts-before) * 0.05));
  transition: transform var(--dur-state, 240ms) var(--ease-out, ease),
              opacity var(--dur-state, 240ms) var(--ease-out, ease),
              height var(--dur-state, 240ms) var(--ease-out, ease);
  will-change: transform;
}

/* entry: a brand new node transitions from here, no JS frame needed */
@starting-style {
  .toast { transform: translateY(100%); opacity: 0; }
}

/* Invisible bridge over the gap, so hover survives the space between toasts. */
.toast::after {
  content: ''; position: absolute; left: 0; right: 0;
  bottom: 100%; height: calc(var(--gap) + 1px);
}

.toast[data-hidden="true"] { opacity: 0; pointer-events: none; }

.toaster[data-expanded] .toast {
  transform: translateY(calc(var(--offset) * -1));
  opacity: 1; pointer-events: auto;
}

/* exit: slides out and collapses its height, so survivors re-flow on one curve */
.toast[data-removing] {
  transform: translateY(100%); opacity: 0; height: 0;
  overflow: hidden; pointer-events: none;
}