/* Mobile-first shell overrides — turns the desktop "phone frame" demo into a
   real full-screen phone web app. Loaded AFTER app.css. */
html, body {
  height: 100%;
  /* Lock the document itself so it can never scroll or rubber-band. Only the
     inner #scrollarea scrolls. This stops the browser's native pull-to-refresh
     from shoving the header out of view (the "stuck, must pinch-zoom" bug). */
  position: fixed;
  inset: 0;
  width: 100%;
  overflow: hidden;
  overscroll-behavior: none;
}
body {
  background: var(--bg);
  display: block;
  padding: 0;
  gap: 0;
}
.notes { display: none; }
.phone { width: 100%; flex: none; }
.frame {
  background: none; border: none; border-radius: 0; box-shadow: none;
  height: 100vh; height: 100dvh; position: relative; overflow: hidden;
}
.screen { transition: background .3s; }
/* keep content readable on very wide screens (tablet/desktop browser) */
@media (min-width: 720px) {
  .frame { max-width: 460px; margin: 0 auto; border-left: 1px solid var(--line); border-right: 1px solid var(--line); }
}
.statusbar { display: none; }        /* real phone already has a status bar */
#scrollarea {
  padding-top: env(safe-area-inset-top, 0);
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;   /* no chained rubber-band to the document */
}
.loading { text-align: center; color: var(--muted); padding: 40px 0; font-size: 14px; }