/* Docs pages: the doc list above the article on wide screens and below it on
   phones. Used by doc.html and docs-index.html. */

/* One column on every screen: no grid and no sidebar, so the list, the article
   and the theme toggle all share the same edges. A grid item may not grow past
   its column. Without min-width: 0, one long code line makes the article wider
   than the screen on a phone. */
.docs-layout {
  display: flex;
  flex-direction: column;
}

.docs-layout > * {
  min-width: 0;
}

/* A word with no spaces in it (a long token or path) would otherwise run past
   the article's edge and widen the whole page. Code blocks are white-space: pre,
   so they are not affected and keep scrolling inside their own box. */
.docs-layout > article {
  order: 0;
  overflow-wrap: break-word;
}

/* On phones the doc list follows the article, with a rule above it, so a long
   list does not push the page content down. */
/* Inline code in a paragraph or list item, such as GET /v1/net-worth. Code blocks
   (pre code) keep their own look and are reset here. */
.docs-layout code {
  background: var(--rule);
  padding: 0.12em 0.4em;
  border-radius: 3px;
  font-size: 0.9em;
  overflow-wrap: normal;
  word-break: normal;
}

.docs-layout pre code {
  background: none;
  padding: 0;
  border-radius: 0;
}

.docs-nav {
  order: 1;
  margin-top: 2.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--rule);
}

.docs-nav .docs-nav-label {
  font-size: 0.95rem;
  font-weight: 600;
  margin: 1.25rem 0 0.3rem;
}

.docs-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.docs-nav li {
  margin: 0.15rem 0;
}

.docs-nav .docs-home {
  display: inline-block;
  margin-top: 0.25rem;
}

.docs-nav a[aria-current="page"] {
  font-weight: 600;
  text-decoration: none;
}

/* Doc pages are wider than the 38rem reading column of the posts. The class is
   on <body> in doc.html only, so the topbar, the article, the list and the footer
   share one 50rem frame, about 46rem of text. The index page keeps its column. */
@media (min-width: 48rem) {
  .docs-page .wrap {
    max-width: 50rem;
  }

  .docs-nav {
    order: -1;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 0.25rem 2.5rem;
    margin: 0 0 2.25rem;
    padding: 0 0 1.25rem;
    border-top: 0;
    border-bottom: 1px solid var(--rule);
  }

  .docs-nav .docs-home {
    flex-basis: 100%;
    margin-top: 0;
  }

  .docs-nav .docs-nav-label {
    margin: 0 0 0.3rem;
  }
}

.docs-toc ul {
  list-style: none;
  margin: 0 0 1.5rem;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.1rem;
}

.docs-category {
  margin-top: 2rem;
}

.docs-category > h2 {
  font-size: 1.15rem;
}

@media print {
  .docs-nav,
  .docs-toc {
    display: none;
  }
}

.docs-reference {
  margin-top: 1.25rem;
}

.docs-reference > h3 {
  font-size: 1rem;
  margin: 0 0 0.5rem;
}

.docs-reference ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.docs-reference li {
  margin: 0 0 0.4rem;
}

.docs-reference .api-muted {
  color: var(--muted);
  font-size: 0.95em;
}