#app {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.page {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding-bottom: var(--space-xl);
}

.page__content {
  flex: 1;
  padding-inline: var(--space-main);
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

/* Pages with the fixed bottom nav get their nav-clearance space from
   .page__content alone — .page's own padding-bottom (below) is meant for
   nav-less screens, and stacking both here doubled the bottom gap to 152px,
   forcing a scroll even when the real content fit the viewport (found on a
   real device 2026-07-27). */
.page--home,
.page--saved,
.page--profile,
.page--browse {
  padding-bottom: 0;
}

/* 112px matches .bottom-nav's real rendered height (44px touch target +
   label + padding, see NAV_CLEARANCE_PX in home.js) — this used to say 88px,
   24px short of the nav's actual height, which let the fixed nav cover the
   bottom of Home's CTA/actions row even when nothing else needed scrolling
   (found from a real-device report 2026-07-29: page still scrolled, and the
   scroll safety net in home.js couldn't fully compensate because there was
   no extra document height left for it to reveal). */
.page--home .page__content,
.page--saved .page__content,
.page--profile .page__content {
  padding-bottom: 112px; /* clears fixed bottom nav */
}

@media (min-width: 768px) {
  .page__content {
    max-width: 640px;
    margin-inline: auto;
    width: 100%;
  }
}