/* api.css — only the docs pages need these. Loaded after styles.css. */

main.docs { max-width: 960px; }
main.docs h1 { font-size: 1.5em; margin: 0 0 12px; }
main.docs h2 { font-size: 1.08em; margin: 30px 0 10px; }
main.docs p, main.docs li { max-width: 82ch; }
main.docs .lead { font-size: 1.02em; }
main.docs ul { padding-left: 22px; }

section.step {
  border-top: 1px solid var(--line);
  padding-top: 6px;
  margin-top: 26px;
}
section.step:first-of-type { border-top: 0; }

table.doc {
  border-collapse: collapse;
  margin: 12px 0;
  font-size: 0.88em;
  width: 100%;
  display: block;
  overflow-x: auto;
}
table.doc th, table.doc td {
  border: 1px solid var(--line);
  padding: 6px 10px;
  text-align: left;
  vertical-align: top;
}
table.doc th { background: var(--panel2); white-space: nowrap; }
table.doc code { font-size: 0.94em; }

/* --- language tabs ------------------------------------------------------- */

.codegroup {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  margin: 14px 0 18px;
  background: var(--panel);
}
.codegroup .tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  padding: 6px 6px 0;
  background: var(--panel2);
  border-bottom: 1px solid var(--line);
}
.codegroup .tab {
  font: inherit;
  font-size: 0.82em;
  cursor: pointer;
  background: transparent;
  color: var(--ink-dim);
  border: 1px solid transparent;
  border-bottom: 0;
  border-radius: 7px 7px 0 0;
  padding: 5px 11px;
}
.codegroup .tab:hover { color: var(--ink); }
.codegroup .tab.active {
  background: var(--panel);
  color: var(--accent);
  border-color: var(--line);
  margin-bottom: -1px;
  padding-bottom: 6px;
}
.codegroup pre {
  margin: 0;
  padding: 14px 16px;
  overflow-x: auto;
  font-size: 0.84em;
  line-height: 1.5;
}
.codegroup pre code { white-space: pre; }

main.docs pre.code {
  background: var(--panel2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px 14px;
  overflow-x: auto;
  font-size: 0.84em;
}