/* ============================================================================ CSDS Documentation — Design System ---------------------------------------------------------------------------- A self-contained, dual-mode (light + dark) design language for the docs. Loaded alongside tailwind.generated.css. Tailwind utilities remain available for ad-hoc layout, but all theme-sensitive styling lives here and is driven by CSS custom properties that switch on [data-theme] (set on ). Sections: 1. Design tokens (dark default + light) 2. Base / reset 3. Layout shell (top bar, sidebar, content, TOC, progress, footer) 4. Prose (.docs-article) 5. Components (callouts, code, terminal, tables, badges, endpoint headers, cards, kbd, pager, breadcrumb) 6. Command palette (⌘K) 7. Theme toggle 8. Utilities, motion, responsive, print ========================================================================== */ /* 1. ───────────────────────────── TOKENS ────────────────────────────────── */ :root, [data-theme="dark"] { color-scheme: dark; --docs-bg: #0a0e1a; --docs-bg-subtle: #0d1424; --docs-surface: #111827; --docs-surface-2: #161f33; --docs-border: rgba(255, 255, 255, 0.09); --docs-border-strong: rgba(255, 255, 255, 0.16); --docs-text: #f3f6fc; --docs-text-muted: #9fb0c8; --docs-text-faint: #6b7a93; --docs-accent: #4d8dff; --docs-accent-hover: #6ba1ff; --docs-link: #84b4ff; --docs-accent-contrast: #ffffff; --docs-accent-subtle: rgba(77, 141, 255, 0.13); --docs-accent-ring: rgba(77, 141, 255, 0.45); --docs-code-bg: #0c1322; --docs-code-text: #e7eefb; --docs-code-inline-bg: rgba(125, 162, 255, 0.13); --docs-code-inline-text: #cdddff; --docs-success: #34d399; --docs-warning: #fbbf24; --docs-danger: #f87171; --docs-info: #60a5fa; --risk-low: #34d399; --risk-medium: #fbbf24; --risk-high: #fb923c; --risk-critical: #f87171; --method-get: #34d399; --method-post: #fbbf24; --method-del: #f87171; --docs-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --docs-shadow-md: 0 8px 24px rgba(0, 0, 0, 0.45); --docs-shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.6); --docs-selection: rgba(77, 141, 255, 0.3); } [data-theme="light"] { color-scheme: light; --docs-bg: #ffffff; --docs-bg-subtle: #f6f8fb; --docs-surface: #ffffff; --docs-surface-2: #f3f6fb; --docs-border: #e6e9f0; --docs-border-strong: #d4dae6; --docs-text: #0f1729; --docs-text-muted: #54607a; --docs-text-faint: #8a94a8; --docs-accent: #2563eb; --docs-accent-hover: #1d4ed8; --docs-link: #1d4ed8; --docs-accent-contrast: #ffffff; --docs-accent-subtle: rgba(37, 99, 235, 0.08); --docs-accent-ring: rgba(37, 99, 235, 0.35); --docs-code-bg: #f6f8fb; --docs-code-text: #1f2740; --docs-code-inline-bg: rgba(37, 99, 235, 0.08); --docs-code-inline-text: #1d4ed8; --docs-success: #059669; --docs-warning: #b45309; --docs-danger: #dc2626; --docs-info: #2563eb; --risk-low: #059669; --risk-medium: #b45309; --risk-high: #c2410c; --risk-critical: #dc2626; --method-get: #047857; --method-post: #b45309; --method-del: #dc2626; --docs-shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.06); --docs-shadow-md: 0 8px 24px rgba(16, 24, 40, 0.1); --docs-shadow-lg: 0 24px 60px rgba(16, 24, 40, 0.18); --docs-selection: rgba(37, 99, 235, 0.18); } :root { --docs-font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --docs-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace; --r-sm: 6px; --r-md: 10px; --r-lg: 14px; --r-xl: 20px; --docs-topbar-h: 57px; --docs-sidebar-w: 290px; --docs-toc-w: 240px; --docs-content-max: 768px; --docs-gutter: 40px; } /* 2. ─────────────────────────────── BASE ────────────────────────────────── */ .docs-body { margin: 0; background: var(--docs-bg); color: var(--docs-text); font-family: var(--docs-font-sans); font-size: 16px; line-height: 1.65; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; font-feature-settings: "cv11", "ss01"; scroll-behavior: smooth; } .docs-body * { box-sizing: border-box; } .docs-body ::selection { background: var(--docs-selection); } /* Anti-FOUC: hide the page until docs-layout.js has assembled the shell (it sets ), then fade in — so navigation never flashes the bare article before the sidebar/top bar appear. The keyframe is a safety net that reveals the page even if JS is blocked or fails. */ html { background: var(--docs-bg); } .docs-body { opacity: 0; animation: docs-reveal 0.01s linear 1.6s forwards; } html.docs-ready .docs-body { opacity: 1; animation: none; transition: opacity .18s ease; } @keyframes docs-reveal { to { opacity: 1; } } @media (prefers-reduced-motion: reduce) { .docs-body { scroll-behavior: auto; } html.docs-ready .docs-body { transition: none; } .docs-body *, .docs-body *::before, .docs-body *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; } } .skip-link { position: fixed; top: -100px; left: 12px; z-index: 1000; padding: 10px 16px; background: var(--docs-accent); color: var(--docs-accent-contrast); border-radius: var(--r-md); font-weight: 600; transition: top .15s ease; } .skip-link:focus { top: 12px; } :where(.docs-body) :focus-visible { outline: 2px solid var(--docs-accent); outline-offset: 2px; border-radius: 4px; } /* 3. ────────────────────────────── SHELL ────────────────────────────────── */ /* Reading-progress bar */ .docs-progress { position: fixed; top: 0; left: 0; height: 2px; width: 0%; background: linear-gradient(90deg, var(--docs-accent), var(--docs-accent-hover)); z-index: 60; transition: width .1s linear; } /* Top bar */ .docs-topbar { position: sticky; top: 0; z-index: 50; height: var(--docs-topbar-h); display: flex; align-items: center; gap: 16px; padding: 0 20px; background: color-mix(in srgb, var(--docs-bg) 86%, transparent); backdrop-filter: saturate(150%) blur(10px); -webkit-backdrop-filter: saturate(150%) blur(10px); border-bottom: 1px solid var(--docs-border); } .docs-topbar__brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; letter-spacing: -0.01em; color: var(--docs-text); text-decoration: none; flex-shrink: 0; } .docs-topbar__brand img { width: 26px; height: 26px; border-radius: 7px; } .docs-topbar__brand .tag { font-size: 11px; font-weight: 600; color: var(--docs-text-muted); border: 1px solid var(--docs-border); padding: 1px 7px; border-radius: 999px; } .docs-topbar__spacer { flex: 1; } .docs-topbar__nav { display: flex; gap: 4px; } .docs-topbar__nav a { padding: 7px 12px; border-radius: var(--r-md); color: var(--docs-text-muted); text-decoration: none; font-size: 14px; font-weight: 500; transition: background .12s, color .12s; } .docs-topbar__nav a:hover { color: var(--docs-text); background: var(--docs-surface-2); } .docs-topbar__nav a.is-active { color: var(--docs-accent); background: var(--docs-accent-subtle); } .docs-search-trigger { display: inline-flex; align-items: center; gap: 10px; min-width: 220px; height: 36px; padding: 0 10px 0 12px; background: var(--docs-surface); border: 1px solid var(--docs-border); border-radius: var(--r-md); color: var(--docs-text-faint); font-size: 13.5px; cursor: pointer; transition: border-color .12s, background .12s; } .docs-search-trigger:hover { border-color: var(--docs-border-strong); } .docs-search-trigger svg { width: 15px; height: 15px; flex-shrink: 0; } .docs-search-trigger .label { flex: 1; text-align: left; } .docs-search-trigger .kbd-hint { font-family: var(--docs-font-mono); font-size: 11px; color: var(--docs-text-muted); border: 1px solid var(--docs-border); border-radius: 5px; padding: 1px 6px; background: var(--docs-bg-subtle); } .docs-iconbtn { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: var(--r-md); border: 1px solid var(--docs-border); background: var(--docs-surface); color: var(--docs-text-muted); cursor: pointer; transition: color .12s, border-color .12s, background .12s; } .docs-iconbtn:hover { color: var(--docs-text); border-color: var(--docs-border-strong); } .docs-iconbtn svg { width: 17px; height: 17px; } /* Icon-size safety nets (in case an injected SVG lacks its sizing class) */ .docs-sidebar__grouphead svg { width: 13px; height: 13px; flex-shrink: 0; } .docs-theme-toggle svg { width: 15px; height: 15px; } .docs-hamburger { display: none; } /* Layout grid */ .docs-shell { display: grid; grid-template-columns: var(--docs-sidebar-w) minmax(0, 1fr); align-items: start; max-width: 1480px; margin: 0 auto; } /* Sidebar */ .docs-sidebar { position: sticky; top: var(--docs-topbar-h); height: calc(100vh - var(--docs-topbar-h)); overflow-y: auto; overscroll-behavior: contain; padding: 24px 14px 48px 20px; border-right: 1px solid var(--docs-border); scrollbar-width: thin; scrollbar-color: var(--docs-border-strong) transparent; } .docs-sidebar::-webkit-scrollbar { width: 9px; } .docs-sidebar::-webkit-scrollbar-thumb { background: var(--docs-border-strong); border-radius: 9px; border: 3px solid transparent; background-clip: content-box; } .docs-sidebar__group { margin-bottom: 6px; } .docs-sidebar__grouphead { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 10px; background: none; border: 0; color: var(--docs-text); font: inherit; font-size: 12px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; cursor: pointer; border-radius: var(--r-sm); } .docs-sidebar__grouphead .chev { width: 13px; height: 13px; margin-left: auto; color: var(--docs-text-faint); transition: transform .15s ease; } .docs-sidebar__group.is-collapsed .chev { transform: rotate(-90deg); } .docs-sidebar__group.is-collapsed .docs-sidebar__list { display: none; } .docs-sidebar__list { display: flex; flex-direction: column; gap: 1px; margin: 2px 0 10px; } .docs-sidebar__link { display: flex; align-items: center; gap: 8px; padding: 6.5px 10px; border-radius: var(--r-sm); color: var(--docs-text-muted); text-decoration: none; font-size: 14px; line-height: 1.35; border-left: 2px solid transparent; transition: color .12s, background .12s; } .docs-sidebar__link:hover { color: var(--docs-text); background: var(--docs-surface-2); } .docs-sidebar__link.is-active { color: var(--docs-accent); background: var(--docs-accent-subtle); font-weight: 600; border-left-color: var(--docs-accent); } /* Content column */ .docs-content { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) var(--docs-toc-w); gap: 48px; padding: 40px var(--docs-gutter) 80px; } .docs-main { min-width: 0; max-width: var(--docs-content-max); } /* Breadcrumb */ .docs-breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 13px; color: var(--docs-text-faint); margin-bottom: 18px; } .docs-breadcrumb a { color: var(--docs-text-muted); text-decoration: none; } .docs-breadcrumb a:hover { color: var(--docs-accent); } .docs-breadcrumb .sep { opacity: .5; } /* TOC */ .docs-toc { position: sticky; top: calc(var(--docs-topbar-h) + 40px); align-self: start; max-height: calc(100vh - var(--docs-topbar-h) - 80px); overflow-y: auto; font-size: 13.5px; scrollbar-width: thin; } .docs-toc__title { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--docs-text-faint); margin-bottom: 12px; } .docs-toc a { display: block; padding: 4px 0 4px 12px; color: var(--docs-text-muted); text-decoration: none; border-left: 2px solid var(--docs-border); line-height: 1.4; transition: color .12s, border-color .12s; } .docs-toc a:hover { color: var(--docs-text); } .docs-toc a.lvl-3 { padding-left: 26px; font-size: 13px; } .docs-toc a.is-active { color: var(--docs-accent); border-left-color: var(--docs-accent); font-weight: 600; } /* Pager (prev/next) */ .docs-pager { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 56px; padding-top: 28px; border-top: 1px solid var(--docs-border); } .docs-pager a { display: flex; flex-direction: column; gap: 4px; padding: 16px 18px; border: 1px solid var(--docs-border); border-radius: var(--r-lg); text-decoration: none; transition: border-color .12s, background .12s, transform .12s; } .docs-pager a:hover { border-color: var(--docs-accent); background: var(--docs-accent-subtle); } .docs-pager a.next { text-align: right; align-items: flex-end; } .docs-pager .dir { font-size: 12px; color: var(--docs-text-faint); } .docs-pager .ttl { font-size: 15px; font-weight: 600; color: var(--docs-text); } /* Footer */ .docs-footer { border-top: 1px solid var(--docs-border); padding: 28px var(--docs-gutter); color: var(--docs-text-faint); font-size: 13px; display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between; align-items: center; max-width: 1480px; margin: 0 auto; } .docs-footer a { color: var(--docs-text-muted); text-decoration: none; } .docs-footer a:hover { color: var(--docs-accent); } .docs-footer__links { display: flex; flex-wrap: wrap; gap: 18px; } /* 4. ────────────────────────────── PROSE ────────────────────────────────── */ .docs-article { font-size: 16px; } .docs-article > *:first-child { margin-top: 0; } .docs-article h1 { font-size: 2.1rem; line-height: 1.15; font-weight: 800; letter-spacing: -0.02em; margin: 0 0 12px; } .docs-article .lead { font-size: 1.18rem; line-height: 1.55; color: var(--docs-text-muted); margin: 0 0 32px; } .docs-article h2 { font-size: 1.55rem; line-height: 1.25; font-weight: 700; letter-spacing: -0.01em; margin: 52px 0 16px; padding-top: 8px; scroll-margin-top: calc(var(--docs-topbar-h) + 24px); } .docs-article h3 { font-size: 1.2rem; font-weight: 650; margin: 36px 0 12px; scroll-margin-top: calc(var(--docs-topbar-h) + 24px); } .docs-article h4 { font-size: 1rem; font-weight: 650; margin: 26px 0 10px; } .docs-article p { margin: 0 0 18px; } .docs-article a { color: var(--docs-link); text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--docs-link) 35%, transparent); transition: border-color .12s, color .12s; } .docs-article a:hover { color: var(--docs-accent-hover); border-bottom-color: var(--docs-accent-hover); } .docs-article strong { color: var(--docs-text); font-weight: 650; } .docs-article ul, .docs-article ol { margin: 0 0 18px; padding-left: 24px; } .docs-article li { margin: 6px 0; } .docs-article li::marker { color: var(--docs-text-faint); } .docs-article hr { border: 0; border-top: 1px solid var(--docs-border); margin: 40px 0; } .docs-article blockquote { margin: 0 0 18px; padding: 2px 18px; border-left: 3px solid var(--docs-border-strong); color: var(--docs-text-muted); } .docs-article :not(pre) > code { font-family: var(--docs-font-mono); font-size: 0.86em; background: var(--docs-code-inline-bg); color: var(--docs-code-inline-text); padding: 0.15em 0.4em; border-radius: 5px; word-break: break-word; } .docs-article img { max-width: 100%; border-radius: var(--r-md); } /* Anchored headings */ .heading-anchor { opacity: 0; margin-left: 8px; color: var(--docs-text-faint); text-decoration: none; border: 0; font-weight: 400; transition: opacity .12s; } .docs-article h2:hover .heading-anchor, .docs-article h3:hover .heading-anchor { opacity: 1; } /* 5. ──────────────────────────── COMPONENTS ─────────────────────────────── */ /* Callouts */ .callout { display: flex; gap: 12px; margin: 22px 0; padding: 14px 16px; border: 1px solid var(--docs-border); border-left-width: 3px; border-radius: var(--r-md); background: var(--docs-surface); font-size: 14.5px; } .callout__icon { flex-shrink: 0; width: 18px; height: 18px; margin-top: 2px; } .callout__body { min-width: 0; } .callout__body > *:last-child { margin-bottom: 0; } .callout__title { font-weight: 650; margin-bottom: 2px; color: var(--docs-text); } .callout.note { border-left-color: var(--docs-info); background: color-mix(in srgb, var(--docs-info) 8%, var(--docs-surface)); } .callout.note .callout__icon { color: var(--docs-info); } .callout.tip { border-left-color: var(--docs-success); background: color-mix(in srgb, var(--docs-success) 8%, var(--docs-surface)); } .callout.tip .callout__icon { color: var(--docs-success); } .callout.warning{ border-left-color: var(--docs-warning); background: color-mix(in srgb, var(--docs-warning) 9%, var(--docs-surface)); } .callout.warning .callout__icon { color: var(--docs-warning); } .callout.danger { border-left-color: var(--docs-danger); background: color-mix(in srgb, var(--docs-danger) 9%, var(--docs-surface)); } .callout.danger .callout__icon { color: var(--docs-danger); } .callout.beta { border-left-color: var(--docs-accent); background: var(--docs-accent-subtle); } .callout.beta .callout__icon { color: var(--docs-accent); } /* Code blocks */ .code-block { margin: 22px 0; border: 1px solid var(--docs-border); border-radius: var(--r-lg); overflow: hidden; background: var(--docs-code-bg); } .code-block__head { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-bottom: 1px solid var(--docs-border); background: color-mix(in srgb, var(--docs-code-bg) 70%, var(--docs-surface)); } .code-block__lang { font-family: var(--docs-font-mono); font-size: 12px; color: var(--docs-text-muted); font-weight: 600; } .code-block__file { font-size: 12px; color: var(--docs-text-faint); } .code-block__spacer { flex: 1; } .code-block pre { margin: 0; padding: 16px; overflow-x: auto; font-family: var(--docs-font-mono); font-size: 13.5px; line-height: 1.6; color: var(--docs-code-text); scrollbar-width: thin; } .code-block pre code { font-family: inherit; background: none; padding: 0; color: inherit; } .code-block.plain { background: var(--docs-code-bg); } /* Copy button (shared by code blocks & terminals) */ .copy-btn { display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px; border: 1px solid var(--docs-border); border-radius: var(--r-sm); background: var(--docs-surface); color: var(--docs-text-muted); font-size: 12px; font-weight: 500; cursor: pointer; transition: color .12s, border-color .12s, background .12s; } .copy-btn:hover { color: var(--docs-text); border-color: var(--docs-border-strong); } .copy-btn svg { width: 13px; height: 13px; } .copy-btn.copied { color: var(--docs-success); border-color: color-mix(in srgb, var(--docs-success) 50%, var(--docs-border)); } /* Tabbed code group */ .code-group { margin: 22px 0; } .code-group__tabs { display: flex; gap: 2px; border: 1px solid var(--docs-border); border-bottom: 0; border-radius: var(--r-lg) var(--r-lg) 0 0; padding: 6px 6px 0; background: color-mix(in srgb, var(--docs-code-bg) 70%, var(--docs-surface)); overflow-x: auto; } .code-group__tab { padding: 7px 13px; border: 0; background: none; color: var(--docs-text-muted); font: inherit; font-size: 13px; font-weight: 500; cursor: pointer; border-radius: var(--r-sm) var(--r-sm) 0 0; border-bottom: 2px solid transparent; white-space: nowrap; transition: color .12s, border-color .12s; } .code-group__tab:hover { color: var(--docs-text); } .code-group__tab.is-active { color: var(--docs-accent); border-bottom-color: var(--docs-accent); } .code-group .code-block { margin: 0; border-radius: 0 0 var(--r-lg) var(--r-lg); } .code-group__panel[hidden] { display: none; } /* Terminal */ .terminal { margin: 22px 0; border: 1px solid var(--docs-border); border-radius: var(--r-lg); overflow: hidden; background: var(--docs-code-bg); } .terminal__bar { display: flex; align-items: center; gap: 7px; padding: 9px 13px; border-bottom: 1px solid var(--docs-border); background: color-mix(in srgb, var(--docs-code-bg) 60%, var(--docs-surface)); } .terminal__dot { width: 11px; height: 11px; border-radius: 50%; } .terminal__dot.r { background: #ff5f57; } .terminal__dot.y { background: #febc2e; } .terminal__dot.g { background: #28c840; } .terminal__title { margin-left: 6px; font-size: 12px; color: var(--docs-text-faint); font-family: var(--docs-font-mono); } .terminal__spacer { flex: 1; } .terminal pre { margin: 0; padding: 16px; overflow-x: auto; font-family: var(--docs-font-mono); font-size: 13.5px; line-height: 1.65; color: var(--docs-code-text); } .terminal pre .cmd { color: var(--docs-text); } .terminal pre .prompt { color: var(--docs-success); user-select: none; } .terminal pre .comment { color: var(--docs-text-faint); } .terminal pre .out { color: var(--docs-text-muted); } /* Tables / parameter tables */ .docs-table-wrap { margin: 22px 0; overflow-x: auto; border: 1px solid var(--docs-border); border-radius: var(--r-lg); } .docs-table { width: 100%; border-collapse: collapse; font-size: 14px; } .docs-table th { text-align: left; padding: 11px 14px; background: var(--docs-bg-subtle); color: var(--docs-text-muted); font-size: 12px; font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase; border-bottom: 1px solid var(--docs-border); } .docs-table td { padding: 12px 14px; border-bottom: 1px solid var(--docs-border); vertical-align: top; } .docs-table tr:last-child td { border-bottom: 0; } .docs-table td code { white-space: nowrap; } .docs-table .param-name { font-family: var(--docs-font-mono); color: var(--docs-text); font-weight: 600; font-size: 13px; } .docs-table .param-type { font-family: var(--docs-font-mono); font-size: 12.5px; color: var(--docs-text-faint); } .req-pill { font-size: 11px; font-weight: 700; color: var(--docs-danger); text-transform: uppercase; letter-spacing: .03em; } .opt-pill { font-size: 11px; font-weight: 600; color: var(--docs-text-faint); text-transform: uppercase; letter-spacing: .03em; } /* Badges */ .badge { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; line-height: 1.5; border: 1px solid var(--docs-border); color: var(--docs-text-muted); background: var(--docs-surface); white-space: nowrap; } .badge.method { font-family: var(--docs-font-mono); letter-spacing: .03em; } .badge.get { color: var(--method-get); border-color: color-mix(in srgb, var(--method-get) 40%, transparent); background: color-mix(in srgb, var(--method-get) 12%, var(--docs-surface)); } .badge.post { color: var(--method-post); border-color: color-mix(in srgb, var(--method-post) 40%, transparent); background: color-mix(in srgb, var(--method-post) 12%, var(--docs-surface)); } .badge.del { color: var(--method-del); border-color: color-mix(in srgb, var(--method-del) 40%, transparent); background: color-mix(in srgb, var(--method-del) 12%, var(--docs-surface)); } .badge.cost { color: var(--docs-accent); border-color: var(--docs-accent-ring); background: var(--docs-accent-subtle); } .badge.rate { color: var(--docs-text-muted); } .badge.beta { color: var(--docs-accent); border-color: var(--docs-accent-ring); background: var(--docs-accent-subtle); text-transform: uppercase; letter-spacing: .04em; font-size: 11px; } .badge.stub { color: var(--docs-warning); border-color: color-mix(in srgb, var(--docs-warning) 40%, transparent); background: color-mix(in srgb, var(--docs-warning) 12%, var(--docs-surface)); text-transform: uppercase; letter-spacing: .04em; font-size: 11px; } .badge.risk-low { color: var(--risk-low); border-color: color-mix(in srgb, var(--risk-low) 45%, transparent); background: color-mix(in srgb, var(--risk-low) 13%, var(--docs-surface)); } .badge.risk-medium { color: var(--risk-medium); border-color: color-mix(in srgb, var(--risk-medium) 45%, transparent); background: color-mix(in srgb, var(--risk-medium) 13%, var(--docs-surface)); } .badge.risk-high { color: var(--risk-high); border-color: color-mix(in srgb, var(--risk-high) 45%, transparent); background: color-mix(in srgb, var(--risk-high) 13%, var(--docs-surface)); } .badge.risk-critical { color: var(--risk-critical); border-color: color-mix(in srgb, var(--risk-critical) 45%, transparent); background: color-mix(in srgb, var(--risk-critical) 13%, var(--docs-surface)); } /* Endpoint header */ .endpoint { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 8px 0 20px; padding: 14px 16px; border: 1px solid var(--docs-border); border-radius: var(--r-lg); background: var(--docs-surface); } .endpoint__path { font-family: var(--docs-font-mono); font-size: 15px; font-weight: 600; color: var(--docs-text); word-break: break-all; } .endpoint__meta { display: flex; flex-wrap: wrap; gap: 8px; margin-left: auto; } /* Cards */ .card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; margin: 24px 0; } .card { display: flex; flex-direction: column; gap: 8px; padding: 20px; border: 1px solid var(--docs-border); border-radius: var(--r-lg); background: var(--docs-surface); text-decoration: none; color: inherit; transition: border-color .14s, transform .14s, box-shadow .14s, background .14s; } a.card:hover { border-color: var(--docs-accent); transform: translateY(-2px); box-shadow: var(--docs-shadow-md); } .card__icon { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: var(--r-md); background: var(--docs-accent-subtle); color: var(--docs-accent); } .card__icon svg { width: 20px; height: 20px; } .card__title { font-size: 15.5px; font-weight: 650; color: var(--docs-text); } .card__desc { font-size: 13.5px; color: var(--docs-text-muted); line-height: 1.5; } .card__title .arrow { transition: transform .14s; display: inline-block; } a.card:hover .card__title .arrow { transform: translateX(3px); } /* kbd */ kbd, .kbd { font-family: var(--docs-font-mono); font-size: 0.8em; padding: 1.5px 6px; border: 1px solid var(--docs-border-strong); border-bottom-width: 2px; border-radius: 5px; background: var(--docs-surface); color: var(--docs-text-muted); } /* Definition / key-value list */ .kv { margin: 22px 0; border: 1px solid var(--docs-border); border-radius: var(--r-lg); overflow: hidden; } .kv__row { display: grid; grid-template-columns: 180px 1fr; gap: 16px; padding: 12px 16px; border-bottom: 1px solid var(--docs-border); } .kv__row:last-child { border-bottom: 0; } .kv__key { color: var(--docs-text-muted); font-size: 13.5px; font-weight: 600; } .kv__val { font-size: 14px; } /* Empty state */ .empty-state { text-align: center; padding: 40px 20px; color: var(--docs-text-faint); } /* 6. ──────────────────────── COMMAND PALETTE ────────────────────────────── */ .cmdk-backdrop { position: fixed; inset: 0; z-index: 200; background: rgba(4, 8, 18, 0.55); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); display: flex; align-items: flex-start; justify-content: center; padding: 12vh 16px 16px; } .cmdk-backdrop[hidden] { display: none; } .cmdk { width: 100%; max-width: 620px; background: var(--docs-surface); border: 1px solid var(--docs-border-strong); border-radius: var(--r-xl); box-shadow: var(--docs-shadow-lg); overflow: hidden; display: flex; flex-direction: column; max-height: min(560px, 76vh); } .cmdk__search { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--docs-border); } .cmdk__search svg { width: 18px; height: 18px; color: var(--docs-text-faint); flex-shrink: 0; } .cmdk__input { flex: 1; background: none; border: 0; outline: none; color: var(--docs-text); font-size: 16px; font-family: inherit; } .cmdk__input::placeholder { color: var(--docs-text-faint); } .cmdk__esc { font-size: 11px; } .cmdk__results { overflow-y: auto; padding: 8px; scrollbar-width: thin; } .cmdk__grouphead { padding: 10px 12px 5px; font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--docs-text-faint); } .cmdk__item { display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: var(--r-md); text-decoration: none; color: var(--docs-text); cursor: pointer; } .cmdk__item .ic { width: 16px; height: 16px; color: var(--docs-text-faint); flex-shrink: 0; } .cmdk__item .meta { margin-left: auto; font-size: 11px; color: var(--docs-text-faint); text-transform: capitalize; } .cmdk__item .sub { font-size: 12px; color: var(--docs-text-faint); } .cmdk__item .txt { min-width: 0; } .cmdk__item .txt .ttl { font-size: 14px; } .cmdk__item.is-active { background: var(--docs-accent-subtle); } .cmdk__item.is-active .ic { color: var(--docs-accent); } .cmdk__item mark { background: color-mix(in srgb, var(--docs-accent) 30%, transparent); color: inherit; border-radius: 3px; padding: 0 1px; } .cmdk__footer { display: flex; gap: 16px; padding: 9px 16px; border-top: 1px solid var(--docs-border); font-size: 11.5px; color: var(--docs-text-faint); } .cmdk__footer .k { display: inline-flex; align-items: center; gap: 5px; } .cmdk__empty { padding: 36px 16px; text-align: center; color: var(--docs-text-faint); font-size: 14px; } .cmdk__ai { display: flex; align-items: center; gap: 10px; padding: 11px 12px; margin-top: 4px; border-top: 1px dashed var(--docs-border); border-radius: var(--r-md); color: var(--docs-accent); text-decoration: none; font-size: 13.5px; } .cmdk__ai:hover { background: var(--docs-accent-subtle); } /* 7. ──────────────────────────── THEME TOGGLE ───────────────────────────── */ .docs-theme-toggle { position: relative; width: 56px; height: 32px; flex-shrink: 0; border-radius: 999px; border: 1px solid var(--docs-border); background: var(--docs-surface); cursor: pointer; padding: 0; transition: background .15s, border-color .15s; } .docs-theme-toggle:hover { border-color: var(--docs-border-strong); } .docs-theme-toggle .ic { position: absolute; top: 50%; transform: translateY(-50%); width: 15px; height: 15px; } .docs-theme-toggle .ic-sun { left: 8px; color: var(--docs-warning); } .docs-theme-toggle .ic-moon { right: 8px; color: var(--docs-text-faint); } .docs-theme-toggle .thumb { position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: var(--docs-accent); box-shadow: var(--docs-shadow-sm); transition: transform .2s cubic-bezier(.4, 0, .2, 1); } [data-theme="dark"] .docs-theme-toggle .thumb { transform: translateX(24px); } [data-theme="light"] .docs-theme-toggle .ic-moon { color: var(--docs-text-faint); } [data-theme="dark"] .docs-theme-toggle .ic-sun { color: var(--docs-text-faint); } [data-theme="dark"] .docs-theme-toggle .ic-moon { color: var(--docs-accent); } /* 8. ──────────────────── MOBILE DRAWER / RESPONSIVE ─────────────────────── */ .docs-scrim { position: fixed; inset: 0; z-index: 45; background: rgba(4, 8, 18, 0.5); opacity: 0; visibility: hidden; transition: opacity .2s; } .docs-scrim.is-open { opacity: 1; visibility: visible; } /* TOC inline disclosure (md screens) */ .docs-toc-inline { display: none; margin-bottom: 24px; border: 1px solid var(--docs-border); border-radius: var(--r-lg); } .docs-toc-inline summary { padding: 12px 16px; cursor: pointer; font-weight: 600; font-size: 14px; color: var(--docs-text-muted); } .docs-toc-inline .docs-toc { position: static; max-height: none; padding: 0 16px 16px; } @media (max-width: 1180px) { .docs-content { grid-template-columns: minmax(0, 1fr); gap: 0; } /* Hide only the right-rail TOC — NOT the nav nested inside the inline "On this page" disclosure (which also carries .docs-toc). */ .docs-content > .docs-toc { display: none; } .docs-toc-inline.has-items { display: block; } } @media (max-width: 860px) { :root { --docs-gutter: 22px; } .docs-shell { grid-template-columns: minmax(0, 1fr); } .docs-topbar { gap: 10px; padding: 0 14px; } .docs-topbar__brand { min-width: 0; } .docs-hamburger { display: inline-flex; } .docs-topbar__nav { display: none; } .docs-search-trigger { min-width: 0; width: 36px; padding: 0; justify-content: center; } .docs-search-trigger .label, .docs-search-trigger .kbd-hint { display: none; } .docs-sidebar { position: fixed; top: 0; left: 0; z-index: 46; width: min(82vw, 320px); height: 100vh; background: var(--docs-bg); transform: translateX(-100%); transition: transform .22s cubic-bezier(.4, 0, .2, 1); padding-top: 20px; } .docs-sidebar.is-open { transform: translateX(0); box-shadow: var(--docs-shadow-lg); } .docs-pager { grid-template-columns: 1fr; } .docs-article h1 { font-size: 1.7rem; } .docs-article h2 { font-size: 1.35rem; } } /* Very small phones: drop the "Docs" pill so the brand never crowds the bar */ @media (max-width: 420px) { .docs-topbar__brand .tag { display: none; } } @media (min-width: 861px) { .docs-sidebar__close { display: none; } } .docs-sidebar__close { position: absolute; top: 14px; right: 14px; } /* Full-width pages (homepage / section landings) skip the TOC column */ .docs-content.is-full { display: block; } .docs-content.is-full .docs-main { max-width: 1080px; margin: 0 auto; } /* Generic helpers used in content */ .docs-grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; } .text-muted { color: var(--docs-text-muted); } .mono { font-family: var(--docs-font-mono); } .nowrap { white-space: nowrap; } .mt-0 { margin-top: 0; } .mb-0 { margin-bottom: 0; } @media print { .docs-topbar, .docs-sidebar, .docs-toc, .docs-pager, .docs-progress, .copy-btn, .docs-footer { display: none !important; } .docs-content { grid-template-columns: 1fr; padding: 0; } }