/* The API reference (/docs/api/, scripts/api.mjs), in Learn's design. The markup is veragen.ai's (its api-docs.py), so
   the class names are its; every rule here is scoped under .apiref so none of them reaches another Learn page, and the
   colours are Learn's tokens (learn.css), light and dark. Loaded only on /docs/api/ pages, after learn.css.
   Three columns: the reference's menu, the words, and the code for the section in view. THE CODE COLUMN STICKS: it must
   be align-self:start in a grid with no overflow on any ancestor, or position:sticky silently does nothing. */
.apiref {
  --m-get: #0B7A4B; --m-get-bg: #E2F6EC; --m-post: #0B5CC0; --m-post-bg: #E3EEFC;
  --m-patch: #8A5A00; --m-patch-bg: #FDF0D8; --m-del: #B4233F; --m-del-bg: #FDE6EB;
  --scope: #5B3FC4; --scope-bg: #F1EDFF;
  --code-bg: #0B1626; --code-pre: #060B14; --code-ink: #E6EDF7; --code-line: rgba(160, 196, 208, .14);
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .apiref {
  --m-get: #7EE2B0; --m-get-bg: rgba(18, 185, 129, .16); --m-post: #8CC2FF; --m-post-bg: rgba(65, 153, 254, .18);
  --m-patch: #FFD28A; --m-patch-bg: rgba(245, 158, 11, .16); --m-del: #FF9DB0; --m-del-bg: rgba(244, 63, 107, .16);
  --scope: #CDB9FF; --scope-bg: rgba(124, 92, 255, .18) } }
:root[data-theme="dark"] .apiref {
  --m-get: #7EE2B0; --m-get-bg: rgba(18, 185, 129, .16); --m-post: #8CC2FF; --m-post-bg: rgba(65, 153, 254, .18);
  --m-patch: #FFD28A; --m-patch-bg: rgba(245, 158, 11, .16); --m-del: #FF9DB0; --m-del-bg: rgba(244, 63, 107, .16);
  --scope: #CDB9FF; --scope-bg: rgba(124, 92, 255, .18) }

.apiref section.api { padding: 18px 0 64px }
.apiref .api-shell { display: grid; grid-template-columns: 250px minmax(0, 1fr) 440px; gap: 36px; max-width: 1440px; margin: 0 auto; padding: 0 24px; align-items: start }
/* The wrapper is the grid item, so IT is what sticks (a sticky child of a short wrapper goes nowhere). */
.apiref .api-navwrap { position: sticky; top: 76px; align-self: start; max-height: calc(100vh - 96px); overflow: auto }
.apiref .api-navwrap > summary { display: none }
.apiref .api-nav { font-size: .9rem; padding-right: 6px }
.apiref .api-search { width: 100%; font: 400 .92rem/1 var(--sans); padding: 10px 12px; border: 1px solid var(--line); border-radius: 6px; background: var(--bg); color: var(--ink); margin-bottom: 4px }
.apiref .api-nav h6 { margin: 16px 0 6px; font: 600 .74rem/1.2 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--muted) }
.apiref .api-nav a { display: flex; align-items: center; gap: 8px; padding: 5px 10px; color: var(--ink); text-decoration: none; border-left: 2px solid var(--line); margin-left: 4px }
.apiref .api-nav a:hover { color: var(--blue-ink) }
.apiref .api-nav a.op { padding-left: 16px; font-size: .86rem; color: var(--muted) }
.apiref .api-nav a.op:hover { color: var(--blue-ink) }
.apiref .api-nav a.tag { font-weight: 600 }
.apiref .api-nav a.on { border-left-color: var(--blue); color: var(--blue-ink); font-weight: 600; background: var(--blue-soft) }
.apiref .api-index { list-style: none; padding: 0; margin: 6px 0 18px }
.apiref .api-index li { margin: 0 0 8px; line-height: 1.5 }
.apiref .api-index li a { font-weight: 600 }
.apiref .api-index .n { color: var(--muted); font-size: .8rem; margin: 0 6px 0 4px }
.apiref .api-main { min-width: 0 }
.apiref .api-sec { padding: 4px 0 32px; margin-bottom: 32px; border-bottom: 1px solid var(--line); scroll-margin-top: 80px }
.apiref .api-sec:last-child { border-bottom: 0 }
.apiref .api-sec .eye { font: 600 .78rem/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--blue-ink); margin: 0 0 10px }
.apiref .api-sec h1 { font-size: clamp(1.9rem, 3.4vw, 2.5rem); margin: 0 0 18px }
.apiref .api-sec h2 { font-size: 1.45rem; margin: 0 0 12px }
.apiref .api-sec h3 { font-size: 1.05rem; margin: 22px 0 8px }
.apiref .api-sec p { margin: 10px 0 }
.apiref .api-sec .lead { font-size: 1.12rem; color: var(--muted) }
.apiref .api-sec .lead + h2 { margin-top: 26px }
.apiref .api-sec ul, .apiref .api-sec ol { padding-left: 22px; margin: 0 0 16px }
.apiref .api-sec li { margin: 4px 0 }
.apiref .api-main code { background: var(--bg-2); border: 1px solid var(--line); border-radius: 5px; padding: 1px 5px; font: 500 .86em ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--ink); word-break: break-word }
.apiref .tw { overflow-x: auto; margin: 6px 0 14px }
.apiref table.api-t { border-collapse: collapse; width: 100%; font-size: .9rem }
.apiref .api-t th { text-align: left; font: 600 .72rem/1.2 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); padding: 8px 10px; border-bottom: 1px solid var(--line) }
.apiref .api-t td { border-bottom: 1px solid var(--line); padding: 9px 10px; vertical-align: top }
.apiref .api-t td:first-child code, .apiref .api-t td:nth-child(2) > code { white-space: nowrap; word-break: normal }
.apiref .pin { color: var(--muted); font-size: .8rem }
.apiref .note { font-size: .88rem; color: var(--muted) }
.apiref .endpoint { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; background: var(--bg-2); border: 1px solid var(--line); border-radius: 8px; padding: 10px 14px; margin: 0 0 16px }
.apiref .endpoint code { background: none; border: 0; padding: 0; font-size: .95rem; word-break: break-all }
.apiref .scope { margin: 0 0 0 auto; font: 600 .75rem ui-monospace, Menlo, monospace; color: var(--scope); background: var(--scope-bg); border-radius: 999px; padding: 3px 10px }
.apiref .m { font: 700 .66rem ui-monospace, Menlo, monospace; letter-spacing: .04em; padding: 2px 6px; border-radius: 5px; flex: none }
.apiref .m.get { color: var(--m-get); background: var(--m-get-bg) } .apiref .m.post { color: var(--m-post); background: var(--m-post-bg) }
.apiref .m.patch { color: var(--m-patch); background: var(--m-patch-bg) } .apiref .m.delete { color: var(--m-del); background: var(--m-del-bg) }
.apiref .st { font: 700 .72rem ui-monospace, Menlo, monospace; border-radius: 5px; padding: 1px 6px }
.apiref .st.s2 { color: var(--m-get); background: var(--m-get-bg) } .apiref .st.s4 { color: var(--m-patch); background: var(--m-patch-bg) } .apiref .st.s5 { color: var(--m-del); background: var(--m-del-bg) }
.apiref ul.errs { list-style: none; padding: 0 } .apiref ul.errs li { margin: 6px 0 }
.apiref ul.log { list-style: none; padding: 0 } .apiref ul.log li { padding: 12px 0; border-bottom: 1px solid var(--line) }
.apiref .api-preview { margin: 0 0 22px; padding: 12px 16px; border-radius: 8px; background: var(--soon-soft); border: 1px solid var(--line); color: var(--ink); font-size: .92rem; line-height: 1.55 }
.apiref .api-preview b { color: var(--soon) }
.apiref .api-preview a { font-weight: 600 }

/* The code: dark in both themes, as code is. */
.apiref .api-code { position: sticky; top: 76px; align-self: start; max-height: calc(100vh - 96px); overflow: auto; background: var(--code-bg); color: var(--code-ink); border: 1px solid var(--code-line); border-radius: 10px; scrollbar-color: rgba(160, 196, 208, .25) transparent }
.apiref .api-tabs { display: flex; gap: 4px; padding: 10px 10px 0 }
.apiref .api-code > .api-tabs { position: sticky; top: 0; background: var(--code-bg); z-index: 1; padding-bottom: 6px }
.apiref .api-tabs button { font: 600 .82rem/1 var(--sans); color: #9FB3CC; background: transparent; border: 0; border-radius: 6px; padding: 8px 11px; cursor: pointer }
.apiref .api-tabs button:hover { color: #fff; background: rgba(255, 255, 255, .06) }
.apiref .api-tabs button[aria-selected="true"] { color: #fff; background: rgba(65, 153, 254, .22) }
.apiref .api-panel { display: none; padding: 6px 12px 14px } .apiref .api-panel.on { display: block }
html:not(.js) .apiref .api-code > .api-tabs + .api-panel { display: block }
/* One language at a time; cURL until the reader picks another (api.js sets html[data-lang], and remembers it). */
.apiref .ex { display: none }
.apiref .ex[data-lang="curl"], html[data-lang="javascript"] .apiref .ex[data-lang="javascript"], html[data-lang="python"] .apiref .ex[data-lang="python"] { display: block }
html[data-lang="javascript"] .apiref .ex[data-lang="curl"], html[data-lang="python"] .apiref .ex[data-lang="curl"] { display: none }
.apiref .exl { font: 700 .72rem/1.2 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: #7F93AD; margin: 10px 2px 6px }
.apiref .ex .exl { display: none }
.apiref pre.code { position: relative; margin: 0 0 4px; padding: 34px 14px 14px; border-radius: 8px; background: var(--code-pre); border: 1px solid var(--code-line); overflow: auto; font: .8rem/1.6 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--code-ink); white-space: pre }
.apiref pre.code code { background: none; border: 0; padding: 0; color: inherit; font: inherit; word-break: normal }
.apiref .copy { position: absolute; top: 8px; right: 8px; font: 600 .72rem/1 var(--sans); color: #CFE0F5; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .16); border-radius: 6px; padding: 5px 9px; cursor: pointer }
.apiref .copy:hover { background: rgba(255, 255, 255, .16) }
.apiref .tk { color: #9CDCFE } .apiref .ts { color: #A8E3A2 } .apiref .tn { color: #FFD28A } .apiref .tb { color: #7FC4FF } .apiref .tc { color: #7D8EA8; font-style: italic } .apiref .tf { color: #C9B3FF } .apiref .tv { color: #FFB3D1 }
.apiref pre.code[data-lang="curl"] .tk, .apiref pre.code[data-lang="javascript"] .tk, .apiref pre.code[data-lang="python"] .tk { color: #FF9AC1 }
/* Below 1100px the code sits under each section instead. */
.apiref .api-inline { display: none; margin-top: 18px; background: var(--code-bg); color: var(--code-ink); border-radius: 10px; padding: 4px 0 6px; min-width: 0 }
.apiref .api-inline > .ex, .apiref .api-inline > .resp { padding: 0 12px }
@media (max-width: 1100px) {
  .apiref .api-shell { grid-template-columns: 230px minmax(0, 1fr) }
  .apiref .api-code { display: none }
  .apiref .api-inline { display: block }
}
@media (max-width: 800px) {
  .apiref .api-shell { grid-template-columns: minmax(0, 1fr); gap: 16px; padding: 0 16px }
  .apiref .api-navwrap { position: static; max-height: none; overflow: visible; border: 1px solid var(--line); border-radius: 8px; padding: 4px 10px }
  .apiref .api-navwrap > summary { display: block; cursor: pointer; font-weight: 600; padding: 8px 2px }
  .apiref .api-navwrap > summary { display: flex; justify-content: space-between; list-style: none }
  .apiref .api-navwrap > summary::-webkit-details-marker { display: none }
  .apiref .api-navwrap > summary::after { content: "\25BE"; color: var(--muted) }
  .apiref .api-navwrap[open] > summary::after { content: "\25B4" }
  .apiref .api-sec h1 { font-size: 1.8rem }
  .apiref .scope { margin-left: 0 }
}
.apisoon { padding-block: 36px 72px; max-width: 760px }
.apisoon .intro { margin: 14px 0 22px }