/* ==========================================================================
   /docs — the rendered documentation tree.
   Built entirely on the tokens in base.css: same neutrals, same accent, same
   radii. Three columns on desktop (nav | prose | on-this-page), one column
   with a slide-in sidebar on phones. Prose keeps a ~72ch measure so long
   paragraphs stay readable even though the shell may be 90vw wide.
   ========================================================================== */

.docs-layout {
  display: grid;
  grid-template-columns: minmax(220px, 250px) minmax(0, 1fr) minmax(190px, 220px);
  gap: var(--space-6);
  align-items: start;
}

@media (max-width: 1180px) {
  .docs-layout { grid-template-columns: minmax(200px, 240px) minmax(0, 1fr); }
  .docs-toc { display: none; }
}

/* --------------------------------------------------------------------- */
/* Sidebar                                                                */
/* --------------------------------------------------------------------- */

.docs-navtoggle { display: none; }

.docs-side {
  position: sticky;
  top: calc(var(--header-h) + var(--space-5));
  max-height: calc(100vh - var(--header-h) - var(--space-7));
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: var(--space-2);
}

.docs-search { margin-bottom: var(--space-4); }
.docs-search input[type="search"] { font-size: 0.9rem; }
.docs-search__status {
  margin: var(--space-2) 0 0;
  font-size: 0.76rem;
  color: var(--ink-400);
  min-height: 1em;
}

.docs-nav { font-size: 0.9rem; }

.docs-nav__home {
  display: block;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  color: var(--ink-700);
  font-weight: 600;
  margin-bottom: var(--space-3);
}
.docs-nav__home:hover { background: var(--ink-100); text-decoration: none; color: var(--ink-900); }
.docs-nav__home.is-current { background: var(--accent-soft); color: #2a41d8; }

.docs-nav__section { margin-bottom: var(--space-4); }
.docs-nav__section > summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-400);
}
.docs-nav__section > summary::-webkit-details-marker { display: none; }
.docs-nav__section > summary::before {
  content: "";
  width: 0;
  height: 0;
  border-left: 5px solid var(--ink-300);
  border-block: 4px solid transparent;
  transition: transform var(--dur-fast) var(--ease);
}
.docs-nav__section[open] > summary::before { transform: rotate(90deg); }
.docs-nav__section > summary:hover { background: var(--ink-050); color: var(--ink-700); }

.docs-nav ul {
  list-style: none;
  margin: var(--space-1) 0 0;
  padding: 0 0 0 var(--space-3);
  border-left: 1px solid var(--ink-200);
}
.docs-nav li { margin: 0; }

.docs-nav__link {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 5px var(--space-3);
  border-radius: var(--radius-sm);
  color: var(--ink-500);
  line-height: 1.35;
}
.docs-nav__link:hover { background: var(--ink-100); color: var(--ink-900); text-decoration: none; }
.docs-nav__link.is-current {
  background: var(--accent-soft);
  color: #2a41d8;
  font-weight: 620;
}

.docs-nav__results { list-style: none; margin: 0; padding: 0; border-left: 0; }
.docs-nav__result {
  display: block;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  color: var(--ink-700);
}
.docs-nav__result:hover { background: var(--ink-100); text-decoration: none; }
.docs-nav__result strong { display: block; font-weight: 620; color: var(--ink-900); }
.docs-nav__result small {
  display: block;
  color: var(--ink-400);
  font-size: 0.76rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.docs-nav__result-section {
  display: inline-block;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-400);
}

/* --------------------------------------------------------------------- */
/* Breadcrumbs and page furniture                                         */
/* --------------------------------------------------------------------- */

.docs-crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  font-size: 0.82rem;
  color: var(--ink-400);
  margin-bottom: var(--space-4);
}
.docs-crumbs a { color: var(--ink-500); }
.docs-crumbs__here { color: var(--ink-700); font-weight: 560; }

.docs-pagefoot {
  margin-top: var(--space-7);
  padding-top: var(--space-4);
  border-top: 1px solid var(--ink-200);
  font-size: 0.8rem;
  color: var(--ink-400);
}
.docs-pagefoot code { background: none; border: 0; padding: 0; color: var(--ink-500); }

/* --------------------------------------------------------------------- */
/* Prose                                                                  */
/* --------------------------------------------------------------------- */

.doc-prose {
  max-width: 72ch;
  color: var(--ink-700);
  font-size: 1.005rem;
  line-height: 1.68;
}

.doc-prose > h1:first-child { margin-top: 0; }
.doc-prose h1 { margin: 0 0 var(--space-4); }
.doc-prose h2 {
  margin: var(--space-7) 0 var(--space-3);
  padding-top: var(--space-2);
  border-top: 1px solid var(--ink-100);
  scroll-margin-top: calc(var(--header-h) + var(--space-4));
}
.doc-prose h3 {
  margin: var(--space-6) 0 var(--space-3);
  scroll-margin-top: calc(var(--header-h) + var(--space-4));
}
.doc-prose h4 {
  margin: var(--space-5) 0 var(--space-2);
  color: var(--ink-700);
  scroll-margin-top: calc(var(--header-h) + var(--space-4));
}

.doc-prose p { margin: 0 0 var(--space-4); }
.doc-prose ul, .doc-prose ol { margin: 0 0 var(--space-4); padding-left: 1.35em; }
.doc-prose li { margin-bottom: var(--space-2); }
.doc-prose li > ul, .doc-prose li > ol { margin-top: var(--space-2); }

.doc-prose dl { margin: 0 0 var(--space-4); }
.doc-prose dt { font-weight: 620; color: var(--ink-900); margin-top: var(--space-3); }
.doc-prose dd { margin: var(--space-1) 0 0 0; padding-left: var(--space-4); border-left: 2px solid var(--ink-100); }

.doc-prose blockquote {
  margin: 0 0 var(--space-4);
  padding: var(--space-2) var(--space-5);
  border-left: 3px solid var(--ink-200);
  color: var(--ink-500);
}

.doc-prose hr { margin: var(--space-6) 0; }

.headerlink {
  margin-left: 0.4em;
  color: var(--ink-300);
  opacity: 0;
  font-weight: 400;
  text-decoration: none;
  transition: opacity var(--dur-fast) var(--ease);
}
.doc-prose h1:hover .headerlink,
.doc-prose h2:hover .headerlink,
.doc-prose h3:hover .headerlink,
.doc-prose h4:hover .headerlink,
.headerlink:focus { opacity: 1; }

/* Inline code and code blocks ------------------------------------------ */

.doc-prose :not(pre) > code {
  font-size: 0.875em;
  padding: 0.12em 0.4em;
  border-radius: 5px;
  background: var(--ink-050);
  border: 1px solid var(--ink-200);
  color: var(--ink-900);
  overflow-wrap: anywhere;
}

.doc-prose pre,
.doc-prose .codehilite {
  margin: 0 0 var(--space-5);
  background: var(--ink-050);
  border: 1px solid var(--ink-200);
  border-radius: var(--radius);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.doc-prose .codehilite pre { margin: 0; border: 0; border-radius: 0; background: none; }
.doc-prose pre {
  padding: var(--space-4);
  font-size: 0.855rem;
  line-height: 1.6;
}
.doc-prose pre code {
  display: block;
  white-space: pre;
  background: none;
  border: 0;
  padding: 0;
  color: var(--ink-900);
  min-width: max-content;
}

/* Tables --------------------------------------------------------------- */

.doc-prose table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
  margin: 0 0 var(--space-5);
  background: var(--paper);
  border: 1px solid var(--ink-200);
  border-radius: var(--radius);
  overflow: hidden;
}
.doc-prose thead th {
  background: var(--ink-050);
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-400);
  font-weight: 700;
  text-align: left;
}
.doc-prose th, .doc-prose td {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--ink-100);
  vertical-align: top;
  text-align: left;
}
.doc-prose tbody tr:last-child td { border-bottom: 0; }
.doc-prose td code { white-space: nowrap; }

/* Every markdown table is wrapped in .doc-scroll by the renderer so wide
   content scrolls inside its own box instead of pushing the page sideways on
   a phone. `min(30rem, max-content)` means a narrow two-column table still
   fits a 375px screen without scrolling, while a six-column one keeps its
   cells readable and scrolls. */
.doc-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 0 0 var(--space-5);
  padding-bottom: var(--space-1);
}
.doc-scroll > table { margin: 0; min-width: 26rem; min-width: min(26rem, max-content); }
.doc-scroll svg { max-width: none; }

/* Figures and inline SVG diagrams -------------------------------------- */

.doc-figure {
  margin: 0 0 var(--space-5);
  padding: var(--space-4);
  background: var(--paper);
  border: 1px solid var(--ink-200);
  border-radius: var(--radius);
  overflow-x: auto;
}
.doc-figure svg { display: block; margin-inline: auto; height: auto; }
/* Diagrams with small labels stay at their natural size and scroll inside the
   figure rather than shrinking into illegibility on a phone. */
.doc-figure--scroll svg { max-width: none; margin-inline: 0; }
.doc-figure figcaption {
  margin-top: var(--space-3);
  font-size: 0.8rem;
  color: var(--ink-400);
  text-align: center;
}

/* Admonitions ---------------------------------------------------------- */

.doc-prose .admonition,
.docs-main > .doc-prose .admonition {
  margin: 0 0 var(--space-5);
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--ink-200);
  border-left: 3px solid var(--ink-300);
  border-radius: var(--radius);
  background: var(--paper);
  font-size: 0.95rem;
}
.admonition-title {
  margin: 0 0 var(--space-2);
  font-weight: 660;
  color: var(--ink-900);
  font-size: 0.92rem;
}
.admonition > :last-child { margin-bottom: 0; }

.admonition.note, .admonition.info { border-left-color: var(--accent); background: var(--accent-soft); }
.admonition.note .admonition-title, .admonition.info .admonition-title { color: #2a41d8; }
.admonition.tip, .admonition.success { border-left-color: var(--success); background: var(--success-soft); }
.admonition.tip .admonition-title, .admonition.success .admonition-title { color: var(--success); }
.admonition.warning, .admonition.caution { border-left-color: var(--warn); background: var(--warn-soft); }
.admonition.warning .admonition-title, .admonition.caution .admonition-title { color: var(--warn); }
.admonition.danger { border-left-color: var(--danger); background: var(--danger-soft); }
.admonition.danger .admonition-title { color: var(--danger); }

/* Footnotes ------------------------------------------------------------ */

.doc-prose .footnote {
  margin-top: var(--space-7);
  padding-top: var(--space-4);
  border-top: 1px solid var(--ink-200);
  font-size: 0.87rem;
  color: var(--ink-500);
}
.doc-prose .footnote hr { display: none; }
.doc-prose .footnote ol { padding-left: 1.2em; }
.doc-prose .footnote li { margin-bottom: var(--space-2); scroll-margin-top: calc(var(--header-h) + var(--space-4)); }
.doc-prose sup[id^="fnref"] { line-height: 0; }
.doc-prose .footnote-ref, .doc-prose .footnote-backref { text-decoration: none; }

/* Table of contents ---------------------------------------------------- */

.docs-toc {
  position: sticky;
  top: calc(var(--header-h) + var(--space-5));
  max-height: calc(100vh - var(--header-h) - var(--space-7));
  overflow-y: auto;
  font-size: 0.84rem;
  border-left: 1px solid var(--ink-200);
  padding-left: var(--space-4);
}
.docs-toc__title {
  margin: 0 0 var(--space-3);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  font-weight: 700;
  color: var(--ink-400);
}
.docs-toc ul { list-style: none; margin: 0; padding: 0; }
.docs-toc ul ul { padding-left: var(--space-3); }
.docs-toc a {
  display: block;
  padding: 3px 0;
  color: var(--ink-500);
  line-height: 1.4;
}
.docs-toc a:hover { color: var(--ink-900); text-decoration: none; }
.docs-toc a.is-active { color: #2a41d8; font-weight: 620; }

/* --------------------------------------------------------------------- */
/* Landing page section cards                                             */
/* --------------------------------------------------------------------- */

.docs-sections {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-5);
  margin-top: var(--space-7);
  max-width: 72ch;
}

.docs-sectioncard {
  background: var(--paper);
  border: 1px solid var(--ink-200);
  border-radius: var(--radius);
  box-shadow: var(--shadow-xs);
  padding: var(--space-5);
  border-top: 3px solid var(--accent);
}
.docs-sectioncard--user { border-top-color: var(--phase-f2l); }
.docs-sectioncard--admin { border-top-color: var(--phase-oll); }
.docs-sectioncard--install { border-top-color: var(--phase-cross); }
.docs-sectioncard--developer { border-top-color: var(--phase-pll); }

.docs-sectioncard h2 {
  margin: 0 0 var(--space-2);
  font-size: 1.05rem;
  border: 0;
  padding: 0;
}
.docs-sectioncard h2 a { color: var(--ink-900); }
.docs-sectioncard p { font-size: 0.88rem; color: var(--ink-500); margin-bottom: var(--space-3); }
.docs-sectioncard ul { list-style: none; margin: 0; padding: 0; font-size: 0.88rem; }
.docs-sectioncard li { margin-bottom: 3px; }

/* --------------------------------------------------------------------- */
/* API console                                                            */
/* --------------------------------------------------------------------- */

.docs-apistats { display: flex; flex-wrap: wrap; gap: var(--space-2); }

.api-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
  margin: var(--space-6) 0 var(--space-5);
  padding: var(--space-3) var(--space-4);
  background: var(--paper);
  border: 1px solid var(--ink-200);
  border-radius: var(--radius);
  position: sticky;
  top: calc(var(--header-h) + var(--space-2));
  z-index: 20;
  box-shadow: var(--shadow-xs);
}
.api-toolbar input[type="search"] { flex: 1 1 220px; width: auto; }
.api-toolbar .switch { font-size: 0.85rem; color: var(--ink-500); white-space: nowrap; }

.api-group { margin-bottom: var(--space-6); }
.api-group__title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--ink-400);
  font-weight: 700;
  margin-bottom: var(--space-3);
}

.api-route {
  background: var(--paper);
  border: 1px solid var(--ink-200);
  border-radius: var(--radius);
  padding: var(--space-4);
  margin-bottom: var(--space-3);
  box-shadow: var(--shadow-xs);
}
.api-route--live { border-left: 3px solid var(--accent); }

.api-route__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}
.api-methods { display: inline-flex; gap: 4px; flex-wrap: wrap; }
.api-method {
  display: inline-block;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  background: var(--ink-100);
  color: var(--ink-500);
}
.api-method--get { background: var(--accent-soft); color: #2a41d8; }
.api-method--post { background: var(--success-soft); color: var(--success); }
.api-method--put, .api-method--patch { background: var(--warn-soft); color: var(--warn); }
.api-method--delete { background: var(--danger-soft); color: var(--danger); }

.api-route__rule {
  font-family: var(--font-mono);
  font-size: 0.9rem;
  color: var(--ink-900);
  font-weight: 600;
  overflow-wrap: anywhere;
}
.api-route__endpoint {
  margin-left: auto;
  font-size: 0.76rem;
  color: var(--ink-400);
  font-family: var(--font-mono);
}
.api-route__summary { margin: var(--space-2) 0 0; font-size: 0.88rem; color: var(--ink-500); }
.api-route__summary--none { color: var(--ink-300); font-style: italic; }

.api-try { margin-top: var(--space-3); }
.api-try > summary {
  cursor: pointer;
  display: inline-block;
  font-size: 0.82rem;
  font-weight: 620;
  color: var(--accent);
  padding: 4px 0;
}
.api-try > summary:hover { color: #2a41d8; }

.api-try__form {
  margin-top: var(--space-3);
  padding: var(--space-4);
  background: var(--ink-050);
  border-radius: var(--radius);
}
.api-try__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}
.api-try__grid .field--wide { grid-column: 1 / -1; }
.api-try__body { margin-bottom: var(--space-3); }
.api-try__body textarea { min-height: 90px; background: var(--paper); }
.api-try__url {
  font-size: 0.8rem;
  color: var(--ink-500);
  overflow-wrap: anywhere;
}

.api-result { margin-top: var(--space-3); }
.api-result__meta {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-bottom: var(--space-2);
}
.api-result__timing { font-size: 0.78rem; color: var(--ink-400); }
.api-result__body {
  margin: 0;
  padding: var(--space-4);
  background: var(--ink-900);
  color: #e6e9f0;
  border-radius: var(--radius);
  font-size: 0.82rem;
  line-height: 1.55;
  max-height: 420px;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}
.api-result__body code { white-space: pre; }

.api-empty {
  padding: var(--space-6);
  text-align: center;
  color: var(--ink-400);
  border: 1px dashed var(--ink-200);
  border-radius: var(--radius);
}

/* --------------------------------------------------------------------- */
/* Phones                                                                 */
/* --------------------------------------------------------------------- */

@media (max-width: 900px) {
  .docs-layout { grid-template-columns: 1fr; gap: var(--space-4); }

  .docs-navtoggle { display: inline-flex; width: 100%; justify-content: center; }

  .docs-side {
    display: none;
    position: static;
    max-height: none;
    overflow: visible;
    margin-top: var(--space-3);
    padding: var(--space-4);
    background: var(--paper);
    border: 1px solid var(--ink-200);
    border-radius: var(--radius);
  }
  .docs-side.is-open { display: block; }

  .doc-prose { max-width: none; font-size: 0.97rem; }
  .doc-prose h2 { margin-top: var(--space-6); }

  .api-toolbar { position: static; }
  .api-route__endpoint { margin-left: 0; width: 100%; }
  .api-try__grid { grid-template-columns: 1fr; }
}

@media (max-width: 420px) {
  .doc-prose pre { padding: var(--space-3); font-size: 0.8rem; }
  .doc-prose th, .doc-prose td { padding: var(--space-2) var(--space-3); }
  .docs-sectioncard { padding: var(--space-4); }
  .api-route { padding: var(--space-3); }
}

/* ==========================================================================
   Syntax highlighting (Pygments, "friendly"-derived, tuned to the palette)
   ========================================================================== */

.codehilite .hll { background-color: #fdf2dd; }
.codehilite .c, .codehilite .ch, .codehilite .cm, .codehilite .c1, .codehilite .cs { color: #7d8896; font-style: italic; }
.codehilite .cp, .codehilite .cpf { color: #9a6700; }
.codehilite .err { color: var(--danger); }
.codehilite .k, .codehilite .kc, .codehilite .kd, .codehilite .kn, .codehilite .kp, .codehilite .kr { color: #0550ae; font-weight: 600; }
.codehilite .kt { color: #953800; }
.codehilite .o, .codehilite .ow { color: #24292f; }
.codehilite .p { color: #24292f; }
.codehilite .n { color: #24292f; }
.codehilite .na { color: #0550ae; }
.codehilite .nb, .codehilite .bp { color: #0550ae; }
.codehilite .nc { color: #953800; font-weight: 600; }
.codehilite .no { color: #0550ae; }
.codehilite .nd { color: #8250df; }
.codehilite .ne { color: #cf222e; font-weight: 600; }
.codehilite .nf, .codehilite .fm { color: #8250df; font-weight: 600; }
.codehilite .ni { color: #6639ba; }
.codehilite .nl { color: #0550ae; }
.codehilite .nn { color: #953800; }
.codehilite .nt { color: #116329; }
.codehilite .nv, .codehilite .vc, .codehilite .vg, .codehilite .vi, .codehilite .vm { color: #953800; }
.codehilite .s, .codehilite .s1, .codehilite .s2, .codehilite .sa, .codehilite .sb,
.codehilite .sc, .codehilite .dl, .codehilite .sd, .codehilite .se, .codehilite .sh,
.codehilite .si, .codehilite .sx, .codehilite .ss { color: #0a3069; }
.codehilite .sr { color: #116329; }
.codehilite .m, .codehilite .mb, .codehilite .mf, .codehilite .mh, .codehilite .mi,
.codehilite .il, .codehilite .mo { color: #0550ae; }
.codehilite .gd { color: #82071e; background-color: #ffebe9; }
.codehilite .gi { color: #116329; background-color: #dafbe1; }
.codehilite .ge { font-style: italic; }
.codehilite .gs { font-weight: 600; }
.codehilite .gh, .codehilite .gu { color: #0550ae; font-weight: 600; }
.codehilite .gp { color: #7d8896; }
.codehilite .gr { color: #cf222e; }
.codehilite .gt { color: #cf222e; }
.codehilite .w { color: transparent; }