/* TOGOPEPTIDE — Floater stack push styles
   ----------------------------------------
   Activeert wanneer window.TogoFloaters een floater op zijn normale slot
   verdringt door een hoger-prio item in dezelfde zone. De JS zet dan
   data-floater-pushed="true" op het element; deze regels duwen het
   verticaal omhoog (~70px, één FAB-hoogte + gap) zodat ze nooit overlappen.

   Volgorde van laden: dit bestand laadt NA togo-mobile-nav.css en
   togo-power-user.css zodat de bottom-overrides plakken.
   ---------------------------------------- */

/* ── Feedback-FAB (rechtsonder) ─────────────────────────────────
   Basis-offset (togo-power-user.css):
     desktop : bottom: 18px;
     mobile  : bottom: calc(var(--tgp-mn-height,64px) + safe + 14px);
   Bij push: één FAB-rij (~70px) erbij. */
#togo-feedback-fab[data-floater-pushed="true"] {
  bottom: calc(var(--togo-feedback-bottom, 18px) + 95px);
}
@media (max-width: 767px) {
  #togo-feedback-fab[data-floater-pushed="true"] {
    bottom: calc(var(--togo-feedback-bottom, calc(var(--tgp-mn-height, 64px) + env(safe-area-inset-bottom, 0px) + 14px)) + 95px);
  }
}

/* ── Back-to-top FAB (mobile, rechtsonder) ──────────────────────
   Basis-offset (togo-mobile-nav.css ≤767):
     bottom: calc(var(--tgp-mn-height) + safe + 70px);
   Bij push (priority 1 = laagste): nog een rij erbij.
   Op desktop heeft .tgp-back-to-top geen vaste positie buiten de
   mobile-block; de selector hieronder is media-vrij omdat de JS
   alleen pushed-attr zet als de floater is geregistreerd. */
@media (max-width: 767px) {
  .tgp-back-to-top[data-floater-pushed="true"] {
    bottom: calc(var(--tgp-mn-height, 64px) + env(safe-area-inset-bottom, 0px) + 70px + 70px);
  }
}

/* ── Whimsy toast-host (rechtsonder) ────────────────────────────
   Basis-offset (togo-whimsy.css):
     inset: auto 16px 16px auto;  →  bottom: 16px;
   Bij push: één rij erbij; op mobiel telt de bottom-nav ook mee. */
.whimsy-toast-host[data-floater-pushed="true"] {
  bottom: calc(16px + 70px);
}
@media (max-width: 767px) {
  .whimsy-toast-host[data-floater-pushed="true"] {
    bottom: calc(var(--tgp-mn-height, 64px) + env(safe-area-inset-bottom, 0px) + 16px + 70px);
  }
}

/* ── Bottom-center toast zone ───────────────────────────────────
   Vier onafhankelijke toast-systemen delen bottom-center en kunnen
   tegelijk verschijnen. Z-volgorde via baseline-bottom:
     prio 4 (hoogste, blijft): .togo-toast-stack[data-position="bottom-center"]  → bottom 16
     prio 3:                  .lab-toast                                          → bottom 24
     prio 2:                  .acct-toast                                         → bottom 24
     prio 1 (laagste):        #togo-anchor-toast                                  → bottom 32

   Pure-CSS coordination via :has() — wanneer hogere prio's visible zijn,
   krijgen lagere prio's een push van ~50px (toast-rijhoogte + gap).
   Geen JS-refactor nodig; toast-systemen weten van elkaars bestaan
   via CSS selector i.p.v. via window.TogoFloaters registratie.

   Detectie van "visible" verschilt per toast — we gebruiken de bestaande
   visibility-attributen die elk systeem al toggelt:
     .acct-toast            → [data-visible="true"]   (attribuut)
     .lab-toast             → .is-visible             (class)
     #togo-anchor-toast     → .is-visible             (class)
     .togo-toast-stack      → child-elements; we checken op aanwezigheid
                              van data-position="bottom-center" + non-empty
   ──────────────────────────────────────────────────────────── */

/* lab-toast wordt geduwd als de generieke togo-toast-stack er ook is */
body:has(.togo-toast-stack[data-position="bottom-center"] > *) .lab-toast.is-visible {
  bottom: calc(24px + 50px);
}

/* acct-toast wordt geduwd door togo-toast-stack EN/OF lab-toast */
body:has(.togo-toast-stack[data-position="bottom-center"] > *) .acct-toast[data-visible="true"],
body:has(.lab-toast.is-visible) .acct-toast[data-visible="true"] {
  bottom: calc(24px + 50px);
}
body:has(.togo-toast-stack[data-position="bottom-center"] > *):has(.lab-toast.is-visible) .acct-toast[data-visible="true"] {
  bottom: calc(24px + 100px);
}

/* anchor-toast (laagste prio) wordt door alle drie geduwd, cumulatief */
body:has(.togo-toast-stack[data-position="bottom-center"] > *) #togo-anchor-toast.is-visible,
body:has(.lab-toast.is-visible) #togo-anchor-toast.is-visible,
body:has(.acct-toast[data-visible="true"]) #togo-anchor-toast.is-visible {
  bottom: calc(32px + 50px);
}
body:has(.togo-toast-stack[data-position="bottom-center"] > *):has(.lab-toast.is-visible) #togo-anchor-toast.is-visible,
body:has(.togo-toast-stack[data-position="bottom-center"] > *):has(.acct-toast[data-visible="true"]) #togo-anchor-toast.is-visible,
body:has(.lab-toast.is-visible):has(.acct-toast[data-visible="true"]) #togo-anchor-toast.is-visible {
  bottom: calc(32px + 100px);
}
body:has(.togo-toast-stack[data-position="bottom-center"] > *):has(.lab-toast.is-visible):has(.acct-toast[data-visible="true"]) #togo-anchor-toast.is-visible {
  bottom: calc(32px + 150px);
}

/* Mobile bottom-nav safety: anchor toast is bottom-center and otherwise sits
   over the fixed mobile nav. Keep its baseline above the nav before any
   same-zone toast push rules are applied. */
@media (max-width: 767px) {
  #togo-anchor-toast.is-visible {
    bottom: calc(var(--tgp-mn-height, 64px) + env(safe-area-inset-bottom, 0px) + 16px);
  }

  body:has(.togo-toast-stack[data-position="bottom-center"] > *) #togo-anchor-toast.is-visible,
  body:has(.lab-toast.is-visible) #togo-anchor-toast.is-visible,
  body:has(.acct-toast[data-visible="true"]) #togo-anchor-toast.is-visible {
    bottom: calc(var(--tgp-mn-height, 64px) + env(safe-area-inset-bottom, 0px) + 16px + 50px);
  }

  body:has(.togo-toast-stack[data-position="bottom-center"] > *):has(.lab-toast.is-visible) #togo-anchor-toast.is-visible,
  body:has(.togo-toast-stack[data-position="bottom-center"] > *):has(.acct-toast[data-visible="true"]) #togo-anchor-toast.is-visible,
  body:has(.lab-toast.is-visible):has(.acct-toast[data-visible="true"]) #togo-anchor-toast.is-visible {
    bottom: calc(var(--tgp-mn-height, 64px) + env(safe-area-inset-bottom, 0px) + 16px + 100px);
  }

  body:has(.togo-toast-stack[data-position="bottom-center"] > *):has(.lab-toast.is-visible):has(.acct-toast[data-visible="true"]) #togo-anchor-toast.is-visible {
    bottom: calc(var(--tgp-mn-height, 64px) + env(safe-area-inset-bottom, 0px) + 16px + 150px);
  }
}

/* ── Generieke transition voor alle pushed floaters ─────────────
   Korte, kalme bottom-tween zodat de stack-shuffle niet "snapt".
   Respecteert prefers-reduced-motion.
   Bottom-center toasts (.acct-toast / .lab-toast / #togo-anchor-toast)
   krijgen hun bottom-transition in hun eigen bron-bestand naast de
   reeds bestaande opacity/transform — zie:
     account-glowup.css  (.acct-toast)
     lab-tools.css       (.lab-toast)
     glowup.css          (#togo-anchor-toast) */
[data-floater-pushed="true"] {
  transition: bottom 200ms cubic-bezier(0.22, 1, 0.36, 1);
}

#togo-feedback-fab[data-floater-suppressed],
.tgp-back-to-top[data-floater-suppressed] {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(8px);
}

#togo-feedback-fab[data-floater-suppressed] {
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  [data-floater-pushed="true"],
  .acct-toast,
  .lab-toast,
  #togo-anchor-toast {
    transition: none;
  }
}