/* docs-shell.css — shared chrome for /api, /docs, /docs/dashboard. * * Surfaces opt in by linking this file and setting one of: * /api/* * /docs * /docs/dashboard * * The body class scopes the few rules that differ between surfaces * (mainly the * reset, which /api inherits from its pre-consolidation * inline styles and which would break Tailwind utility classes on /docs). * * Cascade order in each base: prism theme → tailwind.css (/docs only) * → tokens.css (/docs only) → docs-shell.css → page content. */ /* ============================================================ DESIGN TOKENS ============================================================ */ :root { --sidebar-width: 260px; --header-height: 64px; --bg-body: #08090c; --bg-sidebar: #08090c; --bg-header: rgba(11, 13, 17, 0.8); --bg-input: #161b22; --bg-code-header: #161b22; --border-primary: #30363d; --border-secondary: #21262d; --border-input: #30363d; --text-primary: #c9d1d9; --text-headers: #ffffff; --text-secondary: #8b949e; /* ngris Neural accents — electric cyan (primary) + neon purple (secondary). -soft variants are the lighter ramp steps; prefer them for small text. */ --accent: #2567ff; --accent-soft: #6690ff; /* brand-on-dark: brighter tint of #2567ff for text/links/icons */ --accent-2: #2567ff; --accent-2-soft: #6690ff; --text-accent: var(--accent-soft); --font-main: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; } /* ============================================================ GLOBAL RESET — /api only. /docs and /docs/dashboard MUST NOT get `* { padding: 0 }` because it overrides Tailwind v4's utility classes (Tailwind preflight already handles box-sizing for those surfaces). The `:where()` wrapper zeroes the specificity of the body-class scope, so the rule has the same (0,0,1) specificity as the original inline `* { ... }` reset. Without :where(), the rule would beat every class selector in this file and collapse the sidebar nav, breadcrumb spacing, etc. ============================================================ */ :where(body.surface-api) * { margin: 0; padding: 0; box-sizing: border-box; } /* ============================================================ BODY ============================================================ */ body { font-family: var(--font-main); color: var(--text-primary); background: var(--bg-body); overflow-x: hidden; line-height: 1.5; margin: 0; display: flex; flex-direction: column; align-items: center; } /* ============================================================ TOP NAV ============================================================ */ #top-nav { position: fixed; top: 0; left: 0; right: 0; height: var(--header-height); background: var(--bg-header); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--border-primary); z-index: 100; display: flex; align-items: center; justify-content: center; padding: 0 24px; } .nav-inner { width: 100%; max-width: 100rem; display: flex; align-items: center; justify-content: space-between; } .nav-logo { font-size: 18px; font-weight: 700; color: var(--text-headers); display: flex; align-items: center; gap: 12px; letter-spacing: -0.5px; text-decoration: none; /* the wordmark is a link home */ } .nav-logo span { font-weight: 400; color: var(--text-secondary); font-size: 14px; letter-spacing: 1px; } /* Top-nav search box. Matches the original /api spec: grow to fill up to 400px, with 40px breathing-room margins on each side so the box never collides with the logo or nav-right links. */ .nav-search { flex: 1; max-width: 400px; margin: 0 40px; position: relative; } .search-input { width: 100%; background: var(--bg-input); border: 1px solid var(--border-input); color: var(--text-primary); padding: 8px 12px 8px 36px; border-radius: 6px; font-size: 13px; outline: none; transition: border 0.2s; } .search-input:focus { border-color: var(--text-accent); } .search-input::placeholder { color: var(--text-secondary); } .search-icon { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--text-secondary); } .search-shortcut { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); font-size: 10px; border: 1px solid var(--border-primary); border-radius: 4px; padding: 2px 6px; color: var(--text-secondary); pointer-events: none; } /* Search dropdown (used on /api) */ .search-dropdown { position: absolute; top: 100%; left: 0; width: 100%; background: var(--bg-sidebar); border: 1px solid var(--border-primary); border-top: none; border-radius: 0 0 6px 6px; box-shadow: 0 4px 12px rgba(0,0,0,0.2); z-index: 200; display: none; max-height: 300px; overflow-y: auto; } .search-dropdown.show { display: block; } .search-result-item { padding: 8px 12px; cursor: pointer; border-bottom: 1px solid var(--border-secondary); display: flex; align-items: center; gap: 8px; font-size: 13px; } .search-result-item:last-child { border-bottom: none; } .search-result-item:hover, .search-result-item.selected { background: var(--bg-input); color: var(--text-accent); } .search-empty { padding: 12px; text-align: center; color: var(--text-secondary); font-size: 13px; } .nav-right { display: flex; align-items: center; gap: 24px; font-size: 14px; font-weight: 500; } .nav-link { color: var(--text-primary); transition: color 0.2s; text-decoration: none; } .nav-link:hover { color: var(--text-headers); text-decoration: none; } .nav-icon { width: 20px; height: 20px; color: var(--text-secondary); cursor: pointer; } .nav-icon:hover { color: var(--text-primary); } .nav-mobile-btn { display: none; background: none; border: 1px solid var(--border-primary); color: var(--text-primary); padding: 6px 12px; border-radius: 6px; cursor: pointer; font-size: 14px; gap: 6px; align-items: center; } /* ============================================================ APP LAYOUT ============================================================ */ #app-shell { display: flex; min-height: 100vh; position: relative; width: 100%; max-width: 1920px; margin-top: var(--header-height); } #sidebar { width: var(--sidebar-width); height: calc(100vh - var(--header-height)); position: sticky; top: var(--header-height); left: 0; flex-shrink: 0; background: var(--bg-sidebar); border-right: 1px solid var(--border-primary); overflow-y: auto; z-index: 50; } #main-wrapper { flex: 1; display: flex; flex-direction: column; min-height: 100vh; min-width: 0; } /* ============================================================ SIDEBAR NAV ============================================================ */ .sidebar-header { padding: 24px; font-size: 18px; font-weight: 700; color: var(--text-headers); border-bottom: 1px solid var(--border-primary); } .nav-content { padding: 20px 0 100px; } /* Sidebar-internal search (used on /docs) */ .sidebar-search { padding: 16px 20px; } .sidebar-search input { width: 100%; background: var(--bg-input); border: 1px solid var(--border-primary); color: var(--text-primary); padding: 8px 12px; border-radius: 6px; font-size: 13px; outline: none; } .sidebar-search input:focus { border-color: var(--text-accent); } .sidebar-search input::placeholder { color: var(--text-secondary); } .nav-group { margin-bottom: 8px; } .nav-group-title { padding: 10px 24px; font-size: 10px; font-weight: 800; text-transform: uppercase; color: #8b949e; letter-spacing: 1.5px; cursor: pointer; display: flex; justify-content: space-between; align-items: center; user-select: none; transition: color 0.2s; } .nav-group-title:hover { color: var(--text-primary); } .nav-group-title::after { content: '\203A'; display: inline-block; font-size: 14px; transition: transform 0.2s ease; } .nav-group.open .nav-group-title::after { transform: rotate(90deg); } .nav-group-items { display: none; overflow: hidden; } .nav-group.open .nav-group-items { display: block; } .nav-item { display: block; padding: 6px 24px 6px 32px; font-size: 13px; color: var(--text-secondary); border-left: 3px solid transparent; transition: all 0.2s; text-decoration: none; } .nav-item:hover { color: var(--text-primary); background: rgba(255,255,255,0.02); } .nav-item.active { color: var(--accent-2-soft); border-left-color: var(--accent-2); background: rgba(37, 103, 255, 0.1); } .nav-badge { font-size: 9px; padding: 2px 4px; margin-right: 8px; border-radius: 3px; font-weight: 700; text-transform: uppercase; display: inline-block; min-width: 38px; text-align: center; border: 1px solid transparent; } /* ============================================================ MOBILE OVERLAY ============================================================ */ .mobile-overlay { display: none; position: fixed; inset: 0; z-index: 200; } .mobile-overlay.active { display: flex; } .mobile-overlay .overlay-bg { position: absolute; inset: 0; background: rgba(0,0,0,0.5); } .mobile-overlay .overlay-panel { position: absolute; left: 0; top: 0; bottom: 0; width: 300px; background: var(--bg-sidebar); border-right: 1px solid var(--border-primary); padding: 20px; overflow-y: auto; z-index: 1; } .overlay-close { background: none; border: none; color: var(--text-primary); cursor: pointer; font-size: 18px; float: right; } /* ============================================================ SCROLLBAR ============================================================ */ ::-webkit-scrollbar { width: 8px; } ::-webkit-scrollbar-track { background: #0f172a; } ::-webkit-scrollbar-thumb { background: #334155; border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: #475569; } /* ============================================================ TYPOGRAPHY ============================================================ */ h1 { font-size: 32px; font-weight: 600; color: var(--text-headers); margin-bottom: 24px; letter-spacing: -0.5px; } h2 { font-size: 24px; font-weight: 600; color: var(--text-headers); margin: 40px 0 20px; } p { margin-bottom: 16px; color: var(--text-secondary); } /* `@layer base` lets Tailwind utility classes on /docs win over these while still applying on /api (where @layer behaves like a normal rule). */ @layer base { #main-wrapper a { color: var(--text-accent); text-decoration: none; } #main-wrapper a:hover { text-decoration: underline; } } /* ============================================================ SEMANTIC DOC CLASSES (used by /docs and /docs/dashboard markup) ============================================================ */ .doc-h2 { font-size: 1.5rem; font-weight: 700; color: #f0f6fc; } .doc-h3 { font-weight: 600; color: #f0f6fc; /*margin-top: 2rem; margin-bottom: 0.5rem; */ } .doc-text { color: #9198a1; } .doc-strong { color: #e6edf3; font-weight: 600; } .doc-label { color: #c9d1d9; } .doc-code { color: var(--accent-soft); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; } .doc-border { border-color: #21262d; } .doc-border-row { border-color: #161b22; } .doc-bg-muted { background: #161b22; } /* ============================================================ CALLOUT BOXES ============================================================ */ .callout { border-left-width: 4px; border-radius: .5rem; padding: 1rem 1rem 1rem 1.25rem; border-left-color: var(--accent-soft); background: #0c1929; color: #c9d1d9; font-size: 0.925rem; line-height: 1.6; } .callout strong:first-child { display: inline-block; margin-bottom: 4px; font-size: 0.875rem; text-transform: uppercase; letter-spacing: 0.5px; opacity: 0.85; } .warning { border-left-color: #f59e0b; background: #1a1507; color: #c9d1d9; } .success { border-left-color: #2567ff; background: #091a12; color: #c9d1d9; } /* Inline note paragraphs (used by the /api templates) — a lighter cousin of .callout with the same info-blue accent. */ .doc-note { border-left: 3px solid var(--accent-soft); background: #0c1929; border-radius: .375rem; padding: .75rem 1rem; margin-top: .75rem; color: #c9d1d9; font-size: 0.875rem; line-height: 1.6; } /* ============================================================ SECTION HEADINGS — colored accent bar ============================================================ */ #main-wrapper section h2 { display: flex; align-items: center; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--border-secondary); margin-top: 0; margin-bottom: 8px; letter-spacing: -0.3px; } #main-wrapper section h2::before { content: ''; display: inline-block; width: 4px; height: 28px; border-radius: 2px; background: linear-gradient(180deg, var(--accent), var(--accent-2)); flex-shrink: 0; } #main-wrapper section h3 { position: relative; padding-left: 14px; } #main-wrapper section h3::before { content: ''; position: absolute; left: 0; top: 4px; bottom: 4px; width: 3px; border-radius: 1.5px; background: #30363d; } /* ============================================================ TABLES — polished card design used by /docs and /docs/dashboard. Selectors are specific enough that the markup's Tailwind utilities (py-2, px-4, border-b doc-border-row) become no-ops; the look comes from these rules instead. ============================================================ */ #main-wrapper table { width: 100%; border-collapse: separate; border-spacing: 0; overflow: hidden; border: 1px solid var(--border-primary); border-radius: 8px; margin-top: 0.75rem; margin-bottom: 1rem; font-size: 0.875rem; line-height: 1.5; color: var(--text-primary); background: rgba(13, 17, 23, 0.4); } /* Wrapper that tightens the rounded corners against the table border. */ #main-wrapper .overflow-x-auto > table { margin-top: 0; margin-bottom: 0; } #main-wrapper thead { background: rgba(22, 27, 34, 0.85); } #main-wrapper thead th { text-align: left; padding: 14px 20px; font-size: 0.7rem; font-weight: 700; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.5px; border-bottom: 1px solid var(--border-primary); white-space: nowrap; } #main-wrapper tbody td { padding: 14px 20px; border-bottom: 1px solid var(--border-secondary); vertical-align: top; } #main-wrapper tbody tr:last-child td { border-bottom: none; } #main-wrapper tbody tr { transition: background 0.15s ease; } #main-wrapper tbody tr:nth-child(even) { background: rgba(22, 27, 34, 0.25); } #main-wrapper tbody tr:hover { background: rgba(37, 103, 255, 0.06); } /* Inline inside cells — tighter than the global inline-code rule. */ #main-wrapper td code, #main-wrapper th code { background: rgba(22, 27, 34, 0.9); color: var(--accent-soft); padding: 1px 6px; border-radius: 4px; font-size: 0.825em; border: 1px solid var(--border-secondary); } @media (max-width: 1000px) { #main-wrapper table { font-size: 0.8125rem; } #main-wrapper thead th { padding: 11px 14px; } #main-wrapper tbody td { padding: 11px 14px; } } /* ============================================================ INLINE CODE / KBD ============================================================ */ .kbd { border: 1px solid #64748b33; border-bottom-width: 2px; border-radius: .375rem; padding: .1rem .4rem; background: #0b122060; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: 0.875em; } #main-wrapper code { background: rgba(22, 27, 34, 0.8); padding: 0.15em 0.4em; border-radius: 4px; font-size: 0.875em; color: var(--accent-soft); overflow-wrap: anywhere; /* long unbreakable tokens (URLs/IDs) can't force horizontal scroll */ } .callout code { background: rgba(0,0,0,0.3); color: var(--accent-soft); } .warning code { background: rgba(0,0,0,0.3); color: #fde047; } .success code { background: rgba(0,0,0,0.3); color: var(--accent-soft); } #main-wrapper pre code { background: transparent; padding: 0; border-radius: 0; color: inherit; font-size: inherit; } /* ============================================================ BASE PRE/CODE ============================================================ */ pre { background: #0b1220; border: 1px solid #1f2937; border-radius: .75rem; padding: 1rem; overflow: auto; } code { font-feature-settings: "cv02","cv03","cv04","cv11"; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace; } /* ============================================================ LISTS — custom bullet styling (applies to /docs prose). The `.api-breadcrumb` block overrides these for the breadcrumb's
    . ============================================================ */ #main-wrapper ul { list-style: none; padding-left: 0; } #main-wrapper ul li { position: relative; padding-left: 1.25em; } #main-wrapper ul li::before { content: '\203A'; position: absolute; left: 0; color: var(--accent-soft); font-weight: 700; } #main-wrapper ol { counter-reset: doc-counter; list-style: none; padding-left: 0; } #main-wrapper ol li { position: relative; padding-left: 2em; counter-increment: doc-counter; } #main-wrapper ol li::before { content: counter(doc-counter); position: absolute; left: 0; width: 1.5em; height: 1.5em; line-height: 1.5em; text-align: center; border-radius: 50%; background: rgba(37, 103, 255, 0.12); color: var(--accent-soft); font-size: 0.75rem; font-weight: 700; } /* ============================================================ TERMINAL-WINDOW (legacy /docs markup — kept for any non-migrated pages) ============================================================ */ .terminal-window { background: #1a1b26; border-radius: 0.75rem; overflow: hidden; border: 1px solid #1f2937; margin-top: 1rem; margin-bottom: 1rem; position: relative; box-shadow: 0 4px 24px rgba(0,0,0,0.3); } .terminal-header { display: flex; align-items: center; justify-content: space-between; background: #2a2b36; padding: 0.5rem 1rem; } .terminal-buttons { display: flex; gap: 0.5rem; } .terminal-dot { display: block; width: 12px; height: 12px; border-radius: 50%; } .terminal-copy-btn { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; color: #e2e8f0; background: rgba(255,255,255,0.1); padding: 0.25rem 0.75rem; border-radius: 0.375rem; border: 1px solid transparent; cursor: pointer; transition: background 0.15s; } .terminal-copy-btn:hover { background: rgba(255,255,255,0.2); } .terminal-window pre[class*="language-"] { margin: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; padding: 1rem !important; overflow: auto; } /* ============================================================ PRISM OKAIDIA TOKEN COLORS ============================================================ */ .token.comment, .token.prolog, .token.doctype, .token.cdata { color: #8292a2; } .token.punctuation { color: #f8f8f2; } .token.namespace { opacity: .7; } .token.property, .token.tag, .token.constant, .token.symbol, .token.deleted { color: #f92672; } .token.boolean, .token.number { color: #ae81ff; } .token.selector, .token.attr-name, .token.string, .token.char, .token.builtin, .token.inserted { color: #a6e22e; } .token.operator, .token.entity, .token.url, .language-css .token.string, .style .token.string, .token.variable { color: #f8f8f2; } .token.atrule, .token.attr-value, .token.function, .token.class-name { color: #e6db74; } .token.keyword { color: #66d9ef; } .token.regex, .token.important { color: #fd971f; } .token.important, .token.bold { font-weight: bold; } .token.italic { font-style: italic; } .token.entity { cursor: help; } /* ============================================================ API ENDPOINT META (used in /api templates) ============================================================ */ .endpoint-meta { display: flex; align-items: center; gap: 12px; font-family: var(--font-mono); font-size: 13px; margin-bottom: 24px; } .method-badge { font-weight: 700; padding: 4px 8px; border-radius: 4px; text-transform: uppercase; font-size: 12px; letter-spacing: 0.5px; } .method-get { background: rgba(56, 189, 248, 0.15); color: #7dd3fc; border: 1px solid rgba(56, 189, 248, 0.3); } .method-post { background: rgba(74, 222, 128, 0.15); color: #86efac; border: 1px solid rgba(74, 222, 128, 0.3); } .method-put { background: rgba(250, 204, 21, 0.15); color: #fde047; border: 1px solid rgba(250, 204, 21, 0.3); } .method-delete { background: rgba(244, 63, 94, 0.15); color: #fda4af; border: 1px solid rgba(244, 63, 94, 0.3); } /* ============================================================ PARAM TABLES (used in /api templates) ============================================================ */ .param-table { width: 100%; margin-top: 24px; } .param-row { border-bottom: 1px solid var(--border-primary); padding: 16px 0; display: flex; flex-direction: column; gap: 6px; } .param-row:last-child { border-bottom: none; } .param-header { display: flex; align-items: center; gap: 10px; } .param-name { font-family: var(--font-mono); font-weight: 700; color: var(--text-headers); font-size: 14px; } .badge-req { font-size: 9px; font-weight: 700; color: #f85149; background: rgba(248,81,73,0.1); border: 1px solid rgba(248,81,73,0.4); padding: 2px 6px; border-radius: 4px; text-transform: uppercase; letter-spacing: 0.5px; display: inline-block; } .param-type { font-size: 12px; color: var(--accent-soft); font-family: var(--font-mono); } .param-desc { font-size: 14px; color: #8b949e; line-height: 1.5; } /* ============================================================ API STRIPE LAYOUT — doc-side / code-side ============================================================ */ .api-section { display: flex; width: 100%; } .api-section > .doc-side { flex: 55%; max-width: 55%; /* keep the 55/45 stripe full-bleed; prose measure is capped per-element below */ padding: 60px 50px; min-width: 0; } /* Cap the reading measure on text elements only — tables, code blocks and other full-width content keep the column width. */ .api-section > .doc-side p, .api-section > .doc-side ul, .api-section > .doc-side ol, .api-section > .doc-side blockquote { max-width: 72ch; } .api-section > .code-side { flex: 45%; max-width: 45%; padding: 60px 40px; display: flex; flex-direction: column; gap: 2rem; min-width: 0; } .api-section > .code-side:empty { padding: 0; } /* Single-column prose body — used by /docs/dashboard sections that don't have a code-side companion. Same horizontal inset as .doc-side so the chrome (breadcrumb 50px, docs-nav-bottom 50px) lines up. */ .doc-body { padding: 60px 50px; min-width: 0; } /* Prose measure capped per-element so tables and code blocks keep the full column width (a container-level 72ch would also include the 100px padding under the global border-box reset, squeezing content to ~58ch). */ .doc-body p, .doc-body ul, .doc-body ol, .doc-body blockquote { max-width: 72ch; } @media (max-width: 1000px) { .doc-body { padding: 40px 20px; } } /* ============================================================ CODE BLOCK + TABS ============================================================ */ /* Code blocks — unified "qs-code" terminal design (matches the dashboard quick-start). One ruleset restyles every .code-block across CLI + API docs. */ .code-block { border-radius: 10px; overflow: hidden; border: 1px solid rgba(255,255,255,0.08); background: #0d1117; margin-bottom: 16px; } .code-header { display: flex; align-items: center; gap: 6px; background: #161b22; padding: 8px 14px; font-size: 12px; font-weight: 500; color: rgba(255,255,255,0.6); text-transform: none; letter-spacing: 0; border-bottom: 1px solid rgba(255,255,255,0.06); } /* macOS-style traffic-light dots before the label. */ .code-header::before { content: ''; flex: none; width: 8px; height: 8px; border-radius: 50%; background: #f85149; box-shadow: 14px 0 0 #d29922, 28px 0 0 #3fb950; margin-right: 30px; } /* Injected copy button (docs-search.js), pushed to the right of the header. */ .code-copy { margin-left: auto; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1); color: rgba(255,255,255,0.85); padding: 4px 10px; border-radius: 6px; font-size: 12px; font-family: inherit; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; transition: background 0.15s, color 0.15s, border-color 0.15s; } .code-copy:hover { background: rgba(37,103,255,0.12); border-color: rgba(37,103,255,0.4); color: var(--accent-soft); } .code-copy.copied { background: rgba(37,103,255,0.15); border-color: rgba(37,103,255,0.4); color: var(--accent-soft); } /* In tabbed code groups the dots would repeat per tab — suppress them there. */ .code-tabs .code-header::before { display: none; } /* Pre-hydration / no-JS fallback: raw .code-content text renders mono and wrapped until the shell JS rewraps it into 
    . */
.code-content {
    display: block;
    white-space: pre-wrap;
    font-family: var(--font-mono);
    font-size: 13px;
}

.code-tabs {
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid #30363d;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    background: #0d1117;
    margin-bottom: 16px;
}
.code-tabs > .code-block {
    border: none;
    box-shadow: none;
    margin-bottom: 0;
    border-radius: 0;
}
.code-tab-bar {
    display: flex;
    gap: 0;
    background: #161b22;
    border-bottom: 1px solid #30363d;
}
.code-tab-btn {
    background: transparent;
    border: none;
    color: #7d8590;
    font-size: 11px;
    font-weight: 700;
    padding: 8px 14px;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: color 0.15s, border-color 0.15s;
    border-bottom: 2px solid transparent;
}
.code-tab-btn:hover { color: var(--text-primary); }
.code-tab-btn.active {
    color: var(--text-headers);
    border-bottom-color: var(--text-accent);
}
.hidden-tab { display: none; }

.status-badge {
    background: rgba(37, 103, 255, 0.15);
    color: var(--accent-soft);
    border: 1px solid rgba(37, 103, 255, 0.4);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 10px;
    margin-right: 8px;
}

/* ============================================================
   PRISM PRE OVERRIDES — wrap-enabled pre inside .code-block.
   #main-wrapper-scoped selectors outrank the global `pre { ... }` rule
   above and Prism okaidia's non-!important pre[class*="language-"].
   ============================================================ */
#main-wrapper pre[class*="language-"],
#main-wrapper .code-block > pre,
#main-wrapper .code-block > pre[class*="language-"] {
    margin: 0 !important;
    padding: 16px !important;
    background: transparent !important;
    text-shadow: none !important;
    font-family: var(--font-mono) !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
    white-space: pre-wrap !important;
    word-break: break-word !important;
    border: 0 !important;
    border-radius: 0 !important;
    overflow: auto;
}
#main-wrapper .code-block code[class*="language-"],
#main-wrapper .code-block pre[class*="language-"] {
    color: #c9d1d9 !important;
}

/* ============================================================
   OS TABS (Quickstart macOS/Windows/Linux switcher)
   ============================================================ */
.os-tab-bar {
    display: flex;
    gap: 0;
    background: #161b22;
    border: 1px solid #30363d;
    border-bottom: none;
    border-radius: 8px 8px 0 0;
    overflow: hidden;
}
/* Every OS pane sits directly under the tab bar (only one is visible, but the
   `+` adjacent selector only hit the first sibling). Flatten the top on all
   panes so the active one always joins the tab bar cleanly. */
.os-tab-bar + .code-block,
.os-pane {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}
.os-tab {
    background: transparent;
    border: 0;
    color: #7d8590;
    font-size: 11px;
    font-weight: 700;
    padding: 8px 14px;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 2px solid transparent;
    transition: color 0.15s, border-color 0.15s;
}
.os-tab:hover { color: var(--text-primary); }
.os-tab.active {
    color: var(--text-headers);
    border-bottom-color: var(--text-accent);
}
.os-pane.hidden { display: none; }

/* ============================================================
   BREADCRUMB
   ============================================================ */
.api-breadcrumb {
    padding: 24px 50px 0 50px;
    font-size: 0.75rem;
    color: var(--text-secondary);
}
.api-breadcrumb ol {
    display: flex;
    align-items: center;
    gap: 8px;
    list-style: none;
    padding: 0;
    margin: 0;
    flex-wrap: wrap;
}
.api-breadcrumb a {
    color: var(--text-secondary);
    text-decoration: none;
    transition: color 0.15s;
}
.api-breadcrumb a:hover { color: var(--text-primary); text-decoration: none; }
.api-breadcrumb .crumb-sep { opacity: 0.5; }
.api-breadcrumb .crumb-current { color: var(--text-primary); }
/* Neutralize the `#main-wrapper ol/li` counter pill for the breadcrumb's 
      . */
#main-wrapper .api-breadcrumb ol li {
    position: static;
    padding-left: 0;
    counter-increment: none;
}
#main-wrapper .api-breadcrumb ol li::before { content: none; }

/* ============================================================
   CONTENT WRAPPER (stripe + sticky TOC)
   ============================================================ */
/* Page H1 rendered above the sections (doc.html / doc-dashboard.html).
   Horizontal margins match the breadcrumb inset (50px; 20px on mobile). */
.doc-page-title {
    font-size: 2rem;
    font-weight: 700;
    color: var(--text-headers);
    letter-spacing: -0.5px;
    margin: 20px 50px 0.5rem;
}
@media (max-width: 1000px) {
    .doc-page-title { margin: 16px 20px 0.5rem; }
}

.content-with-toc {
    display: flex;
    align-items: flex-start;
    gap: 0;
    width: 100%;
}
.content-with-toc > .content-body {
    flex: 1;
    min-width: 0;
}

/* ============================================================
   ON-THIS-PAGE TOC
   ============================================================ */
#toc-panel {
    width: 200px;
    flex-shrink: 0;
    position: sticky;
    top: calc(var(--header-height) + 40px);
    max-height: calc(100vh - var(--header-height) - 80px);
    overflow-y: auto;
    padding: 60px 24px 24px 16px;
    box-sizing: border-box;
}
.toc-title {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-secondary);
    margin-bottom: 12px;
}
.toc-link {
    display: block;
    font-size: 0.8rem;
    color: var(--text-secondary);
    text-decoration: none;
    padding: 4px 0 4px 12px;
    border-left: 2px solid transparent;
    transition: color 0.15s, border-color 0.15s;
    line-height: 1.4;
}
.toc-link:hover { color: var(--text-primary); text-decoration: none; }
.toc-link.active {
    color: var(--accent-2-soft);
    border-left-color: var(--accent-2);
}

/* ============================================================
   PREV/NEXT NAVIGATION
   ============================================================ */
.docs-nav-bottom {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    margin: 0 30px 20px 30px;
}
.docs-nav-bottom a {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px 20px;
    border: 1px solid var(--border-primary);
    border-radius: 8px;
    text-decoration: none;
    color: var(--text-primary);
    transition: border-color 0.2s, background 0.2s;
    max-width: 45%;
}
.docs-nav-bottom a:hover {
    border-color: var(--text-accent);
    background: rgba(37, 103, 255, 0.06);
    text-decoration: none;
}
.docs-nav-bottom a.next { margin-left: auto; text-align: right; }
.docs-nav-bottom .nav-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-secondary);
}
.docs-nav-bottom .nav-title {
    font-weight: 600;
    color: var(--text-accent);
}

/* ============================================================
   SECTION SPACING (/docs/dashboard, /docs)
   ============================================================ */
#main-wrapper section.mb-16 {
    margin-bottom: 3.5rem;
    padding-bottom: 2rem;
}
#main-wrapper section:first-child {
    padding-top: 0.5rem;
}

/* ============================================================
   SKIP LINK + DOC FOOTER
   ============================================================ */
.skip-link {
    position: absolute;
    top: -100%;
    left: 0;
    background: var(--text-accent);
    color: #030305;
    padding: 8px 16px;
    z-index: 1000;
    font-size: 0.875rem;
    text-decoration: none;
    border-radius: 0 0 4px 0;
}
.skip-link:focus { top: 0; }

.doc-footer {
    border-top: 1px solid var(--border-primary);
    padding: 24px 0;
    margin-top: 40px;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 0.8rem;
    color: var(--text-secondary);
}
.doc-footer a {
    color: var(--text-secondary);
    text-decoration: none;
    margin-left: 16px;
}
.doc-footer a:hover { color: var(--text-accent); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1200px) {
    #toc-panel { display: none; }
}
@media (max-width: 1000px) {
    #sidebar { display: none; }
    #main-wrapper { margin-left: 0; padding: 24px 16px; }
    .nav-mobile-btn { display: inline-flex; min-height: 44px; }

    /* Collapse the top-nav so the menu button stays on-screen. Without this the
       400px search box (80px margins) + the desktop cross-links overflow the
       non-wrapping flex row and push #openSidebar past the right edge, where
       body{overflow-x:hidden} clips it — making the drawer impossible to open. */
    #top-nav { padding: 0 16px; }
    .nav-logo span { display: none; }                 /* drop the "| API DOCS" subtitle on phones */
    .nav-right .nav-link { display: none; }            /* restored as static links inside the drawer */
    .nav-search { flex: 1 1 auto; min-width: 0; max-width: none; margin: 0 12px; }
    .search-input { min-width: 0; font-size: 16px; }   /* min-width:0 lets it shrink; 16px stops iOS focus zoom */
    .search-shortcut { display: none; }                /* no Ctrl-K hint without a keyboard */

    /* Mobile drawer: bigger tap targets + fit narrow phones */
    .mobile-overlay .overlay-panel { width: min(300px, 88vw); }
    .overlay-close { padding: 8px; min-width: 44px; min-height: 44px; line-height: 1; font-size: 22px; }
    .overlay-panel .nav-item { padding: 11px 24px 11px 32px; min-height: 44px; }
    .overlay-panel .nav-group-title { font-size: 12px; }
    .drawer-links { margin: 4px 0 12px; padding: 0 0 8px; border-bottom: 1px solid var(--border-primary); }
    .drawer-links .nav-item { color: var(--text-accent); }

    .api-section { flex-direction: column; }
    .api-section > .doc-side,
    .api-section > .code-side {
        max-width: 100%;
        flex: 100%;
        padding: 40px 20px;
    }
    .api-section > .code-side {
        border-left: none;
        border-top: 1px solid var(--border-primary);
    }
    .api-breadcrumb { padding: 16px 20px 0 20px; }
    .docs-nav-bottom { margin: 0 20px 40px 20px; }
    .doc-footer { flex-direction: column; gap: 12px; text-align: center; }
}

@media (max-width: 640px) {
    /* Prev/Next cards stack full-width instead of squeezing two-up */
    .docs-nav-bottom { flex-direction: column; }
    .docs-nav-bottom a { max-width: 100%; }
    .docs-nav-bottom a.next { margin-left: 0; text-align: left; }  /* reset the desktop auto/right */
    /* Let table headers wrap rather than force a wide nowrap row (tables still
       sit inside .overflow-x-auto wrappers as the scroll safety-net). */
    #main-wrapper thead th { white-space: normal; }
}

/* ============================================================
   PRINT
   ============================================================ */
@media print {
    #top-nav, #sidebar, #toc-panel, .mobile-overlay,
    .docs-nav-bottom, .doc-footer, .skip-link,
    .terminal-copy-btn, .code-copy { display: none !important; }
    #app-shell { display: block !important; }
    #main-wrapper { padding: 0 !important; margin: 0 !important; }
    body { background: #fff !important; color: #000 !important; }
    .doc-h2, .doc-h3, .doc-strong { color: #000 !important; }
    .doc-text, .doc-label { color: #333 !important; }
    pre, .terminal-window { border: 1px solid #ccc !important; background: #f5f5f5 !important; }
    .callout, .warning, .success { background: #f5f5f5 !important; color: #000 !important; border-left-width: 3px !important; }
}

/* ============================================================
   TAILWIND COMPAT — minimal subset of utility classes used by
   /docs and /docs/dashboard markup. Loaded last so utilities win
   the cascade over component classes when both are applied
   (matches Tailwind's own "utilities layer last" semantics).
   List-style utilities (list-disc, list-decimal, list-inside) are
   intentionally omitted — the #main-wrapper ul/ol rules render
   custom bullets and counter pills that always override them.
   ============================================================ */

/* Box-sizing reset that Tailwind's preflight used to give us. */
*, *::before, *::after { box-sizing: border-box; }

/* — Margin — */
.mt-1 { margin-top: 0.25rem; }
.mt-2 { margin-top: 0.5rem; }
.mt-3 { margin-top: 0.75rem; }
.mt-4 { margin-top: 1rem; }
.mt-6 { margin-top: 1.5rem; }
.mt-8 { margin-top: 2rem; }
.mb-2 { margin-bottom: 0.5rem; }
.mb-3 { margin-bottom: 0.75rem; }
.mb-16 { margin-bottom: 4rem; }
.ml-1 { margin-left: 0.25rem; }
.ml-4 { margin-left: 1rem; }

/* — Padding — */
.px-2 { padding-left: 0.5rem; padding-right: 0.5rem; }
.px-3 { padding-left: 0.75rem; padding-right: 0.75rem; }
.px-4 { padding-left: 1rem; padding-right: 1rem; }
.py-1 { padding-top: 0.25rem; padding-bottom: 0.25rem; }
.py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.py-3 { padding-top: 0.75rem; padding-bottom: 0.75rem; }
.pl-5 { padding-left: 1.25rem; }
.pl-6 { padding-left: 1.5rem; }

/* — Layout — */
.flex { display: flex; }
.inline-flex { display: inline-flex; }
.hidden { display: none; }
.items-center { align-items: center; }
.gap-2 { gap: 0.5rem; }

/* — Sizing — */
.w-3 { width: 0.75rem; }
.w-4 { width: 1rem; }
.w-5 { width: 1.25rem; }
.w-full { width: 100%; }
.h-3 { height: 0.75rem; }
.h-4 { height: 1rem; }
.h-5 { height: 1.25rem; }

/* — Borders + radii — */
.border { border-width: 1px; border-style: solid; border-color: var(--border-primary); }
.border-b { border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: var(--border-primary); }
.rounded { border-radius: 0.25rem; }
.rounded-lg { border-radius: 0.5rem; }

/* — Text — */
.text-left { text-align: left; }
.text-xs { font-size: 0.75rem; }
.text-sm { font-size: 0.875rem; }
.font-mono { font-family: var(--font-mono); }
.font-semibold { font-weight: 600; }
.underline { text-decoration: underline; }

/* — Misc — */
.cursor-pointer { cursor: pointer; }
.overflow-x-auto { overflow-x: auto; }
.opacity-70 { opacity: 0.7; }
.opacity-80 { opacity: 0.8; }

/* — Tailwind `space-y-N` — vertical stacking via adjacent-sibling margin. — */
.space-y-1 > * + * { margin-top: 0.25rem; }
.space-y-2 > * + * { margin-top: 0.5rem; }
.space-y-4 > * + * { margin-top: 1rem; }

/* — Hover state used by reference.html "Get help" link — */
.hover\:doc-bg-muted:hover { background: #161b22; }


/* ============================================================
   P3 DOCS OVERHAUL — command palette, doc-set tabs, docs-home
   card grid, page actions (copy-md / ask-AI).
   Consumed by docs-palette.js + docs-search.js.
   ============================================================ */

/* — Search launcher: the nav input now opens the palette — */
.search-input.search-launcher { cursor: pointer; caret-color: transparent; }

/* — Command palette (#docs-palette) — */
#docs-palette {
    position: fixed;
    inset: 0;
    z-index: 10010;                     /* above nav(100)/dropdowns(200)/skip-link(1000) AND the Iris widget (9998/9999) — an aria-modal dialog must not be pierced by the chat launcher */
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 11vh 16px 16px;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
#docs-palette[hidden] { display: none !important; }

.dp-panel {
    width: 100%;
    max-width: 640px;
    max-height: 70vh;
    display: flex;
    flex-direction: column;
    background: rgba(13, 16, 22, 0.92); /* #0b0d11-family glass */
    border: 1px solid var(--border-primary);
    border-radius: 12px;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(37, 103, 255, 0.05);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    overflow: hidden;
    animation: dp-pop 0.14s ease-out;
}
.dp-panel:focus-within {
    border-color: rgba(37, 103, 255, 0.45);
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(37, 103, 255, 0.18);
}
@keyframes dp-pop {
    from { opacity: 0; transform: translateY(6px) scale(0.985); }
    to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
    .dp-panel { animation: none; }
}

.dp-input-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 13px 16px;
    border-bottom: 1px solid var(--border-secondary);
    flex: none;
}
.dp-search-icon { display: flex; color: var(--text-secondary); flex: none; }
.dp-search-icon svg { width: 16px; height: 16px; }
#docs-palette-input {
    flex: 1;
    min-width: 0;
    background: transparent;
    border: none;
    outline: none;
    color: var(--text-headers);
    font-family: var(--font-main);
    font-size: 16px;   /* >=16px stops iOS focus auto-zoom (same guard as the nav search input) */
}
#docs-palette-input::placeholder { color: var(--text-secondary); }

.dp-close {
    flex: none;
    background: none;
    border: 1px solid var(--border-primary);
    border-radius: 6px;
    color: var(--text-secondary);
    font-size: 18px;
    line-height: 1;
    padding: 2px 8px 4px;
    cursor: pointer;
}
.dp-close:hover { color: var(--text-headers); border-color: var(--text-secondary); }
@media (min-width: 640px) {
    .dp-close { display: none; }   /* desktop has Esc + overlay click; keep the row clean */
}

.dp-kbd {
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--text-secondary);
    border: 1px solid var(--border-primary);
    border-radius: 4px;
    padding: 2px 6px;
    flex: none;
}

#docs-palette-list { flex: 1; overflow-y: auto; padding: 6px; }

.dp-group { padding: 10px 8px 4px; }
.dp-set-chip {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 2px 8px;
    border-radius: 999px;
    border: 1px solid var(--border-primary);
    color: var(--text-secondary);
}
.dp-set-chip[data-set="docs"]      { color: var(--accent-soft);   border-color: rgba(37, 103, 255, 0.35); }
.dp-set-chip[data-set="dashboard"] { color: var(--accent-2-soft); border-color: rgba(37, 103, 255, 0.4); }
.dp-set-chip[data-set="api"]       { color: var(--accent-soft);              border-color: rgba(37, 103, 255, 0.35); }

.dp-option {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 8px;
    cursor: pointer;
}
.dp-option[aria-selected="true"] {
    background: rgba(37, 103, 255, 0.07);
    box-shadow: inset 0 0 0 1px rgba(37, 103, 255, 0.25);
}
.dp-main { min-width: 0; flex: 1; }
.dp-title {
    color: var(--text-primary);
    font-size: 13.5px;
    line-height: 1.4;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.dp-option[aria-selected="true"] .dp-title { color: var(--text-headers); }
.dp-method { flex: none; margin-right: 0; }
.dp-crumb { color: var(--text-secondary); }
.dp-meta {
    color: var(--text-secondary);
    font-size: 11.5px;
    line-height: 1.4;
    margin-top: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Matched-substring highlight — cyan tint, no underline. */
#docs-palette mark {
    background: rgba(37, 103, 255, 0.16);
    color: var(--accent-soft);
    text-decoration: none;
    border-radius: 3px;
    padding: 0 1px;
}

.dp-status {
    padding: 18px 16px;
    text-align: center;
    color: var(--text-secondary);
    font-size: 13px;
    flex: none;
}
.dp-status[hidden] { display: none !important; }

.dp-footer {
    display: flex;
    gap: 16px;
    padding: 8px 14px;
    border-top: 1px solid var(--border-secondary);
    font-size: 11px;
    color: var(--text-secondary);
    flex: none;
}
.dp-hint { display: inline-flex; align-items: center; gap: 5px; }

/* Prevent the page behind the palette from scrolling. */
html.dp-scroll-lock, html.dp-scroll-lock body { overflow: hidden; }

/* Full-screen palette on small viewports. */
@media (max-width: 639px) {
    #docs-palette { padding: 0; }
    .dp-panel {
        max-width: none;
        max-height: none;
        height: 100%;
        border: none;
        border-radius: 0;
    }
    .dp-footer { display: none; } /* keyboard hints are noise on touch */
}

/* — Doc-set switcher tabs (Docs / Dashboard / API / nvelox) —
   Top-nav variant only (.nav-link.docs-set-tab); the mobile-drawer copies
   render as plain .nav-item entries and keep the sidebar look. doc-shell's
   inline chrome block supplies the ACTIVE text color (cyan); this file adds
   the quiet-tab base and the --accent-2 active underline. */
.nav-link.docs-set-tab {
    position: relative;
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 500;
    padding: 6px 10px;
    border-radius: 6px;
    transition: color 0.15s;
}
.nav-link.docs-set-tab:hover { color: var(--text-primary); text-decoration: none; }
.nav-link.docs-set-tab.active::after,
.nav-link.docs-set-tab[aria-current="page"]::after,
.nav-link.docs-set-tab[aria-current="true"]::after {
    content: '';
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: 1px;
    height: 2px;
    border-radius: 2px;
    background: var(--accent-2);
    box-shadow: 0 0 8px rgba(37, 103, 255, 0.5);
}

/* — Docs home card grid + page actions (copy-md / ask-AI) —
   doc-shell.html ships an inline chrome block styling the same elements
   against the live docs-home.html markup; the rules below are value-matched,
   zero-specificity fallbacks (`:where()`) so the two sources can never
   fight — the inline block wins wherever both declare a property, and the
   look survives if that block is ever folded into this file. */
:where(.docs-home-grid) {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 16px;
}
:where(.docs-home-card) {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 20px;
    border: 1px solid var(--border-primary);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.02);
    color: var(--text-primary);
    text-decoration: none;
    transition: border-color 0.2s, background 0.2s;
}
:where(.docs-home-card:hover) {
    border-color: var(--accent-soft);
    background: rgba(37, 103, 255, 0.05);
    text-decoration: none;
}
:where(.docs-home-card-icon) { color: var(--accent-soft); }
:where(.docs-home-card-icon svg) { width: 22px; height: 22px; }
:where(.docs-home-card-title) { font-weight: 600; color: var(--text-headers); }
:where(.docs-home-card-desc) { font-size: 0.85rem; color: var(--text-secondary); line-height: 1.5; }

:where(#docs-copy-md, .docs-copy-md, #docs-ask-ai) {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: 1px solid var(--border-primary);
    border-radius: 6px;
    color: var(--text-secondary);
    font: inherit;
    font-size: 0.75rem;
    padding: 4px 10px;
    cursor: pointer;
    text-decoration: none;
    transition: color 0.2s, border-color 0.2s;
}
:where(#docs-copy-md:hover, .docs-copy-md:hover, #docs-ask-ai:hover) {
    color: var(--text-accent);
    border-color: var(--accent-soft);
    text-decoration: none;
}
/* Success flash set by docs-search.js after a copy — additive, no overlap
   with the inline chrome block. */
#docs-copy-md.copied, .docs-copy-md.copied { color: var(--accent-soft); border-color: rgba(37, 103, 255, 0.4); }
#docs-copy-md.copy-failed, .docs-copy-md.copy-failed { color: #f87171; border-color: rgba(248, 113, 113, 0.4); }
#docs-copy-md[hidden], #docs-ask-ai[hidden] { display: none !important; }