/* ============================================================
   OutcomeDev API reference
   Loaded after /styles.css and /docs/docs.css, and only by
   pages under /docs/api/. It adds the two things an API
   reference needs that the documentation section never did —
   code blocks and inline code — and nothing else. Every colour,
   radius and font comes from the variables styles.css already
   defines, so the reference follows the site theme, light and
   dark.
   ============================================================ */

/* ---------------------------------------------------------------- code */

.docs pre {
  margin: 0 0 24px;
  padding: 16px 18px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow-x: auto;
  max-width: 700px;
  /* The page-wide 16px text is right for prose and too heavy for a
     terminal transcript. */
  font-size: 13.5px;
  line-height: 22px;
  -webkit-overflow-scrolling: touch;
}

.docs pre code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace;
  font-size: inherit;
  line-height: inherit;
  color: var(--ink);
  white-space: pre;
  tab-size: 2;
}

/* Inside a paragraph, a field name or a header has to be readable as one
   token rather than as prose. */
.docs code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace;
  font-size: 0.9em;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 1px 5px;
  color: var(--ink);
  word-break: break-word;
}

/* A code block already carries its own surface and its own font size, so the
   inline treatment must not stack on top of it. */
.docs pre code {
  background: none;
  border: 0;
  border-radius: 0;
  padding: 0;
}

[data-theme="dark"] .docs pre,
[data-theme="dark"] .docs code { background: #181818; border-color: var(--line); }
[data-theme="dark"] .docs pre code { background: none; border-color: transparent; }

/* A block that is the shape of a response rather than something to run. */
.docs pre + h2,
.docs pre + h3 { margin-top: 32px; }

/* ---------------------------------------------------------------- layout */

/* The reference has wider tables than the prose pages — a method, a path, a
   status and a meaning do not fit in 700px once the rail is out of the way. */
.docs-table.wide { max-width: 860px; }
.docs-table code { font-size: 12.5px; }

@media (max-width: 700px) {
  .docs pre { font-size: 12.5px; line-height: 20px; padding: 14px; }
}