/* API explorer, loaded after /docs.css (which supplies the tokens, dark mode, theme toggle, skip link and callouts).
 * Served same-origin as /explorer.css; no inline styles. Ideas reimplemented from 21st.dev (no code copied):
 * diceui/status, rmahammad/api-request-inspector, ddoemonn/segmented-control, mohammadshehadeh/json-viewer. */
:root{
 --x-ok:#17694a;--x-ok-bg:#e3f4ec;--x-info:#1a5683;--x-info-bg:#e2effa;--x-warn:#7a4d05;--x-warn-bg:#fdf0d8;--x-err:#a8210f;--x-err-bg:#fdebe9;
 --j-key:#5b45a6;--j-str:#17694a;--j-num:#1a5683;--j-lit:#994300;--j-punct:#5d6b80;
}

[hidden]{display:none!important}
body.explorer{min-height:100vh}

/* Top bar */
.x-bar{display:flex;align-items:center;gap:10px 20px;flex-wrap:wrap;max-width:1280px;margin:0 auto;padding:16px 24px;border-bottom:1px solid var(--line)}
.x-crumbs{font-size:13px;color:var(--muted)}
.x-crumbs a{color:inherit;text-decoration:none}
@media (hover:hover){.x-crumbs a:hover{color:var(--ink)}}
.x-crumbs [aria-current]{color:var(--ink);font-weight:600}
.x-bar-end{display:flex;align-items:center;gap:16px;margin-left:auto}
.x-bar-end .docs-back{margin:0}

main{max-width:1280px;margin:0 auto;padding:32px 24px 64px}
.x-intro{max-width:72ch;margin-bottom:24px}
.x-intro h1{font-size:30px;line-height:1.15;letter-spacing:-.5px;font-weight:600;margin:0 0 8px;text-wrap:balance}
.x-lede{margin:0;color:var(--muted);text-wrap:pretty}
.x-intro .callout{margin:16px 0 0}

/* Request | Response cards */
.x-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:20px;align-items:start}
.x-card{min-width:0;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:20px 24px;box-shadow:var(--shadow)}
.x-card-head{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:0 0 16px}
.x-card-head h2{margin:0 auto 0 0;font-size:16px;font-weight:600;letter-spacing:-.1px}
.x-response{position:sticky;top:16px}

/* Form */
#explorer-form{display:grid;gap:18px}
#explorer-form .callout{margin:0}
.x-field{display:grid;gap:6px;min-width:0}
.x-field label{font-size:13px;font-weight:600;color:var(--ink)}
.x-opt{font-weight:400;color:var(--muted)}
.x-help{margin:0;font-size:13px;line-height:1.5;color:var(--muted);text-wrap:pretty}
.x-op-help{display:grid;gap:6px}
.x-op-help a{color:var(--ink);text-underline-offset:2px;white-space:nowrap}
.x-more summary{cursor:pointer;font-size:13px;color:var(--muted);width:fit-content}
@media (hover:hover){.x-more summary:hover{color:var(--ink)}}
.x-more[open] summary{margin-bottom:4px}
input,select,textarea{width:100%;min-width:0;font:inherit;font-size:16px;color:var(--ink);background:var(--bg);border:1px solid var(--control);border-radius:6px;padding:8px 10px;transition:border-color 150ms ease,box-shadow 150ms ease}
@media (min-width:821px){input,select,textarea{font-size:14px}}
select{appearance:none;padding-right:32px;background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);background-position:calc(100% - 17px) 55%,calc(100% - 12px) 55%;background-size:5px 5px;background-repeat:no-repeat;text-overflow:ellipsis}
::placeholder{color:var(--muted);opacity:1}
textarea{font:13px/1.6 var(--mono);resize:vertical;min-height:180px;tab-size:2}
:is(input,select,textarea):focus-visible{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
textarea[aria-invalid=true]{border-color:var(--x-err)}
textarea[aria-invalid=true]:focus-visible{box-shadow:0 0 0 3px var(--x-err-bg)}
.x-body-error{min-height:1.4em;margin:0;font-size:13px;color:var(--x-err)}
.x-body-error:empty{min-height:0}

.x-op{display:flex;gap:8px;align-items:center;min-width:0}
.x-op select{flex:1}
.x-method{flex:none;min-width:52px;text-align:center;font:700 11px/1 var(--mono);letter-spacing:.04em;padding:8px;border-radius:6px;background:var(--x-ok-bg);color:var(--x-ok)}
.x-method[data-method=POST]{background:var(--x-warn-bg);color:var(--x-warn)}

.x-actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.x-button{height:36px;padding:0 16px;border:1px solid var(--accent);border-radius:6px;background:var(--accent);color:var(--surface);font:600 14px/1 var(--sans);cursor:pointer;transition:transform 140ms var(--ease-out),opacity 150ms ease}
.x-button:active:not(:disabled){transform:scale(.97)}
.x-button:disabled{opacity:.6;cursor:progress}
.x-button.secondary{background:var(--surface);color:var(--ink);border-color:var(--control)}
.x-hint{margin-left:auto;font-size:12px;color:var(--muted)}

/* Response header: status pill, timing, size */
.x-pill{display:inline-flex;align-items:center;gap:7px;padding:4px 10px 4px 9px;border-radius:999px;font-size:12px;font-weight:600;white-space:nowrap;font-variant-numeric:tabular-nums;background:var(--sunken);color:var(--muted);border:1px solid var(--line);transition:background-color 180ms ease,color 180ms ease,border-color 180ms ease}
.x-pill i{position:relative;width:7px;height:7px;border-radius:50%;background:currentColor;flex:none}
.x-pill[data-tone=ok]{background:var(--x-ok-bg);color:var(--x-ok);border-color:transparent}
.x-pill[data-tone=info]{background:var(--x-info-bg);color:var(--x-info);border-color:transparent}
.x-pill[data-tone=warn]{background:var(--x-warn-bg);color:var(--x-warn);border-color:transparent}
.x-pill[data-tone=error]{background:var(--x-err-bg);color:var(--x-err);border-color:transparent}
.x-pill[data-tone=pending] i::after{content:"";position:absolute;inset:0;border-radius:50%;background:currentColor;animation:x-ping 1.6s var(--ease-out) infinite}
/* One listening motion across docs and dashboard: a solid dot plus one ring that grows and fades, token easing. */
@keyframes x-ping{from{transform:scale(1);opacity:.45}to{transform:scale(2.6);opacity:0}}
.x-meta{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}

/* Segmented tabs with a sliding thumb (transform only; no slide on first placement) */
.x-tabs{position:relative;display:inline-grid;grid-auto-flow:column;grid-auto-columns:1fr;padding:3px;border-radius:9px;background:var(--sunken);border:1px solid var(--line);margin-bottom:12px}
.x-tabs button{position:relative;z-index:1;border:0;background:none;min-height:30px;padding:0 16px;border-radius:7px;font:600 13px/1 var(--sans);color:var(--muted);cursor:pointer;transition:color 150ms ease}
.x-tabs button[aria-selected=true]{color:var(--ink)}
.x-tabs button:focus-visible{outline-offset:-2px}
.x-thumb{position:absolute;top:3px;bottom:3px;left:0;border-radius:7px;background:var(--surface);box-shadow:0 1px 2px rgb(0 0 0/.12),0 0 0 1px var(--line)}
.x-tabs.x-ready .x-thumb{transition:transform 220ms var(--ease-out),width 220ms var(--ease-out)}
.x-panel{position:relative;min-width:0}
.x-panel:focus-visible{outline-offset:2px}
.x-code-wrap{position:relative;min-width:0}
.x-code{margin:0;min-height:240px;max-height:62vh;overflow:auto;white-space:pre;padding:14px 16px;font:12.5px/1.7 var(--mono);tab-size:2;color:var(--code-ink);background:var(--code-bg);border:1px solid var(--line);border-radius:var(--radius)}
#curl{white-space:pre-wrap;overflow-wrap:anywhere;min-height:0}
.x-code-wrap .x-copy{position:absolute;top:8px;right:8px;z-index:1}
.x-code-wrap:has(.x-copy) .x-code{padding-top:44px}
@media (min-width:821px){.x-code-wrap:has(.x-copy) .x-code{padding-top:14px;padding-right:96px}}
#panel-curl .x-help{margin-top:10px}
.x-empty{display:grid;justify-items:center;align-content:center;gap:6px;min-height:240px;border:1px dashed var(--line-strong);border-radius:var(--radius);color:var(--muted);font-size:14px;text-align:center;padding:24px}
.x-empty strong{color:var(--ink);font-weight:600}
.x-empty span:last-child{max-width:34ch;text-wrap:pretty}
.x-empty-mark{width:28px;height:28px;border-radius:50%;border:2px solid var(--line-strong);display:grid;place-items:center;margin-bottom:4px}
.x-empty-mark::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--line-strong)}

/* JSON token colours (each is >= 4.5:1 on --code-bg in both themes) */
.j-key{color:var(--j-key)}.j-str{color:var(--j-str)}.j-num{color:var(--j-num)}.j-lit{color:var(--j-lit)}.j-p{color:var(--j-punct)}
.x-hdr{display:grid;grid-template-columns:max-content 1fr;gap:4px 16px;font:12.5px/1.6 var(--mono);margin:0;padding:14px 16px;border:1px solid var(--line);border-radius:var(--radius);background:var(--code-bg);color:var(--code-ink)}
.x-hdr dt{color:var(--muted)}.x-hdr dd{margin:0;overflow-wrap:anywhere}

/* Copy button: idle/copied crossfade */
.x-copy{display:inline-grid;grid-template-areas:"x";place-items:center;min-width:76px;height:28px;padding:0 10px;border:1px solid var(--control);border-radius:7px;background:var(--surface);color:var(--ink);font:500 12px/1 var(--sans);cursor:pointer;transition:transform 140ms var(--ease-out),border-color 150ms ease,color 150ms ease}
.x-copy:active{transform:scale(.97)}
.x-copy span{grid-area:x;transition:opacity 160ms ease,filter 160ms ease}
.x-copy .done,.x-copy .fail{opacity:0;filter:blur(2px)}
.x-copy[data-state=copied] .idle,.x-copy[data-state=failed] .idle{opacity:0;filter:blur(2px)}
.x-copy[data-state=copied] .done,.x-copy[data-state=failed] .fail{opacity:1;filter:none}
.x-copy[data-state=copied]{color:var(--x-ok);border-color:var(--x-ok)}
.x-copy[data-state=failed]{color:var(--x-err);border-color:var(--x-err)}

.x-fine{margin:28px 0 0;font-size:13px;color:var(--muted)}
/* "Get a real session token" disclosure, the contextual error note and a Send row that stays reachable in a long form. */
.x-token{margin:0 0 16px;border:1px solid var(--line);border-radius:var(--radius);padding:10px 14px;background:var(--sunken)}
.x-token summary{cursor:pointer;font-size:14px;font-weight:600}
.x-token[open] summary{margin-bottom:8px}
.x-token .x-help+.x-help,.x-steps+.x-help{margin-top:8px}
.x-steps{margin:8px 0 0;padding-inline-start:20px;font-size:13px;line-height:1.5;color:var(--muted)}
.x-steps li+li{margin-top:4px}
.x-response-help{margin:0 0 12px;font-size:14px}
.x-response-help[hidden]{display:none}
.x-response-help p{margin:2px 0 0}
#explorer-form .x-actions{position:sticky;bottom:0;z-index:1;margin:0 -20px -20px;padding:12px 20px;background:var(--surface);border-top:1px solid var(--line);border-radius:0 0 14px 14px}

@media (max-width:980px){.x-grid{grid-template-columns:minmax(0,1fr)}.x-response{position:static}}
@media (max-width:820px){
 .x-bar{padding:12px 16px}.x-bar-end{display:contents} .x-crumbs{order:3;flex:1 1 auto}.x-bar-end .docs-back{order:4}
 main{padding:20px 16px 48px}.x-intro h1{font-size:26px}
 .x-card{padding:16px;border-radius:12px}
 #explorer-form .x-actions{margin:0 -16px -16px;padding:12px 16px;border-radius:0 0 12px 12px}
 .x-hint{display:none}
 .x-tabs{display:grid;width:100%}
}
@media (prefers-reduced-motion:reduce){.x-tabs.x-ready .x-thumb,.x-button,.x-copy{transition:none}.x-pill[data-tone=pending] i::after{animation:none}.x-copy span{filter:none!important}.x-button:active,.x-copy:active{transform:none}}
/* Response jump (api-explorer.js): only in the one-column layout, above the sticky Send bar. 200 ms in and out, transform
 * and opacity only; a newer response retargets the transition. Reduced motion: opacity only. */
.x-jump{position:absolute;left:50%;bottom:calc(100% + 10px);display:inline-flex;align-items:center;gap:8px;max-width:calc(100% - 32px);padding:7px 12px 7px 10px;border:1px solid var(--line-strong);border-radius:999px;background:var(--surface);color:var(--ink);font:500 13px/1.2 var(--sans);box-shadow:0 8px 24px -6px rgb(0 0 0/.18),0 1px 2px rgb(0 0 0/.12);cursor:pointer;white-space:nowrap;overflow:hidden;transform:translateX(-50%);transition:transform 200ms var(--ease-out),opacity 200ms var(--ease-out)}
@starting-style{.x-jump{opacity:0;transform:translateX(-50%) translateY(6px)}}
.x-jump[hidden]{display:none}
.x-jump[data-leaving]{opacity:0;transform:translateX(-50%) translateY(6px);pointer-events:none}
.x-jump i{width:7px;height:7px;border-radius:50%;background:currentColor;flex:none}
.x-jump[data-tone=ok] i{color:var(--x-ok)}.x-jump[data-tone=info] i{color:var(--x-info)}
.x-jump[data-tone=warn] i{color:var(--x-warn)}.x-jump[data-tone=error] i{color:var(--x-err)}
.x-jump-cta{color:var(--muted);padding-left:8px;border-left:1px solid var(--line)}
.x-jump:active{transform:translateX(-50%) scale(.97)}
.x-jump:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media (min-width:981px){.x-jump{display:none!important}}
@media (prefers-reduced-motion:reduce){.x-jump{transition:opacity 160ms ease}@starting-style{.x-jump{transform:translateX(-50%)}}.x-jump[data-leaving],.x-jump:active{transform:translateX(-50%)}}