/*
  Mobile viewport stability
  Keep the browser's normal document scrolling. iOS Safari behaves most
  reliably when Morrow's sticky header and fixed navigation are not placed
  inside a custom full-height momentum scroller.
*/
html{
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}

@media(max-width:600px){
  input,
  select,
  textarea,
  .input,
  .search-box input,
  .settings-field input,
  .settings-field select,
  .onboarding-field input,
  .onboarding-field select{
    font-size:16px !important;
  }
}

@media(max-width:699px){
  html,
  body{
    width:100%;
    min-height:100%;
    overflow-x:hidden;
  }

  /*
    Edge-to-edge Android WebViews allow document content to draw behind the
    system status bar. Keep only that inset visually protected while the page
    scrolls; safe-area-inset-top is 0 in ordinary browsers, so this is inert
    outside devices that need it.
  */
  body::before{
    content:"";
    position:fixed;
    z-index:1000;
    top:0;
    left:0;
    right:0;
    height:env(safe-area-inset-top);
    background:var(--bg,#f8f5ef);
    pointer-events:none;
  }

  /*
    The startup overlay has a much higher z-index than the normal status-bar
    shield. Give the loader its own safe top edge so a cold launch (including a
    notification tap) never paints underneath Android's clock/network/battery.
  */
  html.morrow-startup-pending #morrowStartup{
    top:env(safe-area-inset-top) !important;
    right:0 !important;
    bottom:0 !important;
    left:0 !important;
    height:auto !important;
  }

  .app{
    min-height:100vh;
  }

  .topbar{
    position:sticky;
    top:0;
    z-index:100;
  }

  .bottom-nav{
    position:fixed;
    left:50%;
    bottom:0;
    transform:translateX(-50%);
    width:min(100%,520px);
    z-index:900;
    isolation:isolate;
    pointer-events:auto;
    touch-action:manipulation;
  }

  .bottom-nav .nav-btn{
    pointer-events:auto;
    touch-action:manipulation;
  }
}