/* B — engineering manual. The document is the interface. */
:root, :root[data-theme="light"] {
  --ink: #181818; --muted: #61615e; --faint: #85857f;
  --paper: #fff; --surface: #fff; --surface-2: #f2f2ef;
  --line: #d8d8d2; --line-strong: #85857f; --code-bg: #f2f2ef;
  --boundary: #c92d24; --boundary-soft: #fff0ed;
  --shadow: none;
}
:root[data-theme="dark"] {
  --ink: #ededE7; --muted: #aaaAa2; --faint: #888880;
  --paper: #191919; --surface: #191919; --surface-2: #252524;
  --line: #41413c; --line-strong: #87877e; --code-bg: #292927;
  --boundary: #ff766a; --boundary-soft: #402823; --shadow: none;
}
@media(prefers-color-scheme:dark) {
  :root:not([data-theme="light"]) {
    --ink: #ededE7; --muted: #aaaAa2; --faint: #888880;
    --paper: #191919; --surface: #191919; --surface-2: #252524;
    --line: #41413c; --line-strong: #87877e; --code-bg: #292927;
    --boundary: #ff766a; --boundary-soft: #402823; --shadow: none;
  }
}
body { padding-left: 224px; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 15px; line-height: 1.65; }
a { color: var(--ink); text-decoration-color: var(--line-strong); text-underline-offset: 4px; }
a:hover { color: var(--boundary); text-decoration-color: currentColor; }
::selection { background: var(--boundary); color: var(--surface); }
.site-header { width: 224px; border-right: 1px solid var(--ink); }
.site-header__inner { padding: 32px 22px 24px; }
.site-brand { padding: 0 0 36px; font-size: 25px; line-height: 1; font-weight: 750; letter-spacing: -1px; }
.site-brand::before { content: ""; display: inline-block; width: 12px; height: 12px; margin-right: 8px; background: var(--boundary); }
.site-brand::after { content: "ENGINEERING DOCUMENTATION"; display: block; margin-top: 14px; color: var(--muted); font: 9px/1.5 ui-monospace, monospace; letter-spacing: .045em; }
.site-nav { gap: 0; counter-reset: documents -1; border-top: 1px solid var(--ink); }
.site-nav a { display: grid; grid-template-columns: 24px 1fr; gap: 3px; align-items: baseline; padding: 14px 0; border-bottom: 1px solid var(--line); border-radius: 0; font-size: 12px; font-weight: 500; line-height: 1.4; counter-increment: documents; }
.site-nav a::before { content: "0" counter(documents); color: var(--faint); font: 10px/1.4 ui-monospace, monospace; }
.site-nav a[aria-current="page"] { background: none; box-shadow: none; color: var(--boundary); font-weight: 700; }
.site-nav a[aria-current="page"]::before { color: var(--boundary); }
.theme-toggle { width: auto; height: 32px; padding: 0; margin: auto 0 0; justify-content: flex-start; gap: 10px; border: 0; border-top: 1px solid var(--line); border-radius: 0; }
.theme-toggle::after { content: "Change appearance"; font: 10px/1 ui-monospace, monospace; }
.page { width: calc(100% - 96px); max-width: 1060px; padding: 32px 0 80px; }
.manual-running-head { display: flex; justify-content: space-between; gap: 16px; padding-bottom: 14px; margin-bottom: 50px; border-bottom: 1px solid var(--ink); color: var(--muted); font: 10px/1.5 ui-monospace, monospace; letter-spacing: .05em; text-transform: uppercase; }
.manual-running-head span:last-child { color: var(--boundary); white-space: nowrap; }
h1, .api-reference h1 { max-width: 840px; margin-bottom: 26px; font-size: clamp(38px, 4vw, 60px); line-height: 1.04; font-weight: 650; letter-spacing: -.055em; text-wrap: initial; }
.markdown-body > h1 { margin-bottom: 24px; }
.markdown-body .doc-lead, .doc-summary { max-width: 720px; margin-bottom: 30px; color: var(--muted); font-size: 18px; line-height: 1.55; }
.markdown-body > h2, .content-section > h2 { border-top: 1px solid var(--ink); padding-top: 14px; margin-top: 56px; font-size: 24px; font-weight: 600; letter-spacing: -.025em; }
.markdown-body > h3 { font-size: 18px; margin-top: 34px; }
.markdown-body p, .markdown-body li { max-width: 740px; }
nav.toc { position: static; display: flex; flex-wrap: wrap; gap: 8px 16px; margin: -20px 0 32px; padding: 12px 0; border-top: 1px solid var(--line); }
nav.toc::before { content: "CONTENTS"; align-self: center; font: 9px/1.5 ui-monospace, monospace; letter-spacing: .07em; color: var(--faint); }
nav.toc a { padding: 0; border-radius: 0; font-size: 11px; font-weight: 400; }
nav.toc a.active, nav.toc a:hover { background: none; color: var(--boundary); }
code { padding: 2px 4px; border-radius: 0; font-size: .85em; }
.code-block, .raw-definition pre { border: 0; border-left: 2px solid var(--line-strong); border-radius: 0; background: var(--surface-2); }
.code-block pre { padding: 23px; font-size: 12px; line-height: 1.7; }
.markdown-body blockquote { border-left: 2px solid var(--boundary); background: none; padding-left: 22px; color: var(--muted); }
.table-scroll { border-radius: 0; }
.doc-table { border: 0; border-top: 1px solid var(--ink); }
.doc-table th { background: transparent !important; color: var(--ink); font: 10px/1.5 ui-monospace, monospace; }
.doc-table td { line-height: 1.6; }
.summary-card, .component-card, .api-operation, .api-summary-card, .architecture-zone, .mermaid-wrap, .api-schema, .endpoint-card, .spec-meta > div { border-radius: 0; box-shadow: none; }
.summary-grid, .api-summary { gap: 0; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--line); }
.summary-card, .api-summary-card { border: 0; padding: 18px 18px 18px 0; background: none; }
.summary-card + .summary-card, .api-summary-card + .api-summary-card { padding-left: 18px; border-left: 1px solid var(--line); }
.spec-meta { gap: 24px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.spec-meta > div { border: 0; padding: 12px 0; }
.endpoint-card__header { background: var(--surface-2); }
.endpoint-group__heading { border-bottom-color: var(--ink); }
.api-search, .http-method, .message-method, .endpoint-group__heading span, .endpoint-message-meta > div, .endpoint-content-type span, .api-meta span { border-radius: 0; }
.api-toolbar { border-bottom-color: var(--ink); }
.api-operation > summary::after, .api-schema > summary::after { content: "+"; color: var(--boundary); font: 18px/1 ui-monospace, monospace; }
.api-operation[open] > summary::after, .api-schema[open] > summary::after { content: "−"; }
.doc-footer { border-top: 1px solid var(--ink); padding-top: 16px; font-size: 11px; }
.doc-pager { gap: 0; }
.doc-pager a { border: 0; border-radius: 0; background: none; padding: 18px 0; }
.doc-pager small { font: 9px/1.8 ui-monospace, monospace; text-transform: uppercase; }
.flow-list li::before { border-radius: 0; }
/* Home is a compact document register, preserving each source description. */
body[data-doc="start"] h1 { max-width: 640px; font-size: clamp(44px, 5vw, 70px); }
body[data-doc="start"] .doc-lead { max-width: 660px; }
.manual-register { padding: 0 !important; margin: 22px 0 !important; list-style: none; counter-reset: register; }
.manual-register li { display: grid; grid-template-columns: 30px minmax(140px, .75fr) minmax(180px, 1.3fr); gap: 16px; max-width: none; margin: 0; padding: 23px 0; border-top: 1px solid var(--line); counter-increment: register; }
.manual-register li:last-child { border-bottom: 1px solid var(--ink); }
.manual-register li::before { content: "0" counter(register); color: var(--boundary); font: 11px/1.8 ui-monospace, monospace; }
.manual-register li > a { font-size: 17px; font-weight: 550; line-height: 1.35; letter-spacing: -.02em; text-decoration: none; }
.manual-register .manual-description { color: var(--muted); font-size: 13px; line-height: 1.6; }
/* Interactive component shares the manual's rule-and-label vocabulary. */
.component-document .page { max-width: 1240px; }
.proposal-notice, .net-chip, .scenario-button, .parser-tab, .parser-view, .plan-node, .value-object, .stage, .stage-button, .chip, .demo-label { border-radius: 0 !important; }
.proposal-notice { border: 0; border-left: 2px solid var(--boundary); background: none; }
.net-chip { padding: 5px 8px; font-size: 10px; }
.net-chip.stop { background: var(--danger-soft); }
.scenario-bar { border-top: 1px solid var(--ink); }
.scenario-button { border-bottom: 2px solid transparent; }
.scenario-button[aria-pressed="true"] { background: none !important; border-bottom-color: var(--boundary); }
.workbench, .walk, details.why, .table-wrap, .fig-wrap { border-radius: 0 !important; box-shadow: none !important; }
.workbench { border-color: var(--ink); }
.pipeline-pane { background-image: none !important; }
.query-pane { background: var(--surface-2) !important; }
.workbench-head, .stage-strip { border-color: var(--line-strong); }
.pane-label { font-family: ui-monospace, monospace; }
pre.sql { border-radius: 0; border-left: 2px solid var(--line-strong); background: var(--surface); color: var(--ink); }
pre.sql .kw { color: var(--boundary); font-weight: 650; }
pre.sql .str { color: var(--s3); }
pre.sql .fn { color: var(--ink); }
.step-dot, .step-dot.current, .key-hint kbd { border-radius: 0; }
.step-dot.past { background: var(--line-strong); }
.step-dot { background: var(--line); }
/* Keep long routes inside their row rather than widening the document. */
.api-operation > summary, .api-schema > summary { min-width: 0; }
.api-path, .api-schema > summary code { overflow-wrap: anywhere; min-width: 0; }
.api-operation > summary::after, .api-schema > summary::after { flex-shrink: 0; }
@media(prefers-reduced-motion:reduce) { html { scroll-behavior: auto; } }
@media(min-width:1280px) {
  body:not(.component-document) { padding-right: 188px; }
  body:not(.component-document) .page { max-width: 960px; }
  nav.toc { position: fixed; top: 112px !important; right: 24px; width: 142px; max-height: calc(100vh - 144px); overflow-y: auto; display: flex; flex-direction: column; flex-wrap: nowrap; gap: 11px; margin: 0; padding: 0; border: 0 !important; background: transparent !important; }
  nav.toc::before { align-self: flex-start; margin-bottom: 7px; }
  nav.toc a { flex-shrink: 0; line-height: 1.5; }
}
@media(max-width:1000px) and (min-width:761px) {
  body { padding-left: 194px; }
  .site-header { width: 194px; }
  .site-header__inner { padding-left: 18px; padding-right: 18px; }
  .site-brand { font-size: 22px; }
  .page { width: calc(100% - 56px); }
  .manual-register li { grid-template-columns: 24px 1fr; gap: 8px 14px; }
  .manual-description { grid-column: 2; }
}
@media(max-width:760px) {
  body { padding: 58px 0 0; font-size: 14px; }
  .page { width: calc(100% - 36px); padding-top: 20px; }
  .site-header { width: 260px; }
  .site-header__inner { padding: 68px 22px 24px; }
  .nav-toggle { border-radius: 0; border-color: var(--ink); box-shadow: none; }
  .manual-running-head { margin-bottom: 32px; font-size: 9px; }
  h1, .api-reference h1 { font-size: 40px; }
  body[data-doc="start"] h1 { font-size: 46px; }
  .markdown-body .doc-lead, .doc-summary { font-size: 16px; }
  .manual-register li { grid-template-columns: 24px 1fr; gap: 8px 12px; padding: 20px 0; }
  .manual-description { grid-column: 2; }
  .summary-card + .summary-card, .api-summary-card + .api-summary-card { padding-left: 0; border-left: 0; border-top: 1px solid var(--line); }
  .split-facts { gap: 18px; }
  nav.toc { margin-top: -8px; }
}
@media print { body { padding: 0 !important; } nav.toc { display: none; } .manual-running-head { margin-bottom: 20px; } }

/* Query walkthrough: narration first, implementation details on demand. */
.workbench .stage-strip { grid-template-columns: 104px minmax(0,1fr) 112px; align-items: start; padding: 22px; gap: 18px; background: var(--surface-2) !important; }
.workbench .step-btn { width: 100%; height: 42px; border-radius: 0; font-family: inherit; font-size: 12px; font-weight: 600; line-height: 1.3; background: var(--ink); color: var(--surface); }
.workbench .step-btn:hover:not(:disabled) { transform: none; background: var(--boundary); color: white; }
.workbench .step-btn:disabled { opacity: .4; }
.workbench .stage-title { font-size: 20px; line-height: 1.3; margin: 5px 0 8px; }
.workbench .stage-detail { font-size: 14px; line-height: 1.55; min-height: 44px; }
.workbench .stage-top { gap: 8px; }
.workbench .stage-kicker { color: var(--boundary); }
.workbench .stage-meta { gap: 14px; }
.workbench .step-dots { flex-wrap: wrap; gap: 5px; }
.workbench .step-dot { width: 30px; height: 30px; border: 1px solid var(--line-strong); border-radius: 0; background: var(--surface); color: var(--muted); font: 11px ui-monospace,monospace; }
.workbench .step-dot.current { width: 30px; background: var(--ink); color: var(--surface); border-color: var(--ink); }
.workbench .step-dot.past { border-bottom: 3px solid var(--boundary); }
.workbench .stage-chips { width: 100%; gap: 12px; }
.workbench .chip { padding: 0; background: transparent !important; font-weight: 400; }
.restart-example, .next-example { border: 0; border-radius: 0; background: transparent; color: var(--ink); font: inherit; font-size: 12px; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; padding: 8px 0; }
.next-example { color: var(--boundary); font-weight: 600; }
.plan-details { margin-top: 16px; border-top: 1px solid var(--line); }
.plan-details > summary, .source-details > summary { padding: 14px 0; font-size: 12px; font-weight: 600; cursor: pointer; }
.source-details { border-top: 1px solid var(--line); }
.source-details > summary { padding: 18px 22px; }
.source-details > summary span { color: var(--muted); font-weight: 400; margin-left: 12px; }
.result-panel { padding: 22px; border-top: 1px solid var(--line-strong); }
.result-panel .panel-head { padding: 0 0 12px; align-items: baseline; }
.result-panel h3 { margin: 0; font-size: 17px; }
#result-status { color: var(--muted); font: 11px ui-monospace,monospace; }
#result-takeaway { margin: 14px 0 0; max-width: 780px; font-size: 14px; line-height: 1.6; }
#result-view td { white-space: normal; overflow-wrap: anywhere; }
.data-legend { margin: 0; padding: 0 22px 18px; color: var(--muted); font-size: 12px; }
.step-announcement { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.workbench button:focus-visible, .workbench summary:focus-visible { outline: 2px solid var(--boundary); outline-offset: 3px; }
.workbench .top-grid { grid-template-columns: minmax(0,1fr) minmax(0,1.2fr); }
.workbench .pipeline-pane { min-width: 0; }
@media(max-width:900px) {
  .workbench .stage-strip { grid-template-columns: 1fr 1fr; gap: 12px; padding: 18px; }
  .workbench .stage-core { grid-column: 1/-1; grid-row: 1; }
  .workbench .stage-detail { min-height: 0; }
  .workbench .step-btn { grid-row: 2; }
  .workbench .top-grid { grid-template-columns: 1fr; }
  .workbench .query-pane { border-right: 0; border-bottom: 1px solid var(--line); }
  .source-details > summary span { display: block; margin: 6px 0 0; }
  .result-panel { padding: 18px; }
}

.workbench .svg-node.active { filter: none; }
.workbench .svg-node[data-node="coordinator"].active rect { fill: var(--coordinator-soft) !important; stroke: var(--coordinator) !important; }
.workbench .svg-node[data-node="boundary"].active rect { fill: var(--boundary-soft) !important; stroke: var(--boundary) !important; }
.workbench .svg-node[data-node="clickhouse"].active .node-shape { fill: var(--clickhouse-soft) !important; stroke: var(--clickhouse) !important; }
.workbench .svg-node[data-node="s3"].active .node-shape { fill: var(--s3-soft) !important; stroke: var(--s3) !important; }
.workbench .svg-node rect { rx: 2; }
#packet { filter: none; }
#packet-label { stroke: var(--surface); }
.workbench .value-object { grid-template-columns: minmax(135px,.65fr) minmax(0,1fr); }
.workbench .value-object b { overflow-wrap: anywhere; }
.workbench .value-object b small { display: block; margin-top: 3px; color: var(--muted); font-size: 10px; font-weight: 400; }
.workbench .value-object .value-verdict { grid-column: 2; font-size: 11px; color: var(--ink); }
.plan-reading-note { color: var(--muted); font-size: 12px; line-height: 1.5; }
@media(max-width:600px) {
  .workbench .value-object { grid-template-columns: 1fr; }
  .workbench .value-object .value-verdict { grid-column: 1; }
}
@media(max-width:760px) {
  .component-document .scenario-bar { top: 58px !important; }
}