/* ============================================================
   Stanzai 2.0 Shell — global rules & keyframes
   Import AFTER tokens.css. Screen-specific rules live in each
   screen's own .css file (onboarding.css, home.css, …).
   ============================================================ */

html, body, #root {
  margin: 0;
  padding: 0;
  height: 100%;
  background: var(--canvas-app);
}

* { box-sizing: border-box; }

/* Brand-teal selection tint, mouse/keyboard contexts only. Touch browsers
   (iOS especially) paint an author-tinted selection in scrollable editable
   fields through a glitchier path than their native highlight — stale
   rectangles and ballooned repaints while a selection handle drags — so
   touch keeps the system selection color. */
@media (hover: hover) and (pointer: fine) {
  ::selection { background: rgba(var(--teal-rgb), 0.35); }
}

input, textarea { font-family: inherit; }
input::placeholder, textarea::placeholder { color: var(--t4); }
em { font-style: normal; }
em.gold { color: var(--stz-gold-hi); }

/* ---- Keyframes (shared across screens) ---- */

/* Painted light drift — the room breathes. Never faster, never bigger. */
@keyframes szDrift {
  0%   { transform: translate(0, 0) scale(1); }
  100% { transform: translate(2.5%, -2%) scale(1.06); }
}

/* Step / panel entry — fade + 10px rise */
@keyframes szRise {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* The just-changed-content wash lives with its screen (szsCueWash in
   session.css); the receipt entry animation is Sonner's own. */

/* Live/session dot halo pulse */
@keyframes szHalo {
  0%   { box-shadow: 0 0 0 0 rgba(var(--teal-rgb), 0.5); }
  70%  { box-shadow: 0 0 0 7px rgba(var(--teal-rgb), 0); }
  100% { box-shadow: 0 0 0 0 rgba(var(--teal-rgb), 0); }
}

/* Route-gate hold: the quiet assistant field while a stored page loads
   from the library (or its listing is still arriving). Painted locally by
   the gate's placeholder, same canvas the arriving page drops onto. */
.stz-gate-hold {
  width: 100%;
  height: 100dvh;
  background: var(--canvas-assist);
}