/* The window does not scroll. The menu and footer stay full viewport width.
   Only .page-scroll scrolls, so its bar never shortens those bars. */
html.page-shell {
  height: 100dvh;
  overflow: hidden;
}
html.page-shell body {
  height: 100%;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
}
.page-scroll {
  position: relative;
  z-index: 1;
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
  overflow-y: auto;
  scrollbar-gutter: stable;
  scroll-behavior: smooth;
}
html.page-shell body > footer,
html.page-shell body > header,
html.page-shell body > nav {
  flex-shrink: 0;
}
/* .page-scroll is a stacking context (z-index 1). An open menu hangs out of
   the bar and would paint under it. Keep the bar above the scroller. */
html.page-shell body > nav {
  z-index: 50;
}
@media print {
  html.page-shell,
  html.page-shell body { height: auto; overflow: visible; display: block; }
  .page-scroll { overflow: visible; flex: none; height: auto; display: block; }
}