/* SLE-T7-notifications — canonical toast + banner-stack per campscout v2.
 *
 * Transient confirmations only — for persistent state use .sg-banner* from
 * banners.css.
 *
 * Pattern:
 *   <div class="toast">
 *     <span class="toast-dot"></span>
 *     Sauvegardé
 *   </div>
 *   Toggle .show to animate in.
 *
 * Banner-stack is a viewport-fixed container for pinned banners (e.g. the
 * offline indicator). Children are pointer-events:auto so they can be
 * clicked through the otherwise pointer-events:none stack.
 *
 * Depends on tokens.css.
 */

/* Toast — bottom-right, dark surface, slides up. */
.toast {
  position: fixed;
  bottom: 1.2rem;
  right: 1.2rem;
  background: var(--bk);
  color: var(--white);
  padding: var(--sp-2h) var(--sp-3);
  border-radius: var(--radius-sm);
  font-size: var(--fs-md);
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  transform: translateY(48px);
  opacity: 0;
  transition: transform var(--dur-normal), opacity var(--dur-normal);
  z-index: var(--z-skip, 9999);
  pointer-events: none;
}
.toast.show {
  transform: none;
  opacity: 1;
}
.toast-dot {
  width: 6px;
  height: 6px;
  background: var(--y);
  border-radius: 50%;
  flex-shrink: 0;
}

/* Banner stack — pinned banner container (offline indicator, etc.). */
.banner-stack {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  padding: var(--sp-2) var(--sp-3) 0;
  z-index: var(--z-banner, 900);
  pointer-events: none;
}
.banner-stack:empty { display: none; }
.banner-stack > * {
  pointer-events: auto;
}

/* Mobile (≤639px) — toast moves to top-center, where the thumb can't cover.
 * Aligned to Camp v2 Style Guide §19 phone breakpoint by the 2026-06-02 sweep. */
@media (max-width: 639px) {
  .toast {
    bottom: auto;
    right: auto;
    top: 1rem;
    left: 50%;
    transform: translate(-50%, -48px);
    max-width: calc(100% - 1.6rem);
  }
  .toast.show {
    transform: translate(-50%, 0);
  }
}

/* Reduced motion — keep the show/hide transition but instant. */
@media (prefers-reduced-motion: reduce) {
  .toast { transition: opacity var(--dur-normal); }
  .toast,
  .toast.show {
    transform: none;
  }
}