/* Outrun Noir: documentation theme layer (Read mode). Loaded last on every docs page; remove the <link> to roll back.
   Ink / cream / one orange event. Hairlines, square corners, one sans family, mono only for code and data. Works in dark and light. */
@font-face{font-family:"Jakarta";src:url(/account/assets/landing-jakarta.woff2) format("woff2");font-weight:200 800;font-display:swap}
@font-face{font-family:"Geist Mono";src:url(/account/assets/landing-geist-mono.woff2) format("woff2");font-weight:100 900;font-display:swap}

:root{
  --or-bg:#0A0A0A;--or-panel:transparent;--or-raised:rgba(245,243,238,.035);--or-text:#F5F3EE;--or-muted:rgba(245,243,238,.68);
  --or-line:rgba(245,243,238,.11);--or-accent:#FF5500;--or-soft:transparent;--or-code:#0F0F0E;--or-code-text:#F5F3EE;--or-link:#F5F3EE;
  --nd-dim:rgba(245,243,238,.56);--nd-line-2:rgba(245,243,238,.18);--nd-plate:url(/docs/art/vortex-mono-dark.webp);
  --nd-sans:"Jakarta",ui-sans-serif,system-ui,sans-serif;--nd-mono:"Geist Mono",ui-monospace,monospace;
  --or-ease:cubic-bezier(.16,1,.3,1);
  scrollbar-color:#2a2a28 #0A0A0A;caret-color:#FF5500;
}
:root[data-theme=light]{
  --or-bg:#F5F3EE;--or-panel:transparent;--or-raised:rgba(10,10,10,.035);--or-text:#0A0A0A;--or-muted:rgba(10,10,10,.70);
  --or-line:rgba(10,10,10,.12);--or-soft:transparent;--or-code:#0A0A0A;--or-code-text:#F5F3EE;--or-link:#0A0A0A;
  --nd-dim:rgba(10,10,10,.60);--nd-line-2:rgba(10,10,10,.22);--nd-plate:url(/docs/art/vortex-mono-light.webp);
  scrollbar-color:#cfccc3 #F5F3EE;
}
body.noir-docs{background:var(--or-bg);color:var(--or-text);font-family:var(--nd-sans);font-size:1rem}
body.noir-docs *{border-radius:0!important;box-shadow:none!important}
body.noir-docs ::selection{background:#FF5500;color:#0A0A0A}
body.noir-docs .announcement{display:none}

/* ---------- header ---------- */
body.noir-docs .site-header{background:color-mix(in srgb,var(--or-bg) 84%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--or-line)}
body.noir-docs .site-header .brand img{height:24px;width:auto}
body.noir-docs .site-header .brand{position:relative}
body.noir-docs .site-header .brand::after{content:"";position:absolute;inset:0 auto 0 0;width:152px;pointer-events:none;background:var(--or-accent);-webkit-mask:url(/docs/logos/outrun-needle.svg) center/contain no-repeat;mask:url(/docs/logos/outrun-needle.svg) center/contain no-repeat}
body.noir-docs .outrun-search-open{background:none;border:1px solid var(--nd-line-2);color:var(--or-muted)}
body.noir-docs .outrun-search-open kbd{background:none;border:1px solid var(--or-line);font-family:var(--nd-sans);font-size:11px;color:var(--nd-dim)}
body.noir-docs .navlinks a{background:none!important;border:0!important;color:var(--or-muted);font-size:14px;font-weight:500}
body.noir-docs .navlinks a.current,body.noir-docs .navlinks a:hover{color:var(--or-text)}
body.noir-docs .navlinks a.current{box-shadow:inset 0 -1px 0 #FF5500!important}
body.noir-docs .outrun-dashboard-link{background:#FF5500!important;border-color:#FF5500!important;color:#0A0A0A!important;font-weight:500}
body.noir-docs .outrun-dashboard-link:hover{background:var(--or-text)!important;border-color:var(--or-text)!important;color:var(--or-bg)!important}
body.noir-docs .outrun-theme-toggle{background:none;border:1px solid var(--nd-line-2)}

/* ---------- left nav ---------- */
body.noir-docs .docs-sidebar{border-right:1px solid var(--or-line)}
body.noir-docs .sidebar-group-title{font-family:var(--nd-sans);font-size:12.5px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--nd-dim)}
body.noir-docs .sidebar-link{background:none!important;border:0!important;color:var(--or-muted);font-size:14px;font-weight:450;line-height:1.4;padding-left:14px;position:relative;align-items:flex-start!important;transition:color .18s}
body.noir-docs .sidebar-link>svg,body.noir-docs .sidebar-link>.nd-logo{flex:none;width:16px;height:16px;margin-top:2px;opacity:.6}
body.noir-docs .sidebar-link>.nd-logo{opacity:1}
body.noir-docs .sidebar-link:has(>.nd-logo)>svg{display:none}
body.noir-docs .sidebar-link.nd-tool>svg{color:#FF5500;opacity:1}
body.noir-docs .sidebar-link:hover{color:var(--or-text)}
body.noir-docs .sidebar-link.active{color:var(--or-text)}
body.noir-docs .sidebar-link.active::before{content:"";position:absolute;left:0;top:var(--nd-mark-top,calc(50% - 2.5px));width:5px;height:5px;background:#FF5500;transform:rotate(45deg)}
body.noir-docs .sidebar-link.active svg{opacity:1;color:var(--or-text)}
/* tool logos (lobe-icons, MIT) rendered as masks so they take the brand colour */
body.noir-docs .nd-logo{display:inline-block;width:16px;height:16px;background:#FF5500;-webkit-mask:var(--logo) center/contain no-repeat;mask:var(--logo) center/contain no-repeat}

/* ---------- reading column ---------- */
body.noir-docs .docs-main{font-size:1rem;line-height:1.7}
body.noir-docs .doc-heading{position:relative;padding-bottom:32px;margin-bottom:40px;border-bottom:1px solid var(--or-line)}
body.noir-docs .eyebrow-tag{display:none!important}
body.noir-docs .doc-heading h1{font-family:var(--nd-sans);font-size:3rem;font-weight:700;line-height:1;letter-spacing:-.04em;text-wrap:balance;max-width:18ch;color:var(--or-text)}
body.noir-docs .doc-heading h1 .dot{color:#FF5500}
body.noir-docs .doc-heading>.nd-logo.nd-hero{display:block;width:40px;height:40px;margin-bottom:22px}
body.noir-docs .doc-subtitle{color:var(--or-muted);font-size:1.0625rem;line-height:1.65;max-width:62ch}
body.noir-docs .overview-view .doc-heading{min-height:312px}
body.noir-docs .overview-view .doc-heading>*{position:relative;z-index:1;max-width:min(62ch,64%)}
body.noir-docs .step-container{border-top:1px solid var(--or-line);padding-top:32px;margin-top:48px}
body.noir-docs .step-container:first-of-type,body.noir-docs .doc-heading+.step-container,body.noir-docs .doc-heading+*+.step-container{border-top:0;padding-top:0;margin-top:0}
body.noir-docs .step-title,body.noir-docs .docs-main h2,body.noir-docs .docs-main h3{font-family:var(--nd-sans);font-size:1.5rem;font-weight:600;letter-spacing:-.03em;line-height:1.2;color:var(--or-text)}
body.noir-docs .step-desc,body.noir-docs .docs-main p{color:var(--or-muted);max-width:70ch}
body.noir-docs .docs-main a:not([class]){color:var(--or-text);text-decoration:underline;text-decoration-color:#FF5500;text-underline-offset:3px;text-decoration-thickness:1px}
body.noir-docs .docs-main code:not(.terminal-code){font-family:var(--nd-mono);font-size:.875em;background:var(--or-raised);border:1px solid var(--or-line);padding:1px 5px;color:var(--or-text)}

/* hero pixel field (docs-noir.js field()): the overview head and the coding-agent guide marks dissolve into one 1-bit grid
   drawn on a canvas behind the whole heading, cleared under the copy. .nd-art is the art box the canvas aligns to. */
body.noir-docs .doc-heading>.nd-field{position:absolute!important;inset:0;z-index:0!important;max-width:none!important;margin:0;overflow:hidden;pointer-events:none;contain:layout paint}
body.noir-docs .nd-field>canvas{position:absolute;left:0;top:0;display:block;opacity:0;transition:opacity .6s var(--or-ease)}
body.noir-docs .nd-field.is-on>canvas{opacity:1}
body.noir-docs .nd-field>.nd-art{position:absolute;display:block;right:0;top:20px;width:min(30%,210px);aspect-ratio:1}
/* overview: monotone head; its base fades out between --nd-fade-a and --nd-fade-b (fractions of its height) and the grid takes over */
body.noir-docs .nd-field[data-kind=overview]>.nd-art{--nd-fade-a:.66;--nd-fade-b:.98;--nd-sil:url(/docs/art/vortex-mono-sil.webp);top:auto;bottom:6px;width:min(32%,236px);aspect-ratio:560/666;background:var(--nd-plate) center/100% 100% no-repeat;-webkit-mask-image:linear-gradient(180deg,var(--or-text) calc(var(--nd-fade-a)*100%),transparent calc(var(--nd-fade-b)*100%));mask-image:linear-gradient(180deg,var(--or-text) calc(var(--nd-fade-a)*100%),transparent calc(var(--nd-fade-b)*100%))}
:root[data-nd-guide] body.noir-docs .doc-heading{min-height:250px}
:root[data-nd-guide] body.noir-docs .doc-heading>*{position:relative;z-index:1;max-width:min(62ch,66%)}
:root[data-nd-guide] body.noir-docs .doc-heading>.nd-hero{display:none}
/* dropdowns (docs-noir.js slide()): chevrons turn with the motion; .nd-closing turns them back as the panel starts closing */
body.noir-docs summary.step-item-title>span:last-child>span[aria-hidden]{transition:transform .42s var(--or-ease)}
body.noir-docs details.nd-closing>summary.step-item-title>span:last-child>span[aria-hidden]{transform:none!important}
body.noir-docs #guide-privacy-zdr>summary::after{transition:transform .42s var(--or-ease),margin .42s var(--or-ease)}
body.noir-docs #guide-privacy-zdr.nd-closing>summary::after{transform:rotate(45deg);margin-bottom:4px}
body.noir-docs .guide-helper-chevron{transition:transform .42s var(--or-ease)}
body.noir-docs .guide-helper.nd-closing .guide-helper-chevron{transform:none}

/* buttons */
body.noir-docs .btn-primary,body.noir-docs .btn-secondary,body.noir-docs .btn{font-weight:500;letter-spacing:-.005em;transition:background-color .18s,color .18s,border-color .18s,transform .1s}
body.noir-docs .btn-primary{background:#FF5500!important;border:1px solid #FF5500!important;color:#0A0A0A!important}
body.noir-docs .btn-primary:hover{background:var(--or-text)!important;border-color:var(--or-text)!important;color:var(--or-bg)!important}
body.noir-docs .btn-secondary{background:none!important;border:1px solid var(--nd-line-2)!important;color:var(--or-text)!important}
body.noir-docs .btn-secondary:hover{border-color:var(--or-text)!important}
body.noir-docs .btn-primary:active,body.noir-docs .btn-secondary:active{transform:translateY(1px)}

/* "Connect your app in 3 steps": one even, ruled row */
body.noir-docs .onboarding-steps{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:0!important;border-top:1px solid var(--nd-line-2);margin-top:28px}
body.noir-docs .guide-card{display:flex!important;flex-direction:column;gap:10px;min-width:0;background:none!important;border:0!important;padding:26px 24px 30px!important;border-left:1px solid var(--or-line)!important}
body.noir-docs .guide-card:first-child{border-left:0!important;padding-left:0!important}
body.noir-docs .guide-card:last-child{padding-right:0!important}
body.noir-docs .guide-card-header{display:flex!important;align-items:baseline!important;gap:10px!important;margin:0!important}
body.noir-docs .guide-step-badge{flex:none;background:none!important;border:0!important;color:#FF5500!important;font-family:var(--nd-sans);font-size:1.125rem;font-weight:600;line-height:1.3;width:auto!important;height:auto!important;min-width:0!important;padding:0!important;display:inline!important}
body.noir-docs .guide-card-title{margin:0!important;font-size:1.125rem;font-weight:600;line-height:1.3;letter-spacing:-.02em;color:var(--or-text)}
body.noir-docs .guide-card-desc{margin:0!important;color:var(--or-muted);font-size:.9375rem;line-height:1.6}

/* "Choose your app": even two-column index, logo + title, protocol under it, description below */
body.noir-docs .clients-grid{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:0!important;border-top:1px solid var(--nd-line-2);margin-top:28px}
body.noir-docs .client-card{display:grid!important;grid-template-columns:22px minmax(0,1fr);grid-template-rows:auto 1fr;column-gap:14px;row-gap:8px;align-content:start;min-width:0;background:none!important;border:0!important;border-bottom:1px solid var(--or-line)!important;padding:24px 28px 26px 0!important;color:inherit;text-decoration:none;transition:none}
body.noir-docs .client-card:nth-child(even){border-left:1px solid var(--or-line)!important;padding:24px 20px 26px 28px!important}
body.noir-docs .client-card:hover,body.noir-docs .client-card:focus{background:none!important}
body.noir-docs .client-card>.nd-logo,body.noir-docs .client-card>.nd-icon{grid-column:1;grid-row:1;width:22px;height:22px;margin-top:1px}
body.noir-docs .client-card>.nd-icon svg{width:22px;height:22px;color:#FF5500;stroke-width:1.75}
body.noir-docs .client-card-title{grid-column:2;grid-row:1;display:flex!important;flex-direction:column!important;align-items:flex-start!important;justify-content:flex-start!important;gap:4px!important;margin:0!important;font-size:1.0625rem;font-weight:600;line-height:1.35;letter-spacing:-.015em;color:var(--or-text)}
body.noir-docs .client-card-title>span:first-child{transition:color .18s}
body.noir-docs .client-card:hover .client-card-title>span:first-child{color:#FF5500}
body.noir-docs .client-card-protocol{font-family:var(--nd-mono);font-size:11px;font-weight:400;letter-spacing:.02em;line-height:1.4;color:var(--nd-dim);background:none!important;border:0!important;padding:0!important;margin:0!important;white-space:normal;text-align:left}
body.noir-docs .client-card>p,body.noir-docs .client-card .doc-subtitle{grid-column:2;grid-row:2;margin:0!important;font-size:.9375rem!important;line-height:1.6!important;color:var(--or-muted);max-width:none}

/* tables */
body.noir-docs .data-table-wrap{border:0!important;border-top:1px solid var(--nd-line-2)!important;background:none!important}
body.noir-docs .data-table{font-variant-numeric:tabular-nums}
body.noir-docs .data-table th{background:none!important;font-family:var(--nd-sans);font-size:12.5px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--nd-dim);border-bottom:1px solid var(--or-line)!important}
body.noir-docs .data-table td{background:none!important;border-bottom:1px solid var(--or-line)!important;color:var(--or-muted)}
body.noir-docs .data-table td:first-child{color:var(--or-text)}
body.noir-docs .data-table tr:hover td{background:var(--or-raised)!important}

/* code / terminal: no fake window chrome */
body.noir-docs .terminal-card{background:var(--or-code)!important;border:1px solid var(--nd-line-2)!important}
:root[data-theme=light] body.noir-docs .terminal-card{border-color:#0A0A0A!important}
body.noir-docs .terminal-dots{display:none!important}
body.noir-docs .terminal-bar{background:none!important;border-bottom:1px solid rgba(245,243,238,.1)!important}
body.noir-docs .terminal-label{font-family:var(--nd-mono);font-size:11.5px;letter-spacing:0;text-transform:none;color:rgba(245,243,238,.6)!important}
body.noir-docs .copy-pill{background:none!important;border:1px solid rgba(245,243,238,.2)!important;color:#F5F3EE!important;font-family:var(--nd-sans);font-size:12px;font-weight:500;letter-spacing:0;text-transform:none}
body.noir-docs .copy-pill:hover{border-color:#FF5500!important;color:#FF5500!important}
body.noir-docs .terminal-pre,body.noir-docs .terminal-code{font-family:var(--nd-mono)!important;font-size:13px;line-height:1.75;color:#F5F3EE}
body.noir-docs .dual-label{font-family:var(--nd-sans);font-size:12.5px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--nd-dim)}

/* notices, right rail */
body.noir-docs .notice{background:none!important;border:0!important;border-left:1px solid #FF5500!important;padding:4px 0 4px 16px!important;color:var(--or-muted)}
body.noir-docs .docs-toc{border-left:1px solid var(--or-line)}
body.noir-docs .toc-title{font-family:var(--nd-sans);font-size:12.5px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--nd-dim)}
body.noir-docs .toc-item{color:var(--or-muted);border-left:0!important;font-size:13.5px;padding-left:14px;position:relative}
body.noir-docs .toc-item.active,body.noir-docs .toc-item:hover{color:var(--or-text)}
body.noir-docs .toc-item.active::before{content:"";position:absolute;left:0;top:calc(50% - 2.5px);width:5px;height:5px;margin-top:0;background:#FF5500;transform:rotate(45deg)}
body.noir-docs .toc-card{background:none!important;border:0!important;border-top:1px solid var(--or-line)!important;padding:20px 0 0!important}
body.noir-docs .toc-card .btn-primary{width:auto}

/* search modal, mobile select */
body.noir-docs .outrun-modal{background:var(--or-bg)!important;border:1px solid var(--nd-line-2)!important}
body.noir-docs .outrun-search-field input,body.noir-docs .input,body.noir-docs select{background:var(--or-code);border:1px solid var(--nd-line-2);color:var(--or-text);font-family:var(--nd-sans)}
:root[data-theme=light] body.noir-docs .input,:root[data-theme=light] body.noir-docs select{background:#fff;color:#0A0A0A}
body.noir-docs input:focus,body.noir-docs select:focus{outline:1px solid #FF5500;outline-offset:0}
body.noir-docs :focus-visible{outline:1px solid #FF5500;outline-offset:3px}

@media (hover:hover){body.noir-docs .sidebar-link:hover svg{opacity:1}}
@media (prefers-reduced-motion:reduce){body.noir-docs *{transition:none!important}}
@media (max-width:1100px){body.noir-docs .outrun-search-open kbd{display:none}}
@media (max-width:900px){
  body.noir-docs .onboarding-steps{grid-template-columns:1fr!important}
  body.noir-docs .guide-card,body.noir-docs .guide-card:first-child,body.noir-docs .guide-card:last-child{border-left:0!important;border-top:1px solid var(--or-line)!important;padding:20px 0 22px!important}
  body.noir-docs .guide-card:first-child{border-top:0!important}
  body.noir-docs .clients-grid{grid-template-columns:1fr!important}
  body.noir-docs .client-card,body.noir-docs .client-card:nth-child(even){border-left:0!important;padding:20px 0 22px!important}
  body.noir-docs .doc-heading h1{font-size:2.25rem}
  body.noir-docs .overview-view .doc-heading{min-height:264px}
  body.noir-docs .nd-field[data-kind=overview]>.nd-art{width:min(30%,200px)}
  :root[data-nd-guide] body.noir-docs .doc-heading{min-height:220px}
  body.noir-docs .nd-field[data-kind=guide]>.nd-art{width:min(28%,180px);top:16px}
  :root[data-nd-guide] body.noir-docs .doc-heading>*{max-width:min(62ch,68%)}
  body.noir-docs .overview-view .doc-heading>*{max-width:min(62ch,66%)}
}
@media (max-width:600px){
  body.noir-docs .doc-heading{padding-bottom:24px;margin-bottom:28px}
  body.noir-docs .doc-heading h1{font-size:2rem;max-width:none}
  body.noir-docs .doc-subtitle{font-size:1rem}
  /* phones: the art moves to a band above the title; the field still runs behind the whole block */
  body.noir-docs .overview-view .doc-heading{min-height:0;padding-top:124px}
  body.noir-docs .nd-field[data-kind=overview]>.nd-art{top:0;bottom:auto;width:112px}
  :root[data-nd-guide] body.noir-docs .doc-heading{min-height:0;padding-top:112px}
  body.noir-docs .nd-field[data-kind=guide]>.nd-art{top:2px;width:108px}
  :root[data-nd-guide] body.noir-docs .doc-heading>*,body.noir-docs .overview-view .doc-heading>*{max-width:none}
  body.noir-docs .step-title,body.noir-docs .docs-main h2,body.noir-docs .docs-main h3{font-size:1.25rem}
  body.noir-docs .step-container{padding-top:24px;margin-top:32px}
  body.noir-docs .actions-bar{flex-wrap:wrap;gap:10px}
  body.noir-docs .terminal-body,body.noir-docs .terminal-pre{max-width:100%;overflow-x:auto}
  /* data tables stack into labelled rows (cells already carry data-label) */
  body.noir-docs .data-table-wrap{overflow:visible!important}
  body.noir-docs .data-table thead{display:none}
  body.noir-docs .data-table,body.noir-docs .data-table tbody,body.noir-docs .data-table tr,body.noir-docs .data-table td{display:block;width:100%!important;min-width:0!important}
  body.noir-docs .data-table tr{padding:16px 0;border-bottom:1px solid var(--or-line)}
  body.noir-docs .data-table td{border:0!important;padding:2px 0!important;overflow-wrap:anywhere}
  body.noir-docs .data-table td:first-child{font-weight:600;padding-bottom:4px!important}
  body.noir-docs .data-table td:not(:first-child)[data-label]::before{content:attr(data-label);display:block;margin-top:8px;font-family:var(--nd-sans);font-size:12px;font-weight:600;color:var(--nd-dim)}
  body.noir-docs .data-table tr:hover td{background:none!important}
  body.noir-docs .terminal-code,body.noir-docs .terminal-pre{font-size:12px}
}

/* ---------- mobile audit fixes (2026-10-24) ---------- */
/* code never breaks mid-word: lines stay intact and scroll sideways, with a fade at the edge while there is more (docs-noir.js) */
body.noir-docs .terminal-pre,body.noir-docs .terminal-code{white-space:pre!important;overflow-wrap:normal!important;word-break:normal!important}
body.noir-docs .terminal-pre{overflow-x:auto}
body.noir-docs .terminal-pre.ovf:not(.at-end){-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 56px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 56px),transparent)}
/* buttons read like the marketing pages' (14px), and never touch the text above */
body.noir-docs .btn-primary,body.noir-docs .btn-secondary{font-size:14px!important}
body.noir-docs :is(p,.doc-subtitle,.pg-field)+:is(.btn-primary,.btn-secondary){margin-top:14px}
/* the "Show / Hide" toggle: a drawn chevron centred on its label (the text glyph sat ~10px low) */
body.noir-docs summary.step-item-title>span:last-child>span:last-child{font-size:0;line-height:0;width:7px;height:7px;margin:0 3px 0 2px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .3s var(--or-ease)}
body.noir-docs details[open]>summary.step-item-title>span:last-child>span:last-child{transform:translateY(2px) rotate(225deg)}
@media (max-width:600px){
  /* /docs/models: back to the intended two-column price cards */
  body.noir-docs .model-pricing .data-table tr{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 16px;padding:16px;margin-bottom:12px;border:1px solid var(--or-line)}
  body.noir-docs .model-pricing .data-table td:first-child{grid-column:1/-1;padding-bottom:8px!important}
  body.noir-docs .model-pricing .data-table td:not(:first-child)[data-label]::before{margin-top:4px}
  /* table text was 12px */
  body.noir-docs .data-table td{font-size:14px}
  body.noir-docs .data-table td:not(:first-child)[data-label]::before{font-size:12.5px}
  /* guide screenshots use the full card width instead of the narrow text column beside the step number */
  body.noir-docs .step-item:has(.visual-step-img){display:grid;grid-template-columns:auto minmax(0,1fr);align-items:start}
  body.noir-docs .step-item:has(.visual-step-img)>.step-detail{display:contents}
  body.noir-docs .step-item:has(.visual-step-img)>.step-detail>*{grid-column:2}
  body.noir-docs .step-item:has(.visual-step-img)>.step-detail>.visual-step-img-wrap{grid-column:1/-1;width:100%;margin-top:14px}
  body.noir-docs .visual-step-img{width:100%;height:auto}
}

/* ---------- final audit fixes (2026-10-24) ---------- */

/* 3. "Show / Hide" toggle: exactly one chevron, centred on its label.
   The renderer sets font-size:24px inline on the text glyph and rotate(180deg) inline when a row opens. The earlier drawn chevron lost to the
   inline font-size (both showed) and to the inline rotation (it opened as a corner). Now the glyph is hidden and a masked chevron takes its place;
   the renderer's own rotate(180deg) and the .nd-closing reset turn it, so no extra transforms are needed. */
body.noir-docs summary.step-item-title>span:last-child>span:last-child{font-size:0!important;line-height:0!important;flex:none;width:12px;height:12px;margin:0;border:0;opacity:.7;background:currentColor;transform:none;transition:transform .42s var(--or-ease);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='black' stroke-width='1.5'%3E%3Cpath d='M2 4l4 4 4-4'/%3E%3C/svg%3E") center/12px 12px no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='black' stroke-width='1.5'%3E%3Cpath d='M2 4l4 4 4-4'/%3E%3C/svg%3E") center/12px 12px no-repeat}
body.noir-docs details[open]>summary.step-item-title>span:last-child>span:last-child{transform:none}
/* 3. collapsed rows are compact (about 57px with the hairline) and the label sits in the middle of the row */
body.noir-docs .docs-main details.step-container{padding-top:0;margin-top:32px;margin-bottom:0}
body.noir-docs .docs-main details.step-container+details.step-container{margin-top:0}
body.noir-docs .docs-main details.step-container+.step-container{margin-top:32px}
body.noir-docs details.step-container>summary.step-item-title[style*="flex"]{min-height:56px!important;align-items:center}

/* 8. step titles read as titles (were 14.5px, next to 15px body text) */
body.noir-docs .step-item-title{font-size:1.125rem;font-weight:600;line-height:1.3;letter-spacing:-.01em;color:var(--or-text)}

/* 11. headings: the tight tracking (-.03em / -.04em) closed the word gaps at docs sizes ("Connectyourapp in 3steps") */
body.noir-docs .doc-heading h1{letter-spacing:-.03em;word-spacing:.06em}
body.noir-docs .step-title,body.noir-docs .docs-main h2,body.noir-docs .docs-main h3{letter-spacing:-.02em;word-spacing:.05em}
body.noir-docs .guide-card-title,body.noir-docs .client-card-title{letter-spacing:-.01em;word-spacing:.04em}

/* 4. guide titles: "Tool - What it covers" is two lines, the second one smaller and muted (docs-noir.js wraps the part after the dot) */
body.noir-docs .doc-heading h1{max-width:none}
body.noir-docs .doc-heading h1 .nd-sep{display:none}
body.noir-docs .doc-heading h1 .nd-sub{display:block;margin-top:.32em;font-size:.5em;font-weight:500;line-height:1.25;letter-spacing:-.015em;word-spacing:.04em;color:var(--or-muted);text-wrap:balance}

/* 1. /docs/models price tables: headers never clip, tiers never wrap, every table uses the same column widths.
   If the page column is still too narrow the table scrolls, with a fade at the right edge (docs-noir.js sets .ovf / .at-end). */
body.noir-docs .data-table-wrap.ovf:not(.at-end){-webkit-mask-image:linear-gradient(90deg,black calc(100% - 56px),transparent);mask-image:linear-gradient(90deg,black calc(100% - 56px),transparent)}
@media (min-width:769px){
  /* shared-header.css forces min-width:760px on any 6-column table; the columns below are sized to fit 740px */
  body.noir-docs .model-pricing .data-table{width:100%;min-width:0}
  body.noir-docs .model-pricing .data-table th,body.noir-docs .model-pricing .data-table td{padding:12px 10px}
  body.noir-docs .model-pricing .data-table :is(th,td):first-child{min-width:0;padding-left:0}
  body.noir-docs .model-pricing .data-table :is(th,td):last-child{padding-right:0}
  body.noir-docs .model-pricing .data-table th{white-space:nowrap;font-size:12px}
  body.noir-docs .model-pricing .data-table td[data-label="Tier"]{white-space:nowrap}
  body.noir-docs .model-pricing .data-table :is(th,td[data-label="Tier"]){word-spacing:.1em}
  body.noir-docs .model-pricing .model-name code{white-space:nowrap;overflow-wrap:normal}
  body.noir-docs .model-pricing .data-table th[data-ndc="t"]{width:128px}
  body.noir-docs .model-pricing .data-table th[data-ndc="in"]{width:88px}
  body.noir-docs .model-pricing .data-table th[data-ndc="out"]{width:100px}
  body.noir-docs .model-pricing .data-table th[data-ndc="cr"]{width:124px}
  body.noir-docs .model-pricing .data-table th[data-ndc="cw"]{width:128px}
  body.noir-docs .model-pricing .data-table th[data-ndc="cw1"]{width:148px}
  body.noir-docs .model-pricing .data-table th[data-ndc="per"]{width:108px}
  body.noir-docs .model-pricing .data-table:is([data-nd-cols="4"],[data-nd-cols="5"],[data-nd-cols="6"]) th:first-child{width:176px}
  body.noir-docs .model-pricing .data-table th:last-child{width:auto}
}

/* 5. /docs/api path cells: lines break only after "/" or ":" (docs-noir.js adds the break points), never inside a word */
body.noir-docs .data-table td[data-label="Path"]{overflow-wrap:normal;word-break:normal;hyphens:none}

/* 10. /docs/troubleshooting: the Fix column holds the longest text, so it gets about 45% */
@media (min-width:601px){
  body.noir-docs #errors-table .data-table,body.noir-docs #client-issues .data-table{table-layout:fixed;width:100%}
  body.noir-docs #errors-table th:nth-child(1){width:26%}
  body.noir-docs #errors-table th:nth-child(2){width:29%}
  body.noir-docs #errors-table th:nth-child(3){width:45%}
  body.noir-docs #client-issues th:nth-child(1){width:15%}
  body.noir-docs #client-issues th:nth-child(2){width:40%}
  body.noir-docs #client-issues th:nth-child(3){width:45%}
}

/* 6. code block headers: label and Copy stay on one row; a long label is cut with an ellipsis (full text on hover) */
body.noir-docs .terminal-bar{flex-wrap:nowrap;gap:10px}
body.noir-docs .terminal-label{flex:1 1 auto;min-width:0;margin-left:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;overflow-wrap:normal}
body.noir-docs .terminal-bar .copy-pill{flex:none}

/* 7. /docs/api "cURL Request" / "JSON Response": the label belongs to the block under it (was ~50px from both blocks) */
body.noir-docs .dual-container{gap:0}
body.noir-docs .dual-label{margin:0 0 8px}
body.noir-docs .dual-label:not(:first-child){margin-top:22px}
body.noir-docs .dual-label+.terminal-card{margin-top:0}

/* 9. /docs/ overview: the three step cards and the app cards share rows (subgrid), so a title that wraps never pushes one body lower than its neighbours */
body.noir-docs .guide-card-title,body.noir-docs .client-card-title{text-wrap:balance}
@media (min-width:901px){
  body.noir-docs .onboarding-steps{grid-template-rows:auto 1fr}
  body.noir-docs .guide-card{display:grid!important;grid-template-rows:subgrid;grid-row:span 2;row-gap:10px}
}
body.noir-docs .client-card{grid-row:span 2;grid-template-rows:subgrid}

/* 12. /docs/models: chips are as wide as their text; empty tiers are not shown in the stacked cards (docs-noir.js marks them .nd-empty) */
@media (max-width:768px){
  body.noir-docs .model-pricing .model-name code{display:inline-block;max-width:100%}
  body.noir-docs .model-pricing td.nd-empty{display:none}
}
/* 12. a button inside a sentence sits on its own line instead of stretching the line spacing */
body.noir-docs .docs-main p>a.btn-secondary,body.noir-docs .docs-main p>a.btn-primary{display:flex;width:fit-content}
body.noir-docs .docs-main p>a.btn-secondary:not(:first-child),body.noir-docs .docs-main p>a.btn-primary:not(:first-child){margin-top:14px}

/* 13. right rail: the card with the bot button stays visible, the list of sections scrolls above it */
@media (min-width:1241px){
  body.noir-docs .docs-toc{display:flex;flex-direction:column;overflow:hidden}
  body.noir-docs .docs-toc>.toc-list{flex:1 1 auto;min-height:0;overflow-y:auto;scrollbar-width:thin}
  body.noir-docs .docs-toc>.toc-title,body.noir-docs .docs-toc>.toc-card{flex:none}
}
@media (min-width:1241px) and (max-height:960px){body.noir-docs .docs-toc>.toc-list{gap:6px;margin-bottom:20px}}
/* 13. a button never touches the paragraph below it */
body.noir-docs :is(.btn-primary,.btn-secondary)+:is(p,.step-desc){margin-top:14px}
/* 13. /docs/setup/uncensored_mobile: phone screenshots stay phone sized */
:root[data-nd-guide=mobile] body.noir-docs .visual-step-img{max-width:min(100%,360px)}

/* 14. section links land below the fixed header (81px on desktop, 65px on phones, plus 16px) */
body.noir-docs .docs-main [id]{scroll-margin-top:97px}
@media (max-width:768px){body.noir-docs .docs-main [id]{scroll-margin-top:81px}}

/* 2. setup step cards on phones: the number sits in line with the title, and text, code and screenshots use the full card width */
@media (max-width:600px){
  body.noir-docs .step-item-title{font-size:1.0625rem}
  body.noir-docs .step-item{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:12px;row-gap:0;align-items:start}
  body.noir-docs .step-item>.step-detail{display:contents}
  body.noir-docs .step-item>.step-number{grid-column:1;grid-row:1;align-self:start}
  body.noir-docs .step-item>.step-detail>.step-item-title{grid-column:2;grid-row:1;align-self:start;margin:2px 0 0}
  body.noir-docs .step-item>.step-detail>:not(.step-item-title){grid-column:1/-1;min-width:0;max-width:100%}
  body.noir-docs .step-item>.step-detail>.step-item-title+*{margin-top:12px}
  body.noir-docs .step-item>.step-detail>.step-item-title~*+*{margin-top:12px}
}

/* 15. model ID lists in /docs/api cells: an ID never splits at a hyphen (docs-noir.js wraps each one in .nd-id) */
body.noir-docs .nd-id{white-space:nowrap}

@media(max-width:900px){body.noir-docs .site-header .brand::after{width:135px}}
@media(max-width:768px){body.noir-docs .site-header .brand::after{width:min(128px,30vw)}}

body.noir-docs summary.step-item-title.nd-summary{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:56px;cursor:pointer}
body.noir-docs .nd-summary-title{min-width:0}
body.noir-docs .nd-summary-toggle{display:inline-flex;align-items:center;gap:8px;flex-shrink:0}
body.noir-docs .nd-summary-toggle>span:first-child{font-size:12px;opacity:.7}
body.noir-docs details[open]>summary.step-item-title.nd-summary>.nd-summary-toggle>span[aria-hidden]{transform:rotate(180deg)}