/* Celebrations (static/js/celebrate.js). Every rule sits under .cel-root, so nothing here can
   reach another screen. Brand colours from the portal tokens, copied as values because the
   portal tokens only exist under .portal. */
.cel-root {
  --cel-purple: #9140b0; --cel-purple-100: #f1e6f6; --cel-yellow: #f2c050;
  --cel-ink: #1c1c20; --cel-muted: #5c5c66; --cel-surface: #ffffff;
  font-family: "Outfit", "Inter", system-ui, sans-serif;
}

/* Every win is a note in the corner: never a backdrop, never in the way, gone on its own.
   SMALL = the habits; BIG (.cel-toast-big) = the client's decision, larger with more confetti. */
.cel-root.cel-toasts {
  position: fixed; right: 20px; bottom: 20px; z-index: 100075;
  display: flex; flex-direction: column; gap: 10px; align-items: flex-end;
  pointer-events: none; max-width: calc(100vw - 32px);
}
.cel-root .cel-toast {
  position: relative; overflow: hidden; pointer-events: auto;
  width: 340px; max-width: 100%; display: flex; gap: 12px; align-items: flex-start;
  background: var(--cel-surface); border-radius: 12px; padding: 14px 16px;
  border-left: 4px solid var(--cel-purple); box-shadow: 0 10px 30px rgba(0, 0, 0, .16);
  animation: cel-slide .3s ease-out;
}
.cel-root .cel-toast.cel-out { opacity: 0; transform: translateY(8px); transition: all .3s ease-in; }
.cel-root .cel-toast .cel-emoji { font-size: 24px; line-height: 1.1; }
.cel-root .cel-toast b { display: block; font-size: 14.5px; color: var(--cel-ink); margin-bottom: 2px; }
.cel-root .cel-toast span { display: block; font-size: 13px; color: var(--cel-muted); }
.cel-root .cel-toast .cel-words { flex: 1; min-width: 0; padding-right: 14px; }
.cel-root .cel-toast .cel-x {
  position: absolute; top: 6px; right: 8px; z-index: 2; border: 0; background: none;
  font: inherit; font-size: 18px; line-height: 1; color: var(--cel-muted); cursor: pointer;
  padding: 2px 4px; border-radius: 6px;
}
.cel-root .cel-toast .cel-x:hover { color: var(--cel-ink); background: var(--cel-purple-100); }
.cel-root .cel-toast .cel-x:focus-visible { outline: 2px solid var(--cel-purple); }
.cel-root .cel-toast-big {
  width: 380px; padding: 18px 18px 16px; border-left: 0; border: 2px solid var(--cel-yellow);
  box-shadow: 0 16px 40px rgba(0, 0, 0, .2); animation: cel-pop .32s cubic-bezier(.2, 1.4, .4, 1);
}
.cel-root .cel-toast-big .cel-emoji { font-size: 32px; }
.cel-root .cel-toast-big b {
  font-family: "League Spartan", "Outfit", sans-serif; font-weight: 800; font-size: 18px;
  line-height: 1.25; margin-bottom: 4px;
}
.cel-root .cel-toast-big span { font-size: 14px; color: var(--cel-ink); }
.cel-root .cel-toast-big span.cel-sub { font-size: 13px; color: var(--cel-muted); margin-top: 4px; }

.cel-root canvas.cel-confetti {
  position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0;
}
/* the words sit above the confetti, so it never covers what the card says */
.cel-root .cel-toast > :not(canvas):not(.cel-x) { position: relative; z-index: 1; }

@keyframes cel-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes cel-pop { from { transform: scale(.85); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes cel-slide { from { transform: translateY(16px); opacity: 0; } to { transform: none; opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .cel-root .cel-toast { animation: none; }
  .cel-root canvas.cel-confetti { display: none; }
}
@media (max-width: 480px) {
  .cel-root.cel-toasts { right: 16px; left: 16px; bottom: 16px; align-items: stretch; }
  .cel-root .cel-toast, .cel-root .cel-toast-big { width: auto; }
}