/* The reference uses the site palette. Code previews use the same Catppuccin
   Latte / Mocha tokens as blog code blocks. Both follow the site theme. */
:root:root:has(.api-docs){
  --api-bg:var(--bg);
  --api-text:var(--ink);
  --api-muted:var(--muted);
  --api-layer:var(--card);
  --api-border:var(--line)}
.api-docs{background:var(--api-bg);color:var(--api-text);min-width:0}
.api-docs-intro{padding-block:32px 20px}
.api-docs-title{font-size:2em;font-weight:var(--weight-bold);margin:0 0 .67em}
.api-docs a{color:var(--accent)}
.api-docs .menu-content a{color:var(--api-text)}
.api-docs-fallback{padding-bottom:40px}
.api-docs-fallback section{margin-top:32px;scroll-margin-top:var(--navbar-height)}
.api-docs-fallback pre{background:var(--code-bg);color:var(--code-text);padding:16px;overflow:auto;max-width:100%}
.api-docs-fallback dd{margin-inline-start:0}
.api-docs-fallback details{padding-block:8px}
.api-docs-fallback summary{cursor:pointer}
#api-reference{min-width:0}
/* Root tokens also update Redoc's derived colors. The repeated :root beats
   its :root.dark defaults even when the renderer injects those styles later. */
:root:root:has(.api-docs){
  --color-warm-grey-1:var(--api-bg);
  --color-warm-grey-2:var(--api-bg);
  --color-warm-grey-3:var(--api-layer);
  --color-warm-grey-4:color-mix(in srgb,var(--api-bg),var(--api-text) 12%);
  --color-warm-grey-5:var(--api-border);
  --color-warm-grey-6:var(--api-muted);
  --color-warm-grey-7:var(--api-muted);
  --color-warm-grey-8:var(--api-text);
  --color-warm-grey-9:var(--api-text);
  --color-warm-grey-10:var(--api-text);
  --color-warm-grey-11:var(--api-text);
  --bg-color:var(--api-bg);
  --bg-color-raised:var(--api-layer);
  --bg-color-hover:var(--api-layer);
  --bg-color-active:var(--api-layer);
  --bg-color-tonal:var(--api-layer);
  --bg-color-tonal-hover:var(--api-layer);
  --bg-color-tonal-active:var(--api-layer);
  --layer-color:var(--api-layer);
  --layer-color-hover:var(--api-bg);
  --layer-color-active:var(--api-bg);
  --layer-color-ontonal:var(--api-layer);
  --layer-color-ontonal-hover:var(--api-bg);
  --layer-color-ontonal-active:var(--api-bg);
  --border-color-primary:var(--api-border);
  --border-color-secondary:var(--api-border);
  --button-border-color-focused:var(--accent);
  --button-bg-color-hover:var(--accent-soft);
  --button-bg-color-active:var(--accent-soft);
  --color-hover-base:var(--accent-soft);
  --dropdown-menu-item-bg-color-hover:var(--accent-soft);
  --dropdown-menu-item-bg-color-active:var(--accent-soft);
  --input-border-color-focused:var(--accent);
  --search-item-border-color-focused:var(--accent);
  --search-recent-item-border-color-focused:var(--accent);
  --search-suggested-item-border-color-focused:var(--accent);
  --text-color-primary:var(--api-text);
  --text-color-secondary:var(--api-text);
  --text-color-description:var(--api-muted);
  --text-color-helper:var(--api-muted);
  --text-color-disabled:var(--api-muted);
  --heading-text-color:var(--api-text);
  --color-primary-base:var(--accent);
  --color-primary-hover:var(--accent);
  --color-primary-active:var(--button-hover);
  --color-primary-bg:var(--accent-soft);
  --color-primary-bg-hover:var(--accent-soft);
  --color-primary-border:var(--accent);
  --color-primary-border-hover:var(--accent);
  --color-primary-text:var(--accent);
  --color-primary-text-hover:var(--accent);
  --color-primary-text-active:var(--accent);
  --color-brand-6:var(--accent);
  --color-brand-7:var(--accent);
  --color-brand-8:var(--accent);
  /* Documented status codes use neutral panels and text. Their numbers and
     labels carry the meaning; sage marks the site's interactive accents. */
  --color-success-base:var(--accent);
  --color-success-text:var(--api-text);
  --color-success-bg:var(--api-layer);
  --color-success-border:var(--api-border);
  --color-error-base:var(--api-muted);
  --color-error-text:var(--api-text);
  --color-error-bg:var(--api-layer);
  --color-error-border:var(--api-border);
  --color-info-base:var(--api-muted);
  --color-info-text:var(--api-text);
  --color-info-bg:var(--api-layer);
  --color-info-border:var(--api-border);
  --color-warning-base:var(--api-muted);
  --color-warning-text:var(--api-text);
  --color-warning-bg:var(--api-layer);
  --color-warning-border:var(--api-border);
  --link-color-primary:var(--accent);
  --link-color-visited:var(--accent);
  --sidebar-bg-color:var(--api-bg);
  --sidebar-border-color:var(--api-border);
  --sidebar-text-color:var(--api-text);
  --tree-content-color-default:var(--api-text);
  --tree-content-color-hover:var(--accent);
  --tree-content-color-disabled:var(--api-muted);
  --tree-bg-color-active:var(--api-layer);
  --tree-bg-color-hover:var(--api-layer);
  --search-trigger-bg-color:var(--api-layer);
  --search-trigger-color:var(--api-muted);
  --search-input-icon-color:var(--accent);
  --tab-bg-color-filled:var(--accent-soft);
  --schema-property-required-label-text-color:var(--accent);
  --schema-property-access-label-text-color:var(--api-text);
  --badge-deprecated-text-color:var(--api-text);
  --badge-deprecated-bg-color:var(--api-layer);
  --schema-recursive-text-color:var(--api-text);
  --schema-recursive-bg-color:var(--api-layer);
  --schema-recursive-border-color:var(--api-border);
  --panel-samples-bg-color:var(--api-layer);
  --panel-samples-block-bg-color:var(--api-layer);
  --panel-samples-body-bg-color:var(--api-layer);
  --panel-samples-code-block-bg-color:var(--code-bg);
  --panel-samples-heading-bg-color:var(--api-layer);
  --panel-samples-text-color:var(--api-text);
  --panel-samples-body-text-color:var(--api-text);
  --panel-samples-heading-text-color:var(--api-text);
  --code-block-bg-color:var(--code-bg);
  --code-block-text-color:var(--code-text);
  --code-block-tokens-default-color:var(--code-text);
  --code-block-tokens-property-color:var(--code-blue);
  --code-block-tokens-property-string-color:var(--code-blue);
  --code-block-tokens-string-color:var(--code-green);
  --code-block-tokens-number-color:var(--code-peach);
  --code-block-tokens-boolean-color:var(--code-mauve);
  --code-block-tokens-keyword-color:var(--code-mauve);
  --code-block-tokens-comment-color:var(--code-overlay2);
  --inline-code-bg-color:var(--api-layer);
  --inline-code-text-color:var(--api-text);
  --inline-code-border-color:var(--api-border);
  --font-family-base:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --font-family-monospaced:var(--font-domain);
  --heading-font-family:var(--font-family-base);
  --sidebar-width:240px;
  --panel-samples-width:38%;
}
/* Redoc assigns fixed colors to method badges and expanded schema levels.
   These stable component hooks override
   those styles without touching the syntax highlighter or vendored bundle. */
:root:has(.api-docs) [data-component-name="Tags/HttpTag"],
:root:has(.api-docs) [data-component-name="Tag/Tag"]{
  --tag-color:var(--accent);
  --tag-bg-color:var(--accent-soft);
  --tag-bg-color-hover:var(--accent-soft);
  --tag-border-color:var(--api-border);
  --tag-border-color-hover:var(--accent);
  --tag-border-color-focused:var(--accent)}
#api-reference .schema-name{color:var(--api-text)}
#api-reference [data-schema-nested-open] > div,
#api-reference .view-nested-wrapper > div{border-left-color:var(--api-border)}
#api-reference [data-schema-nested-open] > button > span:first-child,
#api-reference .view-nested-wrapper > button > span:first-child{
  color:var(--api-muted);border-color:var(--api-border)}
/* Field markers are separate badges, while type and constraint text stays
   inline. Use the schema-name hook to find the metadata row without relying
   on generated styled-components class names. */
#api-reference div:has(> span > .schema-name) > span:not(:has(> .schema-name)),
.api-docs .api-docs-label{
  display:inline-flex;align-items:center;
  padding:0 6px;border:1px solid var(--api-border);border-radius:4px;
  background:var(--api-layer);font-size:var(--font-size-base);
  font-weight:var(--weight-semibold);line-height:var(--line-height-base)}
.api-docs .api-docs-label-required{color:var(--accent)}
/* Search dialogs mount outside the reference. Keep their controls in the
   site palette, and make the clear button readable and easy to target. */
:root:has(.api-docs) [data-component-name="Search/SearchInput"] button{
  min-width:32px;min-height:32px;color:var(--api-muted);border-radius:4px}
:root:has(.api-docs) [data-component-name="Search/SearchInput"] button svg path{fill:currentColor}
:root:has(.api-docs) [data-component-name="Search/SearchInput"] button:hover{
  color:var(--accent);background:var(--accent-soft)}
#api-reference [data-testid="floating-button"]{
  background:var(--api-layer);color:var(--accent);border:1px solid var(--accent)}
#api-reference [data-testid="floating-button"]:focus-visible,
#api-reference [data-testid="search-trigger"]:focus-visible,
:root:has(.api-docs) [data-component-name="Search/SearchInput"] button:focus-visible{
  outline:3px solid var(--accent);outline-offset:3px}
/* The background belongs to the credit's parent. Spell out the vendor name
   in the expanded sidebar; the pinned compact mark remains when collapsed. */
#api-reference span:has(> a[href="https://redocly.com/redoc/"]){
  flex-shrink:0;width:auto;height:auto;padding:2px 6px;border-radius:6px;
  background:var(--api-layer);border:1px solid var(--api-border)}
#api-reference span:has(> a[href="https://redocly.com/redoc/"]):hover{
  background:var(--accent-soft);border-color:var(--accent)}
#api-reference a[href="https://redocly.com/redoc/"]{gap:4px;white-space:nowrap}
#api-reference a[href="https://redocly.com/redoc/"] p{margin:0;font-size:11px;line-height:16px}
#api-reference a[href="https://redocly.com/redoc/"]:has(p)::after{
  content:"Redocly";font-size:11px;font-weight:var(--weight-label);line-height:16px}
#api-reference a[href="https://redocly.com/redoc/"]:has(p) img{display:none}
#api-reference a[href="https://redocly.com/redoc/"] img{width:16px;height:16px;filter:grayscale(1)}
/* The shared header provides the one saved theme control. */
#api-reference [data-testid="color-mode-switcher"]{display:none}
@media(max-width:600px){
  .api-docs-intro{padding-block:24px 16px}
  .api-docs-fallback pre{font-size:12px}
  /* Keep the native page title at full width. Reserve the action row in the
     server HTML too, before the copy dropdown mounts during hydration. */
  #api-reference div:has(> div > :is(h1,h2)):has(> div + div){
    flex-direction:column;align-items:stretch;row-gap:12px}
  #api-reference div:has(> div > :is(h1,h2)):has(> div + div) > div:last-child{min-height:34px}
  #api-reference [data-testid="page-actions"]{margin-left:0;padding-left:0}
}