/* Device fitting for the design screens (see app.js). The screens themselves are untouched. */
html[data-app-shell] {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  background: var(--app-bg, #fff);
}
html[data-app-shell],
html[data-app-shell] body { margin: 0; height: 100%; }
html[data-app-shell] body { background: var(--app-bg, #fff); }

html[data-app-shell] [data-app-root] {
  zoom: var(--app-z, 1);
  height: var(--app-h, 844px) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* phone + embed: one screen, no page scroll, no rubber-banding */
html[data-app="phone"],
html[data-app="phone"] body,
html[data-app="embed"],
html[data-app="embed"] body { overflow: hidden; overscroll-behavior: none; }
html[data-app="phone"] body { position: fixed; inset: 0; }
html[data-app="phone"] [data-app-root] { margin-top: calc(-1 * var(--app-cut, 0px)) !important; }

/* desktop: the screen at real size in a rounded frame */
html[data-app="desktop"],
html[data-app="desktop"] body { background: #f5f4ef; }
html[data-app="desktop"] body {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100%;
}
html[data-app="desktop"] [data-app-root] {
  height: 844px !important;
  border-radius: 48px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .12), 0 24px 60px rgba(0, 0, 0, .10);
}