:root {
  --howdoc-bg: #ffffff;
  --howdoc-fg: #1c1e21;
  --howdoc-muted: #5c6470;
  --howdoc-rule: #e3e6ea;
  --howdoc-accent: #1a5fb4;
  --howdoc-shadow: rgba(16, 24, 40, 0.12);
}

@media (prefers-color-scheme: dark) {
  :root {
    --howdoc-bg: #16181c;
    --howdoc-fg: #e6e8eb;
    --howdoc-muted: #9aa3b0;
    --howdoc-rule: #2b3038;
    --howdoc-accent: #8ab4f8;
    --howdoc-shadow: rgba(0, 0, 0, 0.5);
  }
}

body.howdoc {
  margin: 0;
  background: var(--howdoc-bg);
  color: var(--howdoc-fg);
  font: 16px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.howdoc-document,
.howdoc-index {
  margin: 0 auto;
  padding: 3rem 1.25rem 6rem;
}

/* The index ends where its menu begins, so the space below it is the menu's
   to give. */
.howdoc-index {
  padding-bottom: 1.5rem;
}

.howdoc h1 {
  margin: 0 0 1rem;
  font-size: 1.9rem;
  line-height: 1.25;
}

.howdoc-intro {
  color: var(--howdoc-muted);
}

.howdoc-lede {
  margin: 1.5rem 0 0.5rem;
  color: var(--howdoc-muted);
}

.howdoc-steps {
  margin: 0;
  padding-left: 1.5rem;
}

.howdoc-step {
  margin: 0 0 2.5rem;
  padding-left: 0.25rem;
}

.howdoc-shot {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0.9rem 0 0;
  border: 1px solid var(--howdoc-rule);
  border-radius: 6px;
  box-shadow: 0 2px 10px var(--howdoc-shadow);
}

.howdoc-toc {
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
}

.howdoc-toc-group {
  margin: 1.75rem 0 0.5rem;
  color: var(--howdoc-muted);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.howdoc-toc-entry {
  border-bottom: 1px solid var(--howdoc-rule);
}

.howdoc-toc-entry a {
  display: block;
  padding: 0.65rem 0;
  color: var(--howdoc-accent);
  text-decoration: none;
}

.howdoc-toc-entry a:hover {
  text-decoration: underline;
}

/* The menu sits beside the page it belongs to, and folded above it when there
   is no room beside. A guide written before the index pass has an empty menu,
   and an empty menu is no menu at all. */
.howdoc-nav:empty,
.howdoc-pager:empty {
  display: none;
}

/* Above the page, the menu is a slim bar the reader keeps within reach
   wherever they have scrolled to, with the guides folded away behind a line
   they can tap. Unfolded, the list is taller than the screen, so the bar stops
   following along and scrolls away with the page like anything else. */
.howdoc-nav {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--howdoc-bg);
  padding: 0.9rem 1.25rem 1rem;
  border-bottom: 1px solid var(--howdoc-rule);
}

.howdoc-nav:has(.howdoc-nav-guides[open]) {
  position: static;
}

/* The index is the one page whose menu is the page, so its menu is open and
   there is nothing to fold. It comes after the heading that says what the
   guides are for, rather than pushing that heading under twenty links. */
body.howdoc {
  display: flex;
  flex-direction: column;
}

.howdoc-nav-index {
  order: 1;
}

/* Nothing to fold on the index: the list is the page, so the line that would
   fold it away is not offered there. */
.howdoc-nav-index .howdoc-nav-summary {
  display: none;
}

.howdoc-nav-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-top: 0.75rem;
  padding: 0.55rem 0.85rem;
  border: 1px solid var(--howdoc-rule);
  border-radius: 8px;
  color: var(--howdoc-fg);
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}

.howdoc-nav-summary::-webkit-details-marker {
  display: none;
}

/* The chevron that says the line can be tapped: down while the list is folded,
   up while it is not. */
.howdoc-nav-summary::after {
  content: '';
  width: 0.45rem;
  height: 0.45rem;
  border-right: 2px solid var(--howdoc-muted);
  border-bottom: 2px solid var(--howdoc-muted);
  transform: translateY(-0.15rem) rotate(45deg);
}

.howdoc-nav-guides[open] > .howdoc-nav-summary::after {
  transform: translateY(0.15rem) rotate(-135deg);
}

@media (min-width: 60rem) {
  body.howdoc {
    display: grid;
    grid-template-columns: 19rem minmax(0, 1fr);
    align-items: start;
  }

  .howdoc-nav,
  .howdoc-nav:has(.howdoc-nav-guides[open]) {
    position: sticky;
    top: 0;
    z-index: auto;
    max-height: 100vh;
    overflow-y: auto;
    padding: 2rem 1.25rem 3rem;
    border-right: 1px solid var(--howdoc-rule);
    border-bottom: 0;
  }

  .howdoc-nav-index {
    order: 0;
  }

  /* Beside the page there is room for the whole list, so the fold is undone:
     the line to tap goes away and every guide is shown whether the reader ever
     tapped it or not. Two rules for two kinds of browser -- the older kind
     folds content away by not displaying it, the newer kind through
     ::details-content. */
  .howdoc-nav-summary {
    display: none;
  }

  .howdoc-nav-guides > *:not(summary) {
    display: block;
  }

  .howdoc-nav-guides::details-content {
    content-visibility: visible;
    block-size: auto;
  }
}

.howdoc-nav-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}

.howdoc-nav-home {
  color: var(--howdoc-fg);
  font-weight: 600;
  text-decoration: none;
}

.howdoc-languages {
  display: flex;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.85rem;
}

.howdoc-language a {
  color: var(--howdoc-accent);
  text-decoration: none;
}

.howdoc-language.howdoc-current {
  color: var(--howdoc-muted);
}

.howdoc-toc-entry.howdoc-current > a {
  color: var(--howdoc-fg);
  font-weight: 600;
}

.howdoc-pager {
  display: flex;
  gap: 1rem;
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--howdoc-rule);
}

.howdoc-pager-link {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.9rem 1rem;
  border: 1px solid var(--howdoc-rule);
  border-radius: 8px;
  text-decoration: none;
}

.howdoc-pager-next {
  margin-left: auto;
  text-align: right;
}

.howdoc-pager-label {
  color: var(--howdoc-muted);
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.howdoc-pager-heading {
  color: var(--howdoc-accent);
}

@media print {
  .howdoc-nav,
  .howdoc-pager {
    display: none;
  }

  .howdoc-shot {
    box-shadow: none;
  }
}