/* The API documentation page (/api): a sticky section list, prose, and code samples beside it on wide screens. */
.api-page { --max: 1380px; --code-bg: #060811; --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace; }
.api-page code { font-family: var(--mono); font-size: .86em; }

.api-hero { max-width: 820px; padding-bottom: 8px; }
.hero-links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }

/* ------------------------------------------------------------------ layout */
.docs { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 56px; margin-top: clamp(40px, 7vh, 72px); }
.docs-nav { position: sticky; top: 24px; align-self: start; display: flex; flex-direction: column; gap: 2px; max-height: calc(100vh - 48px); overflow-y: auto; padding: 4px 0 24px; font-size: 14.5px; }
.docs-nav .nav-group { margin: 18px 0 6px; font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); font-weight: 500; }
.docs-nav .nav-group:first-child { margin-top: 0; }
.docs-nav a { position: relative; padding: 6px 0 6px 14px; color: var(--fg-2); text-decoration: none; border-radius: 6px; transition: color .15s; }
.docs-nav a::before { content: ""; position: absolute; left: 0; top: 7px; bottom: 7px; width: 2px; border-radius: 2px; background: var(--line); transition: background .15s; }
.docs-nav a:hover { color: var(--fg); }
.docs-nav a[aria-current="true"] { color: var(--fg); }
.docs-nav a[aria-current="true"]::before { background: linear-gradient(180deg, #34bae9, #ff3fa6 55%, #f2a64f); }

.docs-body { min-width: 0; }
.doc-sec { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: 44px; padding: 56px 0; border-top: 1px solid var(--line); scroll-margin-top: 16px; }
.doc-sec:first-child { border-top: 0; padding-top: 0; }
.doc-sec > .prose.wide { grid-column: 1 / -1; max-width: 860px; }
.code-col { min-width: 0; display: flex; flex-direction: column; gap: 14px; }
@media (min-width: 1181px) { .code-col { position: sticky; top: 24px; align-self: start; max-height: calc(100vh - 48px); overflow-y: auto; scrollbar-width: thin; } }

/* ------------------------------------------------------------------ prose */
.prose { min-width: 0; display: flex; flex-direction: column; gap: 14px; color: var(--fg-2); font-size: 16px; line-height: 1.62; }
.prose h2 { font-size: clamp(36px, 3.6vw, 48px); color: var(--fg); margin-bottom: 4px; }
.prose h3 { margin-top: 16px; color: var(--fg); font-size: 17px; }
.prose strong { color: var(--fg); font-weight: 600; }
.prose a { color: var(--fg); }
.prose a:hover { color: var(--gold-2); }
.prose :not(pre) > code { padding: .12em .4em; border-radius: 6px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.08); color: var(--fg); white-space: nowrap; }
.prose code.block { display: inline-block; padding: 10px 14px; border-radius: 10px; white-space: normal; overflow-wrap: anywhere; }
.prose ol, .prose ul { margin: 0; padding-left: 1.3em; display: flex; flex-direction: column; gap: 8px; }
.prose .note { padding: 14px 16px; border-radius: 14px; border: 1px solid rgba(242,166,79,.35); background: rgba(242,166,79,.07); color: var(--fg); font-size: 15px; }
.prose .small { font-size: 14px; }

.steps-list { counter-reset: st; list-style: none; padding-left: 0 !important; }
.steps-list > li { counter-increment: st; position: relative; padding-left: 38px; }
.steps-list > li::before { content: counter(st); position: absolute; left: 0; top: .05em; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font: 600 12.5px/1 var(--ui); color: var(--fg); background: rgba(255,255,255,.07); border: 1px solid var(--line-2); }
.steps-list.big > li { padding-top: 2px; }

.facts-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; margin-top: 10px; border-radius: 16px; overflow: hidden; border: 1px solid var(--line); background: var(--line); }
.facts-row > div { padding: 14px 16px; background: rgba(9,12,23,.92); display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.facts-row b { font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); font-weight: 500; }
.facts-row span { color: var(--fg); font-size: 14.5px; overflow-wrap: anywhere; }
.facts-row span code { background: none !important; border: 0 !important; padding: 0 !important; white-space: normal !important; }

/* tables */
.ptable { width: 100%; border-collapse: collapse; font-size: 14.5px; line-height: 1.5; }
.ptable th, .ptable td { text-align: left; vertical-align: top; padding: 10px 12px 10px 0; border-bottom: 1px solid var(--line); }
.ptable thead th { color: var(--muted); font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; font-weight: 500; }
.ptable tbody th { color: var(--fg); font-weight: 600; white-space: nowrap; }
.ptable.fields tbody th { width: 1%; }
.ptable.codes td:first-child { color: var(--fg); font-weight: 600; font-variant-numeric: tabular-nums; }
.ptable.codes td:nth-child(2) { display: flex; flex-wrap: wrap; gap: 5px; }
.ptable.codes td:nth-child(2) code { white-space: nowrap; }

/* statuses and verdicts */
.status-line { list-style: none; padding: 0 !important; display: flex !important; flex-direction: row !important; flex-wrap: wrap; gap: 6px !important; align-items: center; }
.status-line li { display: flex; align-items: center; gap: 6px; }
.status-line li + li::before { content: "→"; color: var(--muted); }
.status-line li.alt::before { content: "or"; font-size: 13px; }
.verdict-table { list-style: none; padding: 0 !important; gap: 0 !important; border-top: 1px solid var(--line); }
.verdict-table li { display: grid; grid-template-columns: 196px 64px minmax(0, 1fr); gap: 12px; align-items: baseline; padding: 12px 0; border-bottom: 1px solid var(--line); }
.verdict-table .pill { justify-self: start; }
.verdict-table code { color: var(--muted) !important; background: none !important; border: 0 !important; padding: 0 !important; }
.verdict-table p { font-size: 15px; }

/* endpoints */
.ep-list { list-style: none; padding: 0 !important; gap: 0 !important; border-top: 1px solid var(--line); }
.ep-list li { display: grid; grid-template-columns: 66px minmax(0, max-content) minmax(0, 1fr); gap: 14px; align-items: center; padding: 11px 0; border-bottom: 1px solid var(--line); }
.ep-list li > code { background: none !important; border: 0 !important; padding: 0 !important; color: var(--fg) !important; white-space: normal !important; overflow-wrap: anywhere; }
.ep-list li > span:last-child { color: var(--muted); font-size: 14.5px; }
.ep-list em { font-style: normal; font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; margin-left: 6px; color: var(--clear); }
.m { display: inline-flex; justify-content: center; min-width: 58px; padding: 3px 0; border-radius: 6px; font: 700 11px/1.3 var(--mono); letter-spacing: .04em; border: 1px solid currentColor; }
.m.get { color: var(--clear); } .m.post { color: var(--look); } .m.put { color: var(--version); } .m.del { color: var(--shared); }

.ticks { list-style: none; padding-left: 0 !important; }
.ticks li { position: relative; padding-left: 20px; }
.ticks li::before { content: ""; position: absolute; left: 2px; top: .72em; width: 6px; height: 6px; border-radius: 50%; background: var(--film); }

.changelog { list-style: none; padding: 0 !important; gap: 0 !important; }
.changelog li { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 18px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.changelog time { color: var(--fg); font-weight: 600; font-size: 15px; }

/* ------------------------------------------------------------------ code samples */
.sample { position: relative; border-radius: 16px; background: var(--code-bg); border: 1px solid rgba(255,255,255,.1); box-shadow: 0 24px 60px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.06); overflow: hidden; min-width: 0; }
.sample::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: linear-gradient(90deg, rgba(52,186,233,0), rgba(52,186,233,.6) 25%, rgba(255,63,166,.55) 55%, rgba(242,166,79,.5) 80%, rgba(242,166,79,0)); }
.sample-head { display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 16px; border-bottom: 1px solid rgba(255,255,255,.07); background: rgba(255,255,255,.025); min-height: 44px; }
.sample-title { font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.sample-head .sp { flex: 1; }
.sample-tabs { display: flex; gap: 2px; padding: 2px; border-radius: 999px; background: rgba(255,255,255,.05); }
.sample-tabs button { border: 0; background: none; padding: 4px 11px; border-radius: 999px; font-size: 12.5px; font-weight: 500; color: var(--muted); transition: color .15s, background .15s; }
.sample-tabs button:hover { color: var(--fg); }
.sample-tabs button[aria-selected="true"] { background: rgba(255,255,255,.12); color: var(--fg); }
.copy { flex: none; border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.04); color: var(--fg-2); border-radius: 999px; padding: 4px 11px; font-size: 12.5px; font-weight: 500; transition: background .15s, color .15s, border-color .15s; }
.copy:hover { background: rgba(255,255,255,.1); color: var(--fg); }
.copy.done { color: var(--clear); border-color: rgba(52,186,233,.45); }
.sample pre { margin: 0; padding: 16px 18px 18px; overflow-x: auto; font: 400 13px/1.62 var(--mono); color: #d9dbe4; tab-size: 2; scrollbar-width: thin; }
.sample pre code { font-size: inherit; font-family: inherit; }
.sample.ready pre[hidden] { display: none; }
.sample.response { background: rgba(6,8,17,.7); box-shadow: none; }
.sample.response::before { display: none; }
.sample.response pre { max-height: 460px; }

/* tokens (assets/api-docs.js) */
.t-str { color: #9ee6c5; }
.t-key { color: #8fd3f4; }
.t-num { color: #f7c27a; }
.t-kw { color: #c7b4ff; }
.t-com { color: #6b6f80; font-style: italic; }
.t-flag { color: #f2a64f; }
.t-var { color: #ff8fc8; }
.t-fn { color: #f4f4f2; }
.t-lit { color: #ff8fc8; }

/* ------------------------------------------------------------------ narrower screens */
@media (max-width: 1180px) {
  .doc-sec { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .doc-sec > .prose, .doc-sec > .code-col { max-width: 780px; }
}
@media (max-width: 900px) {
  .docs { grid-template-columns: minmax(0, 1fr); gap: 0; margin-top: 28px; }
  .docs-nav { position: sticky; top: 0; z-index: 5; flex-direction: row; gap: 4px; max-height: none; overflow-x: auto; overflow-y: hidden; padding: 10px var(--gutter); margin: 0 calc(-1 * var(--gutter)) 18px; background: rgba(7,10,20,.86); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); scrollbar-width: none; }
  .docs-nav::-webkit-scrollbar { display: none; }
  .docs-nav .nav-group { display: none; }
  .docs-nav a { flex: none; padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px; font-size: 13.5px; white-space: nowrap; }
  .docs-nav a::before { display: none; }
  .docs-nav a[aria-current="true"] { border-color: var(--line-2); background: rgba(255,255,255,.08); }
  .doc-sec { padding: 40px 0; scroll-margin-top: 64px; }
}
@media (max-width: 640px) {
  .prose { font-size: 15.5px; }
  .facts-row { grid-template-columns: minmax(0, 1fr); }
  .verdict-table li { grid-template-columns: minmax(0, 1fr) auto; gap: 6px 10px; }
  .verdict-table li p { grid-column: 1 / -1; }
  .ep-list li { grid-template-columns: 62px minmax(0, 1fr); gap: 4px 12px; }
  .ep-list li > span:last-child { grid-column: 2; }
  .changelog li { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .ptable { font-size: 14px; }
  .ptable.codes thead { display: none; }
  .ptable.codes tr { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 4px 10px; padding: 10px 0; border-bottom: 1px solid var(--line); }
  .ptable.codes td { border: 0; padding: 0; }
  .ptable.codes td:last-child { grid-column: 2; color: var(--muted); }
  .sample:has(.sample-tabs) .sample-title { display: none; }
  .sample:has(.sample-tabs) .sp { display: none; }
  .sample-head { justify-content: space-between; padding-left: 8px; }
  .sample:not(:has(.sample-tabs)) .sample-head { padding-left: 14px; }
  .sample pre { font-size: 12.5px; padding: 14px 14px 16px; }
}
@media (prefers-reduced-motion: reduce) { .docs-nav a, .sample-tabs button, .copy { transition: none; } }