/* Dynamic-state styles only (Tailwind classes can't express the toggles).
   The design itself is Tailwind in index.html and app.js. */
body { padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom); }

.card.leaving { opacity: 0; transform: translateX(24px); }

.body-collapsed { display: none; }
.body-collapsed.open { display: block; }

#toast {
  position: fixed; left: 1rem; right: 1rem; bottom: 1.25rem; z-index: 50;
  padding: .75rem 1rem; border-radius: .75rem;
  background: #111827; color: #f9fafb;
  box-shadow: 0 10px 25px rgb(0 0 0 / .25);
}
#toast.bad { background: #e11d48; color: #fff; }
@media (min-width: 640px) {
  #toast { left: 50%; right: auto; transform: translateX(-50%); min-width: 320px; }
}