/* ═══════════════════════════════════════════════════════════
   1. Gate Styles
   ═══════════════════════════════════════════════════════════ */
#gate { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100vh; padding: 2rem 1rem; }
.gate-logo { width: 148px; margin-bottom: 2.5rem; opacity: 0; animation: fadeUp 0.6s cubic-bezier(0.16,1,0.3,1) 0.1s forwards; }
.gate-card { background: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 2rem; width: 100%; max-width: 400px; opacity: 0; animation: fadeUp 0.6s cubic-bezier(0.16,1,0.3,1) 0.25s forwards; }
.gate-card h1 { font-size: 1.125rem; font-weight: 600; margin-bottom: 0.25rem; }
.gate-card p { font-size: 0.875rem; color: var(--color-dim); margin-bottom: 1.25rem; }
#gate-error { background: #fef2f2; border: 1px solid #FECACA; border-radius: var(--radius-md); padding: 0.625rem 0.875rem; margin-bottom: 1rem; font-size: 0.8125rem; color: var(--color-danger); display: none; }
#gate-error.visible { display: block; }
.gate-label { display: block; font-size: 0.8125rem; font-weight: 500; color: var(--color-dim); margin-bottom: 0.25rem; }
.gate-input { width: 100%; padding: 0.5rem 0.75rem; border: 1px solid var(--color-border); border-radius: var(--radius-md); font-family: inherit; font-size: 0.875rem; color: var(--color-ink); outline: none; transition: border-color var(--transition); }
.gate-input:focus { border-color: var(--color-ink); }
.gate-btn { display: block; width: 100%; margin-top: 0.875rem; padding: 0.5rem 1rem; border-radius: var(--radius-md); font-family: inherit; font-size: 0.875rem; font-weight: 500; cursor: pointer; border: none; background: var(--color-ink); color: var(--color-white); transition: background var(--transition); }
.gate-btn:hover { background: #374151; }
.gate-footer { margin-top: 2rem; font-size: 0.75rem; color: var(--color-muted); text-align: center; opacity: 0; animation: fadeUp 0.6s cubic-bezier(0.16,1,0.3,1) 0.4s forwards; }

/* ═══════════════════════════════════════════════════════════
   2. App Shell
   ═══════════════════════════════════════════════════════════ */
#app { display: none; }
#app.visible { display: flex; flex-direction: column; min-height: 100vh; }

/* Header — matches blackmoat-web */
.app-header { background: var(--color-white); border-bottom: 1px solid var(--color-border); height: var(--header-h); display: flex; align-items: center; justify-content: space-between; padding: 0 1.25rem; position: sticky; top: 0; z-index: 100; }
.header-left { display: flex; align-items: center; gap: 1rem; }
.header-logo { height: 22px; }
.header-sep { width: 1px; height: 20px; background: var(--color-border); }
.header-title { font-size: 0.8125rem; font-weight: 600; color: var(--color-muted); letter-spacing: 0.02em; }
.header-actions { display: flex; align-items: center; gap: 0.25rem; }
.header-icon-btn { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-md); color: var(--color-muted); background: transparent; border: none; cursor: pointer; transition: background 0.15s, color 0.15s; }
.header-icon-btn:hover { background: var(--color-paper); color: var(--color-ink); }

/* Layout */
.app-body { display: flex; flex: 1; }
.app-footer { text-align: center; font-size: 0.75rem; color: var(--color-muted); padding: 1.5rem; border-top: 1px solid var(--color-border); }

/* ═══════════════════════════════════════════════════════════
   3. Two-Panel Layout
   ═══════════════════════════════════════════════════════════ */
.content-wrap { flex: 1; min-width: 0; display: flex; flex-direction: column; }

/* Guide mode — single column */
.docs-content { flex: 1; padding: 2.5rem 3rem 5rem; max-width: var(--content-max); margin: 0 auto; width: 100%; }

/* API mode — Stripe/Column-style inline layout */
.api-layout { flex: 0 0 auto; overflow-y: auto; height: calc(100vh - var(--header-h)); max-height: calc(100vh - var(--header-h)); }

/* ── Stripe layout: docs left, code right, scrolls together ── */
.api-stripe-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: 0; }
.api-stripe-row + .api-stripe-row { border-top: 1px solid var(--code-border); }
.api-stripe-row--intro + .api-stripe-row { border-top: 1px solid var(--color-border); }

.api-stripe-docs {
  padding: 2.5rem 2.75rem 2.5rem 2.5rem;
  background: var(--color-white);
}
.api-stripe-docs h2 {
  font-size: 1.25rem; font-weight: 600; margin: 0 0 0.375rem; padding: 0; border-bottom: none;
}
.api-stripe-docs h2:not(:first-child) { margin-top: 2.5rem; }
.api-stripe-docs .endpoint-header { margin-bottom: 1.25rem; }
.api-stripe-docs .endpoint-header .endpoint-desc { margin-top: 0.5rem; }

.api-stripe-code {
  padding: 0;
  background: var(--code-bg);
  border-left: 1px solid var(--code-border);
  min-width: 0;
  overflow: hidden;
}
.api-stripe-code--empty { min-height: 40px; }

/* Inline code blocks inside stripe rows */
.ic-lang-bar { display: flex; align-items: center; padding: 0 1rem; border-bottom: 1px solid var(--code-border); flex-shrink: 0; }

.ic-block { }
.ic-block + .ic-block { border-top: 1px solid var(--code-border); }

.ic-header {
  padding: 0.5rem 1rem;
  font-size: 0.625rem; font-weight: 700; color: #6c7086;
  text-transform: uppercase; letter-spacing: 0.05em;
  font-family: var(--font-mono);
  border-bottom: 1px solid var(--code-border);
  display: flex; align-items: center; gap: 0.5rem;
}
.ic-status { color: #a6e3a1; }
.ic-copy {
  margin-left: auto; font-size: 0.625rem; color: #6c7086;
  cursor: pointer; padding: 1px 6px; border-radius: 3px;
  border: 1px solid #3a3a4e; background: none;
  font-family: inherit; transition: all var(--transition);
}
.ic-copy:hover { color: var(--code-fg); border-color: #5a5a7e; }
.ic-copy.copied { color: #a6e3a1; border-color: #a6e3a1; }

.ic-body {
  padding: 0.75rem 1rem;
  font-family: var(--font-mono); font-size: 0.6875rem;
  color: var(--code-fg); white-space: pre-wrap;
  word-break: break-all; line-height: 1.6;
  max-height: 440px; overflow-y: auto; margin: 0;
}
.ic-response .ic-body { max-height: 320px; }

/* Mode tabs (Code / Try It / Console / Ask) */
.ic-mode-bar { display: flex; border-bottom: 1px solid var(--code-border); padding: 0; background: #181825; }
.ic-mode-tab { padding: 0.5rem 0.875rem; font-size: 0.75rem; font-weight: 600; color: #6c7086; background: none; border: none; border-bottom: 2px solid transparent; cursor: pointer; font-family: inherit; transition: all var(--transition); }
.ic-mode-tab:hover { color: #a6adc8; }
.ic-mode-tab.active { color: var(--code-fg); border-bottom-color: #89b4fa; }
.ic-mode-panel { }
.ic-mode-panel:not(.active) { display: none; }

/* Legacy panel styles (kept for backward compat) */
.docs-panel { display: none; }
.code-panel { display: none; }

/* Code panel split: request | response */
.cp-lang-bar { display: flex; align-items: center; padding: 0 1rem; border-bottom: 1px solid var(--code-border); flex-shrink: 0; }
.cp-split { display: flex; flex: 1; min-height: 0; }
.cp-split-left { flex: 1; overflow-y: auto; border-right: 1px solid var(--code-border); padding: 0; }
.cp-split-right { flex: 1; overflow-y: auto; padding: 0; }
.cp-split-header { padding: 0.5rem 1rem; font-size: 0.625rem; font-weight: 700; color: #6c7086; text-transform: uppercase; letter-spacing: 0.05em; font-family: var(--font-mono); border-bottom: 1px solid var(--code-border); display: flex; align-items: center; gap: 0.5rem; }
.cp-split-header .cp-status { color: #a6e3a1; }
.cp-split-body { padding: 0.75rem 1rem; font-family: var(--font-mono); font-size: 0.6875rem; color: var(--code-fg); white-space: pre-wrap; word-break: break-all; line-height: 1.6; margin: 0; }
.cp-split-copy { margin-left: auto; font-size: 0.625rem; color: #6c7086; cursor: pointer; padding: 1px 6px; border-radius: 3px; border: 1px solid #3a3a4e; background: none; font-family: inherit; transition: all var(--transition); }
.cp-split-copy:hover { color: var(--code-fg); border-color: #5a5a7e; }
.cp-split-copy.copied { color: #a6e3a1; border-color: #a6e3a1; }

/* Try It form */
.try-it { background: var(--color-paper); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 1.25rem; margin: 1.5rem 0; }
.try-it-header { display: flex; align-items: center; gap: 0.5rem; font-weight: 600; font-size: 0.8125rem; margin-bottom: 1rem; color: var(--color-ink); }
.try-it-header svg { color: var(--color-accent); }
.try-it .form-group { margin-bottom: 0.75rem; }
.try-it .form-label { display: block; font-size: 0.75rem; font-weight: 600; color: var(--color-dim); margin-bottom: 0.25rem; font-family: var(--font-mono); }
.try-it .form-input { width: 100%; padding: 0.375rem 0.625rem; border: 1px solid var(--color-border); border-radius: var(--radius); font-family: var(--font-mono); font-size: 0.75rem; color: var(--color-ink); outline: none; transition: border-color var(--transition); background: var(--color-white); }
.try-it .form-input:focus { border-color: var(--color-accent); }
.try-it .form-input::placeholder { color: var(--color-muted); }
.try-it-submit { padding: 0.5rem 1.25rem; background: var(--color-ink); color: var(--color-white); border: none; border-radius: var(--radius); font-family: inherit; font-size: 0.8125rem; font-weight: 600; cursor: pointer; transition: background var(--transition); margin-top: 0.5rem; }
.try-it-submit:hover { background: #374151; }
.try-it-result { margin-top: 1rem; }
.try-it-result .code-block { margin: 0; }

/* Inline endpoint chat */
.endpoint-chat { margin: 1rem 0 1.5rem; }
.endpoint-chat-input { display: flex; border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; background: var(--color-white); }
.endpoint-chat-input input { flex: 1; padding: 0.5rem 0.75rem; border: none; outline: none; font-family: inherit; font-size: 0.8125rem; }
.endpoint-chat-input button { padding: 0.5rem 1rem; border: none; background: var(--color-ink); color: var(--color-white); font-family: inherit; font-size: 0.75rem; font-weight: 600; cursor: pointer; transition: background var(--transition); }
.endpoint-chat-input button:hover { background: #374151; }
.endpoint-chat-response { margin-top: 0.75rem; padding: 0.75rem 1rem; background: var(--color-paper); border-radius: var(--radius-md); font-size: 0.8125rem; color: var(--color-dim); line-height: 1.6; }

/* Glossary */
.glossary-entry { padding: 1rem 0; border-bottom: 1px solid var(--color-border-light); }
.glossary-entry:last-child { border-bottom: none; }
.glossary-entry dt { font-size: 0.9375rem; margin-bottom: 0.25rem; }
.glossary-entry dd { font-size: 0.8125rem; color: var(--color-dim); line-height: 1.6; margin: 0; }

/* ═══════════════════════════════════════════════════════════
   4. Sidebar Nav
   ═══════════════════════════════════════════════════════════ */
.sidebar { width: var(--sidebar-w); border-right: 1px solid var(--color-border); background: var(--color-white); position: sticky; top: var(--header-h); height: calc(100vh - var(--header-h)); overflow-y: auto; flex-shrink: 0; padding: 1.25rem 0; }
.nav-section { margin-bottom: 0.75rem; }
.nav-section-header { display: flex; align-items: center; gap: 0.375rem; width: 100%; padding: 0.5rem 1.25rem; margin-top: 0.75rem; border: none; background: none; font-family: inherit; font-size: 0.6875rem; font-weight: 700; color: var(--color-muted); text-transform: uppercase; letter-spacing: 0.06em; cursor: pointer; text-align: left; transition: color var(--transition-slow); }
.nav-section:first-child .nav-section-header { margin-top: 0; }
.nav-section-header:hover { color: var(--color-ink); }
.nav-chevron { transition: transform var(--transition); }
.nav-section-header:not(.collapsed) .nav-chevron { transform: rotate(90deg); }
.nav-items { overflow: hidden; }
.nav-items.hidden { display: none; }
.nav-item { display: block; padding: 0.625rem 1.25rem 0.625rem 2.25rem; font-size: 0.8125rem; line-height: 1.4; color: var(--color-dim); transition: all var(--transition-slow); border-right: 3px solid transparent; text-decoration: none; }
.nav-item:hover { color: var(--color-ink); background: var(--color-paper); text-decoration: none; }
.nav-item.active { color: var(--color-ink); font-weight: 500; border-right-color: var(--color-ink); background: var(--color-paper); }
.nav-divider { padding: 0.875rem 1.25rem 0.25rem 1.25rem; font-size: 0.5625rem; font-weight: 700; color: var(--color-faint); text-transform: uppercase; letter-spacing: 0.06em; }
.nav-section:first-child .nav-divider:first-child { padding-top: 0.25rem; }

/* Nav filter chips */
.nav-filter-bar { display: flex; flex-wrap: wrap; gap: 0.25rem; padding: 0.5rem 1rem 0.375rem; border-bottom: 1px solid var(--color-border-light); }
.nav-filter { padding: 0.1875rem 0.5rem; font-size: 0.5625rem; font-weight: 600; color: var(--color-muted); background: none; border: 1px solid var(--color-border); border-radius: 2rem; cursor: pointer; font-family: inherit; transition: all var(--transition); text-transform: uppercase; letter-spacing: 0.03em; }
.nav-filter:hover { color: var(--color-dim); border-color: var(--color-dim); }
.nav-filter.active { color: var(--color-accent); border-color: var(--color-accent); background: rgba(37,99,235,0.06); }

/* Replace-this guide */
.replace-guide { background: var(--color-paper); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 0.625rem 0.875rem; margin-bottom: 0.75rem; font-size: 0.8125rem; }
.replace-guide-header { font-size: 0.6875rem; font-weight: 700; color: var(--color-dim); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 0.375rem; }
.replace-guide-table { width: 100%; border-collapse: collapse; }
.replace-guide-table th { text-align: left; font-size: 0.625rem; font-weight: 600; color: var(--color-muted); padding: 0.25rem 0; text-transform: uppercase; letter-spacing: 0.04em; }
.replace-guide-table td { padding: 0.1875rem 0; font-size: 0.75rem; border-top: 1px solid var(--color-border-light); }
.replace-guide-table td:first-child { width: 40%; }

/* Response summary */
.response-summary { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.75rem; border-radius: var(--radius); font-family: var(--font-mono); font-size: 0.75rem; margin-bottom: 0.5rem; }
.response-summary.rs-ok { background: var(--color-border-light); color: var(--color-ink); }
.response-summary.rs-err { background: var(--color-border-light); color: var(--color-dim); }
.rs-status { font-weight: 700; }

/* ═══════════════════════════════════════════════════════════
   5. Typography — Content Area
   ═══════════════════════════════════════════════════════════ */
.docs-content h1, .docs-panel h1 { font-size: 1.75rem; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 0.5rem; }
.docs-content h2, .docs-panel h2 { font-size: 1.25rem; font-weight: 600; margin-top: 3.5rem; margin-bottom: 1.25rem; padding-bottom: 0.625rem; border-bottom: 1px solid var(--color-border-light); }
.docs-content h3, .docs-panel h3 { font-size: 1.0625rem; font-weight: 600; margin-top: 2.5rem; margin-bottom: 0.75rem; }
.docs-content p, .docs-panel p { margin-bottom: 1.25rem; line-height: 1.7; }
.docs-content ul, .docs-content ol, .docs-panel ul, .docs-panel ol { margin-bottom: 1.25rem; padding-left: 1.5rem; }
.docs-content li, .docs-panel li { margin-bottom: 0.5rem; }
.docs-content strong, .docs-panel strong { font-weight: 600; }
.page-lead { font-size: 1rem; color: var(--color-dim); margin-bottom: 1.5rem; line-height: 1.7; }

/* Back-compat: #doc-content selectors */
#doc-content h1 { font-size: 1.75rem; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 0.5rem; }
#doc-content h2 { font-size: 1.25rem; font-weight: 600; margin-top: 3rem; margin-bottom: 1rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--color-border-light); }
#doc-content h3 { font-size: 1.0625rem; font-weight: 600; margin-top: 2rem; margin-bottom: 0.625rem; }
#doc-content p { margin-bottom: 1.25rem; line-height: 1.7; }
#doc-content ul, #doc-content ol { margin-bottom: 1.25rem; padding-left: 1.5rem; }
#doc-content li { margin-bottom: 0.5rem; }
#doc-content strong { font-weight: 600; }

/* ═══════════════════════════════════════════════════════════
   6. Code Blocks (Catppuccin)
   ═══════════════════════════════════════════════════════════ */
.code-block { background: var(--code-bg); border-radius: var(--radius-md); overflow: hidden; margin-bottom: 1rem; }
.cb-header { display: flex; align-items: center; padding: 0.5rem 1rem; border-bottom: 1px solid var(--code-border); gap: 0.5rem; }
.cb-method { font-size: 0.5625rem; font-weight: 700; color: #fab387; font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.05em; }
.cb-title { font-size: 0.6875rem; color: #6c7086; font-family: var(--font-mono); }
.cb-lang { font-size: 0.5625rem; font-weight: 700; color: #6c7086; font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.05em; }
.cb-copy { margin-left: auto; font-size: 0.625rem; color: #6c7086; cursor: pointer; padding: 1px 6px; border-radius: 3px; border: 1px solid #3a3a4e; background: none; font-family: inherit; transition: all var(--transition); }
.cb-copy:hover { color: var(--code-fg); border-color: #5a5a7e; background: rgba(255,255,255,0.05); }
.cb-copy.copied { color: #a6e3a1; border-color: #a6e3a1; }
.cb-body { padding: 0.75rem 0.875rem; font-family: var(--font-mono); font-size: 0.6875rem; color: var(--code-fg); white-space: pre-wrap; word-break: break-all; line-height: 1.6; max-height: 400px; overflow-y: auto; margin: 0; }

/* Syntax tokens */
.hl-kw { color: #cba6f7; }
.hl-str { color: #a6e3a1; }
.hl-key { color: #89b4fa; }
.hl-num { color: #fab387; }
.hl-bool { color: #fab387; }
.hl-null { color: #6c7086; }
.hl-comment { color: #6c7086; font-style: italic; }
.hl-type { color: #f9e2af; }
.hl-decorator { color: #f9e2af; }

/* ═══════════════════════════════════════════════════════════
   7. Callout Boxes
   ═══════════════════════════════════════════════════════════ */
.callout { border-left: 3px solid var(--color-border); border-radius: var(--radius-md); padding: 0.875rem 1rem; margin-bottom: 1rem; background: var(--color-paper); }
.callout-title { font-size: 0.8125rem; font-weight: 600; margin-bottom: 0.25rem; color: var(--color-ink); }
.callout-body { font-size: 0.8125rem; color: var(--color-dim); line-height: 1.6; }
.callout-body code { font-size: 0.75em; }
.callout-info { border-left-color: var(--color-ink); }
.callout-info .callout-title { color: var(--color-ink); }
.callout-warning { border-left-color: var(--color-dim); }
.callout-warning .callout-title { color: var(--color-ink); }
.callout-canton { border-left-color: var(--color-ink); }
.callout-canton .callout-title { color: var(--color-ink); }
.callout-tip { border-left-color: var(--color-dim); }
.callout-tip .callout-title { color: var(--color-ink); }

/* ═══════════════════════════════════════════════════════════
   8. Template Cards
   ═══════════════════════════════════════════════════════════ */
.template-card { border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-white); margin-bottom: 1rem; overflow: hidden; }
.tc-header { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 1rem; border-bottom: 1px solid var(--color-border-light); }
.tc-name { font-size: 0.9375rem; font-weight: 700; }
.tc-package { font-size: 0.625rem; font-weight: 600; color: var(--color-muted); background: var(--color-paper); padding: 2px 8px; border-radius: 3px; text-transform: uppercase; letter-spacing: 0.04em; }
.tc-meta { padding: 0.75rem 1rem; }
.tc-meta-row { display: flex; align-items: baseline; gap: 0.5rem; font-size: 0.8125rem; margin-bottom: 0.25rem; }
.tc-label { font-size: 0.6875rem; font-weight: 600; color: var(--color-muted); text-transform: uppercase; letter-spacing: 0.04em; min-width: 80px; }
.tc-section { border-top: 1px solid var(--color-border-light); }
.tc-toggle { display: block; width: 100%; padding: 0.5rem 1rem; border: none; background: none; font-family: inherit; font-size: 0.75rem; font-weight: 600; color: var(--color-accent); cursor: pointer; text-align: left; transition: background 0.1s; }
.tc-toggle:hover { background: var(--color-paper); }
.tc-toggle[aria-expanded="false"] + .tc-body { display: none; }
.tc-toggle[aria-expanded="true"] + .tc-body { display: block; }
.tc-body { display: none; padding: 0 1rem 0.75rem; }
.tc-body.visible { display: block; }

/* ═══════════════════════════════════════════════════════════
   9. Unified Data Tables
   Consolidates: .field-table, .tt-table, .st-table,
                 .tc-table, .param-table
   ═══════════════════════════════════════════════════════════ */

/* Base table — shared by all table types */
.data-table,
.field-table,
.tt-table,
.st-table,
.tc-table,
.param-table {
  width: 100%;
  font-size: 0.8125rem;
  border-collapse: collapse;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.data-table th,
.field-table th,
.tt-table th,
.st-table th,
.tc-table th,
.param-table th {
  text-align: left;
  font-weight: 600;
  color: var(--color-muted);
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-paper);
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.data-table td,
.field-table td,
.tt-table td,
.st-table td,
.tc-table td,
.param-table td {
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid var(--color-border-light);
  vertical-align: top;
}

/* Compact variant for template card inner tables */
.tc-table { font-size: 0.75rem; }
.tc-table th { font-size: 0.625rem; padding: 0.375rem 0.5rem; }
.tc-table td { padding: 0.375rem 0.5rem; }

/* Table wrapper labels */
.type-table-wrap, .schema-table-wrap { margin-bottom: 1rem; }
.tt-name, .st-name { font-size: 0.8125rem; font-weight: 600; margin-bottom: 0.375rem; }

/* Field table margin */
.field-table { margin-bottom: 1rem; }

/* Parameter table margin */
.param-table { margin-bottom: 1rem; }

/* Required/optional badges */
.required { color: var(--color-ink); font-weight: 600; font-size: 0.75rem; }
.field-values { display: inline; font-size: 0.75rem; color: var(--color-muted); }
.param-required { color: var(--color-danger); font-weight: 600; font-size: 0.6875rem; }
.param-optional { color: var(--color-muted); font-size: 0.6875rem; }

/* ═══════════════════════════════════════════════════════════
   10. Example & Concept Cards
   ═══════════════════════════════════════════════════════════ */
.examples { list-style: none; margin-bottom: 1.5rem; }
.examples li { background: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 0.75rem 1rem; margin-bottom: 0.5rem; font-size: 0.875rem; color: var(--color-dim); font-style: italic; transition: border-color var(--transition); cursor: pointer; }
.examples li:hover { border-color: var(--color-dim); color: var(--color-ink); }
.examples li::before { content: '\201C'; color: var(--color-muted); font-style: normal; font-size: 1.25rem; margin-right: 0.25rem; vertical-align: -2px; }

.concepts { list-style: none; margin-bottom: 1.5rem; display: grid; gap: 0.5rem; }
.concepts li { background: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 0.875rem 1.125rem; font-size: 0.875rem; color: var(--color-dim); line-height: 1.6; }
.concepts li strong { display: block; color: var(--color-ink); font-size: 0.8125rem; text-transform: uppercase; letter-spacing: 0.03em; margin-bottom: 0.25rem; }

/* Tool Grid */
.tool-grid { display: grid; gap: 0.75rem; margin-bottom: 1.5rem; }
.tool-card { background: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 1rem 1.25rem; transition: border-color var(--transition); }
.tool-card:hover { border-color: var(--color-dim); }
.tool-card .tool-name { font-size: 0.9375rem; font-weight: 600; color: var(--color-ink); margin-bottom: 0.25rem; }
.tool-card .tool-desc { font-size: 0.8125rem; color: var(--color-dim); margin: 0; line-height: 1.5; }

/* ═══════════════════════════════════════════════════════════
   11. Language Tabs
   ═══════════════════════════════════════════════════════════ */
.lang-tabs { display: flex; gap: 0; border-bottom: 1px solid var(--code-border); padding: 0 1rem; }
.lang-tab { padding: 0.5rem 1rem; font-size: 0.75rem; font-weight: 600; color: #6c7086; background: none; border: none; border-bottom: 2px solid transparent; cursor: pointer; font-family: inherit; transition: all var(--transition); }
.lang-tab:hover { color: var(--code-fg); }
.lang-tab[aria-selected="true"],
.lang-tab.active { color: var(--code-fg); border-bottom-color: #89b4fa; }

/* Code panel section blocks */
.cp-section { margin-bottom: 2rem; }
.cp-section-title { font-size: 0.75rem; font-weight: 700; color: #6c7086; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 0.75rem; padding: 0; }
.cp-block { background: #181825; border-radius: var(--radius-md); overflow: hidden; margin-bottom: 0.75rem; }
.cp-block-header { display: flex; align-items: center; padding: 0.375rem 0.75rem; border-bottom: 1px solid var(--code-border); gap: 0.5rem; }
.cp-block-label { font-size: 0.625rem; font-weight: 700; color: #6c7086; text-transform: uppercase; letter-spacing: 0.05em; font-family: var(--font-mono); }
.cp-block-copy { margin-left: auto; font-size: 0.625rem; color: #6c7086; cursor: pointer; padding: 1px 6px; border-radius: 3px; border: 1px solid #3a3a4e; background: none; font-family: inherit; transition: all var(--transition); }
.cp-block-copy:hover { color: var(--code-fg); border-color: #5a5a7e; }
.cp-block-copy.copied { color: #a6e3a1; border-color: #a6e3a1; }
.cp-block-body { padding: 0.75rem; font-family: var(--font-mono); font-size: 0.6875rem; color: var(--code-fg); white-space: pre-wrap; word-break: break-all; line-height: 1.6; max-height: 400px; overflow-y: auto; margin: 0; }

/* ═══════════════════════════════════════════════════════════
   12. Mode Toggle
   ═══════════════════════════════════════════════════════════ */
.mode-toggle { display: flex; gap: 0; border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; margin: 2rem 0; }
.mode-btn { flex: 1; padding: 0.625rem 1rem; font-size: 0.8125rem; font-weight: 600; color: var(--color-dim); background: var(--color-white); border: none; cursor: pointer; font-family: inherit; transition: all var(--transition); text-align: center; }
.mode-btn:not(:last-child) { border-right: 1px solid var(--color-border); }
.mode-btn:hover { background: var(--color-paper); color: var(--color-ink); }
.mode-btn.active { background: var(--color-ink); color: var(--color-white); }

/* ═══════════════════════════════════════════════════════════
   13. Form Components
   ═══════════════════════════════════════════════════════════ */
.form-section { background: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 1.5rem; margin-bottom: 1.5rem; }
.form-section h3 { margin-top: 0; margin-bottom: 1rem; }
.form-group { margin-bottom: 1rem; }
.form-label { display: block; font-size: 0.8125rem; font-weight: 600; color: var(--color-dim); margin-bottom: 0.25rem; }
.form-hint { font-size: 0.75rem; color: var(--color-muted); margin-bottom: 0.25rem; }
.form-input, .form-select, .form-textarea { width: 100%; padding: 0.5rem 0.75rem; border: 1px solid var(--color-border); border-radius: var(--radius); font-family: inherit; font-size: 0.875rem; color: var(--color-ink); outline: none; transition: border-color var(--transition); }
.form-input:focus, .form-select:focus, .form-textarea:focus { border-color: var(--color-accent); box-shadow: 0 0 0 2px rgba(37,99,235,0.08); }
.form-textarea { min-height: 80px; resize: vertical; }
.form-submit { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.5rem 1.25rem; background: var(--color-ink); color: var(--color-white); border: none; border-radius: var(--radius-md); font-family: inherit; font-size: 0.875rem; font-weight: 500; cursor: pointer; transition: background var(--transition); }
.form-submit:hover { background: #374151; }
.form-submit:disabled { opacity: 0.5; cursor: default; }

/* ═══════════════════════════════════════════════════════════
   14. Chat Agent
   ═══════════════════════════════════════════════════════════ */
.chat-wrap { background: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; margin-bottom: 1.5rem; }
.chat-messages { padding: 1rem; max-height: 400px; overflow-y: auto; }
.chat-msg { margin-bottom: 0.75rem; display: flex; gap: 0.75rem; }
.chat-msg:last-child { margin-bottom: 0; }
.chat-avatar { width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 0.625rem; font-weight: 700; color: var(--color-white); }
.chat-avatar.user { background: var(--color-accent); }
.chat-avatar.agent { background: var(--color-ink); }
.chat-bubble { flex: 1; font-size: 0.8125rem; line-height: 1.6; color: var(--color-dim); }
.chat-bubble p { margin-bottom: 0.5rem; }
.chat-bubble p:last-child { margin-bottom: 0; }
.chat-input-wrap { display: flex; border-top: 1px solid var(--color-border); }
.chat-input { flex: 1; padding: 0.75rem 1rem; border: none; outline: none; font-family: inherit; font-size: 0.875rem; }
.chat-send { padding: 0.75rem 1.25rem; border: none; background: var(--color-ink); color: var(--color-white); font-family: inherit; font-size: 0.8125rem; font-weight: 600; cursor: pointer; transition: background var(--transition); }
.chat-send:hover { background: #374151; }

/* Chat drawer (slides from right) */
.chat-drawer-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.2); z-index: 999; opacity: 0; pointer-events: none; transition: opacity 0.2s; }
.chat-drawer-overlay.open { opacity: 1; pointer-events: auto; }
.chat-drawer { position: fixed; top: 0; right: 0; bottom: 0; width: 380px; background: var(--color-white); border-left: 1px solid var(--color-border); z-index: 1000; display: flex; flex-direction: column; transform: translateX(100%); transition: transform 0.25s cubic-bezier(0.16,1,0.3,1); box-shadow: -8px 0 30px rgba(0,0,0,0.08); }
.chat-drawer.open { transform: translateX(0); }
.chat-drawer-header { display: flex; align-items: center; justify-content: space-between; padding: 0 1.25rem; height: var(--header-h); border-bottom: 1px solid var(--color-border); flex-shrink: 0; }
.chat-drawer-title { font-size: 0.8125rem; font-weight: 600; color: var(--color-ink); }
.chat-drawer-close { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border: none; background: none; color: var(--color-muted); cursor: pointer; border-radius: var(--radius); transition: background 0.15s, color 0.15s; }
.chat-drawer-close:hover { background: var(--color-paper); color: var(--color-ink); }
.chat-drawer-body { flex: 1; overflow: hidden; display: flex; flex-direction: column; }
.chat-drawer-body .chat-wrap { margin: 0; border: none; border-radius: 0; flex: 1; display: flex; flex-direction: column; }
.chat-drawer-body .chat-messages { flex: 1; max-height: none; }

/* ═══════════════════════════════════════════════════════════
   15. Virtual Console
   ═══════════════════════════════════════════════════════════ */
.vc-wrap { background: var(--code-bg); border-radius: var(--radius-lg); overflow: hidden; margin: 1.5rem 0; border: 1px solid #2a2a3e; }
.vc-header { display: flex; align-items: center; justify-content: space-between; padding: 0.5rem 1rem; border-bottom: 1px solid #2a2a3e; }
.vc-title { font-size: 0.6875rem; font-weight: 600; color: #6c7086; font-family: var(--font-mono); }
.vc-clear { font-size: 0.625rem; color: #6c7086; cursor: pointer; padding: 2px 8px; border-radius: 3px; border: 1px solid #3a3a4e; background: none; font-family: inherit; transition: all var(--transition); }
.vc-clear:hover { color: #cdd6f4; border-color: #5a5a7e; }
.vc-body { padding: 1rem; max-height: 500px; overflow-y: auto; }
.vc-entry { margin-bottom: 1rem; }
.vc-entry:last-child { margin-bottom: 0; }
.vc-prompt { font-family: var(--font-mono); font-size: 0.75rem; color: #a6e3a1; margin-bottom: 0.25rem; }
.vc-prompt::before { content: '> '; color: #6c7086; }
.vc-method { font-size: 0.5625rem; font-weight: 700; color: #fab387; font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.375rem; }
.vc-response { background: #181825; border-radius: var(--radius); padding: 0.625rem 0.75rem; margin-top: 0.375rem; }
.vc-response pre { font-family: var(--font-mono); font-size: 0.625rem; color: #cdd6f4; white-space: pre-wrap; line-height: 1.5; margin: 0; max-height: 200px; overflow-y: auto; }
.vc-status { font-size: 0.5625rem; color: #a6e3a1; font-weight: 600; margin-bottom: 0.25rem; }
.vc-suggestions { display: flex; gap: 0.375rem; flex-wrap: wrap; padding: 0.75rem 1rem; border-top: 1px solid #2a2a3e; }
.vc-suggest-label { font-size: 0.625rem; color: #6c7086; margin-right: 0.25rem; align-self: center; }
.vc-suggest { font-size: 0.6875rem; color: #cdd6f4; padding: 4px 10px; border-radius: var(--radius); border: 1px solid #3a3a4e; background: none; font-family: inherit; cursor: pointer; transition: all var(--transition); white-space: nowrap; }
.vc-suggest:hover { border-color: #89b4fa; color: #89b4fa; }
.vc-suggest:disabled { opacity: 0.35; cursor: default; }
.vc-typing { color: #6c7086; font-family: var(--font-mono); font-size: 0.6875rem; }
.vc-typing::before { content: '$ '; color: #6c7086; }
.vc-cursor { display: inline-block; width: 7px; height: 13px; background: #6c7086; animation: pulse 1s infinite; vertical-align: text-bottom; margin-left: 1px; }

/* ═══════════════════════════════════════════════════════════
   16. Interactive Console (.cd-*)
   ═══════════════════════════════════════════════════════════ */
.cd-wrap { margin: 1.5rem 0; }
.cd-progress { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1rem; }
.cd-track { flex: 1; height: 3px; background: var(--color-border); border-radius: 2px; overflow: hidden; }
.cd-fill { height: 100%; background: var(--color-ink); border-radius: 2px; transition: width 0.4s cubic-bezier(0.16,1,0.3,1); }
.cd-label { font-size: 0.6875rem; color: var(--color-muted); font-weight: 500; white-space: nowrap; }
.cd-controls { display: flex; gap: 0.375rem; }
.cd-btn { padding: 4px 10px; border-radius: var(--radius); font-family: inherit; font-size: 0.625rem; font-weight: 600; cursor: pointer; border: 1px solid var(--color-border); background: var(--color-white); color: var(--color-dim); text-transform: uppercase; letter-spacing: 0.03em; transition: all var(--transition); }
.cd-btn:hover { color: var(--color-ink); border-color: #bbb; }
.cd-btn:disabled { opacity: 0.35; cursor: default; pointer-events: none; }
.cd-primary { background: var(--color-ink); color: var(--color-white); border-color: var(--color-ink); }
.cd-primary:hover { background: #374151; }
.cd-columns { display: grid; grid-template-columns: 1fr 280px; gap: 1rem; align-items: start; }
.cd-step { position: relative; padding-left: 36px; margin-bottom: 2px; }
.cd-step:last-child .cd-line { display: none; }
.cd-line { position: absolute; left: 12px; top: 28px; bottom: 0; width: 2px; background: var(--color-border); }
.cd-step.completed .cd-line { background: var(--color-ok); }
.cd-marker { position: absolute; left: 1px; top: 4px; width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.5625rem; font-weight: 700; border: 2px solid var(--color-border); background: var(--color-white); color: var(--color-muted); z-index: 1; transition: all 0.2s; }
.cd-step.active .cd-marker { border-color: var(--color-ink); background: var(--color-ink); color: var(--color-white); }
.cd-step.completed .cd-marker { border-color: var(--color-ok); background: var(--color-ok); color: var(--color-white); }
.cd-step.locked .cd-marker { opacity: 0.5; }
.cd-content { background: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 0.75rem 1rem; transition: all 0.2s; }
.cd-step.active .cd-content { border-color: var(--color-dim); }
.cd-step.locked .cd-content { opacity: 0.45; }
.cd-step.completed .cd-content { background: var(--color-paper); }
.cd-top { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.25rem; }
.cd-step-label { font-size: 0.8125rem; font-weight: 600; }
.cd-type { font-size: 0.5rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; padding: 1px 5px; border-radius: 3px; }
.cd-type.create { background: var(--color-border-light); color: var(--color-ink); }
.cd-type.exercise { background: var(--color-border-light); color: var(--color-dim); }
.cd-type.query { background: var(--color-border-light); color: var(--color-muted); }
.cd-badges { display: flex; gap: 3px; flex-wrap: wrap; margin-bottom: 0.375rem; }
.cd-badge { font-size: 0.5625rem; font-weight: 600; padding: 1px 6px; border-radius: 8px; color: var(--color-white); white-space: nowrap; }
.cd-narrative { font-size: 0.75rem; color: var(--color-dim); line-height: 1.5; }
.cd-exec { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.5rem; }
.cd-exec-btn { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.25rem 0.75rem; border-radius: var(--radius); font-family: inherit; font-size: 0.6875rem; font-weight: 600; cursor: pointer; border: none; background: var(--color-ink); color: var(--color-white); transition: all var(--transition); }
.cd-exec-btn:hover { background: #374151; }
.cd-exec-btn:disabled { opacity: 0.35; cursor: default; }
.cd-status { font-size: 0.6875rem; color: var(--color-muted); }
.cd-status.ok { color: var(--color-ok); font-weight: 500; }
.cd-status.running { color: var(--color-accent); animation: pulse 1s infinite; }
.cd-result { margin-top: 0.5rem; background: #F0FDF4; border: 1px solid #BBF7D0; border-radius: var(--radius); padding: 0.5rem 0.75rem; }
.cd-result-label { font-size: 0.5625rem; font-weight: 700; color: var(--color-ok); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 0.25rem; }
.cd-result-body { font-family: var(--font-mono); font-size: 0.5625rem; color: var(--color-dim); white-space: pre-wrap; line-height: 1.5; max-height: 150px; overflow-y: auto; margin: 0; }
.cd-api-toggle { display: inline-flex; align-items: center; gap: 3px; margin-top: 0.375rem; padding: 0; border: none; background: none; font-family: inherit; font-size: 0.625rem; color: var(--color-muted); cursor: pointer; font-weight: 500; }
.cd-api-toggle:hover { color: var(--color-dim); }
.cd-api-toggle svg { transition: transform var(--transition); }
.cd-api-toggle.open svg { transform: rotate(90deg); }
.cd-api { margin-top: 0.375rem; }
.cd-done { text-align: center; padding: 1rem; color: var(--color-ok); font-size: 0.8125rem; font-weight: 600; }
.cd-sidebar { background: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--radius-md); position: sticky; top: calc(var(--header-h) + 1rem); overflow: hidden; }
.cd-sidebar-header { padding: 0.5rem 0.75rem; border-bottom: 1px solid var(--color-border); display: flex; align-items: center; justify-content: space-between; }
.cd-sidebar-title { font-size: 0.625rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-muted); }
.cd-sidebar-count { font-size: 0.5625rem; color: var(--color-muted); }
.cd-sidebar-body { padding: 0.375rem; min-height: 80px; max-height: 400px; overflow-y: auto; }
.cd-sidebar-empty { display: flex; align-items: center; justify-content: center; min-height: 80px; font-size: 0.6875rem; color: #D1D5DB; }
.cd-card { padding: 0.5rem 0.625rem; border-radius: var(--radius); border: 1px solid var(--color-border); margin-bottom: 3px; background: var(--color-paper); }
.cd-card-t { font-size: 0.6875rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cd-card-s { font-size: 0.625rem; color: var(--color-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ═══════════════════════════════════════════════════════════
   17. Lifecycle Diagrams
   ═══════════════════════════════════════════════════════════ */
.lifecycle-diagram { display: flex; align-items: center; gap: 0; margin: 1rem 0; padding: 1rem; background: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow-x: auto; }
.ld-state { display: inline-flex; align-items: center; justify-content: center; padding: 0.375rem 0.875rem; border: 1px solid var(--color-border); border-radius: var(--radius); font-size: 0.75rem; font-weight: 600; background: var(--color-paper); white-space: nowrap; }
.ld-state.done { background: var(--color-border-light); border-color: var(--color-dim); color: var(--color-dim); }
.ld-state.active { background: var(--color-ink); border-color: var(--color-ink); color: var(--color-white); }
.ld-arrow { padding: 0 0.375rem; color: var(--color-faint); font-size: 0.875rem; }

/* Method badges */
.method-badge { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 3px; font-size: 0.625rem; font-weight: 700; font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.04em; }
.method-badge.get { background: var(--color-border-light); color: var(--color-dim); }
.method-badge.post { background: var(--color-ink); color: var(--color-white); }
.method-badge.patch { background: var(--color-border-light); color: var(--color-dim); }
.method-badge.put { background: var(--color-border-light); color: var(--color-dim); }
.method-badge.delete { background: var(--color-border-light); color: var(--color-dim); }

/* Endpoint header */
.endpoint-header { margin-bottom: 1.5rem; }
.endpoint-header .endpoint-path { font-family: var(--font-mono); font-size: 0.9375rem; font-weight: 600; color: var(--color-ink); margin-left: 0.5rem; }
.endpoint-header .endpoint-desc { margin-top: 0.375rem; font-size: 0.875rem; color: var(--color-dim); }

/* Response block */
.response-block { margin-bottom: 1rem; }
.response-status { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 3px; font-size: 0.625rem; font-weight: 700; font-family: var(--font-mono); margin-bottom: 0.5rem; }
.response-status.s2xx { background: var(--color-border-light); color: var(--color-ink); }
.response-status.s4xx { background: var(--color-border-light); color: var(--color-dim); }
.response-status.s5xx { background: var(--color-border-light); color: var(--color-dim); }

/* Right-rail TOC */
.toc-rail { width: 200px; flex-shrink: 0; position: sticky; top: var(--header-h); height: calc(100vh - var(--header-h)); overflow-y: auto; padding: 2rem 1rem 2rem 0; }
.toc-label { font-size: 0.625rem; font-weight: 700; color: var(--color-muted); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 0.75rem; }
.toc-item { display: block; font-size: 0.75rem; color: var(--color-faint); padding: 0.1875rem 0 0.1875rem 0.75rem; border-left: 1px solid var(--color-border); text-decoration: none; transition: all 0.1s; }
.toc-item:hover { color: var(--color-dim); text-decoration: none; }
.toc-item.active { color: var(--color-ink); border-left-color: var(--color-ink); }
.toc-sub { padding-left: 1.5rem; }

/* ═══════════════════════════════════════════════════════════
   18. Responsive Breakpoints
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 1200px) {
  .toc-rail { display: none; }
  .api-stripe-row { grid-template-columns: 1fr; }
  .api-stripe-code { border-left: none; border-top: 1px solid var(--code-border); }
  .api-stripe-code--empty { display: none; }
  .api-layout { height: auto; overflow-y: visible; }
}
@media (max-width: 960px) {
  .sidebar { display: none; }
  .docs-content { padding: 1.5rem 1rem 3rem; }
  .docs-panel { padding: 1.5rem 1rem; }
  .code-panel { padding: 1rem; }
}
@media (max-width: 800px) {
  .cd-columns { grid-template-columns: 1fr; }
}