/* API reference: sidebar layout and endpoint blocks. Prose, callouts and
   tables come from docs/css/doc.css. */
.api-layout {
  display: flex;
  gap: 56px;
  padding-block: clamp(40px, 6vw, 72px) clamp(72px, 9vw, 120px);
}

.api-sidebar {
  position: sticky;
  top: 88px;
  align-self: flex-start;
  flex-shrink: 0;
  width: 220px;
  max-height: calc(100vh - 112px);
  overflow-y: auto;
  padding-right: 8px;
}
.api-sidebar h4 {
  margin: 22px 0 6px;
  color: var(--ink);
  font-size: 0.875rem;
  font-weight: 700;
}
.api-sidebar h4:first-child { margin-top: 0; }
.api-sidebar a {
  display: block;
  padding: 3px 0;
  color: var(--ink-2);
  font-size: 0.9375rem;
  line-height: 1.45;
  text-decoration: none;
}
.api-sidebar a:hover { color: var(--action); }

.api-content { flex: 1; min-width: 0; max-width: 52rem; }
.api-content h2 {
  margin: 56px 0 16px;
  padding-top: 14px;
  border-top: 2px solid var(--ink);
  font-size: 1.625rem;
  letter-spacing: -0.014em;
  scroll-margin-top: 84px;
}
.api-content h2:first-of-type { margin-top: 0; }
.api-content h3 { scroll-margin-top: 84px; }

/* Endpoint block */
.endpoint {
  margin-bottom: 24px;
  overflow: hidden;
  border: 1px solid var(--rule);
  border-radius: 8px;
  background: var(--sheet);
}
.endpoint-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--rule);
  background: var(--sheet-2);
}
.method {
  flex-shrink: 0;
  min-width: 4.4em;
  padding: 2px 8px;
  border-radius: 3px;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 600;
  text-align: center;
  color: var(--ink);
}
.method-get { background: color-mix(in srgb, var(--ok) 18%, transparent); }
.method-post { background: color-mix(in srgb, var(--c-servers) 18%, transparent); }
.method-patch { background: color-mix(in srgb, var(--warn) 22%, transparent); }
.method-delete { background: color-mix(in srgb, var(--danger) 16%, transparent); }
.endpoint-path { color: var(--ink); font-family: var(--font-mono); font-size: 0.9375rem; overflow-wrap: anywhere; }
.endpoint-body { padding: 16px 18px; }
.endpoint-body p { margin: 0 0 12px; font-size: 1rem; line-height: 1.6; }
.endpoint-body p:last-child, .endpoint-body pre:last-child { margin-bottom: 0; }
.label {
  display: block;
  margin: 14px 0 6px;
  color: var(--ink-3);
  font-size: 0.875rem;
  font-weight: 700;
}
.label:first-child { margin-top: 0; }

@media (max-width: 900px) {
  .api-layout { flex-direction: column; gap: 0; }
  .api-sidebar {
    position: static;
    width: 100%;
    max-height: 240px;
    margin-bottom: 32px;
    padding: 16px;
    border: 1px solid var(--rule);
    border-radius: 8px;
    background: var(--sheet);
  }
}