/* v15 — real-device viewport and touch-scroll reliability */

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* The scene itself owns vertical scrolling. This keeps long content reachable
   without turning the whole document into a second, competing scroll region. */
.scene-screen {
  height: 100%;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
  touch-action: pan-y;
  scroll-padding-bottom: calc(32px + env(safe-area-inset-bottom));
}

.scene-screen .scene-hero,
.scene-screen .scene-body {
  flex: 0 0 auto;
}

.scene-screen .scene-body {
  padding-bottom: calc(34px + env(safe-area-inset-bottom));
}

/* Mobile browser chrome can leave less than the previous 620px minimum.
   Use the visual viewport measured by JavaScript and never let the phone shell
   grow beyond the area that can actually receive touch input. */
@media (max-width: 500px), (max-height: 619px) {
  html,
  body {
    width: 100%;
    height: var(--visible-viewport-height, 100dvh);
    min-height: 0;
    overflow: hidden;
  }

  .experience-shell {
    width: 100%;
    height: var(--visible-viewport-height, 100dvh);
    min-height: 0;
    padding: 0;
    overflow: hidden;
  }

  .phone {
    width: 100vw;
    height: var(--visible-viewport-height, 100dvh);
    min-height: 0;
    max-height: var(--visible-viewport-height, 100dvh);
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  .app,
  .screen {
    height: 100%;
    min-height: 0;
  }

  .scene-screen {
    padding-bottom: calc(44px + env(safe-area-inset-bottom));
  }

  .scene-screen .scene-body {
    margin-bottom: calc(8px + env(safe-area-inset-bottom));
  }
}

@media (orientation: landscape) and (max-height: 500px) {
  .screen {
    padding-top: 82px;
  }

  .scene-screen .scene-hero {
    min-height: 230px;
  }
}