/* docs.css: the API reference (/docs). Owner: portal. Tokens only; layout from app.css section 22. */

/* One right edge for the whole column: the hero card, section rules, tables and code blocks all stop at 52rem
   (prose stays at its narrower reading measure, 46rem). */
.docs-content { max-width: 52rem; }
.docs-content > * + * { margin-top: 0; }
.docs-content > .docs-toc-mobile { margin-bottom: 1.5rem; }
.docs-content > section { display: grid; gap: 1.1rem; scroll-margin-top: 0; } /* html scroll-padding already clears the header */
.docs-content > section > * { min-width: 0; }
.docs-content > header + section { margin-top: 3rem; padding-top: 3rem; border-top: var(--hairline); }

/* ---- Hero ------------------------------------------------------------------ */
.docs-hero { display: grid; gap: 1rem; }
.docs-hero .lead { max-width: 44rem; }
.docs-connect { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1.3fr) minmax(0, 1.1fr); margin-top: 0.75rem; background: var(--surface); border: var(--hairline); border-radius: var(--radius-3); box-shadow: var(--shadow-1); }
.docs-connect-item { display: grid; gap: 0.35rem; align-content: start; padding: 0.9rem 1.1rem 1rem; min-width: 0; }
.docs-connect-item + .docs-connect-item { border-left: var(--hairline); }
.docs-connect-item .caps { color: var(--text-muted); }
.docs-connect-value { display: flex; align-items: center; gap: 0.3rem; min-width: 0; min-height: 2.25rem; }
.docs-connect-value code { overflow-wrap: break-word; min-width: 0; } /* the URL breaks at the <wbr> after each slash */
.docs-connect-value .accent { color: var(--accent); }
.docs-personal { display: flex; align-items: flex-start; gap: 0.5rem; font-size: var(--text-sm); color: var(--text-muted); }
.docs-personal .icon { --icon-size: 1rem; margin-top: 0.15rem; color: var(--accent); }
.docs-personal strong { color: var(--text); }
@media (max-width: 1100px) {
  .docs-connect { grid-template-columns: minmax(0, 1fr); }
  .docs-connect-item + .docs-connect-item { border-left: 0; border-top: var(--hairline); }
}

/* ---- Headings, notes, endpoints --------------------------------------------- */
.docs-h2 { font-size: var(--text-2xl); line-height: 1.05; letter-spacing: -0.026em; font-weight: 380; }
.docs-h3 { margin-top: 1rem; font-size: 1.375rem; line-height: 1.2; letter-spacing: -0.015em; font-weight: 420; scroll-margin-top: 0; }
.docs-content .prose { max-width: 46rem; font-size: var(--text-base); }
.docs-content .prose code, .docs-note code, .docs-table code, .docs-steps code, .docs-practices code { font-size: 0.85em; white-space: nowrap; }
/* Inline code stays whole ("X-Cost", "invoice-clerk" never split at their hyphen). URLs, long ids and long snippets
   carry .code-wrap: they may wrap (at the <wbr> after each slash first) so a phone never scrolls sideways. */
.docs-content code.code-wrap { white-space: normal; overflow-wrap: anywhere; }
.docs-note { max-width: 46rem; font-size: var(--text-sm); color: var(--text-muted); }
.docs-endpoint { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; font-size: var(--text-sm); }
.docs-endpoint code { font-size: 0.875rem; overflow-wrap: anywhere; }
.method {
  display: inline-block;
  padding: 0.12rem 0.45rem;
  border-radius: var(--radius-1);
  background: var(--accent-soft);
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.06em;
  line-height: 1.4;
}
.method-get { background: var(--info-soft); color: var(--info); }

/* ---- Code and tables ----------------------------------------------------------- */
.docs-content .code-block { max-width: 52rem; }
.docs-pair { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr)); align-items: start; max-width: 52rem; }
.docs-pair .code-block { max-width: none; }
.docs-table-wrap { max-width: 52rem; }
.docs-table td { vertical-align: top; line-height: 1.5; }
.docs-table td:first-child { white-space: nowrap; }
.docs-table td .link { white-space: nowrap; }
.errors-table td:nth-child(2) { white-space: nowrap; }
.params-table td:nth-child(2) { white-space: nowrap; }
.docs-table a.link { text-decoration: underline; text-decoration-color: var(--border-input); text-underline-offset: 0.22em; }
.docs-table a.link:hover { text-decoration-color: var(--accent); }
.docs-wrap pre { white-space: pre-wrap; overflow-wrap: anywhere; }
.errors-table td:nth-child(3), .errors-table td:nth-child(4) { min-width: 12rem; }
.status-code { font-family: var(--font-mono); font-weight: 500; color: var(--text); }
.req-tag { margin-left: 0.35rem; font-family: var(--font-mono); font-size: var(--text-xs); color: var(--accent); }

/* ---- Steps and practices ----------------------------------------------------------- */
.docs-steps { counter-reset: step; list-style: none; margin: 0; padding: 0; display: grid; gap: 0.75rem; max-width: 46rem; }
.docs-steps > li { counter-increment: step; position: relative; padding-left: 2.6rem; line-height: 1.55; }
.docs-steps > li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: -0.05rem;
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border: 1px solid var(--rule);
  border-radius: 50%;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 500;
}
.docs-practices { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; max-width: 52rem; }
.docs-practices > li { display: flex; gap: 0.75rem; align-items: flex-start; padding: 0.9rem 1rem; background: var(--surface); border: var(--hairline); border-radius: var(--radius-3); font-size: var(--text-sm); line-height: 1.5; }
.docs-practices > li > .icon { flex: none; --icon-size: 1.1rem; margin-top: 0.1rem; color: var(--accent); }
.docs-practices strong { font-weight: 620; }
@media (max-width: 760px) { .docs-practices { grid-template-columns: minmax(0, 1fr); } }

/* ---- Billing example ------------------------------------------------------------------ */
.docs-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 20rem); gap: 1.5rem 2.5rem; align-items: start; max-width: 52rem; }
.docs-receipt { display: grid; gap: 0.6rem; justify-items: start; }
.docs-receipt .receipt { width: 100%; }
@media (max-width: 900px) { .docs-split { grid-template-columns: minmax(0, 1fr); } }

/* ---- Foot ----------------------------------------------------------------------------- */
.docs-foot { display: grid; gap: 1rem; margin-top: 4rem; padding-top: 1.5rem; border-top: var(--hairline); font-size: var(--text-sm); color: var(--text-muted); }

/* ---- Heading anchors (added by docs.js) ------------------------------------------------ */
.docs-anchor { margin-left: 0.45rem; font-family: var(--font-mono); font-size: 0.6em; font-weight: 400; color: var(--text-subtle); text-decoration: none; opacity: 0; transition: opacity var(--dur-2) var(--ease-out); vertical-align: 0.15em; }
h2:hover > .docs-anchor, h3:hover > .docs-anchor, .docs-anchor:focus-visible { opacity: 1; }
.docs-anchor:hover { color: var(--accent); }
@media (hover: none) { .docs-anchor { opacity: 0.55; } }

/* ---- Small screens ------------------------------------------------------------------------ */
@media (max-width: 560px) {
  .docs-h2 { font-size: 2rem; }
}
/* Reference tables stack on phones: one block per row, first cell as its title. */
@media (max-width: 640px) {
  .docs-table-wrap > .docs-table { min-width: 0; }
  .docs-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .docs-table, .docs-table tbody, .docs-table tr, .docs-table td { display: block; width: 100%; }
  .docs-table tr { padding: 0.8rem 0; border-bottom: var(--hairline); }
  .docs-table tbody tr:first-child { border-top: var(--hairline-ink); }
  .docs-table td, .docs-table td:first-child, .docs-table td:last-child { padding: 0.1rem 0; border: 0; white-space: normal; text-align: left; min-width: 0; }
  .docs-table td:first-child { padding-bottom: 0.35rem; font-weight: 600; }
  .docs-table td:nth-child(2):not(:last-child) { font-size: var(--text-sm); color: var(--text-muted); }
  .docs-table td.num { font-family: var(--font-mono); }
  .docs-table td:empty { display: none; }
  .errors-table td:nth-child(4) { margin-top: 0.3rem; }
  .errors-table td:nth-child(4)::before { content: "What to do: "; font-weight: 620; }
}