/*
 * PageChrome — Topbar + flex-grow main + SiteFooter.
 * Footer pins to the bottom on short pages so small content still
 * fills the viewport.
 */

.page-chrome {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

.page-chrome-main {
  flex: 1;
  /* Canonical page-top space — every page sits 4rem (64px) below the
     topbar on desktop and 1.5rem (24px) below it on mobile. Don't add
     additional top padding on a page's inner shell; if a particular
     page needs a hero-style top band, do that with the hero element's
     own internal padding so the shared page-top baseline stays uniform.

     Bottom is a fixed measure, not 50dvh. Half a viewport was there to keep
     long comment threads off the footer, but it also put 600px of nothing
     under every short page: /install fit its window and still scrolled, for
     dead space. The footer already pins to the bottom on short pages through
     min-height + flex, so the air only has to be air. */
  padding: var(--space-16) 0 var(--space-20);
}

@media (max-width: 640px) {
  .page-chrome-main { padding: var(--space-6) 0 var(--space-12); }
}

/* Full-width / full-screen layout — used by editor pages (course
   builder). Drops the generous top + bottom padding so the editor
   chrome sits directly under the topbar with no dead space, and the
   footer is omitted so the editor fills the viewport. */
.page-chrome.is-fullwidth .page-chrome-main {
  padding: 0;
}