/* Afrisend partner docs: values taken from the Figma "API Docs" canvas (light + dark). */
:root {
  --bg: #fff; --h: #171717; --h-guide: #0b0c10; --body: #525252; --body-guide: #666; --muted: #737373;
  --line: #e5e7eb; --nav-line: #e4e4e4; --code-bg: #f8f9fa; --code-text: #25282c; --code-line: #e5e7eb; --thead: #fafafa;
  --link: #3f80a1; --accent: #4c7412; --accent-bg: rgba(76,116,18,.15); --eyebrow: #659a18; --eyebrow-guide: #7ec11e;
  --side: #434343; --side-head: #080e1c; --card: #fff; --toc-on: #171717; --toc-on-guide: #444; --bar: #7ec11e;
  --callout-bg: #fffaeb; --callout-line: #f1c75b; --callout-icon: #a76f00; --callout-icon-text: #fff;
  --path-bg: #f8f9fa; --path-text: #25282c; --path-line: #e5e7eb;
  --get-bg: #e9f7d1; --get: #4c7412; --post-bg: #d7edf7; --post: #2f6079;
  --err: #ef4444; --help-title: #444; --help-text: #737373;
  --code-label: #737373; --pn-l: #737373; --pn-t: #171717; --foot: #434343; --nav-h: 76px;
  --side-w: 260px; --rail-w: 260px;
}
:root[data-theme="dark"] {
  --bg: #0b0b0c; --h: #fff; --h-guide: #fff; --body: #ccc; --body-guide: #ccc; --muted: #aaa;
  --line: rgba(255,255,255,.15); --nav-line: rgba(255,255,255,.12); --code-bg: #374151; --code-text: #ccc; --code-line: rgba(255,255,255,.6); --thead: #222;
  --link: #4fa0c9; --accent: #a7df47; --accent-bg: rgba(126,193,30,.18); --eyebrow: #e9f7d1; --eyebrow-guide: #a7df47;
  --side: #aaa; --side-head: #aaa; --card: transparent; --toc-on: #fff; --toc-on-guide: #fff; --bar: #a7df47;
  --callout-bg: #192706; --callout-line: #4c7412; --callout-icon: #7ec11e; --callout-icon-text: #0b0b0c;
  --path-bg: #fff; --path-text: #25282c; --path-line: #fff;
  --help-title: #fff; --help-text: #aaa; --code-label: #aaa; --pn-l: #aaa; --pn-t: #fff; --foot: #aaa;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 24px); }
body { margin: 0; background: var(--bg); color: var(--body); font: 400 16px/1.75 Inter, sans-serif; -webkit-font-smoothing: antialiased; }
:root:not([data-theme="dark"]) .icon-dark, :root[data-theme="dark"] .icon-light { display: none !important; }
a { color: var(--link); text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
img { display: block; }

/* top bar */
.nav { position: sticky; top: 0; z-index: 20; height: var(--nav-h); background: var(--bg); border-bottom: 1px solid var(--nav-line); }
.nav-in { position: relative; max-width: 1440px; height: 100%; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; padding: 0 40px; }
.logo { display: flex; align-items: center; gap: 3.24px; height: 36px; margin-left: 14px; }
.logo .symbol { width: 21.85px; height: 20.33px; }
.wordmark, .wordmark img { width: 108px; height: 17.5px; }
.search { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 360px; max-width: 40vw; }
.search label { display: flex; align-items: center; gap: 12px; padding: 8px 16px; border: 1px solid var(--nav-line); border-radius: 10px; background: var(--bg); }
.search label img { width: 16px; height: 16px; }
.search input { all: unset; flex: 1; min-width: 0; font: 500 14px/1.5 Inter, sans-serif; color: var(--h); }
.search input::placeholder { color: #727272; }
.results { position: absolute; top: calc(100% + 8px); left: 0; right: 0; max-height: 380px; overflow: auto; background: var(--bg); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 12px 32px rgba(0,0,0,.14); padding: 6px; }
.results a { display: block; padding: 8px 10px; border-radius: 8px; color: var(--h); font: 500 14px/1.4 "IBM Plex Sans", sans-serif; }
.results a small { display: block; color: var(--muted); font-weight: 400; font-size: 12px; }
.results a:hover, .results a.on { background: var(--accent-bg); }
.results .none { padding: 10px; color: var(--muted); font-size: 14px; }
.theme { width: 24px; height: 24px; color: var(--h); }
.theme img { width: 24px; height: 24px; }
.menu-btn { display: none; font-size: 20px; color: var(--h); }

/* three columns: left sidebar | content | right sidebar */
.shell { max-width: 1440px; margin: 0 auto; padding: 40px; display: flex; gap: 40px; align-items: flex-start; }
.side { flex: 0 0 var(--side-w); width: var(--side-w); position: sticky; top: calc(var(--nav-h) + 40px); max-height: calc(100vh - var(--nav-h) - 60px); overflow: auto; display: flex; flex-direction: column; gap: 24px; scrollbar-width: thin; }
.main { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 36px; }
.rail { flex: 0 0 var(--rail-w); width: var(--rail-w); position: sticky; top: calc(var(--nav-h) + 40px); }

.nav-group { display: flex; flex-direction: column; gap: 8px; }
.nav-head { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 4px 10px 8px; font: 600 14px/1.5 "IBM Plex Sans", sans-serif; color: var(--side-head); text-align: left; }
.chev { width: 14px; height: 14px; transform: rotate(90deg); transition: transform .15s; }
:root[data-theme="dark"] .chev { filter: invert(.7); }
.nav-group.closed .chev { transform: rotate(0); }
.nav-group.closed .nav-items { display: none; }
.nav-items { display: flex; flex-direction: column; }
.nav-item { display: block; padding: 8px 12px; border-radius: 8px; font: 500 14px/1.5 "IBM Plex Sans", sans-serif; color: var(--side); }
.nav-item:hover, .nav-item.active { background: var(--accent-bg); }
.nav-item.active { color: var(--accent); font-weight: 600; }

.toc { border-left: 1px solid var(--line); padding-left: 22px; }
.toc-head { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding-bottom: 12px; color: #0b0c10; font: 500 14px/1.5 "IBM Plex Sans", sans-serif; }
:root[data-theme="dark"] .toc-head { color: #fff; }
.toc-head img { width: 20px; height: 20px; }
.toc nav { display: flex; flex-direction: column; }
.toc a { position: relative; padding: 5px 0; font: 400 13px/18px "IBM Plex Sans", sans-serif; color: var(--muted); }
.toc a.active { font-weight: 500; color: var(--toc-on); }
.toc a.active::before { content: ""; position: absolute; left: -23px; top: 5px; width: 2px; height: 18px; background: var(--bar); }
.help { margin-top: 28px; display: flex; flex-direction: column; gap: 2px; padding: 14px; border: 1px solid var(--line); border-radius: 8px; background: var(--card); }
.help strong { font: 700 12px/19.5px "IBM Plex Sans", sans-serif; color: var(--help-title); }
.help span { font: 400 12px/19.5px "IBM Plex Sans", sans-serif; color: var(--help-text); }
.help a { padding-top: 5px; font: 500 13px/18px "IBM Plex Sans", sans-serif; color: var(--link); }

/* page head */
.page-head { display: flex; flex-direction: column; gap: 8px; }
.eyebrow { font: 600 16px/1.5 Inter, sans-serif; color: var(--eyebrow-guide); }
.page-head h1 { margin: 0; font: 600 28px/1.5 "IBM Plex Sans", sans-serif; color: var(--h-guide); }
.lead p { margin: 0; }
.guide .lead { color: var(--body-guide); max-width: 675px; }
.guide .body { display: flex; flex-direction: column; gap: 48px; }
.guide .sec h2 { margin: 0 0 8px; font: 600 24px/1.5 "IBM Plex Sans", sans-serif; color: var(--h-guide); }
.guide .sec { color: var(--body-guide); }
.guide .sec h3 { margin: 24px 0 8px; font: 600 18px/26px "IBM Plex Sans", sans-serif; color: var(--h-guide); }
.guide .sec p, .guide .lead p { margin: 0 0 12px; }
.guide .sec ul, .guide .sec ol { margin: 0 0 12px; padding-left: 24px; }
.guide .sec strong { color: var(--h-guide); font-weight: 600; }

.main.api { gap: 40px; }
/* the intro has no heading between summary and first block, so they read as one passage */
.main.intro { gap: 16px; }
.crumb { display: flex; align-items: center; gap: 5px; font: 400 13px/21px "IBM Plex Sans", sans-serif; color: var(--muted); }
.crumb img { width: 13px; height: 13px; }
:root[data-theme="dark"] .crumb img { filter: invert(.7); }
.api .eyebrow { font: 600 12px/16px "IBM Plex Sans", sans-serif; letter-spacing: .96px; color: var(--eyebrow); }
.api .page-head h1 { color: var(--h); }
.api .lead { max-width: 680px; color: var(--muted); }
.api .body { display: flex; flex-direction: column; gap: 40px; }

/* operations */
.op { display: flex; flex-direction: column; gap: 20px; }
.op-head h2 { margin: 0 0 6px; font: 600 24px/32px "IBM Plex Sans", sans-serif; letter-spacing: -.6px; color: var(--h); }
.op-head p { margin: 0; font: 400 16px/26px Inter, sans-serif; color: var(--body); }
.op-head p + p { margin-top: 10px; }
.chips { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.chip { display: inline-block; padding: 4px 8px; border-radius: 4px; font: 700 12px/18px "IBM Plex Mono", monospace; }
.chip.m-get { background: var(--get-bg); color: var(--get); }
.chip.m-post { background: var(--post-bg); color: var(--post); }
.chip.path { background: var(--path-bg); border: 1px solid var(--path-line); border-radius: 6px; padding: 4px 10px; font: 400 13px/21px "IBM Plex Mono", monospace; color: var(--path-text); }
.flags { font: 400 12px/18px "IBM Plex Mono", monospace; color: var(--muted); }
.sub { display: flex; flex-direction: column; gap: 12px; }
.sub h3 { margin: 0; font: 600 18px/26px "IBM Plex Sans", sans-serif; color: var(--h); }
.sub > p { margin: 0; font: 400 14px/22px Inter, sans-serif; color: var(--body); }
.sub ul, .sub ol { margin: 0; padding-left: 22px; font: 400 14px/22px Inter, sans-serif; }

/* field tables and markdown tables */
.grid-table, .tbl { border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.trow { display: grid; column-gap: 12px; grid-template-columns: var(--cols); align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.trow:last-child { border-bottom: 0; }
.trow.thead { background: var(--thead); padding: 10px 16px; font: 600 12px/19.5px "IBM Plex Sans", sans-serif; letter-spacing: .36px; text-transform: uppercase; color: var(--h); }
.trow .mono { font: 400 13px/21px "IBM Plex Mono", monospace; color: var(--code-text); overflow-wrap: anywhere; }
.trow .ty { font: 400 13px/21px "IBM Plex Sans", sans-serif; color: var(--link); }
.trow .req { font: 400 13px/21px "IBM Plex Sans", sans-serif; color: var(--err); }
.trow .opt { font: 400 13px/21px "IBM Plex Sans", sans-serif; color: var(--muted); }
.trow .d { font: 400 14px/22px Inter, sans-serif; color: var(--body); }
.tbl { margin: 16px 0; }
.tbl table { width: 100%; border-collapse: collapse; }
.tbl th { background: var(--thead); padding: 10px 16px; text-align: left; font: 600 12px/19.5px "IBM Plex Sans", sans-serif; letter-spacing: .36px; text-transform: uppercase; color: var(--h); border-bottom: 1px solid var(--line); }
.tbl td { padding: 12px 16px; font: 400 14px/22px Inter, sans-serif; color: var(--body); border-bottom: 1px solid var(--line); vertical-align: top; }
.tbl tr:last-child td { border-bottom: 0; }
.tbl td:first-child { font: 400 13px/21px "IBM Plex Mono", monospace; color: var(--code-text); }

/* inline code */
:is(.d, .tbl, .op-head, .sec, .lead, .sub > p, .callout) code { font: 400 12.5px/1.4 "IBM Plex Mono", monospace; color: var(--code-text); background: var(--code-bg); border: 1px solid var(--line); border-radius: 4px; padding: 1px 5px; }
:root[data-theme="dark"] :is(.d, .tbl, .op-head, .sec, .lead, .sub > p, .callout) code { background: rgba(255,255,255,.08); border-color: transparent; }

/* code panels */
.code { background: var(--code-bg); border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.sec .code { margin: 16px 0; }
.code-head { display: flex; align-items: center; justify-content: space-between; height: 42px; padding: 0 11px 0 16px; border-bottom: 1px solid var(--code-line); }
.code-lang { font: 400 11px/17.88px "IBM Plex Mono", monospace; text-transform: uppercase; color: var(--code-label); }
.copy { padding: 6px 8px; border-radius: 5px; font: 400 12px/19.5px "IBM Plex Mono", monospace; color: var(--code-label); }
.copy:hover { background: rgba(127,127,127,.15); }
.code pre { margin: 0; padding: 18px 24px 20px; overflow: auto; font: 400 13px/22px "IBM Plex Mono", monospace; color: var(--code-text); }
.code pre code, :root[data-theme="dark"] .code pre code { font: inherit; color: inherit; background: none; border: 0; padding: 0; }

.callout { display: flex; gap: 12px; align-items: flex-start; padding: 15px 17px; background: var(--callout-bg); border: 1px solid var(--callout-line); border-radius: 8px; margin: 16px 0; }
.callout-icon { flex: none; width: 20px; height: 20px; margin-top: 1px; border-radius: 10px; background: var(--callout-icon); color: var(--callout-icon-text); display: grid; place-items: center; font: 600 12px/1 "IBM Plex Sans", sans-serif; }
.callout > div { flex: 1; font: 400 14px/22px "IBM Plex Sans", sans-serif; color: var(--body); }
.callout p { margin: 0; }
.callout strong, .guide .sec .callout strong { color: var(--h); font-weight: 700; line-height: 22.75px; }

.mermaid-diagram { margin: 16px 0; padding: 20px; border: 1px solid var(--line); border-radius: 8px; overflow: auto; text-align: center; }
.mermaid-diagram svg { max-width: 100%; height: auto; }
.mermaid-diagram.failed { text-align: left; white-space: pre; font: 400 13px/22px "IBM Plex Mono", monospace; color: var(--code-text); background: var(--code-bg); }

/* prev / next and footer */
.pagenav { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; border-top: 1px solid var(--line); padding-top: 24px; }
.pn-card { display: grid; gap: 4px; padding: 15px; border: 1px solid var(--line); border-radius: 8px; background: var(--card); opacity: .65; }
.pn-card.r { text-align: right; opacity: 1; }
.pn-card.off { visibility: hidden; }
.pn-l { font: 400 12px/19.5px "IBM Plex Sans", sans-serif; color: var(--pn-l); }
.pn-t { font: 500 14px/22.75px "IBM Plex Sans", sans-serif; color: var(--pn-t); }
.pagenav-text { display: flex; justify-content: space-between; }
.pagenav-text a { display: flex; align-items: center; gap: 4px; font: 500 16px/1.5 Inter, sans-serif; color: #0b0c10; }
:root[data-theme="dark"] .pagenav-text a { color: #fff; }
.foot { display: flex; align-items: center; justify-content: space-between; padding-top: 24px; border-top: 1px solid var(--line); font: 500 14px/1.75 Inter, sans-serif; color: var(--foot); }
.social { display: flex; gap: 16px; }
.social img { width: 24px; height: 24px; }

/* narrower screens keep all three columns, just tighter; the right column goes last, then the left becomes a menu */
@media (max-width: 1280px) { :root { --side-w: 220px; --rail-w: 200px; } .shell { gap: 28px; padding: 32px 28px; } }
@media (max-width: 1040px) { :root { --side-w: 200px; --rail-w: 170px; } .shell { gap: 20px; padding: 28px 20px; } .nav-in { padding: 0 20px; } .logo { margin-left: 0; } }
@media (max-width: 860px) {
  .rail { display: none; }
  .search { position: static; transform: none; width: auto; max-width: none; flex: 1; margin: 0 12px; }
  .menu-btn { display: block; margin-right: 12px; }
  .side { display: none; position: fixed; inset: var(--nav-h) 0 0 0; z-index: 15; width: auto; max-height: none; background: var(--bg); padding: 24px 16px; }
  .side.show { display: flex; }
  .shell { padding: 24px 16px; }
}