/* Usability spec 06 -- the guides' page: contents beside the text on a wide screen,
 * a collapsed block above it on a narrow one. #main is the scroller (header-layout),
 * so the sidebar sticks inside it and is sized to it. */
.guide-layout {
  display: grid;
  gap: var(--size-8);
  grid-template-columns: minmax(0, 1fr);

  @media (width >= 48rem) {
    grid-template-columns: var(--max-i-3xs) minmax(0, 1fr);
  }
}

.guide-layout__sidebar {
  display: none;

  @media (width >= 48rem) {
    align-self: start;
    display: block;
    inset-block-start: var(--size-4);
    max-block-size: calc(100dvh - var(--size-16) - var(--size-8));
    overflow-y: auto;
    position: sticky;
  }
}

.guide-layout__compact {
  @media (width >= 48rem) {
    display: none;
  }

  > summary { cursor: pointer; }
  > .guide-contents { margin-block-start: var(--size-2); }
}

/* sidebar_menu's button is a .btn, which never wraps; a chapter title has to. */
.guide-contents .sidebar-menu__button {
  text-align: start;
  white-space: normal;
}

/* A heading reached by its link lands a little below the top edge, not flush on it. */
.guide-body :is(h2, h3) {
  scroll-margin-block-start: var(--size-4);
}

/* A guide is the page, not a comment inside it: its chapters read at page scale. */
.guide-body .prose {
  h2 { font-size: var(--text-xl); margin-block-start: var(--size-8); }
  h3 { font-size: var(--text-lg); margin-block-start: var(--size-6); }
}