/* Keep the document scrollable in browsers and Android WebView. */
html{
  height:100%;
  overflow-x:hidden;
  overflow-y:hidden;
}
html.native-app{
  scroll-behavior:auto!important;
}
body{
  height:100%;
  overflow-x:hidden;
  overflow-y:hidden;
  touch-action:pan-y;
}
#appShell{
  width:100%;
  height:100vh;
  height:100dvh;
  overflow-x:hidden!important;
  overflow-y:auto!important;
  overscroll-behavior-y:auto;
  -webkit-overflow-scrolling:touch;
  touch-action:pan-y;
}
#mainContent,.view{overflow:visible}

/* Full-screen entry and login layers must scroll on short/mobile screens. */
.landing-page{
  overflow-x:hidden!important;
  overflow-y:auto!important;
  overscroll-behavior-y:auto;
  -webkit-overflow-scrolling:touch;
  touch-action:pan-y;
}
.member-gate{
  overflow-x:hidden;
  overflow-y:auto;
  align-items:start;
  box-sizing:border-box;
  padding-top:max(20px,env(safe-area-inset-top,0px));
  padding-right:max(20px,env(safe-area-inset-right,0px));
  padding-bottom:max(20px,env(safe-area-inset-bottom,0px));
  padding-left:max(20px,env(safe-area-inset-left,0px));
  -webkit-overflow-scrolling:touch;
  touch-action:pan-y;
}
.member-auth-card{margin-block:auto}

/* Dialogs are their own scroll surface while the page behind them is locked. */
dialog[open]{
  overflow-x:hidden!important;
  overflow-y:auto!important;
  overscroll-behavior-y:contain;
  -webkit-overflow-scrolling:touch;
  touch-action:pan-y;
}
.member-dialog[open]{
  height:min(100dvh,100%);
  max-height:100dvh!important;
}

/* Only lock the page while the mobile navigation drawer is actually open. */
body.mobile-menu-open{
  overflow:hidden!important;
  touch-action:none;
}