/* ============================================================
   FIXES — applied last, override anything else
   ============================================================ */

/* The <main> element needs to be a flex container that fills
   the remaining space, otherwise its child views (which use flex:1)
   collapse and their scroll containers have no height. */
main#main {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;          /* critical — lets flex children shrink */
  overflow: hidden;
}

/* Active view must fill main and let its scroll container size correctly */
.view.is-active {
  flex: 1;
  min-height: 0;
}

/* All scroll containers — force momentum scroll on iOS, ensure they
   actually have a height bound to overflow against */
[data-scroll],
.library,
.reader,
.submit-view,
.quiz,
.journal,
.videos {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  /* Stops the page underneath from "rubber-banding" on iOS */
  touch-action: pan-y;
}

/* Story rows scroll horizontally — make sure that still works */
.story-row {
  touch-action: pan-x;
  overscroll-behavior-x: contain;
}

/* App shell shouldn't itself be scrollable — only its inner views */
.app {
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
}

/* iOS safe-area: ensure last items aren't trapped under the bottom nav */
.library,
.submit-view,
.quiz,
.journal,
.videos {
  padding-bottom: calc(80px + var(--sb)) !important;
}
.reader {
  padding-bottom: calc(40px + var(--sb)) !important;
}

/* Modal scroll fix — when video modal is open, body scroll lock */
body:has(.modal.is-open) {
  overflow: hidden;
}

/* iOS PWA: 100vh is broken in standalone, dvh is correct */
@supports (height: 100dvh) {
  .app { height: 100dvh; }
}