/* ============================================================================
   RAMFi Docs — Shared Enhancement Layer
   Loaded after each page's inline <style>, so rules here win on equal specificity.
   Adds: dark mode, responsive/off-canvas sidebar, right-rail TOC + scrollspy,
   copy buttons, theme toggle, and assorted polish. Brand-preserving.
   ============================================================================ */

/* ── Theme transition (avoid flashing on first paint via .no-anim guard) ──── */
html.theme-ready body,
html.theme-ready .sidebar,
html.theme-ready .endpoint-header,
html.theme-ready .endpoint-body,
html.theme-ready table td,
html.theme-ready .tile,
html.theme-ready .callout,
html.theme-ready .doc-toc {
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}

/* ──────────────────────────────────────────────────────────────────────────
   DARK THEME
   Re-points the shared design tokens, then patches the handful of components
   that hard-code light backgrounds or use navy-as-background.
   ────────────────────────────────────────────────────────────────────────── */
:root { color-scheme: light; }

html[data-theme="dark"] {
  color-scheme: dark;
  --bg:         #0E1320;
  --surface:    #141A28;
  --surface2:   #1C2435;
  --border:     #283044;
  --border-2:   #38435C;
  --accent:     #E9ECF3;
  --accent2:    #FF5A5B;
  --text:       #E7EAF2;
  --text-2:     #BFC6D6;
  --text-muted: #8A93A8;
  --text-dim:   #5E6A82;
  --code-bg:    #0A0E18;
  --code-text:  #E8EBF2;
  /* navy is used overwhelmingly as a heading/emphasis text colour — make it ink */
  --brand-navy:   #E7EAF2;
  --brand-navy-2: #E7EAF2;
  --post:         #BFC6D6;
  --get:    #5FD39A;
  --patch:  #E0A86B;
  --delete: #FF6B6C;
  --sdk:    #B69BEE;
}

/* Light backgrounds hard-set in the page stylesheets → dark surfaces */
html[data-theme="dark"] .endpoint-header,
html[data-theme="dark"] details.resp,
html[data-theme="dark"] .endpoint-try-body,
html[data-theme="dark"] .cg-btn-ghost,
html[data-theme="dark"] .dm-detail,
html[data-theme="dark"] .tile { background: var(--surface); }

/* Data-model cards and chips sit inside a --surface panel, so they take the next
   step up to keep the raised look they have in light mode. Without this they
   inherit a hard-coded #fff and render light text on white. */
html[data-theme="dark"] .dm-card,
html[data-theme="dark"] .dm-chip { background: var(--surface2); }

html[data-theme="dark"] .endpoint-body { background: var(--bg); }
html[data-theme="dark"] table td { background: transparent; }
html[data-theme="dark"] .cg-input,
html[data-theme="dark"] .cg-select,
html[data-theme="dark"] .gsearch input { background: var(--surface2); color: var(--text); }
html[data-theme="dark"] .gsearch-results { background: var(--surface); box-shadow: 0 10px 30px rgba(0,0,0,.5); }

/* Components that use navy as a *background* (token now reads light) */
html[data-theme="dark"] .curl-gen-head { background: #1B2336; }
html[data-theme="dark"] #backTop { background: #1B2336; }
html[data-theme="dark"] #backTop:hover { background: var(--brand-red); }
html[data-theme="dark"] .sdk-step-num { background: var(--brand-red); border-color: var(--brand-red); color: #fff; }
html[data-theme="dark"] .cg-btn { background: #283250; border-color: #34406A; color: #E9ECF3; }
html[data-theme="dark"] .cg-btn.cg-btn-red { background: var(--brand-red); border-color: var(--brand-red); color:#fff; }

/* Logo wordmark (navy paths) → light in dark mode */
html[data-theme="dark"] .sidebar-logo svg path[fill="#000033"] { fill: #E7EAF2; }

/* Method badge/pill tints — give them a faint coloured wash in dark */
html[data-theme="dark"] .pill-get,    html[data-theme="dark"] .badge-get    { background: rgba(95,211,154,.12); }
html[data-theme="dark"] .pill-post,   html[data-theme="dark"] .badge-post   { background: var(--surface2); }
html[data-theme="dark"] .pill-patch,  html[data-theme="dark"] .badge-patch  { background: rgba(224,168,107,.13); }
html[data-theme="dark"] .pill-delete, html[data-theme="dark"] .badge-delete { background: rgba(255,107,108,.13); }
html[data-theme="dark"] .pill-sdk,    html[data-theme="dark"] .badge-sdk    { background: rgba(182,155,238,.14); }
html[data-theme="dark"] .req-badge { background: rgba(255,107,108,.13); }
html[data-theme="dark"] .opt-badge { background: var(--surface2); }
html[data-theme="dark"] .page-header .version-tag { background: rgba(255,107,108,.12); border-color: rgba(255,107,108,.3); }

/* ──────────────────────────────────────────────────────────────────────────
   POLISH — subtle, on-brand refinements
   ────────────────────────────────────────────────────────────────────────── */
.sidebar a { transition: background-color .14s ease, color .14s ease, border-color .14s ease; }
.tile { transition: border-color .14s ease, transform .14s ease, box-shadow .14s ease; }
.tile:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(31,41,84,.08); }
html[data-theme="dark"] .tile:hover { box-shadow: 0 6px 20px rgba(0,0,0,.4); }
.endpoint-header { transition: border-color .14s ease, background-color .14s ease; }

/* Focus-visible accessibility ring */
a:focus-visible, button:focus-visible, input:focus-visible, summary:focus-visible {
  outline: 2px solid var(--brand-red); outline-offset: 2px; border-radius: 3px;
}

/* Anchor link affordance on section titles */
.section-title { position: relative; }
.section-anchor {
  opacity: 0; margin-left: 8px; color: var(--text-dim); text-decoration: none;
  font-weight: 400; transition: opacity .12s ease, color .12s ease;
  font-size: .8em; cursor: pointer;
}
.section-header:hover .section-anchor { opacity: 1; }
.section-anchor:hover { color: var(--brand-red); }

/* ──────────────────────────────────────────────────────────────────────────
   THEME TOGGLE
   ────────────────────────────────────────────────────────────────────────── */
.theme-toggle {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 30px; padding: 0 11px; cursor: pointer;
  border: 1px solid var(--border-2); border-radius: 6px;
  background: var(--bg); color: var(--text-2);
  font: 600 11px/1 var(--font-body); letter-spacing: .02em;
  transition: border-color .14s ease, color .14s ease, background-color .14s ease;
}
.theme-toggle:hover { border-color: var(--brand-red); color: var(--brand-red); }
.theme-toggle svg { width: 14px; height: 14px; }
.theme-toggle .tt-sun { display: none; }
.theme-toggle .tt-moon { display: inline-flex; }
html[data-theme="dark"] .theme-toggle .tt-sun { display: inline-flex; }
html[data-theme="dark"] .theme-toggle .tt-moon { display: none; }

/* Desktop placement: a small bar under the logo */
.sidebar-tools {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 22px 4px;
}
.sidebar-tools .tt-label { font-size: 11px; }

/* ──────────────────────────────────────────────────────────────────────────
   MOBILE TOP BAR + OFF-CANVAS SIDEBAR
   ────────────────────────────────────────────────────────────────────────── */
.docbar {
  display: none;
  position: sticky; top: 0; z-index: 70;
  align-items: center; gap: 12px;
  padding: 10px 14px;
  background: var(--bg); border-bottom: 1px solid var(--border);
}
.docbar .hamburger {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; flex-shrink: 0;
  border: 1px solid var(--border-2); border-radius: 7px;
  background: var(--surface); color: var(--text); cursor: pointer;
}
.docbar .hamburger svg { width: 18px; height: 18px; }
.docbar .docbar-title { font: 700 14px/1 var(--font-body); color: var(--brand-navy); letter-spacing: -.01em; }
.docbar .docbar-spacer { margin-left: auto; }

.sidebar-backdrop {
  display: none; position: fixed; inset: 0; z-index: 80;
  background: rgba(10,14,24,.5); backdrop-filter: blur(1px);
  opacity: 0; transition: opacity .2s ease;
}
.sidebar-backdrop.show { display: block; opacity: 1; }

@media (max-width: 980px) {
  .docbar { display: flex; }
  .layout { display: block; }
  .sidebar {
    position: fixed; top: 0; left: 0; z-index: 90;
    height: 100vh; width: 290px; min-width: 290px;
    /* dvh tracks the collapsing browser chrome; vh above is the fallback */
    height: 100dvh;
    /* without this the nav is clipped at the fold and the last entries
       (the recipes) cannot be reached */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    transform: translateX(-100%);
    transition: transform .25s cubic-bezier(.4,0,.2,1);
    box-shadow: 0 0 40px rgba(0,0,0,.18);
  }
  .sidebar.open { transform: translateX(0); }
  .main { max-width: 100%; padding: 28px 20px 72px; }
  .page-header h1 { font-size: 25px; }
}

@media (max-width: 520px) {
  .main { padding: 22px 16px 64px; }
  .tile-grid { grid-template-columns: 1fr !important; }
}

/* ──────────────────────────────────────────────────────────────────────────
   RIGHT-RAIL TABLE OF CONTENTS + SCROLLSPY
   Injected as a flex sibling of <main>, so it reserves its own column.
   ────────────────────────────────────────────────────────────────────────── */
.doc-toc {
  position: sticky; top: 0; align-self: flex-start;
  width: 244px; min-width: 244px; height: 100vh;
  padding: 56px 26px 40px 12px;
  overflow-y: auto;
  border-left: 1px solid var(--border);
  font-size: 12.5px;
}
.doc-toc .toc-head {
  font: 600 9.5px/1 var(--font-body); letter-spacing: .13em; text-transform: uppercase;
  color: var(--text-dim); margin-bottom: 14px;
}
.doc-toc a {
  display: block; padding: 5px 12px; margin-left: -1px;
  color: var(--text-muted); text-decoration: none;
  border-left: 2px solid transparent; line-height: 1.45;
  transition: color .12s ease, border-color .12s ease;
}
.doc-toc a:hover { color: var(--brand-navy); }
.doc-toc a.active { color: var(--brand-red); border-left-color: var(--brand-red); font-weight: 600; }
.doc-toc a.toc-sub { padding-left: 24px; font-size: 11.5px; }

@media (max-width: 1180px) { .doc-toc { display: none; } }

/* ──────────────────────────────────────────────────────────────────────────
   COPY BUTTONS (added only to code blocks without an existing copy control)
   ────────────────────────────────────────────────────────────────────────── */
.code-block { position: relative; }
.copy-btn {
  position: absolute; top: 8px; right: 8px; z-index: 2;
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 9px; cursor: pointer;
  font: 600 10.5px/1 var(--font-body); letter-spacing: .03em;
  color: #AEB6D4; background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.14); border-radius: 5px;
  opacity: 0; transition: opacity .14s ease, color .14s ease, border-color .14s ease, background-color .14s ease;
}
.code-block:hover .copy-btn,
.copy-btn:focus-visible { opacity: 1; }
.copy-btn:hover { color: #fff; border-color: var(--brand-red); background: rgba(203,0,1,.18); }
.copy-btn.copied { color: #86EFAC; border-color: #2f7d52; background: rgba(95,211,154,.14); opacity: 1; }
.copy-btn svg { width: 12px; height: 12px; }
/* Touch devices have no hover — keep copy buttons reachable. */
@media (hover: none) { .copy-btn { opacity: .7; } }
/* nudge an existing code-label out of the copy button's way */
.code-block.has-copy .code-label { right: 78px; }

/* ── Back-to-top (element injected by JS; base pages style #backTop, ensure
      a fallback for pages that don't) ──────────────────────────────────────── */
#backTop {
  position: fixed; right: 22px; bottom: 22px; z-index: 60;
  width: 42px; height: 42px; display: none;
  align-items: center; justify-content: center;
  border: none; border-radius: 8px; cursor: pointer;
  background: var(--brand-navy); color: #fff;
  box-shadow: 0 4px 16px rgba(0,0,0,.18);
  transition: background-color .15s ease, transform .15s ease, opacity .2s ease;
}
#backTop.show { display: inline-flex; }
#backTop:hover { background: var(--brand-red); transform: translateY(-2px); }
#backTop svg { width: 18px; height: 18px; }
@media (max-width: 980px) { #backTop { right: 16px; bottom: 16px; } }

/* ──────────────────────────────────────────────────────────────────────────
   ANCHOR SCROLL OFFSET — so heading/TOC links don't hide content under the
   sticky mobile bar (and give desktop a little breathing room).
   ────────────────────────────────────────────────────────────────────────── */
.doc-section[id], [id].section-header, .main [id] { scroll-margin-top: 24px; }
@media (max-width: 980px) { .doc-section[id], [id].section-header, .main [id] { scroll-margin-top: 72px; } }

/* ──────────────────────────────────────────────────────────────────────────
   SKIP-TO-CONTENT LINK (a11y)
   ────────────────────────────────────────────────────────────────────────── */
.skip-link {
  position: absolute; left: 8px; top: -48px; z-index: 200;
  padding: 8px 14px; border-radius: 6px;
  background: var(--brand-navy); color: #fff; font: 600 13px/1 var(--font-body);
  text-decoration: none; transition: top .15s ease;
}
html[data-theme="dark"] .skip-link { background: #283250; color: #E9ECF3; }
.skip-link:focus { top: 8px; }

/* ──────────────────────────────────────────────────────────────────────────
   MOBILE: keep wide tables from breaking the layout (JS wraps each table)
   ────────────────────────────────────────────────────────────────────────── */
.table-wrap { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-wrap > table { min-width: 540px; }
@media (min-width: 700px) { .table-wrap > table { min-width: 0; } }

/* ──────────────────────────────────────────────────────────────────────────
   SEARCH SHORTCUT HINT (⌘K / Ctrl-K shown in the search box)
   ────────────────────────────────────────────────────────────────────────── */
.gsearch { position: relative; }
.gsearch .gsearch-kbd {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  pointer-events: none; display: inline-flex; gap: 3px; align-items: center;
  font: 600 10px/1 var(--font-mono); color: var(--text-dim);
}
.gsearch .gsearch-kbd kbd {
  border: 1px solid var(--border-2); border-radius: 4px; padding: 2px 5px;
  background: var(--bg); color: var(--text-muted); font-family: inherit;
}
.gsearch input:focus + .gsearch-kbd { opacity: 0; }

/* ──────────────────────────────────────────────────────────────────────────
   DARK MODE — diagram cards. SVG diagrams hard-code a light palette inline;
   re-point the common colours so they read on a dark page. (!important beats
   the inline style on the wrapper; bare attribute selectors beat SVG attrs.)
   ────────────────────────────────────────────────────────────────────────── */
html[data-theme="dark"] .main [style*="background:#fff"],
html[data-theme="dark"] .main [style*="background: #fff"],
html[data-theme="dark"] .main [style*="background:#FFFFFF"] {
  background: var(--surface) !important;
  border-color: var(--border) !important;
}
html[data-theme="dark"] .main svg rect[fill="#fff"],
html[data-theme="dark"] .main svg rect[fill="#FFFFFF"] { fill: #1C2435; }
html[data-theme="dark"] .main svg rect[fill="#F7F8FB"] { fill: #161D2B; }
html[data-theme="dark"] .main svg [stroke="#DDE3EE"] { stroke: #2E374A; }
html[data-theme="dark"] .main svg text[fill="#1F2954"],
html[data-theme="dark"] .main svg text[fill="#000033"] { fill: #E7EAF2; }
html[data-theme="dark"] .main svg text[fill="#5A6378"],
html[data-theme="dark"] .main svg text[fill="#8E97AE"] { fill: #9AA3B8; }
/* captions written as inline-styled <p> under diagrams */
html[data-theme="dark"] .main p[style*="color:#5A6378"],
html[data-theme="dark"] .main p[style*="color:#5a6378"] { color: #9AA3B8 !important; }

/* ──────────────────────────────────────────────────────────────────────────
   REDUCED MOTION
   ────────────────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; scroll-behavior: auto !important;
  }
}

/* ============================================================================
   MODERN REFRESH — premium, rounded, layered. Loads last; brand-preserving and
   theme-aware. Re-skins via shared tokens so light + dark both upgrade.
   ============================================================================ */
:root {
  --radius:    9px;
  --radius-lg: 14px;
  --page-bg:   #F5F7FC;
  --card:      #FFFFFF;
  --shadow-sm: 0 1px 2px rgba(20,28,70,.05), 0 2px 6px rgba(20,28,70,.05);
  --shadow-md: 0 6px 18px rgba(20,28,70,.08), 0 2px 8px rgba(20,28,70,.05);
  --shadow-lg: 0 18px 44px rgba(20,28,70,.14);
}
html[data-theme="dark"] {
  --page-bg:   #0C111C;
  --card:      #141A28;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.35);
  --shadow-md: 0 8px 22px rgba(0,0,0,.5);
  --shadow-lg: 0 18px 44px rgba(0,0,0,.6);
}

/* Layered canvas: tinted page, white cards float on top */
.main { background: var(--page-bg); }
.sidebar { background: var(--bg); }

/* Headings — a touch larger, tighter */
.page-header { border-bottom: none; position: relative; padding-bottom: 30px; }
.page-header::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 100%;
  background: linear-gradient(90deg, var(--brand-red), #5B3FA6 55%, rgba(0,0,0,0));
  border-radius: 2px; opacity: .9;
}
html[data-theme="dark"] .page-header::after { background: linear-gradient(90deg, var(--brand-red), #8B6FE0 55%, rgba(0,0,0,0)); }
.page-header h1 { font-size: 33px; letter-spacing: -0.028em; }
.section-title { font-size: 20px; }

/* Sidebar — pill navigation */
.sidebar a {
  margin: 1px 12px; padding: 7px 12px; border-radius: 9px;
  border-left: none !important; gap: 10px;
}
.sidebar a:hover { background: var(--surface2); color: var(--brand-navy); }
.sidebar a.active { background: rgba(203,0,1,.09); color: var(--brand-red); }
html[data-theme="dark"] .sidebar a:hover { color: var(--text); }
html[data-theme="dark"] .sidebar a.active { background: rgba(255,90,91,.14); color: var(--accent2); }
.sidebar-section { padding-left: 24px; }
/* To hide Data Models / Recipes again, paste in
   _coming_soon/hide-datamodels-recipes.css (not deployed). */
.gsearch input { border-radius: 10px; padding: 9px 12px; }
.gsearch input:focus { box-shadow: 0 0 0 3px rgba(31,41,84,.10); }
html[data-theme="dark"] .gsearch input:focus { box-shadow: 0 0 0 3px rgba(255,90,91,.18); }

/* Endpoint cards — rounded with soft depth */
.endpoint { border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
  transition: box-shadow .16s ease, transform .16s ease; }
.endpoint:hover { box-shadow: var(--shadow-md); }
.endpoint-header { background: var(--surface); border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
.endpoint-header:hover { background: var(--surface2); }
.endpoint-body { border-radius: 0 0 var(--radius-lg) var(--radius-lg); }
.endpoint.collapsed .endpoint-header { border-radius: var(--radius-lg); }

/* Method badges & pills — soft colored, rounded */
.method-badge, .method-pill { border-radius: 7px; border-color: transparent; }
.badge-get,  .pill-get    { background: #E7F7EF; }
.badge-post, .pill-post   { background: #EAF0FF; }
.badge-patch,.pill-patch  { background: #FBF1E3; }
.badge-delete,.pill-delete{ background: #FDEBEC; }
.badge-sdk,  .pill-sdk    { background: #F1EBFD; }
.req-badge, .opt-badge { border-radius: 6px; }

/* Tiles — cards with lift */
.tile { border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); background: var(--card); }
.tile:hover { box-shadow: var(--shadow-md); border-color: var(--border-2); }

/* Tables, callouts, code, builders — unified rounding */
table { border-radius: var(--radius-lg) !important; box-shadow: var(--shadow-sm); }
th { background: var(--surface); }
.callout, .callout-info, .callout-warning, .callout-success,
details.resp, .curl-gen, .endpoint-try, .usage-notes { border-radius: var(--radius-lg); }
.code-block { border-radius: var(--radius-lg); box-shadow: var(--shadow-md); }
.et-out { border-radius: var(--radius); }

/* Gradient accents on primary controls */
.curl-gen-head { background: linear-gradient(135deg, #2A3766, #1F2954); }
.cg-btn:not(.cg-btn-ghost) { background: linear-gradient(135deg, #2A3766, #1F2954); border: none; }
.cg-btn.cg-btn-red { background: linear-gradient(135deg, #E11012, #A60001); }
.sdk-step-num { background: linear-gradient(135deg, #2A3766, #1F2954); border: none; box-shadow: var(--shadow-sm); }
#backTop { background: linear-gradient(135deg, #2A3766, #1F2954); box-shadow: var(--shadow-md); }
#rb-fab { background: linear-gradient(135deg, #E11012, #A60001) !important; box-shadow: var(--shadow-lg) !important; }

/* Diagram wrapper cards pick up the soft look in light mode */
html:not([data-theme="dark"]) .main div[style*="background:#fff"] { box-shadow: var(--shadow-sm); }

/* ============================================================================
   REDESIGN — "Precision Fintech". Display typography, refined palette, hero
   treatment, terminal-style code, and micro-interactions. Loads last; theme-
   aware; brand-preserving (RAMFi navy + red). Pure re-skin via the shared layer.
   ============================================================================ */
:root {
  --font-display: 'Manrope', 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --page-bg: #FAFBFE;
  --border:  #ECEEF4;
  --border-2:#DEE2EC;
  --text:    #0F1729;
  --text-2:  #475069;
}
html[data-theme="dark"] {
  --page-bg: #090D16;
  --bg:      #0E1320;
  --surface: #141B29;
  --surface2:#1B2334;
  --border:  #222B3C;
  --border-2:#33405A;
  --text:    #EBEEF5;
  --text-2:  #C2C9D8;
}

/* ── Display typography ──────────────────────────────────────────────────── */
.page-header h1, .hero h1, .section-title, .main h2, .main h3,
.tile h3, .sec h2, .jstep h3, .bp h4, .sdk-step-content h4 {
  font-family: var(--font-display); letter-spacing: -0.02em;
}
.page-header h1 { font-size: 38px; font-weight: 800; letter-spacing: -0.032em; line-height: 1.12; }
.section-title  { font-size: 21px; font-weight: 700; }
.main h3        { font-weight: 700; }
.tile h3        { font-weight: 700; }
body { letter-spacing: -0.003em; }

/* ── Home hero ───────────────────────────────────────────────────────────── */
.hero {
  position: relative; margin: 4px 0 58px; padding: 46px 44px; border-radius: 22px; overflow: hidden;
  background:
    radial-gradient(130% 130% at 0% 0%, rgba(203,0,1,.07), transparent 42%),
    radial-gradient(120% 120% at 100% 0%, rgba(91,63,166,.07), transparent 46%),
    var(--card);
  border: 1px solid var(--border); box-shadow: var(--shadow-md);
}
.hero::before {
  content: "RELIANT PAYMENT · DEVELOPER PLATFORM";
  display: block; font: 700 11px/1 var(--font-body);
  letter-spacing: .18em; color: var(--brand-red); margin-bottom: 18px;
}
.hero h1 {
  font-family: var(--font-display); font-size: 43px; font-weight: 800;
  letter-spacing: -0.035em; line-height: 1.07; color: var(--text); margin: 0; max-width: 19ch;
}
.hero p { font-size: 16px; line-height: 1.7; color: var(--text-2); margin-top: 18px; max-width: 62ch; }
.hero p strong { color: var(--text); }
@media (max-width: 560px) { .hero { padding: 30px 22px; } .hero h1 { font-size: 31px; } }

/* ── Terminal-style code blocks (standalone; tabs keep their own chrome) ──── */
.code-block { padding-top: 42px; }
.code-block::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 34px;
  background: rgba(255,255,255,.04); border-bottom: 1px solid rgba(255,255,255,.07);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.code-block::after {
  content: ""; position: absolute; top: 13px; left: 16px; width: 9px; height: 9px;
  border-radius: 50%; background: #FF5F57; box-shadow: 15px 0 0 #FEBC2E, 30px 0 0 #28C840;
}
.code-block .code-label { top: 11px; }
.code-tabs .code-block { padding-top: 18px; }
.code-tabs .code-block::before, .code-tabs .code-block::after { display: none; }

/* Tabbed code panels. These lived only in the recipe pages' inline <style>, so the
   API reference rendered the markup unstyled - every panel visible at once, no tab
   bar, newlines collapsed. Shared here so both surfaces get the same panel. */
.code-tabs { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; margin: 12px 0 6px; }
.ct-bar { display: flex; background: var(--surface); border-bottom: 1px solid var(--border); }
.ct-bar .ct-tab {
  font: 600 11px/1 var(--font-mono); letter-spacing: .03em; padding: 10px 15px;
  border: none; background: transparent; color: var(--text-muted); cursor: pointer;
  border-bottom: 2px solid transparent;
}
.ct-bar .ct-tab:hover { color: var(--brand-navy); }
.ct-bar .ct-tab.active { color: var(--brand-navy); border-bottom-color: var(--brand-red); background: var(--bg); }
.ct-panel { display: none; }
.ct-panel.active { display: block; }
.code-tabs .code-block { margin: 0; border: none; border-radius: 0; position: relative; }
.code-tabs .ct-code { display: block; white-space: pre; overflow-x: auto; }
.code-copy {
  position: absolute; top: 9px; right: 9px; z-index: 2; cursor: pointer;
  font: 600 10.5px var(--font-body); padding: 4px 10px;
  border: 1px solid #3A4575; border-radius: 4px; background: #1B2552; color: #AEB6D4;
}
.code-copy:hover { color: #fff; border-color: var(--brand-red); }

/* ── Tables — tracked headers + row hover ────────────────────────────────── */
th { text-transform: uppercase; letter-spacing: .06em; font-size: 10px; padding: 11px 14px; }
td { padding: 11px 14px; }
tbody tr { transition: background-color .12s ease; }
tbody tr:hover td { background: var(--surface); }
html[data-theme="dark"] tbody tr:hover td { background: var(--surface2); }

/* ── Tiles — arrow reveal on hover ───────────────────────────────────────── */
.tile { padding: 20px; }
.tile h3 { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.tile h3::after {
  content: "\2192"; color: var(--brand-red); font-weight: 700;
  opacity: 0; transform: translateX(-5px); transition: opacity .15s ease, transform .15s ease;
}
.tile:hover h3::after { opacity: 1; transform: translateX(0); }

/* ── Sidebar — refined header & journey numerals ─────────────────────────── */
.sidebar-logo { padding: 26px 22px 22px; }
.jstep .j-num { font-family: var(--font-display); }

/* ── Section header — subtle red tick before the title ───────────────────── */
.section-header { gap: 0; }
.section-title::before {
  content: ""; display: inline-block; width: 3px; height: 1em; margin-right: 12px;
  background: var(--brand-red); border-radius: 2px; vertical-align: -2px;
}

/* ── Smoother scrollbars ─────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { border-radius: 8px; border: 2px solid var(--page-bg); }

/* ============================================================================
   NEW FEATURES — command palette, API filter/collapse, copy-for-AI, lang sync
   ============================================================================ */

/* ── Command palette (⌘K) ───────────────────────────────────────────────── */
.cmdk-overlay {
  position: fixed; inset: 0; z-index: 200; display: none;
  align-items: flex-start; justify-content: center; padding: 12vh 16px 16px;
  background: rgba(10,14,24,.45); backdrop-filter: blur(4px);
}
.cmdk-overlay.open { display: flex; }
.cmdk {
  width: 620px; max-width: 100%; max-height: 70vh; display: flex; flex-direction: column;
  background: var(--bg); border: 1px solid var(--border-2); border-radius: 16px;
  box-shadow: var(--shadow-lg); overflow: hidden;
}
.cmdk-top { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--border); }
.cmdk-top svg { width: 18px; height: 18px; color: var(--text-dim); flex-shrink: 0; }
.cmdk-input { flex: 1; border: none; background: transparent; font: 16px var(--font-body); color: var(--text); outline: none; }
.cmdk-esc { font: 600 10px/1 var(--font-body); color: var(--text-dim); border: 1px solid var(--border-2); border-radius: 5px; padding: 4px 7px; }
.cmdk-results { overflow-y: auto; padding: 8px; }
.cmdk-group { font: 600 10px/1 var(--font-body); letter-spacing: .1em; text-transform: uppercase; color: var(--text-dim); padding: 10px 10px 6px; }
.cmdk-item { display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: 9px; cursor: pointer; text-decoration: none; }
.cmdk-item .cmdk-ico { width: 28px; height: 28px; border-radius: 8px; background: var(--surface2); display: flex; align-items: center; justify-content: center; color: var(--brand-red); flex-shrink: 0; }
.cmdk-item .cmdk-ico svg { width: 15px; height: 15px; }
.cmdk-item .cmdk-main { flex: 1; min-width: 0; }
.cmdk-item .cmdk-title { font: 600 13.5px/1.35 var(--font-body); color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cmdk-item .cmdk-sub { font: 11.5px/1.35 var(--font-body); color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cmdk-item .cmdk-tag { font: 600 9px/1 var(--font-body); letter-spacing: .08em; text-transform: uppercase; color: var(--brand-red); flex-shrink: 0; }
.cmdk-item.sel { background: var(--surface); }
.cmdk-empty { padding: 26px; text-align: center; color: var(--text-muted); font-size: 13px; }
@media (max-width: 560px) { .cmdk-overlay { padding-top: 8vh; } }

/* ── Copy-for-AI button ─────────────────────────────────────────────────── */
/* Top-right header utilities: Copy-for-AI + theme toggle, grouped. */
.header-actions {
  position: absolute; top: 2px; right: 0; z-index: 2;
  display: inline-flex; align-items: center; gap: 10px;
}
.header-actions .theme-toggle { height: 34px; border-radius: 9px; }

.copy-ai {
  display: inline-flex; align-items: center; gap: 7px; height: 34px;
  padding: 0 13px; border: 1px solid var(--border-2); border-radius: 9px;
  background: var(--bg); color: var(--text-2); font: 600 12px var(--font-body); cursor: pointer;
  transition: border-color .12s ease, color .12s ease;
}
.copy-ai:hover { border-color: var(--brand-red); color: var(--brand-red); }
.copy-ai.done { color: var(--get); border-color: var(--get); }
.copy-ai svg { width: 14px; height: 14px; }

/* On mobile the top bar already carries a theme toggle — avoid a duplicate. */
@media (max-width: 980px) { .header-actions .theme-toggle { display: none; } }
@media (max-width: 680px) { .header-actions { position: static; margin-top: 16px; } }

/* .header-actions is absolutely positioned, so nothing reserves space for it and a
   long <h1> runs underneath the buttons. Keep the title clear of them, tracking the
   two breakpoints above: the toggle is hidden at 980, the group goes static at 680. */
.page-header h1 { padding-right: 206px; }
@media (max-width: 980px) { .page-header h1 { padding-right: 136px; } }
@media (max-width: 680px) { .page-header h1 { padding-right: 0; } }

/* ── Toast ──────────────────────────────────────────────────────────────── */
.docs-toast {
  position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%) translateY(16px);
  background: var(--brand-navy); color: #fff; padding: 10px 18px; border-radius: 10px;
  font: 600 13px var(--font-body); box-shadow: var(--shadow-lg); z-index: 300;
  opacity: 0; pointer-events: none; transition: opacity .2s ease, transform .2s ease;
}
.docs-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
html[data-theme="dark"] .docs-toast { background: #2A3658; }

/* ============================================================================
   MORE FEATURES — print/PDF, glossary tooltips, diagram zoom, shortcuts, progress
   ============================================================================ */

/* ── Reading progress bar ───────────────────────────────────────────────── */
.reading-progress {
  position: fixed; top: 0; left: 0; height: 3px; width: 0; z-index: 150;
  background: linear-gradient(90deg, var(--brand-red), #5B3FA6); transition: width .08s linear;
}

/* ── Shortcuts help modal (?) ───────────────────────────────────────────── */
.sc-overlay {
  position: fixed; inset: 0; z-index: 200; display: none; align-items: center; justify-content: center;
  padding: 16px; background: rgba(10,14,24,.45); backdrop-filter: blur(4px);
}
.sc-overlay.open { display: flex; }
.sc-modal { width: 460px; max-width: 100%; background: var(--bg); border: 1px solid var(--border-2); border-radius: 16px; box-shadow: var(--shadow-lg); overflow: hidden; }
.sc-head { display: flex; align-items: center; justify-content: space-between; padding: 15px 18px; border-bottom: 1px solid var(--border); font: 700 14px/1 var(--font-display); color: var(--text); }
.sc-head button { background: none; border: none; color: var(--text-dim); cursor: pointer; font-size: 22px; line-height: 1; padding: 0 2px; }
.sc-head button:hover { color: var(--brand-red); }
.sc-body { padding: 8px 18px 16px; }
.sc-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--border); font: 13px/1.4 var(--font-body); color: var(--text-2); }
.sc-row:last-child { border-bottom: none; }
.sc-keys { display: flex; gap: 5px; flex-shrink: 0; }
.sc-keys kbd {
  font: 600 11px/1 var(--font-mono); background: var(--surface2); border: 1px solid var(--border-2);
  border-bottom-width: 2px; border-radius: 6px; padding: 4px 7px; color: var(--text); min-width: 20px; text-align: center;
}

/* ── Diagram zoom (lightbox) ────────────────────────────────────────────── */
.diagram-zoom {
  position: absolute; top: 10px; right: 10px; z-index: 3; width: 30px; height: 30px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--border-2); border-radius: 8px; background: var(--bg); color: var(--text-2);
  cursor: zoom-in; opacity: .65; transition: opacity .12s ease, color .12s ease, border-color .12s ease;
}
.diagram-zoom:hover { opacity: 1; border-color: var(--brand-red); color: var(--brand-red); }
.diagram-zoom svg { width: 15px; height: 15px; }
.lb-overlay {
  position: fixed; inset: 0; z-index: 210; display: none; align-items: center; justify-content: center;
  padding: 24px; background: rgba(8,11,18,.82); backdrop-filter: blur(3px); cursor: zoom-out;
}
.lb-overlay.open { display: flex; }
.lb-content { max-width: 96vw; max-height: 92vh; overflow: auto; background: #fff; border-radius: 14px; padding: 20px; box-shadow: var(--shadow-lg); cursor: default; }
.lb-content svg { width: min(1100px, 90vw); height: auto; display: block; }

/* ── Glossary term tooltips ─────────────────────────────────────────────── */
.gloss-term { border-bottom: 1px dashed var(--border-2); cursor: help; }
.gloss-term:hover { border-bottom-color: var(--brand-red); }
.gloss-tip {
  position: fixed; z-index: 220; max-width: 280px; padding: 10px 13px;
  background: var(--brand-navy); color: #fff; border-radius: 10px; box-shadow: var(--shadow-lg);
  font: 12.5px/1.55 var(--font-body); opacity: 0; transform: translateY(4px);
  transition: opacity .12s ease, transform .12s ease; pointer-events: none;
}
html[data-theme="dark"] .gloss-tip { background: #2A3658; }
.gloss-tip.show { opacity: 1; transform: translateY(0); }
.gloss-tip .gloss-tip-term { display: block; font-weight: 700; margin-bottom: 3px; }
.gloss-tip .gloss-tip-more { color: #AEB6D4; font-size: 11px; margin-top: 5px; display: block; }

/* ── Print / PDF ────────────────────────────────────────────────────────── */
@media print {
  .sidebar, .docbar, .sidebar-backdrop, #rb-fab, #rb-panel, #backTop, .doc-toc,
  .theme-toggle, .copy-ai, .gsearch, .cmdk-overlay, .sc-overlay, .lb-overlay,
  .skip-link, .copy-btn, .code-copy, .et-copy, .reading-progress, .diagram-zoom,
  .endpoint-try, .curl-gen, .section-anchor { display: none !important; }
  html, body { background: #fff !important; }
  .layout { display: block !important; }
  .main { max-width: 100% !important; padding: 0 !important; background: #fff !important; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .endpoint, .tile, .callout, table, .code-block, .hero { box-shadow: none !important; break-inside: avoid; }
  .endpoint.collapsed .endpoint-body { display: block !important; }   /* expand for print */
  .code-block::before, .code-block::after, .page-header::after { display: none !important; }
  .code-block { padding-top: 18px !important; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 10px; color: #555; word-break: break-all; }
  h1, h2, h3, .section-title { break-after: avoid; }
}

/* ============================================================================
   RECIPE FLOWS — linear actor-tagged timeline (primary) + collapsible swim lane
   ============================================================================ */
.flow { margin: 0 0 20px; }
.tl { position:relative; list-style:none; margin:0 0 10px; padding:0; }
.tl::before { content:""; position:absolute; left:19px; top:10px; bottom:10px; width:2px; background:var(--border-2); }
.tl-step { position:relative; padding:0 0 16px 56px; }
.tl-step:last-child { padding-bottom:0; }
.tl-num { position:absolute; left:0; top:0; width:40px; height:40px; border-radius:50%; display:flex; align-items:center; justify-content:center; font:800 15px var(--font-display); color:#fff; background:linear-gradient(135deg,#2A3766,#1F2954); box-shadow:var(--shadow-sm); z-index:1; }
.tl-step.you   .tl-num { background:linear-gradient(135deg,#E11012,#A60001); }
.tl-step.chain .tl-num { background:linear-gradient(135deg,#6E4FC0,#4A2C99); }
.tl-step.ext   .tl-num { background:linear-gradient(135deg,#10A899,#0C7C72); }
/* Alternatives and extras sit outside the numbered flow, so they get a muted
   label instead of a step number. */
.api-call .call-num.call-aux { background:var(--surface2); color:var(--text-muted); }
/* Response rows react to the numbered step above them, so they carry a dot
   instead of a number - numbering is reserved for the steps you perform. */
.tl-step.resp .tl-num { width:18px; height:18px; left:11px; top:12px; font-size:0; box-shadow:none; }
.tl-card { background:var(--card); border:1px solid var(--border); border-radius:var(--radius-lg); padding:13px 16px; box-shadow:var(--shadow-sm); }
.tl-head { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.tl-actor { font:700 9px/1 var(--font-body); letter-spacing:.10em; text-transform:uppercase; padding:4px 8px; border-radius:999px; white-space:nowrap; }
.tl-actor.you   { color:var(--brand-red);  background:rgba(203,0,1,.10); }
.tl-actor.ramfi { color:var(--brand-navy); background:var(--surface2); }
.tl-actor.chain { color:#7B5BD6;           background:rgba(123,91,214,.14); }
.tl-actor.ext   { color:#0E9488;           background:rgba(16,168,153,.14); }
.tl-title { font:700 14.5px var(--font-display); color:var(--text); letter-spacing:-0.01em; }
.tl-desc { font:12.5px/1.6 var(--font-body); color:var(--text-2); margin-top:5px; }
.tl-desc code { font-family:var(--font-mono); font-size:11.5px; background:var(--surface2); color:var(--brand-navy); padding:1px 5px; border-radius:4px; }
.tl-call { display:inline-flex; align-items:center; gap:7px; margin-top:10px; font:600 11.5px var(--font-mono); color:var(--brand-red); text-decoration:none; border:1px solid var(--border-2); border-radius:8px; padding:6px 10px; transition:border-color .12s ease, background-color .12s ease; }
.tl-call:hover { border-color:var(--brand-red); background:rgba(203,0,1,.06); }
.tl-call.tl-ref { font-family:var(--font-body); font-weight:600; }
.tl-call .m { color:var(--text-dim); font-weight:700; }
.flow-details { border:1px solid var(--border); border-radius:var(--radius-lg); background:var(--surface); }
.flow-details > summary { cursor:pointer; padding:10px 14px; font:600 12px var(--font-body); color:var(--text-muted); list-style:none; display:flex; align-items:center; gap:9px; }
.flow-details > summary::-webkit-details-marker { display:none; }
.flow-details > summary::before { content:"\203A"; color:var(--text-dim); font-size:15px; transition:transform .15s ease; display:inline-block; }
.flow-details[open] > summary::before { transform:rotate(90deg); }
.flow-details > summary:hover { color:var(--brand-red); }
.flow-details .diagram-card { margin:0 14px 14px; }
/* On narrow screens the interaction diagram would otherwise shrink to ~30% and
   its labels become unreadable. Hold a minimum width and pan inside the card. */
@media (max-width: 700px) {
  .flow-details .diagram-card { overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .flow-details .diagram-card svg { min-width:680px; }
  /* the compact value-flow strip shrinks to ~40% and its labels turn to mush */
  .vf-card { -webkit-overflow-scrolling:touch; }
  .vf-card svg { min-width:760px; }
}

/* ============================================================================
   ON-THIS-PAGE merged into the LEFT sidebar (nested under the active item).
   Replaces the former right-rail .doc-toc. Works on mobile too (in the drawer).
   ============================================================================ */
.sidebar .sidebar-onpage { margin: 3px 0 10px 26px; border-left: 1.5px solid var(--border); }
.sidebar .sidebar-onpage a {
  display: block; margin: 0 0 0 -1.5px; padding: 5px 10px 5px 14px;
  font: 12px/1.45 var(--font-body); color: var(--text-muted); text-decoration: none;
  border-left: 2px solid transparent; border-radius: 0; background: none;
  white-space: normal; transition: color .12s ease, border-color .12s ease;
}
.sidebar .sidebar-onpage a:hover { color: var(--brand-navy); background: none; }
.sidebar .sidebar-onpage a.active { color: var(--brand-red); border-left-color: var(--brand-red); font-weight: 600; background: none; }
/* The old right rail is no longer created; hide it if any stale markup remains. */
.doc-toc { display: none !important; }

/* Nested endpoint nav (API Reference) inside the active item — filter + sub-headers */
.sidebar .sidebar-onpage-api .nav-search-wrap { padding: 4px 8px 8px 14px; }
.sidebar .sidebar-onpage-api .nav-search-wrap input { width: 100%; box-sizing: border-box; }
.sidebar .sidebar-onpage-api .sidebar-section { padding: 12px 8px 4px 14px; margin: 2px 0 0; }
.sidebar .sidebar-onpage-api a { padding-top: 5px; padding-bottom: 5px; }
.sidebar .sidebar-onpage-api a .method-pill { opacity: .9; }

/* ============================================================================
   STICKY SEARCH — keep the "Search all docs" box pinned at the top of the
   sidebar so it's always reachable while scrolling a long nav (e.g. API ref).
   ============================================================================ */
.sidebar .gsearch {
  position: sticky; top: 0; z-index: 6;
  margin: 0; padding: 10px 14px;
  background: var(--bg); border-bottom: 1px solid var(--border);
}

/* ──────────────────────────────────────────────────────────────────────────
   COMING SOON — unreleased surfaces (currently: Disbursements)
   Nav entries render as non-clickable markers; the reference content is
   replaced by a placeholder card so nobody builds against an unshipped API.
   ────────────────────────────────────────────────────────────────────────── */
.cs-badge {
  display: inline-block; vertical-align: middle; margin-left: 8px;
  padding: 3px 8px; border-radius: 999px;
  background: var(--surface2); border: 1px solid var(--border-2);
  color: var(--text-muted, #6B7280);
  font: 700 9.5px/1 var(--font-body); letter-spacing: .08em; text-transform: uppercase;
}

.cs-card {
  border: 1px dashed var(--border-2); border-radius: var(--radius-lg, 12px);
  background: var(--surface); padding: 26px 28px; margin-top: 4px;
}
.cs-card h3 {
  margin: 0 0 10px; font-family: var(--font-display, inherit);
  font-size: 17px; font-weight: 700; color: var(--brand-navy);
}
.cs-card p { margin: 0 0 10px; font-size: 13.5px; line-height: 1.75; color: var(--text-2); }
.cs-card p:last-child { margin-bottom: 0; }

/* Sidebar entry for an unreleased page — matches .sidebar a geometry exactly,
   so the rail stays on rhythm; only the colour signals that it's inactive. */
.sidebar .nav-soon {
  display: flex; align-items: center; gap: 10px;
  margin: 1px 12px; padding: 7px 12px; border-radius: 9px;
  font-size: 12.5px; color: var(--text-dim, #9AA1AE); cursor: default;
}
.method-pill.pill-soon {
  background: var(--surface2); color: var(--text-dim, #9AA1AE);
  border: 1px solid var(--border-2);
}

/* Grid tile for an unreleased recipe. It keeps the .tile class so it inherits the
   grid geometry and type scale — but every affordance that implies "clickable"
   (hover lift, shadow bloom, the → arrow) is switched off, and the text is muted.
   Selectors are doubled (.tile.tile-soon) to outrank the base .tile rules. */
.tile-soon {
  display: block; cursor: default;
  border: 1px dashed var(--border-2); border-radius: var(--radius-lg);
  padding: 20px; background: var(--card); box-shadow: none;
}
/* .main h3 is set with !important in the page stylesheets, so match that weight. */
.tile.tile-soon h3 { font-weight: 700; color: var(--text-dim, #9AA1AE) !important; }
.tile.tile-soon p  { color: var(--text-dim, #9AA1AE); }
.tile.tile-soon h3::after { display: none !important; content: none !important; }
.tile.tile-soon:hover {
  transform: none; box-shadow: none;
  border-color: var(--border-2);
}

/* In-endpoint "coming soon" banner + compact sidebar tag (Linked Accounts, Cards). */
.cs-note {
  display: flex; gap: 8px; align-items: flex-start;
  margin: 0 0 14px; padding: 11px 14px;
  border: 1px dashed var(--border-2); border-radius: var(--radius, 9px);
  background: var(--surface); color: var(--text-2);
  font-size: 12.5px; line-height: 1.6;
}
.cs-note strong { color: var(--brand-navy); }
.sidebar a .cs-tag {
  margin-left: auto; padding: 1px 6px; border-radius: 999px;
  background: var(--surface2); border: 1px solid var(--border-2);
  color: var(--text-dim, #9AA1AE);
  font: 700 8.5px/1.5 var(--font-body); letter-spacing: .08em; text-transform: uppercase;
}

/* JSON-valued request fields (arrays, nested objects) need room to breathe. */
.cg-input.cg-json { width:100%; box-sizing:border-box; font-family:var(--font-mono);
  font-size:11.5px; line-height:1.5; resize:vertical; min-height:76px; white-space:pre; }