/* /bot/docs/ — the public docs. base.css carries the tokens, header, buttons, panels and footer.
   A table of contents beside the text on a computer, above it on a phone; each section a plain block of prose. */

.docs-main { padding-top: clamp(2.5rem, 1.75rem + 5vw, 5rem); }
.docs-head { max-width: 46rem; margin-bottom: clamp(2rem, 5vw, 3.5rem); }
.docs-grid { display: grid; gap: 2.5rem; }
@media (min-width: 960px) { .docs-grid { grid-template-columns: 15rem minmax(0, 1fr); gap: 4rem; align-items: start; } }

.docs-toc { padding: 1.1rem 1.25rem; border: 1px solid var(--line); border-radius: var(--r-xl); background: var(--wash); }
@media (min-width: 960px) { .docs-toc { position: sticky; top: 88px; padding: 0; border: 0; background: none; } }
.docs-toc-title { margin: 0 0 .6rem; font: 700 11px/1.4 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--fg-45); }
.docs-toc ol { list-style: none; margin: 0; padding: 0; counter-reset: toc; }
.docs-toc li { counter-increment: toc; }
.docs-toc a {
  display: flex; gap: .7rem; padding: .45rem 0; font-size: .9rem; line-height: 1.35; color: var(--fg-75); text-decoration: none;
}
.docs-toc a::before { content: counter(toc, decimal-leading-zero); flex: none; font: 700 11px/1.9 var(--mono); color: var(--fg-35); }
.docs-toc a:hover { color: var(--accent); }
.docs-toc a:hover::before { color: var(--accent); }

.docs-body { min-width: 0; max-width: 46rem; }
.doc-sec { scroll-margin-top: 84px; }
.doc-sec + .doc-sec { margin-top: clamp(2.75rem, 6vw, 4rem); padding-top: clamp(2.75rem, 6vw, 4rem); border-top: 1px solid var(--line); }
.doc-sec > .h2 { font-size: clamp(1.35rem, 1.1rem + 1.2vw, 1.85rem); }
.doc-sec p { margin: 0 0 1rem; color: var(--fg-75); }
.doc-sec p:last-child { margin-bottom: 0; }
.doc-sec b { color: var(--fg); }
.doc-sec code { color: var(--fg); overflow-wrap: anywhere; }

/* numbered steps: a mono number and the words */
.doc-steps { list-style: none; margin: 0 0 1rem; padding: 0; counter-reset: step; border-top: 1px solid var(--line); }
/* not a grid: a step's bold words and links would each become a grid cell */
.doc-steps li { counter-increment: step; position: relative; padding: .75rem 0 .75rem 2.75rem; border-bottom: 1px solid var(--line); color: var(--fg-75); }
.doc-steps li::before { content: counter(step, decimal-leading-zero); position: absolute; left: 0; top: .75rem; font: 700 12px/1.6rem var(--mono); color: var(--accent); }

.doc-list { margin: 0 0 1rem; padding: 0; list-style: none; }
.doc-list li { position: relative; padding: .45rem 0 .45rem 1.4rem; color: var(--fg-75); }
.doc-list li::before { content: ""; position: absolute; left: .2rem; top: 1.05rem; width: 6px; height: 6px; background: var(--accent); transform: rotate(45deg); }

.doc-callout { padding: 1rem 1.15rem; border: 1px solid var(--accent-line); border-radius: var(--r-xl); background: var(--accent-soft); color: var(--fg) !important; }

.doc-perms, .doc-faq { margin: 0 0 1rem; border-top: 1px solid var(--line); }
.doc-perms > div, .doc-faq > div { display: grid; gap: .25rem; padding: .8rem 0; border-bottom: 1px solid var(--line); }
@media (min-width: 640px) { .doc-perms > div, .doc-faq > div { grid-template-columns: 14rem minmax(0, 1fr); gap: 1.25rem; } }
.doc-perms dt, .doc-faq dt { font: 700 .875rem/1.5 var(--mono); color: var(--fg); }
.doc-perms dd, .doc-faq dd { margin: 0; color: var(--fg-75); }
.doc-sec .cta-row { margin-top: 1.5rem; }