/* Documentation navigation uses the existing typography and colors. */
.doc-nav {
  max-height: calc(100dvh - var(--nav-h) - 48px);
  overflow-y: auto;
}
.doc-nav__group { margin: 16px 0; }
.doc-nav a[aria-current="page"] { color: var(--text); font-weight: 500; }
.doc-section-links { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 20px 0; font-size: 13px; }
.doc-body h1 { margin: 10px 0 8px; }
.doc-body h4 { margin: 20px 0 16px; }

/* Keep list markers within the content column, with hanging text on wrapped steps. */
.doc-body ol { margin: var(--sp-4) 0; padding: 0; list-style: none; counter-reset: doc-step; }
.doc-body ol > li { position: relative; padding-inline-start: 1.6em; counter-increment: doc-step; }
.doc-body ol > li::before { content: counter(doc-step) "."; position: absolute; inset-inline-start: 0; }
.doc-body ul { margin: var(--sp-4) 0; padding-inline-start: 1.5em; }
.doc-body :is(ol, ul) > li + li { margin-top: 8px; }

/* Space examples from surrounding content without adding gaps inside the frame. */
.doc-body .code-block, .doc-body .code-sample { margin: 16px 0; }
.doc-body .code-block + .code-block,
.doc-body .code-sample + .code-sample { margin-top: 20px; }
.doc-body pre.code, .doc-body .code-sample > pre { margin: 0; }

/* Inline identifiers stay distinct from prose without styling fenced code. */
.doc-body :is(p, li, td) code:not(pre code) {
  font-family: var(--font-mono);
  font-size: 0.9em;
  color: var(--text);
  background: var(--surface-3);
  border: 1px solid var(--border-strong);
  border-radius: var(--r);
  padding: 1px 5px;
  overflow-wrap: anywhere;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* Make links in documentation content recognizable before interaction. */
.doc-body p a, .doc-body li a, .doc-body td a {
  color: color-mix(in srgb, var(--brand) 65%, var(--text) 35%);
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.doc-body p a:hover, .doc-body li a:hover, .doc-body td a:hover,
.doc-body p a:focus-visible, .doc-body li a:focus-visible, .doc-body td a:focus-visible {
  color: var(--text);
  text-decoration-thickness: 2px;
}
.embed .doc-nav { top: 24px; max-height: calc(100dvh - 48px); }
@media (max-width: 760px) {
  .doc-nav, .embed .doc-nav { max-height: none; overflow: visible; }
}

/* Keep descriptions visible instead of placing whole paragraphs on one line. */
.api-doc-page .table { table-layout: fixed; min-width: 540px; }
.api-doc-page .table th, .api-doc-page .table td {
  white-space: normal;
  overflow-wrap: anywhere;
  vertical-align: top;
}
.api-doc-page .table th:first-child { width: 32%; }
.api-doc-page .table th:nth-child(2) { width: 22%; }
.api-doc-page .table:has(th:nth-child(5)) { min-width: 640px; }
.api-doc-page .table:has(th:nth-child(5)) th:first-child { width: 12%; }
.api-doc-page .table:has(th:nth-child(5)) th:nth-child(2) { width: 20%; }
.api-doc-page .table:has(th:nth-child(5)) th:nth-child(3) { width: 9%; }
.api-doc-page .table:has(th:nth-child(5)) th:nth-child(4) { width: 13%; }