/* Each page's mock-up phone (.bora-phone) becomes the app itself: no frame and no pretend status
   bar, and the page never scrolls or pans, so only the screen's own lists scroll. The design's 50px
   status bar is pushed just above the top edge, so everything under it keeps its place.
   On a phone it fills the screen. On a computer or tablet it is a phone-width column in the middle
   of the window, full height. */
@media (max-width: 600px) {
  html, body {
    height: 100%;
    overflow: hidden;
    overscroll-behavior: none;
    background: #FBFAF7 !important;
  }
  .bora-phone {
    position: fixed !important;
    left: 0;
    top: -50px;
    width: 100vw !important;
    height: calc(100vh + 50px) !important;
    height: calc(100dvh + 50px) !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    z-index: 1;
  }
}

@media (min-width: 601px) {
  html, body {
    height: 100%;
    overflow: hidden;
    overscroll-behavior: none;
  }
  .bora-phone {
    position: fixed !important;
    left: 0;
    right: 0;
    margin: 0 auto;
    top: -50px;
    width: 420px !important;
    height: calc(100vh + 50px) !important;
    height: calc(100dvh + 50px) !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: 0 0 0 1px #DFDCD3, 0 0 48px rgba(30, 40, 30, 0.10) !important;
    z-index: 1;
  }
}