/*
 * Reader shell: reduce blank “rubber band” / overscroll past content (Brave, Safari, etc.)
 * and keep horizontal pan on the carousel.
 *
 * Without min-width: 0 on the carousel flex item, a wide .reader-cards (min-w-max) row
 * becomes the flex item’s minimum width and expands the whole document — mobile then
 * pans the page horizontally instead of only the carousel (Brave/Chromium especially).
 */
html.reader-shell {
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  box-sizing: border-box;
}

html.reader-shell,
body.reader-shell-body {
  overscroll-behavior: none;
}

body.reader-shell-body {
  min-width: 0;
  max-width: 100%;
  /* Matches thin .reader-page-header (min-h-11 / sm:min-h-12) — modals align to #reader-horizontal-scroll band */
  --reader-header-h: 2.75rem;
}

@media (min-width: 640px) {
  body.reader-shell-body {
    --reader-header-h: 3rem;
  }
}

/*
 * Lock to the dynamic viewport on engines that support it — avoids extra scroll past
 * the last pixel when 100%/100vh disagree with the visible viewport (mobile browsers).
 */
@supports (height: 100dvh) {
  html.reader-shell {
    height: 100dvh;
    max-height: 100dvh;
  }

  body.reader-shell-body {
    height: 100dvh;
    max-height: 100dvh;
  }
}

#reader-horizontal-scroll {
  min-width: 0;
  width: 100%;
  max-width: 100%;
  touch-action: pan-x pinch-zoom;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}