/* The docs: a side menu next to a .card.prose page. The header, card, callouts, pills, numbered steps and pager
   links all come from styles.css. */
.docs-layout {
  max-width: 72rem;
  margin: 0 auto;
  padding: 1rem 1rem 1.75rem;
  display: grid;
  grid-template-columns: 14rem minmax(0, 1fr);
  gap: 1.5rem;
  align-items: start;
}

/* The title row: the section title "Docs" above the menu, and the page's own heading at the right end of the row,
   above the page card. "Docs" is a label; the page heading is the h1. */
.docs-title { margin: 0.25rem 0 0; align-self: end; }
.docs-page-title {
  margin: 0.25rem 0 0;
  align-self: end;
  justify-self: end;
  text-align: right;
  font-size: 1.5rem;
  line-height: 1.15;
  /* A white tag with a dashed outline, so the page name reads as a label beside the Docs title. */
  background: #fff;
  border: 3px dashed var(--ink);
  border-radius: 8px;
  padding: 0.15rem 0.8rem;
}

/* The side menu is a card (styles.css) with tighter padding. */
.docs-nav {
  position: sticky;
  top: 1rem;
  margin-bottom: 0;
  padding: 0.75rem;
}

.docs-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.3rem;
}

.docs-nav a {
  display: block;
  color: var(--ink);
  font-weight: 700;
  border: 2px solid transparent;
  border-radius: 10px;
  padding: 0.35rem 0.6rem;
}

.docs-nav a:hover { background: #f1f1f1; }

.docs-nav a[aria-current="page"] {
  background: var(--yellow);
  border-color: var(--ink);
}

main.doc-page {
  margin-bottom: 0;
  padding: 1.5rem 1.75rem 1.75rem;
  min-width: 0;
}

.doc-page h2 { margin-top: 2rem; }

.doc-page h3 {
  margin: 1.4rem 0 0.3rem;
  font-size: 1.15rem;
}

.doc-page .lede {
  font-size: 1.15rem;
  margin-top: 0;
}

.table-wrap {
  overflow-x: auto;
  margin: 1rem 0;
  border: 3px solid var(--ink);
  border-radius: 14px;
}

.doc-page table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
}

.doc-page th,
.doc-page td {
  text-align: left;
  vertical-align: top;
  padding: 0.6rem 0.75rem;
  border-bottom: 2px solid #eee;
}

.doc-page th {
  background: var(--ink);
  color: var(--yellow);
}

@media (min-width: 801px) {
  .doc-page th { white-space: nowrap; }
}

.doc-page tr:last-child td { border-bottom: none; }

.doc-page td:first-child { font-weight: 700; white-space: nowrap; }

.faq h3 {
  background: var(--soft);
  border: 2px solid var(--ink);
  border-radius: 10px;
  padding: 0.4rem 0.75rem;
}

.pager {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 2.5rem;
  flex-wrap: wrap;
}

.pager .next { margin-left: auto; }


@media (max-width: 800px) {
  /* "Docs" and the page heading stay side by side; the menu and page take the full width below them. */
  .docs-layout { grid-template-columns: auto minmax(0, 1fr); column-gap: 1rem; }
  .docs-nav, main.doc-page { grid-column: 1 / -1; }
  .docs-page-title { font-size: 1.25rem; }
  .docs-nav { position: static; padding: 0.5rem; min-width: 0; }
  .docs-nav ul { display: flex; overflow-x: auto; gap: 0.4rem; }
  .docs-nav a { white-space: nowrap; }
  main.doc-page { padding: 1.25rem; }
}