/* Screen system - one full-viewport panel per app screen, toggled via the
   .active/.leaving classes from app.js's nav(). Ported pattern from
   MunchMatch, screen markup itself is new per phase. */
html, body { overflow: hidden; }

.screen {
  position: fixed; inset: 0; display: flex; flex-direction: column;
  opacity: 0; pointer-events: none;
  transition: opacity 0.38s ease, transform 0.38s ease;
  transform: translateY(22px); overflow: hidden;
}
.screen.active  { opacity: 1; pointer-events: all; transform: translateY(0); }
.screen.leaving { opacity: 0; transform: translateY(-22px); transition: opacity 0.25s ease, transform 0.25s ease; }

.screen-inner {
  flex: 1; display: flex; flex-direction: column;
  width: 100%; max-width: 480px; margin: 0 auto;
  padding: env(safe-area-inset-top, 1rem) 1.25rem env(safe-area-inset-bottom, 1rem);
  overflow-y: auto;
}

#offline-banner {
  position: fixed; left: 0; right: 0; top: 0; z-index: 50;
  display: none; align-items: center; justify-content: center; gap: 0.5rem;
  background: var(--red); color: #fff; font-size: 0.85rem; font-weight: 600;
  padding: 0.55rem 1rem; padding-top: calc(0.55rem + env(safe-area-inset-top, 0px));
}
#offline-banner.visible { display: flex; }