/* The document is a viewport-sized frame. Only .app-scroll scrolls.
   Navigation is a sibling row, so it cannot move with a hero or form. */
html:has(body.app-shell) { height: 100%; overflow: hidden; overscroll-behavior: none; }
body.app-shell {
  position: fixed;
  inset: var(--app-viewport-top, 0px) 0 auto;
  width: 100%;
  height: 100vh;
  height: var(--app-viewport-height, 100dvh);
  min-height: 0;
  margin: 0;
  padding: env(safe-area-inset-top, 0px) 0 0;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  overscroll-behavior: none;
}
.app-shell > .app-scroll {
  flex: 1 1 0%;
  min-height: 0;
  min-width: 0;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
  scroll-padding-block: 16px;
  padding-inline: env(safe-area-inset-left, 0px) env(safe-area-inset-right, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.app-shell > :is(.bottom-nav, .mobile-nav, .app-bottom-nav) {
  position: relative;
  inset: auto;
  flex: 0 0 auto;
  width: 100%;
  margin: 0;
  box-sizing: border-box;
  padding-left: max(12px, env(safe-area-inset-left, 0px));
  padding-right: max(12px, env(safe-area-inset-right, 0px));
  padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
  z-index: 40;
}
.app-shell :is(input, textarea, select) { scroll-margin-block: 24px; }
.app-shell > :is(.skip, .skip-link) { position: absolute; z-index: 80; }
.app-shell > :is(.toast, #portal-status:not(:empty), .pwa-update-notice) {
  bottom: calc(var(--app-nav-height, 0px) + 16px);
  max-height: calc(var(--app-viewport-height, 100dvh) - var(--app-nav-height, 0px) - 48px);
  overflow: auto;
}
.app-shell dialog { max-height: calc(var(--app-viewport-height, 100dvh) - 32px); }
@media (max-width: 850px) {
  .app-shell:not([data-app-page="parent"]) > .app-scroll { padding-bottom: 0; }
}
@media (max-width: 760px) {
  .app-shell[data-app-page="parent"] > .app-scroll { padding-bottom: 0; }
  /* Avoid iOS focus zoom while retaining the user's pinch-zoom capability. */
  .app-shell :is(input, textarea, select) { font-size: max(16px, 1em); }
}
@media (orientation: landscape) and (max-height: 500px) {
  .app-shell > :is(.bottom-nav, .mobile-nav, .app-bottom-nav) { min-height: 0; padding-top: 4px; }
  .app-shell > :is(.bottom-nav, .mobile-nav, .app-bottom-nav) > :is(a, button) {
    min-height: 40px; flex-direction: row; gap: 8px; padding-block: 4px;
  }
}
@media print {
  html:has(body.app-shell) { height: auto; overflow: visible; }
  body.app-shell { position: static; display: block; height: auto; overflow: visible; padding: 0; }
  .app-shell > .app-scroll { overflow: visible; height: auto; padding: 0; }
  .app-shell > :is(.bottom-nav, .mobile-nav, .app-bottom-nav) { display: none !important; }
}