/* A2A InstaPay Sandbox design system: shared by the developer site and the portal.
   Poppins for the interface, Fraunces for display headings, JetBrains Mono for code. Navy and gold from finap-usa.com. */
:root {
  /* Brand */
  --navy: #0A1F44; --navy-2: #0A2540; --navy-deep: #06122A; --gold: #C69243; --gold-2: #A8772F; --gold-soft: #F6EEDF;
  /* Neutrals */
  --ink: #0F172A; --ink-2: #334155; --slate: #475569; --slate-2: #64748B; --line: #E2E8F0; --line-2: #EDF1F6;
  --bg: #FFFFFF; --bg-soft: #F7F9FC; --bg-muted: #F1F5F9;
  /* Status */
  --ok: #157347; --ok-bg: #E8F6EE; --ok-line: #BFE3CD;
  --warn: #8A4B00; --warn-bg: #FFF6E0; --warn-line: #F0D9A8;
  --bad: #B42318; --bad-bg: #FDEDEB; --bad-line: #F5C6C0;
  --info: #1D4ED8; --info-bg: #EEF3FF; --info-line: #D3DFFB;
  /* HTTP methods (white text passes WCAG AA on each) */
  --m-get: #13795B; --m-post: #2457A6; --m-put: #8A4B00; --m-patch: #7A4CB3; --m-delete: #B42318;
  /* Code panels */
  --code-bg: #0B1324; --code-head: #0F1A31; --code-line: #1E2A44; --code-text: #E2E8F0; --code-dim: #8494AE;
  --tok-key: #93C5FD; --tok-str: #A7E3B4; --tok-num: #F9C97B; --tok-lit: #F0A6CA; --tok-flag: #F5C77E; --tok-cmd: #C4B5FD; --tok-url: #7DD3FC; --tok-var: #FCA5A5; --tok-com: #6B7A94;
  /* Type */
  --font-sans: "Poppins", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: "Fraunces", ui-serif, Georgia, Cambria, "Times New Roman", serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --fs-xs: 12px; --fs-sm: 13.5px; --fs-md: 15px; --fs-lg: 17px; --fs-xl: 20px;
  /* Shape and depth */
  --r-sm: 6px; --r-md: 10px; --r-lg: 14px; --r-xl: 20px; --r-pill: 999px;
  --sh-1: 0 1px 2px rgba(15,23,42,.05); --sh-2: 0 4px 16px rgba(10,31,68,.07); --sh-3: 0 18px 48px rgba(10,31,68,.14);
  /* Spacing */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 72px;
  --focus: 0 0 0 3px rgba(198,146,67,.45);
}

/* Code panel: one component for every request, response and snippet (see /ui/code.js). */
.codepanel { position: relative; margin: 16px 0; background: var(--code-bg); border: 1px solid var(--code-line); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh-1); color: var(--code-text); }
.codepanel-head { display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 8px 0 14px; background: var(--code-head); border-bottom: 1px solid var(--code-line); }
.codepanel-lang { font: 600 11px/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--code-dim); }
.codepanel-title { font: 500 12.5px/1.3 var(--font-sans); color: #CBD5E1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.codepanel-tabs { display: flex; gap: 2px; }
.codepanel-tabs button { font: 600 12px/1 var(--font-sans); color: var(--code-dim); background: transparent; border: 0; border-radius: var(--r-sm); padding: 8px 10px; cursor: pointer; }
.codepanel-tabs button:hover { color: #fff; background: rgba(255,255,255,.06); }
.codepanel-tabs button[aria-selected="true"] { color: #fff; background: rgba(255,255,255,.1); }
.codepanel-actions { margin-left: auto; display: flex; gap: 4px; }
.copybtn { display: inline-flex; align-items: center; gap: 6px; font: 600 12px/1 var(--font-sans); color: #CBD5E1; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); border-radius: var(--r-sm); padding: 7px 10px; cursor: pointer; transition: background .15s, color .15s; }
.copybtn:hover { background: rgba(255,255,255,.14); color: #fff; }
.copybtn:focus-visible { outline: none; box-shadow: var(--focus); }
.copybtn.done { color: #A7E3B4; border-color: rgba(167,227,180,.45); }
.copybtn svg { width: 14px; height: 14px; }
.codepanel pre { margin: 0; padding: 14px 16px; overflow: auto; max-height: 520px; background: transparent; color: inherit; border-radius: 0; white-space: pre; word-break: normal; tab-size: 2; }
.codepanel code, .codepanel pre { font: 13px/1.7 var(--font-mono); }
.codepanel code { background: none; border: 0; padding: 0; color: inherit; white-space: pre; word-break: normal; }
.codepanel[data-collapsed="true"] pre { max-height: 220px; }
.codepanel .expand { display: block; width: 100%; font: 600 12px/1 var(--font-sans); color: #CBD5E1; background: var(--code-head); border: 0; border-top: 1px solid var(--code-line); padding: 10px; cursor: pointer; }
.codepanel .expand:hover { color: #fff; }
.codepanel-pane[hidden] { display: none; }
.codepanel.response { --code-bg: #0A1A1F; --code-head: #0D2228; --code-line: #183338; }
/* Tokens */
.t-key { color: var(--tok-key); } .t-str { color: var(--tok-str); } .t-num { color: var(--tok-num); } .t-lit { color: var(--tok-lit); }
.t-flag { color: var(--tok-flag); } .t-cmd { color: var(--tok-cmd); font-weight: 600; } .t-url { color: var(--tok-url); } .t-var { color: var(--tok-var); } .t-com { color: var(--tok-com); font-style: italic; }
.t-punc { color: #94A3B8; } .t-tag { color: var(--tok-key); } .t-attr { color: var(--tok-flag); }

/* HTTP method badge */
.m { display: inline-block; font: 700 10.5px/1 var(--font-mono); letter-spacing: .04em; padding: 5px 7px; border-radius: var(--r-sm); color: #fff; min-width: 52px; text-align: center; vertical-align: middle; }
.m.small { min-width: 44px; font-size: 9.5px; padding: 3px 5px; }
.m.GET { background: var(--m-get); } .m.POST { background: var(--m-post); } .m.PUT { background: var(--m-put); } .m.PATCH { background: var(--m-patch); } .m.DELETE { background: var(--m-delete); }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; } }