/* The API docs. They read like the privacy page (privacy.css) and add what a reference needs: code, tables of
   fields and errors, and one block per endpoint. Every colour is a token, so dark mode follows the page. */
#home.api-doc { --doc-read: 680px; }
#home.api-doc .doc-date a { color: inherit; text-underline-offset: 3px; }
#home.api-doc .doc-section h3 { margin: 26px 0 10px; color: var(--ink); font: 600 16px/1.4 var(--sans); letter-spacing: -.012em; }
#home.api-doc .doc-section a { color: var(--ink); text-underline-offset: 3px; }
#home.api-doc .doc-section a:hover { color: var(--signal-text); }
#home.api-doc .doc-section p + pre, #home.api-doc .doc-section pre + p, #home.api-doc .doc-section p + .doc-table,
#home.api-doc .doc-section .doc-table + p, #home.api-doc .doc-section p + .doc-fields, #home.api-doc .doc-section pre + .doc-fields { margin-top: 14px; }

/* Code: inline in the data face, blocks on the second paper, scrolling inside themselves rather than the page. */
#home.api-doc code { font: 500 .88em/1.5 var(--data); overflow-wrap: anywhere; }
#home.api-doc pre { max-width: var(--doc-read); margin: 0; padding: 14px 16px; overflow-x: auto; background: var(--paper-2); border: 1px solid var(--line); border-radius: 8px; color: var(--ink); tab-size: 2; }
#home.api-doc pre code { display: block; font: 500 13px/1.6 var(--data); white-space: pre; overflow-wrap: normal; }

/* Tables: hairline rows like the sections themselves. */
#home.api-doc .doc-table { max-width: var(--doc-read); }
#home.api-doc .doc-table table { width: 100%; border-collapse: collapse; font: 400 14.5px/1.55 var(--sans); color: var(--ink-2); }
#home.api-doc .doc-table th { padding: 0 12px 8px 0; text-align: left; color: var(--ink-3); font: 600 12.5px/1.4 var(--sans); letter-spacing: -.004em; border-bottom: 1px solid var(--line-2); }
#home.api-doc .doc-table td { padding: 10px 12px 10px 0; vertical-align: top; border-bottom: 1px solid var(--line); }
#home.api-doc .doc-table td:first-child { color: var(--ink); white-space: nowrap; }
#home.api-doc .doc-errors td:nth-child(2) { font: 500 13px/1.7 var(--data); font-variant-numeric: tabular-nums; white-space: nowrap; }
#home.api-doc .doc-errors tr { scroll-margin-top: 112px; }
#home.api-doc .doc-errors tr:target td { background: color-mix(in srgb, var(--signal) 9%, transparent); }
#home.api-doc .doc-errors tr:target td:first-child { box-shadow: inset 2px 0 0 var(--signal); padding-left: 10px; }

/* Fields: a name, then what it means. */
#home.api-doc .doc-fields { max-width: var(--doc-read); margin: 0; display: grid; grid-template-columns: minmax(0, 13em) minmax(0, 1fr); gap: 0 18px; font: 400 15px/1.6 var(--sans); }
#home.api-doc .doc-fields dt, #home.api-doc .doc-fields dd { margin: 0; padding: 9px 0; border-top: 1px solid var(--line); }
#home.api-doc .doc-fields dt { color: var(--ink); }
#home.api-doc .doc-fields dt small { display: block; margin-top: 2px; color: var(--ink-3); font: 500 12px/1.4 var(--sans); }
#home.api-doc .doc-fields dd { color: var(--ink-2); }

/* Endpoints: each its own block under the section's heading, its method in the data face. */
#home.api-doc .doc-endpoint { margin-top: 30px; scroll-margin-top: 112px; }
#home.api-doc .doc-endpoint h3 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin-top: 0; }
#home.api-doc .doc-endpoint h3 code { font-size: 15px; font-weight: 600; }
#home.api-doc .doc-method { display: inline-block; min-width: 4.4em; padding: 1px 8px; border: 1px solid var(--line-2); border-radius: 6px; color: var(--ink-2); font: 600 12px/1.6 var(--data); letter-spacing: .02em; text-align: center; }
#home.api-doc .doc-endpoint:target h3 code { color: var(--signal-text); }

@media (max-width: 640px) {
  #home.api-doc .doc-fields { grid-template-columns: minmax(0, 1fr); }
  #home.api-doc .doc-fields dd { padding-top: 0; border-top: 0; }
  /* On a phone each error is a short card: its code and status on one line, then what to do. */
  #home.api-doc .doc-errors thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  #home.api-doc .doc-errors tbody, #home.api-doc .doc-errors tr { display: block; }
  #home.api-doc .doc-errors tr { padding: 10px 0; border-bottom: 1px solid var(--line); }
  #home.api-doc .doc-errors td { display: inline; padding: 0; border: 0; }
  #home.api-doc .doc-errors td:nth-child(2) { margin-left: 8px; color: var(--ink-3); }
  #home.api-doc .doc-errors td:nth-child(3) { display: block; margin-top: 4px; }
  #home.api-doc .doc-errors tr:target td:first-child { padding-left: 0; box-shadow: none; }
  #home.api-doc .doc-errors tr:target { background: color-mix(in srgb, var(--signal) 9%, transparent); }
  #home.api-doc .doc-errors tr:target td { background: none; }
  #home.api-doc pre code { font-size: 12px; }
}