body.app {
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  grid-template-columns: 1fr;
  grid-template-areas:
    "header"
    "toolbar"
    "main"
    "footer";

  @media only screen and (min-width: 70ch) {
    grid-template-columns: auto 1fr;
    grid-template-areas:
      "sidebar header"
      "sidebar toolbar"
      "sidebar main"
      "sidebar footer";
  }
}

:where(#main-website) {
  container-type: inline-size;
  font-size: var(--font-medium-responsive);
}

:where(#main) {
  container-type: inline-size;
  font-size: var(--font-small-medium-responsive);
  inline-size: min(95ch, 75vw);
  margin-top: 1rem;
  margin-inline: auto;
  max-inline-size: 100vw;
  padding-block-end: clamp(
    var(--block-space),
    5%,
    calc(var(--block-space) * 3)
  );
  padding-inline: clamp(var(--inline-space), 5%, calc(var(--inline-space) * 3));
  /* text-align: center; */

  @media (max-width: 70ch) {
    inline-size: min(70ch, 100vw);
    padding-inline: var(--inline-space);
  }
}

#main.medium-width {
  inline-size: min(110ch, 85vw);

  @media (max-width: 70ch) {
    inline-size: min(70ch, 100vw);
  }
}

#main.wide-width {
  /* Wide layout - uses most of the available space in the main area */
  inline-size: min(150ch, 95%);

  @media (max-width: 70ch) {
    inline-size: min(70ch, 100vw);
  }
}

:where(#footer) {
  grid-area: footer;
  max-inline-size: 100vw;
  view-transition-name: footer;

  > nav {
    padding-inline: var(--inline-space);
    view-transition-name: footer-nav;
  }

  /* &:has(.help-btn) { */
  /*   inset-block-end: 0; */
  /*   pointer-events: none; */
  /*   position: sticky; */
  /* } */
}

:where(#header) {
  grid-area: header;
  /* inset-block-start: 0; */
  /* position: sticky; */
  max-inline-size: 100vw;
  transition: margin-inline-start 0.2s ease-out;
  view-transition-name: header;
  z-index: 1;

  :has(#sidebar-toggle:checked) & {
    @media (min-width: 70ch) {
      margin-inline-start: -25vw;
    }
  }

  > nav {
    view-transition-name: nav;
  }

  > * {
    align-items: center;
    display: flex;
    gap: 1ch;
    justify-content: center;
    padding: var(--block-space-half) var(--inline-space);
  }

  .btn {
    flex-shrink: 0;
  }
}

:where(#sidebar) {
  background-color: var(--color-gray-light);
  block-size: 100%;
  font-size: var(--font-small-medium-responsive);
  grid-area: sidebar;
  inline-size: 25vw;
  max-block-size: 100%;
  overflow: auto;
  position: relative;
  transition: margin-inline-start 0.2s ease-out;
  padding-top: 2.5rem;

  :has(#sidebar-toggle:checked) & {
    margin-inline-start: 0;
  }

  @media (max-width: 70ch) {
    display: none;
  }

  @media (min-width: 70ch) {
    margin-inline-start: -25vw;
  }
}

:where(#toolbar) {
  display: flex;
  grid-area: toolbar;
  inset: 0 0 auto;
  justify-content: center;
  min-width: 0;
  overflow: hidden;
  padding-inline: var(--inline-space);
  position: sticky;
  view-transition-name: toolbar;
  z-index: 1;
}

:is(#header, #footer, #sidebar, #toolbar) {
  @media print {
    display: none;
  }
}