/* Trove 文档站共享样式 —— 单一真源。
   原为 docs/index.html 的内联 <style>，抽出以便多页共用；首页也外链这一份。
   Token 继承 frontend/src/assets/styles/tokens.css 的 zinc + indigo。 */

/* ── Tokens: 继承 trove/frontend/src/assets/styles/tokens.css 的 zinc + indigo，
      深色档由同一组 primitives 推出（产品本身是 light-only）。
      语义色编码语义层的编译分级：ok=命中 / warn=软 MISS / danger=硬 MISS。 ── */
:root {
  --canvas: #fafafa;
  --raised: #ffffff;
  --muted: #f4f4f5;
  --hover: #ececef;
  --border-subtle: #e4e4e7;
  --border-default: #d4d4d8;
  --text-primary: #18181b;
  --text-secondary: #52525b;
  --text-tertiary: #8b8b94;
  --accent: #4f46e5;
  --accent-bright: #6366f1;
  --accent-soft: #eef2ff;
  --accent-line: rgba(99, 102, 241, 0.35);
  --ok: #15803d;      --ok-bg: #dcfce7;
  --warn: #b45309;    --warn-bg: #fef3c7;
  --danger: #dc2626;  --danger-bg: #fee2e2;
  --code-bg: #f4f4f5;
  --shadow-sm: 0 1px 3px rgba(24,24,27,.06), 0 1px 2px rgba(24,24,27,.04);
  --shadow-md: 0 4px 6px -1px rgba(24,24,27,.06), 0 2px 4px -2px rgba(24,24,27,.04);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --canvas: #09090b;
    --raised: #131316;
    --muted: #1c1c21;
    --hover: #27272a;
    --border-subtle: #27272a;
    --border-default: #3f3f46;
    --text-primary: #f4f4f5;
    --text-secondary: #a1a1aa;
    --text-tertiary: #71717a;
    --accent: #818cf8;
    --accent-bright: #a5b4fc;
    --accent-soft: #1e1b4b;
    --accent-line: rgba(129, 140, 248, 0.4);
    --ok: #4ade80;      --ok-bg: #052e16;
    --warn: #fbbf24;    --warn-bg: #3b2408;
    --danger: #f87171;  --danger-bg: #3f1212;
    --code-bg: #1c1c21;
    --shadow-sm: 0 1px 3px rgba(0,0,0,.4);
    --shadow-md: 0 4px 8px -2px rgba(0,0,0,.5);
  }
}
/* 暗色令牌。首页(index.html)在 <html> 上写死 data-theme="dark"——整页定格
   暗色（海报式落地页）；其余页不写，跟随系统偏好（即上面的 @media 块）。 */
:root[data-theme="dark"] {
  color-scheme: dark; /* 滚动条/表单控件也跟着暗——深色页上一条亮滚动条就是「没暗透」 */
  --canvas: #09090b;
  --raised: #131316;
  --muted: #1c1c21;
  --hover: #27272a;
  --border-subtle: #27272a;
  --border-default: #3f3f46;
  --text-primary: #f4f4f5;
  --text-secondary: #a1a1aa;
  --text-tertiary: #71717a;
  --accent: #818cf8;
  --accent-bright: #a5b4fc;
  --accent-soft: #1e1b4b;
  --accent-line: rgba(129, 140, 248, 0.4);
  --ok: #4ade80;      --ok-bg: #052e16;
  --warn: #fbbf24;    --warn-bg: #3b2408;
  --danger: #f87171;  --danger-bg: #3f1212;
  --code-bg: #1c1c21;
  --shadow-sm: 0 1px 3px rgba(0,0,0,.4);
  --shadow-md: 0 4px 8px -2px rgba(0,0,0,.5);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--canvas);
  color: var(--text-primary);
  font-family: "IBM Plex Sans", ui-sans-serif, -apple-system, BlinkMacSystemFont,
    "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  font-size: 16px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}

.mono, code, kbd {
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 2px; }
a:focus-visible, button:focus-visible {
  outline: 2px solid var(--accent-line);
  outline-offset: 2px;
  border-radius: 3px;
}

/* 骨架说明：首页是独立落地页（方向 D）——不设 .doc-shell，因而没有文档站的
   左栏目录与本页目录；自带一条顶部导航（.lnav，见下），只借 .doc-col 的正文
   排版节奏（见下方「文档站（多页）」一节），列宽另给（.doc-col.landing）。
   本节的落地页组件在 .doc-col 一节末尾做了少量抵消，维持落地页自己的间距。 */

/* ── 落地页骨架（仅首页） ────────────────────────────────
   正文列比文档页宽：1104 = 1040 正文 + 两侧 32 留白（与 D 稿的 1040 面板同宽）；
   复合选择器 .doc-col.landing 的优先级压过 .doc-col 的 812，改宽不用 !important。 */
.doc-col.landing {
  max-width: 1104px;
  margin-inline: auto;
  padding-inline: 32px;
  padding-block: 0 96px;
}
.lnav {
  position: relative; z-index: 3;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 22px 0;
}
.lnav .wordmark {
  font-family: "Familjen Grotesk", "IBM Plex Sans", sans-serif;
  font-weight: 700; font-size: 21px; letter-spacing: -.01em;
  color: #fff;
}
.lnav .wordmark .tld { color: #818cf8; }
.lnav-links {
  display: flex; align-items: center; gap: 28px;
  font-size: 14px; color: #a1a1aa;
}
.lnav-links a { color: inherit; }
.lnav-links a:hover { color: #fff; }
.lnav .gh {
  display: inline-flex; align-items: center; gap: 7px;
  border: 1px solid rgba(255,255,255,.14); border-radius: 8px;
  padding: 7px 14px; font-size: 13px; color: #e4e4e7;
  background: rgba(255,255,255,.03);
}
.lnav .gh:hover { background: rgba(255,255,255,.07); color: #fff; }

/* ── Hero（仅首页；整页定格暗色——网格/光晕与版式见下方「海报 hero」一节） ── */
.hero {
  position: relative;
  overflow: hidden;
  padding-block: 56px 12px;
  text-align: center;
}
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: "IBM Plex Mono", monospace;
  font-size: 12px;
  letter-spacing: .06em;
  color: var(--text-tertiary);
  margin-bottom: 22px;
}
.eyebrow .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--ok);
  flex: none;
}
h1 {
  font-family: "Familjen Grotesk", "IBM Plex Sans", ui-sans-serif, sans-serif;
  font-size: clamp(40px, 7vw, 62px);
  line-height: 1.02;
  letter-spacing: -0.022em;
  font-weight: 600;
  margin: 0 0 22px;
  text-wrap: balance;
}
.lede {
  font-size: 19px;
  line-height: 1.6;
  color: var(--text-secondary);
  max-width: 40em;
  margin: 0 0 30px;
}
.lede strong { color: var(--text-primary); font-weight: 600; }
/* 链路行：h1 与 lede 之间的一句定位（问数 · 分析 · 决策 · 行动）。
   h1 自带 22px 下边距，这里用 -8px 上边距把行贴近标题。 */
.chain {
  font-family: "IBM Plex Mono", monospace;
  font-size: 13px;
  letter-spacing: .14em;
  color: var(--text-secondary);
  margin: -8px 0 24px;
}

.en {
  max-width: 44em;
  padding: 20px 22px;
  border-left: 2px solid var(--accent-line);
  background: var(--raised);
  border-radius: 0 6px 6px 0;
  font-size: 14.5px;
  line-height: 1.68;
  color: var(--text-secondary);
}
.en .en-label {
  font-family: "IBM Plex Mono", monospace;
  font-size: 11px;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  display: block;
  margin-bottom: 7px;
}

/* ── 首屏文档入口 ──────────────────────────────────────── */
/* 侧栏 rail 在 1100px 以下整个隐藏，所以文档入口不能只放在 rail 里：
   窄屏读者会完全没有去文档的路。 */
.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 26px;
}
.cta {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 17px;
  border-radius: 6px;
  font-size: 14.5px;
  font-weight: 500;
  background: var(--accent);
  color: #fff;
  border: 1px solid var(--accent);
}
.cta:hover, .cta:focus-visible {
  background: var(--accent-bright);
  border-color: var(--accent-bright);
  color: #fff;
  text-decoration: none;
}
.cta.ghost {
  background: var(--raised);
  color: var(--text-primary);
  border-color: var(--border-subtle);
}
.cta.ghost:hover, .cta.ghost:focus-visible {
  background: var(--muted);
  border-color: var(--border-subtle);
  color: var(--text-primary);
}

/* ── 首页海报 hero（方向 D：定格暗色 + 流动管线） ────────
   首页整页钉在暗色档（index.html 的 <html data-theme="dark">），所以 hero
   不再是一张嵌在亮页里的卡：网格、光晕与居中的定位文字直接长在页面底色上，
   末尾一条连接线指向下方的答案截图。暗色不新起一套令牌——本页所有 var()
   自动取暗色档，无需逐项硬编码颜色。 */
.hero::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size: 44px 44px;
  /* 网格从顶边渐入、四周径向淡出——页面色上直接铺网格，硬切边会像贴纸 */
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 120px),
                      radial-gradient(72% 58% at 50% 5%, #000 26%, transparent 75%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(180deg, transparent 0, #000 120px),
              radial-gradient(72% 58% at 50% 5%, #000 26%, transparent 75%);
  mask-composite: intersect;
  pointer-events: none;
}
.hero::after {
  content: "";
  position: absolute; left: 50%; top: -240px; width: 1100px; height: 640px;
  transform: translateX(-50%);
  background: radial-gradient(50% 55% at 50% 45%, rgba(99,102,241,.22), transparent 70%);
  pointer-events: none;
}
.hero > * { position: relative; z-index: 1; }

.hero .eyebrow {
  color: #a1a1aa;
  border: 1px solid rgba(255,255,255,.13);
  background: rgba(255,255,255,.035);
  border-radius: 999px;
  padding: 7px 16px;
  margin-bottom: 26px;
  word-break: keep-all; /* 同上：断行只落在「 · 」分隔处 */
}
.hero .eyebrow .dot { box-shadow: 0 0 10px rgba(74,222,128,.8); }
.hero h1 { margin-bottom: 18px; }
/* 站点规则给 .chain 留了 -8px 上边距（紧贴旧文字版 hero 的大标题），
   海报里 62px 标题下再压 -8 会贴脸——拉回正常行距。keep-all：CJK 默认
   可在任意两字间断行，窄屏会把「决策」拆到两行；只在「 · 」处断。
   （窄屏字号/字距的收紧见文件尾的 620px 媒体查询） */
.hero .chain { margin-top: 6px; color: var(--accent-bright); word-break: keep-all; }
.hero .lede { margin: 0 auto 30px; max-width: 47em; font-size: 17.5px; }
.hero .en { margin-inline: auto; text-align: left; }
.hero .cta-row { justify-content: center; }
.hero .cta {
  background: #4f46e5; border-color: #4f46e5;
  box-shadow: 0 10px 30px -12px rgba(79,70,229,.8);
}
.hero .cta:hover, .hero .cta:focus-visible {
  background: #6366f1; border-color: #6366f1;
}
.hero .cta.ghost {
  background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.14);
  color: #e4e4e7; box-shadow: none;
}
.hero .cta.ghost:hover, .hero .cta.ghost:focus-visible {
  background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.14);
}

/* 管线面板：一句话讲完「提问在这条链上走 28 个节点」 */
.hp-panel {
  margin: 40px auto 0;
  padding: 18px 20px 14px;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 14px;
  background-color: #0c0c10;
  background-image: radial-gradient(58% 74px at 50% 0, rgba(99,102,241,.11), transparent 72%);
  text-align: left;
}
.hp-head {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 8px 18px; margin-bottom: 10px;
}
.hp-title {
  font-family: "IBM Plex Mono", monospace;
  font-size: 12px; letter-spacing: .12em; color: #818cf8;
}
.hp-legend {
  display: flex; flex-wrap: wrap; gap: 8px 18px;
  font-family: "IBM Plex Mono", monospace;
  font-size: 11.5px; color: #8b8b94;
}
.hp-legend i { display: inline-flex; align-items: center; gap: 7px; font-style: normal; }
/* 图例 = 三枚微型节点，形状与描边跟图里一致（默认零 LLM 确定性 / 靛蓝模型参与 /
   琥珀闸门）；旧的 HIT · 软 MISS · 硬 MISS 三色点降为问数行右侧的小字。 */
.hp-legend svg { width: 11px; height: 11px; flex: none; }
.hp-legend .mk { fill: #141419; }
.hp-legend .mk-det  { stroke: rgba(255,255,255,.28); }
.hp-legend .mk-llm  { stroke: rgba(129,140,248,.75); }
.hp-legend .mk-gate { stroke: rgba(251,191,36,.6); }

/* 图形本体在 assets/hero-chains.svg（唯一来源，README 双语引的是同一份）：
   样式与深色底随文件走，这里只管版位——更宽的 viewBox（992），窄屏给足
   横向滚动量、文字不缩得太小。 */
.hp-scroll { overflow-x: auto; }
.hp-svg { display: block; width: 100%; min-width: 700px; height: auto; }
/* 图的全部样式（节点/段块/行色点/闭环虚线/流动动画与 reduced-motion 降级）
   已随图形本体移入 assets/hero-chains.svg——独立文件在 <img> 里拿不到页面样式，
   样式内联是单源的前提。图例三枚微型节点仍由上面的 .hp-legend 规则着色。 */

/* 事实条：四个数字沿用 .repro-n 类名——scripts/check_page_anchors.py 按
   `<span class="repro-n" data-count="…">` 的既有形状抓会随代码变动的
   结构性计数（主图节点数 / 方言适配器数），类名是一份契约，别改。 */
.hp-facts {
  margin: 12px 0 0; padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,.08);
  font-family: "IBM Plex Mono", monospace;
  font-size: 11.5px; line-height: 1.9; color: #71717a;
}
.hp-facts .repro-n { color: #c7d2fe; font-weight: 600; }

.hp-connector { display: flex; flex-direction: column; align-items: center; gap: 6px; margin: 18px 0 0; }
.hp-connector .vline {
  width: 1px; height: 24px;
  background: linear-gradient(rgba(129,140,248,.55), rgba(129,140,248,.05));
}
.hp-connector .clabel {
  font-family: "IBM Plex Mono", monospace;
  font-size: 11.5px; letter-spacing: .08em; color: #52525b;
}

@media (max-width: 620px) {
  .hero { padding-block: 36px 8px; }
  .hero .eyebrow { font-size: 11px; letter-spacing: .03em; padding: 6px 12px; }
  .hero .chain { font-size: 12.5px; letter-spacing: .06em; }
  .hp-panel { margin-top: 28px; padding: 14px 14px 12px; }
  .doc-col.landing { padding-inline: 24px; } /* 与文档页的页边距对齐 */
  .lnav { padding: 16px 0; }
  .lnav-links { gap: 0; }
  .lnav-links a:not(.gh) { display: none; } /* 章节入口窄屏移出顶栏（hero 与页脚仍有） */
}

/* ── Sections ──────────────────────────────────────────── */
section { padding-top: 84px; scroll-margin-top: 24px; }
.sec-head { margin-bottom: 34px; }
.sec-label {
  font-family: "IBM Plex Mono", monospace;
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 500;
  display: block;
  margin-bottom: 10px;
}
h2 {
  font-family: "Familjen Grotesk", "IBM Plex Sans", sans-serif;
  font-size: clamp(27px, 4vw, 34px);
  line-height: 1.14;
  letter-spacing: -0.018em;
  font-weight: 600;
  margin: 0 0 14px;
  text-wrap: balance;
}
h3 {
  font-family: "Familjen Grotesk", "IBM Plex Sans", sans-serif;
  font-size: 20px;
  line-height: 1.25;
  letter-spacing: -0.01em;
  font-weight: 600;
  margin: 0;
  text-wrap: balance;
}
h4 {
  font-size: 15px;
  font-weight: 600;
  margin: 0 0 10px;
  letter-spacing: -0.005em;
}
.sec-intro { color: var(--text-secondary); margin: 0; max-width: 42em; }
p { margin: 0 0 14px; }
p:last-child { margin-bottom: 0; }

/* ── 主图管线 ──────────────────────────────────────────── */
.pipeline {
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  background: var(--raised);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.pipe-row {
  display: grid;
  grid-template-columns: 128px minmax(0, 1fr);
  gap: 16px;
  padding: 12px 18px;
  border-top: 1px solid var(--border-subtle);
  align-items: baseline;
}
.pipe-row:first-child { border-top: 0; }
@media (max-width: 620px) {
  .pipe-row { grid-template-columns: 1fr; gap: 7px; }
}
.pipe-phase {
  font-size: 12.5px;
  color: var(--text-secondary);
  font-weight: 500;
  white-space: nowrap;
}
.pipe-nodes { display: flex; flex-wrap: wrap; gap: 6px; }
.node {
  font-family: "IBM Plex Mono", monospace;
  font-size: 12px;
  padding: 3px 8px;
  border-radius: 5px;
  background: var(--muted);
  color: var(--text-primary);
  border: 1px solid var(--border-subtle);
  white-space: nowrap;
}
.node.is-gate { background: var(--warn-bg); border-color: transparent; color: var(--warn); }
.node.is-out  { background: var(--ok-bg);   border-color: transparent; color: var(--ok); }
.node.is-loop { background: var(--accent-soft); border-color: transparent; color: var(--accent); }
/* 默认关闭的可选分支：不画进主图计数，但真实存在于代码里 */
.node.is-opt  { background: transparent; border-style: dashed; border-color: var(--border-default); color: var(--text-tertiary); }
.pipe-note {
  padding: 13px 18px;
  border-top: 1px solid var(--border-subtle);
  background: var(--muted);
  font-size: 13px;
  color: var(--text-secondary);
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
}
.legend { display: inline-flex; align-items: center; gap: 6px; }
.legend i { width: 9px; height: 9px; border-radius: 2px; flex: none; }

/* ── 分级逃生梯 ────────────────────────────────────────── */
.tiers { display: flex; flex-direction: column; gap: 10px; }
.tier {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 18px;
  padding: 16px 18px;
  border-radius: 8px;
  background: var(--raised);
  border: 1px solid var(--border-subtle);
  border-left-width: 3px;
  align-items: start;
}
@media (max-width: 620px) { .tier { grid-template-columns: 1fr; gap: 8px; } }
.tier.hit  { border-left-color: var(--ok); }
.tier.soft { border-left-color: var(--warn); }
.tier.hard { border-left-color: var(--danger); }
.tier-tag {
  font-family: "IBM Plex Mono", monospace;
  font-size: 12px;
  font-weight: 500;
  padding-top: 2px;
}
.tier.hit  .tier-tag { color: var(--ok); }
.tier.soft .tier-tag { color: var(--warn); }
.tier.hard .tier-tag { color: var(--danger); }
.tier-body { font-size: 14.5px; color: var(--text-secondary); }
.tier-body b { color: var(--text-primary); font-weight: 600; }

/* ── 能力行 ────────────────────────────────────────────── */
.group { margin-bottom: 46px; }
.group:last-child { margin-bottom: 0; }
.group-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding-bottom: 11px;
  border-bottom: 1px solid var(--border-default);
  margin-bottom: 4px;
}
.group-idx {
  font-family: "IBM Plex Mono", monospace;
  font-size: 12px;
  color: var(--text-tertiary);
  font-variant-numeric: tabular-nums;
}
.cap {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 7px;
  padding: 17px 0 16px;
  border-bottom: 1px solid var(--border-subtle);
}
.cap-name {
  font-weight: 600;
  font-size: 15.5px;
  letter-spacing: -0.005em;
}
.cap-mech { font-size: 14.5px; color: var(--text-secondary); }
.cap-mech code {
  font-size: 13px;
  background: var(--code-bg);
  padding: 1px 5px;
  border-radius: 4px;
  color: var(--text-primary);
}
.cap-where { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 3px; }
.ref {
  font-family: "IBM Plex Mono", monospace;
  font-size: 11.5px;
  color: var(--text-secondary);
  background: var(--muted);
  border: 1px solid var(--border-subtle);
  padding: 2px 7px;
  border-radius: 4px;
  white-space: nowrap;
}
a.ref:hover { border-color: var(--accent-line); color: var(--accent); text-decoration: none; }
.ref-line { color: var(--accent); }

figure { margin: 0; }
figcaption {
  margin-top: 10px;
  font-size: 13px;
  color: var(--text-tertiary);
  line-height: 1.55;
}

/* ── 架构图（Mermaid）──────────────────────────────────── */
/* 同一张图有两种形态：渲染成功是 SVG，加载失败是 <pre> 里的源码。
   两种都套在同一张卡片（.diagram-canvas）上——CDN 挂掉时读者看到的
   是一块有意为之的代码块，而不是一片没头没尾的等宽文本。 */
.diagram { margin: 22px 0 18px; }
.diagram-canvas {
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  background: var(--raised);
  padding: 18px 16px;
  overflow-x: auto;
  box-shadow: var(--shadow-sm);
}
/* 源码形态：去掉通用 pre 的底色、内边距与**横向滚动**，让卡片自己当容器。
   overflow 必须显式改回 visible：通用 pre 带 overflow-x: auto，留着的话
   窄屏滚的是这一层（svg 在里面被裁），而卡片测不到溢出、滚不动。 */
.diagram-canvas pre.mermaid {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  overflow: visible;
  font-size: 12.5px;
  line-height: 1.7;
}
/* min-width 是刻意的下限：卡片内宽随视窗变化（约 630–780px），比图窄时
   与其把字缩到读不了，不如让卡片横向滚动（overflow-x 已开）。天然宽约
   740px，所以宽视窗下这条不起作用，图就是原尺寸。 */
.diagram-canvas svg { display: block; margin: 0 auto; min-width: 640px; }
/* 天然就窄的小图（节点少）标 data-size="compact" 放行原尺寸：下限的本意
   是「不许缩小」，对窄图继续生效反而变成放大。mermaid 的 useMaxWidth 已
   给 SVG 写好 max-width，这里清掉 min-width 即可。 */
figure.diagram[data-size="compact"] .diagram-canvas svg { min-width: 0; }
/* 说明随形态切换：渲染成功时不该再解释「这是源码」，反之亦然 */
.diagram[data-diagram="rendered"] .cap-source { display: none; }
.diagram:not([data-diagram="rendered"]) .cap-rendered { display: none; }

/* ── 产品截图 ──────────────────────────────────────────── */
/* 位图只承载像素：编号点（.pin）、数字图例、图注全部留在 HTML —— 可检索、
   可翻译、跟主题。旧截图被删（e90f33e）的理由是「会过期」，现在的缓解是
   capture-guide-shots.mjs 可重跑 + _manifest.json 记录来源 commit（页脚注明）。 */
.shot { margin: 22px 0 18px; }
.shot-frame {
  position: relative; /* .pin 的定位上下文 */
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  background: var(--raised);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.shot-frame img { display: block; width: 100%; height: auto; }
/* 编号点压在图上，用百分比定位（--x/--y），随图缩放不脱位。白描边是给点
   兜一层底：截图恒为亮色产品界面，浅色 UI 上实心点会跟背景糊在一起。 */
.pin {
  position: absolute;
  left: var(--x);
  top: var(--y);
  transform: translate(-50%, -50%);
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--accent);
  color: #fff;
  font-family: "IBM Plex Mono", monospace;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, .9), 0 1px 4px rgba(0, 0, 0, .3);
}
@media (max-width: 620px) { .pin { width: 18px; height: 18px; font-size: 10.5px; } }
/* 图例与 .pin 同号同色：读者在页面上建立「几号点 = 哪一步」的映射 */
.shot-legend {
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 6px;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--text-secondary);
}
/* 行内片段多（<strong>/<code> 夹在文字里），li 不能用 grid：grid 会把每个
   行内片段拆成独立格项，轮流落进 20px 的数字列——落进去的片段一字一行。
   数字改绝对定位，正文保持正常行内流。 */
.shot-legend li {
  position: relative;
  padding-left: 29px;
  min-height: 20px;
}
.shot-legend .n {
  position: absolute;
  left: 0;
  top: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  color: var(--accent);
  font-family: "IBM Plex Mono", monospace;
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
}

/* 页脚一句：截图会过期，说清怎么重生成（e90f33e 删图的理由要有下文） */
.shot-note {
  margin: 26px 0 0;
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--text-tertiary, var(--text-secondary));
}
.shot-note code { font-size: 11.5px; }

/* ── 编号步骤 ──────────────────────────────────────────── */
/* 操作步骤的骨架（DataWorks 式）：号码是手写的，不是 CSS counter —— 页面是
   手写 HTML，号码要能在源码里 grep 到，也要能跟截图 .pin 对上号。 */
.steps {
  margin: 0 0 22px;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 30px;
}
.steps > li {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 14px;
}
.step-num {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--accent);
  color: #fff;
  font-family: "IBM Plex Mono", monospace;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
}
.step-body { min-width: 0; }
.step-body > :first-child { margin-top: 0; }
.step-body h3 { margin: 0 0 8px; font-size: 16px; }
@media (max-width: 620px) { .steps > li { grid-template-columns: 24px minmax(0, 1fr); gap: 10px; } .step-num { width: 24px; height: 24px; font-size: 12.5px; } }

/* ── 代码块 ────────────────────────────────────────────── */
pre {
  background: var(--code-bg);
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  padding: 15px 17px;
  overflow-x: auto;
  font-size: 13px;
  line-height: 1.72;
  margin: 0 0 14px;
}
pre code { background: none; padding: 0; font-size: inherit; }
.cmt { color: var(--text-tertiary); }

/* ── 定位声明 ──────────────────────────────────────────── */
.claim {
  padding: 24px 26px;
  border-radius: 10px;
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
}
.claim p {
  margin: 0;
  font-size: 17px;
  line-height: 1.6;
  color: var(--text-primary);
  font-weight: 500;
}
.claim .en-line {
  margin-top: 12px;
  font-size: 13.5px;
  font-weight: 400;
  color: var(--text-secondary);
  line-height: 1.6;
}

/* ── 路标 ──────────────────────────────────────────────── */
.road { display: flex; flex-direction: column; gap: 0; }
.road-item {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 16px;
  padding: 18px 0;
  border-bottom: 1px solid var(--border-subtle);
}
.road-item:first-child { border-top: 1px solid var(--border-subtle); }
.road-n {
  font-family: "IBM Plex Mono", monospace;
  font-size: 12.5px;
  color: var(--text-tertiary);
  padding-top: 3px;
  font-variant-numeric: tabular-nums;
}
.road-body p { font-size: 14.5px; color: var(--text-secondary); margin: 7px 0 0; }
.road-crit {
  font-size: 13px !important;
  color: var(--text-tertiary) !important;
  margin-top: 9px !important;
}
.road-crit span {
  font-family: "IBM Plex Mono", monospace;
  font-size: 11px;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--accent);
  margin-right: 7px;
}

/* ── 表格 ──────────────────────────────────────────────── */
.table-wrap { overflow-x: auto; border: 1px solid var(--border-subtle); border-radius: 8px; }
table { border-collapse: collapse; width: 100%; font-size: 14px; min-width: 460px; }
th, td { text-align: left; padding: 11px 16px; border-bottom: 1px solid var(--border-subtle); }
th {
  font-size: 11.5px;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  font-weight: 600;
  background: var(--muted);
}
tbody tr:last-child td { border-bottom: 0; }
td.mono, th.mono { font-family: "IBM Plex Mono", monospace; font-size: 12.5px; }

/* ── Footer ────────────────────────────────────────────── */
footer {
  margin-top: 92px;
  padding-top: 30px;
  border-top: 1px solid var(--border-default);
  font-size: 13.5px;
  color: var(--text-secondary);
}
footer .foot-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 26px 40px;
  margin-bottom: 26px;
}
footer h4 { font-size: 12px; letter-spacing: .07em; text-transform: uppercase; color: var(--text-tertiary); }
footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
footer .attribution {
  padding-top: 20px;
  border-top: 1px solid var(--border-subtle);
  font-size: 12.5px;
  color: var(--text-tertiary);
  line-height: 1.7;
}
footer .attribution p { margin: 0 0 8px; }
footer .attribution p:last-child { margin-bottom: 0; }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* ══════════════════════════════════════════════════════════
   文档站（多页）
   45 个文档页共用这一套骨架：左栏 .doc-nav（assets/nav.js 注入）+ 正文
   .doc-col，宽屏再多一栏本页目录。首页是独立落地页，只借 .doc-col 的正文
   排版、不设 .doc-shell（见文件头部「落地页骨架」一节）。共用上面的 token
   与排版；首页保留落地页组件（hero/.sec-head/footer），抵消见 .doc-col 一节末尾。
   ══════════════════════════════════════════════════════════ */

.doc-shell {
  display: grid;
  grid-template-columns: 1fr;
  max-width: 1180px;
  margin: 0 auto;
  padding-inline: 24px;
  padding-block: 0 96px;
}
@media (min-width: 1000px) {
  .doc-shell { grid-template-columns: 218px minmax(0, 1fr); gap: 0 56px; }
}
/* 宽屏第三栏放本页目录（断点与 nav.js 的 railQ 一致）。总宽上限同步放宽到
   1390px = 218 导航 + 56 间隔 + 812 正文 + 56 间隔 + 200 目录 + 两侧留白——
   正文栏宽度与窄屏完全一致，多出来的只是被用起来的空白。 */
@media (min-width: 1280px) {
  .doc-shell {
    grid-template-columns: 218px minmax(0, 1fr) 200px;
    max-width: 1390px;
  }
}

/* ── 站点导航 ──────────────────────────────────────────── */
.doc-nav {
  padding-block: 22px 6px;
  border-bottom: 1px solid var(--border-subtle);
  margin-bottom: 6px;
}
@media (min-width: 1000px) {
  .doc-nav {
    position: sticky;
    top: 0;
    align-self: start;
    max-height: 100vh;
    overflow-y: auto;
    padding-block: 46px 36px;
    margin-bottom: 0;
    border-bottom: 0;
    border-right: 1px solid var(--border-subtle);
  }
}
.doc-brand {
  display: block;
  padding: 0 10px 16px;
  font-family: "Familjen Grotesk", "IBM Plex Sans", sans-serif;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.012em;
  color: var(--text-primary);
}
.doc-brand:hover { text-decoration: none; }
.doc-brand small {
  display: block;
  margin-top: 3px;
  font-family: "IBM Plex Mono", monospace;
  font-size: 10.5px;
  font-weight: 400;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}
.doc-nav nav { display: flex; flex-direction: column; gap: 1px; padding-right: 16px; }

/* 窄屏折叠：25 条链接全铺开会把正文推到屏幕外 */
.nav-fold > summary {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 10px;
  margin-bottom: 4px;
  border: 1px solid var(--border-subtle);
  border-radius: 6px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--text-secondary);
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.nav-fold > summary::-webkit-details-marker { display: none; }
.nav-fold > summary::after {
  content: "";
  margin-left: auto;
  width: 6px; height: 6px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  transition: transform .18s ease;
}
.nav-fold[open] > summary::after { transform: rotate(-135deg); }
.nav-fold > summary:hover { background: var(--muted); color: var(--text-primary); }
@media (min-width: 1000px) {
  .nav-fold > summary { display: none; }
}
.doc-nav .nav-group {
  padding: 17px 10px 5px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}
.doc-nav .nav-group:first-child { padding-top: 4px; }
.doc-nav a {
  display: block;
  padding: 5px 10px;
  border-radius: 5px;
  border-left: 2px solid transparent;
  font-size: 13.5px;
  color: var(--text-secondary);
}
.doc-nav a:hover {
  background: var(--muted);
  color: var(--text-primary);
  text-decoration: none;
}
.doc-nav a.is-current {
  border-left-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 500;
}

/* ── 正文栏 ────────────────────────────────────────────── */
.doc-col { min-width: 0; max-width: 812px; }
.doc-head { padding-block: 46px 0; }
.doc-head h1 {
  font-size: clamp(30px, 4.6vw, 40px);
  margin-bottom: 15px;
}
.doc-head .lede { font-size: 17px; margin-bottom: 0; }

.crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  margin-bottom: 15px;
  font-size: 12.5px;
  color: var(--text-tertiary);
}
.crumbs a { color: var(--text-secondary); }
.crumbs .sep { color: var(--border-default); }

/* 文档页的标题间距比首页紧：阅读是纵向连续的，不需要每节都留 84px */
.doc-col :is(h2, h3, h4) { scroll-margin-top: 20px; }
.doc-col h2 {
  margin: 58px 0 16px;
  padding-top: 10px;
  border-top: 1px solid var(--border-subtle);
}
.doc-col > .doc-head + h2,
.doc-col > h2:first-child { margin-top: 40px; }
.doc-col h3 { margin: 34px 0 12px; }
.doc-col h4 { margin: 26px 0 10px; }
.doc-col h2 + h3, .doc-col h2 + p, .doc-col h2 + .table-wrap { margin-top: 0; }

.doc-col ul, .doc-col ol { margin: 0 0 16px; padding-left: 22px; }
.doc-col li { margin-bottom: 7px; }
.doc-col li:last-child { margin-bottom: 0; }
.doc-col li::marker { color: var(--text-tertiary); }
.doc-col ul ul, .doc-col ol ol, .doc-col ul ol, .doc-col ol ul { margin: 7px 0 0; }

.doc-col hr {
  margin: 44px 0;
  border: 0;
  border-top: 1px solid var(--border-subtle);
}

/* 表格在文档里出现得多，给它一点呼吸 */
.doc-col .table-wrap { margin: 0 0 20px; }
.doc-col table { font-size: 13.5px; }
.doc-col th, .doc-col td { padding: 10px 14px; vertical-align: top; }

/* 首页（docs/index.html）借 .doc-col 的排版（列宽另给 .doc-col.landing），
   但保留落地页组件，逐处抵消上面的文档页排版，维持落地页自己的节奏：
   - .sec-head 标题组：文档页 h2 的 58px 间距 + 顶部细线是「章节分隔」用的，
     落在标题组内部（sec-label 与 h2 之间）就成了错位；恢复全局 h2 间距。
   - <footer> 栏目：h4/列表间距按页脚自己的规则，不吃文档页标题与列表的。
   .shot-legend 不在此列——图例在指南页与首页共用，跟着文档页规则走，
   两处外貌一致（这也是迁移前指南页的既有效果）。 */
.doc-col .sec-head h2 { margin: 0 0 14px; padding-top: 0; border-top: 0; }
.doc-col footer h4 { margin-top: 0; }
.doc-col footer ul { margin: 0; padding-left: 0; }
.doc-col footer li { margin-bottom: 0; }

/* ── 提示块 ────────────────────────────────────────────── */
.callout {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 2px 12px;
  margin: 0 0 20px;
  padding: 15px 18px;
  border: 1px solid var(--border-subtle);
  border-left-width: 3px;
  border-radius: 8px;
  background: var(--raised);
  font-size: 14.5px;
  line-height: 1.66;
  color: var(--text-secondary);
}
.callout .callout-tag {
  font-family: "IBM Plex Mono", monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
}
/* 标签列是 auto 宽：标签写长一点（「为什么规则文件要纯人工到这个地步」），
   窄屏上它会吃掉半屏，把正文挤成每行四五个字。与 .tier 同款处理，塌成上下。 */
@media (max-width: 620px) { .callout { grid-template-columns: minmax(0, 1fr); gap: 6px; } }
.callout p { margin: 0 0 8px; }
.callout p:last-child { margin-bottom: 0; }
.callout code { background: var(--code-bg); }
.callout.note { border-left-color: var(--accent); }
.callout.note .callout-tag { color: var(--accent); }
/* 带底色的一档去掉其余三边：底色本身就是边界，再加一圈重色反而糊成一团 */
.callout.warn { border: 0; border-left: 3px solid var(--warn); background: var(--warn-bg); }
.callout.warn .callout-tag { color: var(--warn); }
.callout.danger { border: 0; border-left: 3px solid var(--danger); background: var(--danger-bg); }
.callout.danger .callout-tag { color: var(--danger); }
.callout.ok { border: 0; border-left: 3px solid var(--ok); background: var(--ok-bg); }
.callout.ok .callout-tag { color: var(--ok); }

/* ── 上下页 ────────────────────────────────────────────── */
.doc-pager {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 68px;
  padding-top: 26px;
  border-top: 1px solid var(--border-subtle);
}
.doc-pager a {
  flex: 1 1 240px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 17px;
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  color: var(--text-primary);
}
.doc-pager a:hover {
  border-color: var(--accent-line);
  background: var(--muted);
  text-decoration: none;
}
.doc-pager .dir {
  font-family: "IBM Plex Mono", monospace;
  font-size: 10.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}
.doc-pager .to { font-size: 14.5px; font-weight: 500; }
.doc-pager .is-next { text-align: right; align-items: flex-end; }

.doc-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 20px;
  margin-top: 52px;
  padding-top: 22px;
  border-top: 1px solid var(--border-subtle);
  font-size: 12.5px;
  color: var(--text-tertiary);
}

/* ── 本页目录 ──────────────────────────────────────────── */
/* 两种形态，同一个节点由 nav.js 在 1280px 断点搬运：
   宽屏 = .doc-shell 第三栏的竖线列表（sticky 常驻 + is-active 高亮当前小节，
   参照 doris.apache.org 的三栏做法）；窄屏 = 正文开头的两列卡片——
   窄屏没有右栏可放，而长页面（工作流 28 个节点、配置全 key）确实需要它。 */
.doc-toc {
  margin: 34px 0 0;
  padding: 15px 19px 16px;
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  background: var(--muted);
}
/* 目录条目多时排两列。长页面的目录能占掉半屏，把正文推到折叠线以下，
   而目录本身是「扫一眼」的东西，不该抢正文的位置。窄屏仍单列。 */
@media (min-width: 620px) {
  .doc-toc { columns: 2; column-gap: 26px; }
}
.doc-toc .toc-label {
  display: block;
  column-span: all;
  font-family: "IBM Plex Mono", monospace;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin-bottom: 7px;
}
.doc-toc a {
  display: block;
  break-inside: avoid;
  font-size: 13.5px;
  color: var(--text-secondary);
  padding: 2px 0;
}
.doc-toc a:hover { color: var(--accent); text-decoration: none; }
.doc-toc a.toc-3 { padding-left: 15px; font-size: 13px; color: var(--text-tertiary); }

/* 目录后面紧跟的 h2 不必再画顶部分隔线 */
.doc-toc + h2, .doc-toc + .doc-head + h2 { border-top: 0; padding-top: 0; margin-top: 44px; }

/* 宽屏形态：nav.js 把目录挪成 .doc-shell 的第三个栅格子项。只认直接子级——
   目录在 .doc-col 里（窄屏/未搬运）时这条不匹配，卡片样式原样保留。 */
@media (min-width: 1280px) {
  .doc-shell > .doc-toc {
    grid-column: 3;
    grid-row: 1;
    align-self: start;
    position: sticky;
    top: 24px;
    max-height: calc(100vh - 48px);
    overflow-y: auto;
    margin: 81px 0 0; /* 顶端与 h1 齐平：46 头部留白 + 20 面包屑一行 + 15 间距 */
    padding: 0 0 4px 16px;
    border: 0;
    border-left: 1px solid var(--border-subtle);
    border-radius: 0;
    background: none;
    columns: auto;
  }
  .doc-shell > .doc-toc .toc-label { margin-bottom: 8px; }
  .doc-shell > .doc-toc a { font-size: 13px; padding: 3px 0; }
  .doc-shell > .doc-toc a.toc-3 { padding-left: 13px; font-size: 12.5px; }
  .doc-shell > .doc-toc a:hover { color: var(--text-primary); }
  .doc-shell > .doc-toc a.is-active { color: var(--accent); font-weight: 500; }
}

/* 文档页里的源码锚点与首页同款，只是不换行时更容易读 */
.doc-col .ref { white-space: nowrap; }
/* 窄屏例外：芯片里常有长标识符（如 _route_semantic_gate_after_linking_fast_match），
   保持 nowrap 会把页面顶出横向滚动条——允许换行，标识符过长时也允许断开。 */
@media (max-width: 700px) {
  .ref, .doc-col .ref { white-space: normal; overflow-wrap: anywhere; }
  /* 行内代码同理：API 路径 / 配置键 / 指标名都是不可断的长 token。
     只豁免代码块（pre code）——块内保持不折行、由 pre 自己横向滚动。 */
  :not(pre) > code { overflow-wrap: anywhere; }
}

/* ── 入口卡（首页） ────────────────────────────────────── */
/* 首页「从这里开始」的整卡链接：视觉取自上下页的 .doc-pager a，但类名表意。
   每张卡是一段可跳转的入口（kicker → 标题 → 一句话说明），整卡可点。
   auto-fit 保证窄屏自动塌成一列，无需断点。 */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 12px;
}
.card {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 15px 18px;
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  color: var(--text-primary);
}
.card:hover {
  border-color: var(--accent-line);
  background: var(--muted);
  text-decoration: none;
}
.card-kicker {
  font-family: "IBM Plex Mono", monospace;
  font-size: 10.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}
.card-title { font-size: 15px; font-weight: 600; }
.card-desc { font-size: 13.5px; line-height: 1.6; color: var(--text-secondary); }