/* Documentacao da API publica. Prefixo: docs-. Depende de site.css. */

.docs-head { padding-block: var(--space-8) var(--space-7); border-bottom: 1px solid var(--line); }
.docs-head__title { font-size: clamp(2.25rem, 4.2vw, 3.5rem); max-width: 18ch; }
.docs-head__lead { margin-top: var(--space-4); }
.docs-head__actions { margin-top: var(--space-6); }

.docs-layout {
  display: grid;
  grid-template-columns: minmax(0, 16rem) minmax(0, 1fr);
  gap: var(--space-6) var(--space-9);
  align-items: start;
}

.docs-toc {
  position: sticky;
  top: calc(var(--nav-h) + var(--space-5));
  max-height: calc(100dvh - var(--nav-h) - var(--space-7));
  overflow-y: auto;
  overscroll-behavior: contain;
}
.docs-toc__title {
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--navy-700);
  margin-bottom: var(--space-3);
}
.docs-toc__list { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--line); }
.docs-toc__link {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0.5rem var(--space-3) 0.5rem calc(var(--space-3) - 2px);
  margin-left: -1px;
  border-left: 3px solid transparent;
  font-size: 0.9375rem;
  line-height: 1.35;
  color: var(--ink-700);
  text-decoration: none;
}
.docs-toc__link:hover { color: var(--navy-700); background: rgb(24 61 138 / 0.05); }

.docs-body { min-width: 0; font-size: 1.0625rem; line-height: 1.7; color: var(--ink-700); }
.docs-section + .docs-section,
.docs-endpoint + .docs-endpoint {
  margin-top: var(--space-8);
  padding-top: var(--space-7);
  border-top: 1px solid var(--line);
}
.docs-section > h2 {
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  line-height: 1.2;
  letter-spacing: -0.02em;
  max-width: 30ch;
}
.docs-section > h2 + * { margin-top: var(--space-4); }
.docs-section > p, .docs-section > ul { max-width: 65ch; }
.docs-section > p + p,
.docs-section > p + ul,
.docs-section > ul + p { margin-top: var(--space-4); }
.docs-section ul { list-style: disc; padding-left: 1.25rem; }
.docs-section li + li { margin-top: var(--space-2); }
.docs-section a { text-decoration-line: underline; overflow-wrap: anywhere; }
.docs-section code, .docs-endpoint code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 0.05em 0.35em;
  overflow-wrap: anywhere;
}

.docs-endpoint > h3 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  font-size: 1.1875rem;
  line-height: 1.35;
}
.docs-endpoint > h3 code { font-size: 1em; }
.docs-endpoint > p { max-width: 65ch; margin-top: var(--space-3); }

.docs-method {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  padding: 0 0.65rem;
  border-radius: var(--radius-pill);
  background: var(--navy-700);
  color: var(--surface);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
}
.docs-method--post { background: var(--orange-600); }

.docs-label {
  margin-top: var(--space-5);
  margin-bottom: var(--space-2);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--navy-700);
}

.docs-code {
  margin: 0;
  max-width: 100%;
  overflow-x: auto;
  padding: var(--space-4);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  line-height: 1.55;
  color: var(--navy-900);
  white-space: pre;
}
.docs-code code {
  font-family: inherit;
  font-size: inherit;
  background: transparent;
  border: 0;
  padding: 0;
  border-radius: 0;
}

@media (max-width: 860px) {
  .docs-layout { grid-template-columns: minmax(0, 1fr); }
  .docs-toc { position: static; max-height: none; }
  .docs-toc__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-left: 0; }
  .docs-toc__link { margin-left: 0; border-left: 0; min-height: 44px; }
}

@media (max-width: 520px) {
  .docs-toc__list { grid-template-columns: minmax(0, 1fr); }
}