/* Help, API and privacy pages: one readable column on the same wall. */

.doc {
  max-width: 46rem;
  margin: 0 auto;
  padding: clamp(1.5rem, 5vw, 4rem) var(--gutter) clamp(4rem, 8vw, 7rem);
}
.doc h1 {
  font-size: clamp(2.6rem, 6vw, 4.6rem);
  line-height: 1;
  margin-bottom: 1.2rem;
}
.doc .lead { margin: 0 0 1rem; font-size: clamp(1.1rem, 1.6vw, 1.25rem); color: var(--ink-soft); }
.doc .updated { margin: 0 0 2.5rem; font: 400 0.82rem/1.5 var(--mono); color: var(--muted); }
.doc h2 {
  margin: 3.2rem 0 1rem;
  padding-top: 1.2rem;
  border-top: 2px solid var(--ink);
  font: 600 clamp(1.7rem, 3vw, 2.3rem)/1.05 var(--display);
  font-variation-settings: "opsz" 96, "SOFT" 40, "WONK" 1;
  letter-spacing: -0.015em;
  scroll-margin-top: 1.5rem;
}
.doc h3 { margin: 2rem 0 0.6rem; font: 700 1.15rem/1.3 var(--body); }
.doc p, .doc li { color: var(--ink-soft); }
.doc strong { color: var(--ink); }
.doc a { color: var(--ink); text-decoration-color: var(--tomato); text-underline-offset: 3px; }
.doc a:hover { color: var(--tomato); }
.doc ul, .doc ol { padding-left: 1.4rem; }
.doc li { margin: 0.35rem 0; }
.doc li::marker { color: var(--tomato); }

.doc code {
  font: 0.88em var(--mono);
  padding: 0.1em 0.35em;
  border-radius: 5px;
  background: var(--wall-deep);
  color: var(--ink);
}
.doc pre {
  margin: 1rem 0 1.4rem;
  overflow-x: auto;
  padding: 1.2rem 1.4rem;
  border-radius: 14px;
  background: var(--band);
  color: #E9E3D8;
  font: 400 0.84rem/1.7 var(--mono);
}
.doc pre code { padding: 0; background: none; color: inherit; font-size: inherit; }

.doc table { width: 100%; margin: 1rem 0 1.4rem; border-collapse: collapse; font-size: 0.98rem; }
.doc th { text-align: left; font: 500 0.75rem/1.4 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); padding: 0 1rem 0.6rem 0; }
.doc td { padding: 0.7rem 1rem 0.7rem 0; border-top: 1px solid var(--rule); vertical-align: top; color: var(--ink-soft); }
.doc td:first-child { white-space: nowrap; color: var(--ink); }
.doc td code { white-space: nowrap; }

/* Short answers, one after another. */
.doc details { border-top: 1px solid var(--rule); padding: 0.9rem 0; }
.doc details:last-of-type { border-bottom: 1px solid var(--rule); }
.doc summary { cursor: pointer; font-weight: 700; color: var(--ink); list-style: none; }
.doc summary::-webkit-details-marker { display: none; }
.doc summary::before { content: "+"; display: inline-block; width: 1.4rem; color: var(--tomato); font-family: var(--mono); }
.doc details[open] summary::before { content: "−"; }
.doc details p { margin: 0.6rem 0 0 1.4rem; }

@media (max-width: 560px) {
  .doc td:first-child, .doc td code { white-space: normal; }
  .doc pre { font-size: 0.8rem; padding: 1rem; }
}