/* Community Fast + Parity v73
 * The public browser and the installed/mobile app share one application shell.
 */
:root {
  --unified-app-width-v73: 30rem;
}

html,
body {
  width: 100%;
  height: var(--app-height, 100dvh);
  min-height: var(--app-height, 100dvh);
  overflow: hidden;
  overscroll-behavior: none;
}

/* The marketing presentation used to compete with a narrow phone preview on
 * desktop. The application is now the only public experience at every size. */
html body .public-panel {
  display: none !important;
}

html body .app-shell {
  display: grid;
  grid-template-columns: minmax(0, var(--unified-app-width-v73));
  place-content: center;
  width: 100%;
  height: var(--app-height, 100dvh);
  min-height: var(--app-height, 100dvh);
  padding: 0;
}

html body .phone-frame {
  width: 100%;
  max-width: var(--unified-app-width-v73);
  height: var(--app-height, 100dvh);
  min-height: 0;
  max-height: var(--app-height, 100dvh);
  border: 0;
  border-radius: 0;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--line, #ddd5c7) 68%, transparent),
    0 1.25rem 4rem rgba(43, 34, 20, 0.12);
  backdrop-filter: none;
}

/* An old desktop-preview bundle hid this header only above 860px. Keeping it
 * mounted on the Community landing screen removes the last desktop/mobile
 * structural difference. Detail screens retain their own dedicated header. */
body[data-screen="community"].community-hub-mode .phone-frame > .mobile-header,
body[data-screen="community"].community-fusion-v44-mode .phone-frame > .mobile-header {
  display: grid !important;
}

@media (max-width: 860px), (hover: none) and (pointer: coarse) {
  html body .app-shell {
    display: block;
  }

  html body .phone-frame {
    max-width: none;
    box-shadow: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  html body .phone-frame {
    scroll-behavior: auto;
  }
}