@layer components {
  /* Centered page column for index/report pages.
   *
   *   <div class="page page--stack" style="--page-width: 72rem">
   *
   *   --page-width    max width (default: the app's --main-width)
   *   --page-padding  padding shorthand (default 1rem; "0" for flush pages)
   *   --page-gap      gap between stacked children (with .page--stack)
   */
  .page {
    inline-size: 100%;
    margin-inline: auto;
    max-inline-size: var(--page-width, var(--main-width));
    padding: var(--page-padding, 1rem);
  }

  .page--stack {
    display: flex;
    flex-direction: column;
    gap: var(--page-gap, 1rem);
  }
}