dsh-data-domain-knowledge 0.1.0-alpha.9 → 0.1.1-alpha.2

package/src/client/pages.css

@@ -46,11 +46,17 @@ body {
 
 .page-main { padding: 28px 28px 120px; }
 
-/* 内容列。宽度按页给：说明 860，试跑报告 1180。 */
+/* 内容列。宽度按页给：说明 860，试跑报告 1080，架构说明页 1560。 */
 .page-column { width: 100%; margin-inline: auto; }
 .page-column-help { max-width: 860px; }
 .page-column-trial { max-width: 1080px; }
-.page-column-guide { max-width: 1120px; }
+.page-column-tasks { max-width: 1220px; }
+/* 架构说明页是**一块画布**，不是一栏正文：画布设计宽 1172px，再加右列 400px，
+   窄于 1560 就只能靠缩字把图塞进来（实测 0.55 倍，卡片上的字读不出）。 */
+.page-column-guide { max-width: 1560px; }
+/* 这一页的边框要贴住视口底，所以把给「读排版」那几页留的 120px 页脚内边距收成 40px ——
+   省下的 80px 全部换成画布高度。`:has` 不支持时这条被忽略，退回 120px，不会坏。 */
+.page-main:has(> .page-column-guide) { padding-bottom: 40px; }
 
 /* 地址不对、或还没载入时的整页状态。与 `doc-page.css` 的 `.docPage-state` 同形。 */
 .page-state {
@@ -85,6 +91,230 @@ body {
 }
 .page-loading { margin: 0; color: var(--tita-ink-muted); font-size: 12px; }
 
+/* ---------------------------------------------------------- 知识处理与运行记录
+ *
+ * 2026-10-18 重排。这一页只有三层，而每一层回答一个问题：
+ *
+ * 1. **页头** —— 现在什么状态（一行实时结论）+ 两个动作。**没有标题**：标题在常驻窄条上，
+ *    内容区再写一遍就是同一句话说两次。
+ * 2. **步骤轨** —— 四段各差多少。它横贯整页而不是缩在左栏里：这一页的骨架是一条有方向的
+ *    流水线，把骨架塞进左栏，右栏就变成了「第二根柱子」。
+ * 3. **两栏** —— 左栏「这一段跑了什么」，右栏「我要跑哪些」+「以前跑过什么」。
+ *
+ * 上一版的问题是**同一件事说了三遍**（页签徽标 / 段头 / 结果摘要的第一行都是「部分失败」），
+ * 而真正有用的「还剩多少待办」被压成一行 10.5px 的灰字，模型原始日志却占着一屏。
+ * 所以这里守一条：**一个事实只出现一次**。阶段状态只住在步骤轨上，待办计数只住在同一格的
+ * 第二行，段名只住在段头。
+ */
+.extractTasksPage { display: grid; min-width: 0; gap: 15px; color: var(--tita-ink); }
+
+.extractTasksHead { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 18px; }
+/* 结论行：12.5px 而不是 13px —— 它是一句状态，不是正文。宽度上限 76ch：
+   整页 1220px 时这一句会独占一整行，读起来像标题。 */
+.extractTasksHeadline { max-width: 76ch; margin: 0; color: var(--tita-ink-muted); font-size: 12.5px; line-height: 1.6; }
+.extractTasksHeadActions { display: flex; flex: 0 0 auto; align-items: center; gap: 6px; }
+.extractTasksError { margin: 0; border: 1px solid color-mix(in srgb, var(--tita-danger) 32%, var(--tita-surface)); border-radius: 8px; background: color-mix(in srgb, var(--tita-danger) 8%, var(--tita-surface)); padding: 9px 12px; color: var(--tita-danger); font-size: 12px; }
+
+/* ---- 步骤轨
+ *
+ * 复用 `KnowledgeStepRail` 那一套语言（节点 + 箭头 + 当前步描边），因为它们是同一件事：
+ * 一条流水线上「你现在站在哪一段」。区别只有一处 —— 这里的节点是 Radix 的 trigger，
+ * 所以键盘、`aria-controls`、方向键切换都是现成的。
+ *
+ * 默认的 `TabsList` 是「一排等宽按钮」（等宽 pill + 32px 高）：它表达的是「几选一」，
+ * 而这里是「谁接谁」。所以把 pill 的底、内边距、固定高全部收掉，节点自己长成带描边的一格。
+ */
+.extractTasksWork { display: flex; min-width: 0; flex-direction: column; gap: 14px; }
+.extractTasksRailList {
+  display: flex;
+  width: 100%;
+  height: auto;
+  align-items: stretch;
+  gap: 6px;
+  border-radius: 0;
+  background: transparent;
+  padding: 0;
+}
+.extractTasksRailArrow { display: inline-flex; flex: 0 0 auto; align-self: center; align-items: center; color: var(--tita-ink-faint); }
+.extractTasksRailStep {
+  display: grid;
+  flex: 1 1 0;
+  box-sizing: border-box;
+  min-width: 0;
+  height: auto;
+  align-content: start;
+  justify-items: start;
+  gap: 7px;
+  border: 1px solid var(--tita-line);
+  border-radius: 9px;
+  background: var(--tita-surface);
+  padding: 10px 12px;
+  color: var(--tita-ink-muted);
+  text-align: left;
+  white-space: normal;
+  transition: border-color 120ms ease-out, background-color 120ms ease-out;
+}
+.extractTasksRailStep:hover { border-color: var(--tita-line-strong); background: var(--tita-surface-muted); color: var(--tita-ink); }
+.extractTasksRailStep:focus-visible { outline: 2px solid var(--tita-focus-ring); outline-offset: 1px; }
+/* 当前步不是「已选中」，而是「你站在哪一段」。用主色描边 + 浅底，不用左侧色条 ——
+   色条会把这一格读成一条「提示卡」，而它不是提示。两个属性都写上：Radix 给的是
+   `data-state="active"`，新版 shadcn 的类名等的是 `data-active`。 */
+.extractTasksRailStep[data-state="active"],
+.extractTasksRailStep[data-active] {
+  border-color: var(--tita-primary);
+  background: var(--tita-primary-soft);
+  box-shadow: inset 0 0 0 1px var(--tita-primary);
+  color: var(--tita-ink);
+}
+.extractTasksRailName { min-width: 0; color: inherit; font-size: 12.5px; font-weight: 680; line-height: 1.4; letter-spacing: -.01em; }
+.extractTasksRailFacts { display: flex; min-width: 0; flex-wrap: wrap; align-items: center; gap: 6px; }
+/* 待办计数：等宽数字，**比徽标轻** —— 徽标说的是「上次跑成什么样」（结论），
+   这一句说的是「现在还剩多少」（读数）。两件事不同重，才读得出哪句是结论。 */
+.extractTasksRailPending { color: var(--tita-ink-faint); font-size: 10.5px; line-height: 1.4; white-space: nowrap; font-variant-numeric: tabular-nums; }
+
+/* ---- 两栏 */
+.extractTasksBody { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(316px, 1fr); align-items: start; gap: 18px; }
+.extractTasksMain { min-width: 0; }
+.extractTasksSide { display: grid; min-width: 0; gap: 14px; }
+
+/* ---- 阶段卡
+ *
+ * 卡里**不再套卡**：输入范围 / 结果摘要 / 抽取报告 / 运行输出 都是这张卡里的**分节**，
+ * 用一条发丝线分开，不各长一圈描边。卡片套卡片读起来是四个同级的东西，
+ * 而它们其实是同一件事的四段。
+ */
+.extractTasksStage { min-width: 0; border: 1px solid var(--tita-line); border-radius: 10px; background: var(--tita-surface); padding: 15px 17px 17px; }
+.extractTasksStageIntro { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
+.extractTasksStageIntro > div { min-width: 0; }
+.extractTasksStageIntro h2 { margin: 0; color: var(--tita-ink); font-size: 14.5px; font-weight: 700; line-height: 1.4; letter-spacing: -.015em; }
+.extractTasksStageIntro p { margin: 3px 0 0; color: var(--tita-ink-muted); font-size: 11.5px; line-height: 1.55; }
+
+.extractTasksFacts { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0; border-top: 1px solid var(--tita-line); margin-top: 13px; }
+.extractTasksFacts > section { min-width: 0; padding-top: 13px; }
+.extractTasksFacts > section + section { border-left: 1px solid var(--tita-line); padding-left: 20px; }
+.extractTasksFacts h3 { margin: 0 0 9px; color: var(--tita-ink-muted); font-size: 10.5px; font-weight: 700; letter-spacing: .02em; }
+.extractTasksFacts dl { display: grid; gap: 7px; margin: 0; }
+.extractTasksFacts dl > div { display: grid; grid-template-columns: 68px minmax(0, 1fr); align-items: start; gap: 10px; }
+.extractTasksFacts dt { color: var(--tita-ink-faint); font-size: 10.5px; line-height: 1.55; }
+.extractTasksFacts dd { min-width: 0; margin: 0; color: var(--tita-ink); font-size: 11px; line-height: 1.55; overflow-wrap: anywhere; }
+
+/* ---- 抽取报告 */
+.extractTasksReports { border-top: 1px solid var(--tita-line); margin-top: 15px; padding-top: 13px; }
+.extractTasksSubhead { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
+.extractTasksSubhead > div { min-width: 0; }
+.extractTasksSubhead h3 { margin: 0; color: var(--tita-ink); font-size: 11.5px; font-weight: 700; }
+.extractTasksSubhead p { margin: 3px 0 0; color: var(--tita-ink-faint); font-size: 10.5px; line-height: 1.5; }
+.extractTasksCount { flex: 0 0 auto; color: var(--tita-ink-muted); font-size: 11px; font-variant-numeric: tabular-nums; }
+.extractTasksEmpty { margin: 0; padding: 14px 0; color: var(--tita-ink-muted); font-size: 11.5px; }
+/* 这一行是一个 `<button>`：应用内路径不能靠 `<a href>` 开（见 `ExtractionTasksPage`
+   里那段注释）。所以要把裸按钮的浏览器默认样式复位掉，外观保持原样。 */
+.extractReportRow { display: flex; width: 100%; min-width: 0; align-items: flex-start; justify-content: space-between; gap: 14px; border: 0; border-bottom: 1px solid var(--tita-line); border-radius: 0; background: none; padding: 11px 0; color: var(--tita-ink); font: inherit; text-align: left; text-decoration: none; cursor: pointer; }
+.extractReportRow:last-child { border-bottom: 0; padding-bottom: 2px; }
+.extractReportRow:hover .extractReportMain strong { color: var(--tita-primary); text-decoration: underline; text-underline-offset: 3px; }
+.extractReportRow:focus-visible { outline: 2px solid var(--tita-focus-ring); outline-offset: 2px; border-radius: 6px; }
+.extractReportMain { display: grid; min-width: 0; gap: 3px; }
+.extractReportMain strong { font-size: 12px; font-weight: 650; line-height: 1.5; overflow-wrap: anywhere; }
+.extractReportMain > span { color: var(--tita-ink-muted); font-size: 11px; line-height: 1.55; overflow-wrap: anywhere; }
+.extractReportMeta { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 6px; color: var(--tita-ink-faint); font-size: 10.5px; font-variant-numeric: tabular-nums; white-space: nowrap; }
+
+/* ---- 运行输出（默认收起） */
+.extractTasksOutput { border-top: 1px solid var(--tita-line); margin-top: 15px; padding-top: 4px; }
+.extractTasksOutputToggle { gap: 5px; padding-inline: 2px 6px; color: var(--tita-ink-muted); font-size: 11px; font-weight: 650; }
+.extractTasksOutputToggle:hover { color: var(--tita-ink); }
+/* 第二段是「展开 / 收起」的补充说明：它是提示，不是按钮名，所以更轻。 */
+.extractTasksOutputToggle > span { color: var(--tita-ink-faint); font-size: 10.5px; font-weight: 500; }
+.extractTasksOutputToggle svg { transition: transform 140ms ease-out; }
+.extractTasksOutputToggle[aria-expanded="true"] svg { transform: rotate(180deg); }
+.extractTasksOutputBody { display: grid; gap: 8px; margin-top: 6px; }
+.extractTasksOutputBody > p { margin: 0; color: var(--tita-ink-muted); font-size: 11px; line-height: 1.55; }
+/* 模型原始返回：等宽、可滚、限高。**限高 320px** —— 它是底料，不是结论，
+   但也不能矮到看不见上下文。 */
+.extractTasksPre { margin: 0; max-height: 320px; overflow: auto; border-radius: 8px; background: var(--tita-surface-muted); padding: 11px 13px; color: var(--tita-ink); font-family: var(--tita-mono); font-size: 11.5px; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; tab-size: 2; }
+.extractTasksReportsInline { display: flex; flex-wrap: wrap; gap: 14px; }
+.extractTasksLink { height: auto; padding-inline: 0; color: var(--tita-primary); font-size: 11px; font-weight: 500; text-decoration: underline; text-underline-offset: 2px; }
+.extractTasksLink:hover { background: transparent; color: var(--tita-primary); }
+
+/* ---- 右侧两栏：面板 */
+.extractTasksPanel { min-width: 0; overflow: hidden; border: 1px solid var(--tita-line); border-radius: 10px; background: var(--tita-surface); }
+.extractTasksPanelHead { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--tita-line); padding: 13px 15px 11px; }
+.extractTasksPanelHead > div { min-width: 0; }
+.extractTasksPanelHead h2 { margin: 0; color: var(--tita-ink); font-size: 13px; font-weight: 700; letter-spacing: -.01em; }
+.extractTasksPanelHead p { margin: 3px 0 0; color: var(--tita-ink-muted); font-size: 11px; line-height: 1.5; }
+.extractTasksPanelBody { min-width: 0; padding: 0 15px; }
+
+/* ---- 处理范围
+ *
+ * 每一行原来是一枚「选择」按钮 + 名字 + 徽标：N 行就有 N 枚写着同一个词的按钮，
+ * 而真正要读的是那一行的名字。现在整行就是按钮，前面一枚方框表示选中
+ * （`aria-pressed` 与视觉同时成立，键盘 Tab 也走得通）。
+ */
+.extractTasksScopeTab { margin-top: 12px; }
+.extractTasksScopeNote { margin: 0 0 2px; color: var(--tita-ink-muted); font-size: 11px; line-height: 1.5; }
+.extractTasksChoiceList { display: grid; max-height: 260px; overflow: auto; margin: 0; padding: 0; list-style: none; scrollbar-color: var(--tita-line-strong) transparent; scrollbar-width: thin; }
+.extractTasksChoiceList > li { border-bottom: 1px solid var(--tita-line); }
+.extractTasksChoiceList > li:last-child { border-bottom: 0; }
+.extractTasksPick { display: flex; width: 100%; min-width: 0; align-items: center; gap: 9px; border: 0; border-radius: 7px; background: none; padding: 9px 4px 9px 2px; color: inherit; font: inherit; text-align: left; cursor: pointer; }
+.extractTasksPick:hover { background: var(--tita-surface-muted); }
+.extractTasksPick:focus-visible { outline: 2px solid var(--tita-focus-ring); outline-offset: 1px; }
+.extractTasksPickBox { display: inline-flex; width: 14px; height: 14px; flex: 0 0 auto; align-items: center; justify-content: center; border: 1px solid var(--tita-line-strong); border-radius: 4px; background: var(--tita-surface); color: var(--tita-primary); }
+.extractTasksPick[aria-pressed="true"] .extractTasksPickBox { border-color: var(--tita-primary); background: var(--tita-primary-soft); }
+.extractTasksChoiceName { display: grid; min-width: 0; flex: 1 1 auto; gap: 2px; color: var(--tita-ink); font-size: 11.5px; line-height: 1.5; overflow-wrap: anywhere; }
+.extractTasksChoiceName > span { color: var(--tita-ink-muted); font-size: 10.5px; }
+.extractTasksChoiceName > span.extractTasksGroupReason { color: var(--tita-warning); }
+.extractTasksChoiceName > strong { font-weight: 620; }
+.extractTasksGroupList { max-height: 330px; }
+.extractTasksScopeActions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; border-top: 1px solid var(--tita-line); margin-top: 4px; padding: 10px 0 11px; }
+
+/* ---- 运行记录
+ *
+ * 一行一条，不设左右两列：这一栏只有 316–420px，右侧再挂一排动作会把摘要压成三行。
+ * 所以身份 / 摘要 / 时间 / 动作四行顺着写下来，动作在最下面一行左对齐 ——
+ * 视线从「哪一段、跑成什么样」自然落到「还能对它做什么」。
+ */
+.extractTaskRow { display: grid; gap: 5px; border-bottom: 1px solid var(--tita-line); padding: 12px 0; }
+.extractTaskRow:last-of-type { border-bottom: 0; }
+.extractTaskTitle { display: flex; min-width: 0; align-items: center; flex-wrap: wrap; gap: 7px; }
+.extractTaskTitle strong { color: var(--tita-ink); font-size: 12px; font-weight: 680; }
+.extractTaskSummary { margin: 0; color: var(--tita-ink-muted); font-size: 11px; line-height: 1.55; overflow-wrap: anywhere; }
+.extractTaskTime { margin: 0; color: var(--tita-ink-faint); font-size: 10.5px; line-height: 1.5; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
+.extractTaskControls { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin-top: 2px; }
+.extractTaskStepToggle { gap: 4px; padding-inline: 6px; color: var(--tita-ink-muted); font-size: 10.5px; }
+.extractTaskStepToggle[aria-expanded="true"] svg { transform: rotate(180deg); }
+.extractTaskStepToggle svg { transition: transform 120ms ease-out; }
+.extractTaskSteps { min-width: 0; }
+
+/* ---- 窄屏 */
+@media (max-width: 1080px) {
+  /* 两栏并排需要约 950px 才站得住（左栏 560 + 右栏 316 + 间隔）。再窄就把右栏落到下面 ——
+     硬挤的结果是左栏的结论被压成一行两个字。 */
+  .extractTasksBody { grid-template-columns: minmax(0, 1fr); }
+}
+
+@media (max-width: 720px) {
+  .page-main { padding: 18px 16px 70px; }
+  .page-bar { padding-inline: 16px; }
+  .extractTasksHead { align-items: flex-start; }
+  /* 窄屏把步骤轨排成 2×2：四个节点横排时每个不到 90px，段名会被折成三行。
+     箭头在这一档去掉 —— 网格的阅读顺序已经是 1→2→3→4，再画箭头只会插在两行之间空转。 */
+  .extractTasksRailList { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
+  .extractTasksRailArrow { display: none; }
+  .extractTasksStageIntro { flex-direction: column; }
+  .extractTasksFacts { grid-template-columns: minmax(0, 1fr); }
+  .extractTasksFacts > section + section { border-top: 1px solid var(--tita-line); border-left: 0; margin-top: 13px; padding-left: 0; }
+  .extractReportRow { flex-direction: column; gap: 4px; }
+  .extractReportMeta { white-space: normal; }
+  .extractTaskStepToggle { padding-inline: 0 4px; }
+}
+
+@media (max-width: 420px) {
+  .extractTasksFacts dl > div { grid-template-columns: 62px minmax(0, 1fr); gap: 8px; }
+  .extractTasksRailStep { padding: 9px 10px; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .extractTasksRailStep, .extractTaskStepToggle svg, .extractTasksOutputToggle svg { transition: none; }
+}
+
 /* ---------------------------------------------------------- attribution event guide
  *
  * 这是说明页，不是另一个业务面板。用一条主流程和几条细边界承载内容，避免把四个
@@ -105,8 +335,11 @@ body {
 .attributionGuideSectionHead { display: grid; gap: 3px; }
 .attributionGuideSectionHead h3 { margin: 0; color: var(--tita-ink); font-size: 16px; font-weight: 730; letter-spacing: -.018em; line-height: 1.35; }
 .attributionGuideSectionHead p:last-child { max-width: 72ch; margin: 0; color: var(--tita-ink-muted); font-size: 12px; line-height: 1.7; }
-.attributionGuidePipeline { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 9px; border: 1px solid var(--tita-line); border-radius: 14px; background: var(--tita-surface); padding: 18px 16px; }
-.attributionGuideNode { display: grid; min-width: 0; gap: 3px; border-left: 3px solid var(--tita-line-strong); padding: 2px 0 2px 11px; }
+.attributionGuidePipeline { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1.25fr) auto minmax(0, 1fr); align-items: center; gap: 9px; border: 1px solid var(--tita-line); border-radius: 14px; background: var(--tita-surface); padding: 18px 16px; }
+.attributionGuideBranches { display: grid; gap: 10px; border: 1px dashed var(--tita-line-strong); border-radius: 12px; background: var(--tita-surface-muted); padding: 10px; }
+/* 1px 发丝线，不是 3px 色条：这一页其余的分隔全是发丝线，一条 3px 的竖条会把它读成
+   另一个东西（而且那是模板的记号）。段位身份色仍然在下面那枚小徽标上，没有丢。 */
+.attributionGuideNode { display: grid; min-width: 0; gap: 3px; border-left: 1px solid var(--tita-line-strong); padding: 2px 0 2px 11px; }
 .attributionGuideNode-source { border-left-color: var(--tita-tone-blue); }
 .attributionGuideNode-event { border-left-color: var(--tita-tone-green); }
 .attributionGuideNode-knowledge { border-left-color: var(--tita-tone-violet); }
@@ -124,7 +357,8 @@ body {
 .attributionGuideRelations { display: flex; flex-wrap: wrap; gap: 8px 18px; border-top: 1px solid var(--tita-line); padding-top: 11px; color: var(--tita-ink-muted); font-size: 10.5px; }
 .attributionGuideRelations span { display: inline-flex; align-items: center; gap: 5px; }
 .attributionGuideRelations svg { color: var(--tita-primary); }
-.attributionGuideCaseIntro { display: flex; align-items: center; justify-content: space-between; gap: 14px; border-left: 3px solid var(--tita-tone-green); background: var(--tita-tone-green-tint); padding: 10px 13px; }
+/* 底色留着（它说的是「这一块是案例」），竖条收成 1px。 */
+.attributionGuideCaseIntro { display: flex; align-items: center; justify-content: space-between; gap: 14px; border-left: 1px solid var(--tita-tone-green); background: var(--tita-tone-green-tint); padding: 10px 13px; }
 .attributionGuideCaseIntro > div { display: grid; gap: 3px; }
 .attributionGuideLabel { color: var(--tita-ink-faint); font-family: var(--tita-mono); font-size: 9.5px; }
 .attributionGuideCaseIntro p { margin: 0; color: var(--tita-ink-muted); font-size: 10.5px; }
@@ -159,151 +393,251 @@ body {
 
 /* --------------------------------------------------------------- tab guide
  *
- * 五个 Tab 的说明汇总页。上面的 SVG 是导航，不是装饰：节点是可聚焦、可点击的真实
- * 交互元素；下面只保留当前节点的一份说明，避免把五套内容同时堆成卡片墙。
+ * 架构说明页（`/knowledge/pages/help/overview`）。
+ *
+ * 版式：**一条链路 = 画布上的一条工序带**，右边一列是当前环节的说明。
+ * 画布的构图纪律写在 `GuideArchitectureCanvas.tsx` 的文件头 —— 这里只管长相。
+ *
+ * 尺寸上的两条硬规矩，改版时最容易踩：
+ * 1. **视口高度不是 CSS 定的**，它由组件按缩放比例写在行内 style 上；进入全屏后由 CSS 接管，
+ *    让画布填满视口。
+ * 2. **卡片、牌子、带的位置全部由 `arch/model.ts` 算好写在行内 style 上**，
+ *    这里不许出现第二套坐标。
  */
-.tabGuide { display: grid; gap: 22px; }
-.tabGuideIntro { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 22px; border-bottom: 1px solid var(--tita-line); padding: 3px 0 20px; }
-.tabGuideEyebrow { margin: 0 0 4px; color: var(--tita-primary); font-size: 10px; font-weight: 760; letter-spacing: .08em; text-transform: uppercase; }
-.tabGuideIntro h2 { margin: 0; color: var(--tita-ink); font-size: 24px; font-weight: 760; letter-spacing: -.035em; line-height: 1.2; }
-.tabGuideIntro p:not(.tabGuideEyebrow) { max-width: 70ch; margin: 8px 0 0; color: var(--tita-ink-muted); font-size: 12.5px; line-height: 1.75; }
-.tabGuideIntroMeta { display: inline-flex; align-items: flex-start; gap: 8px; border-left: 1px solid var(--tita-line); padding: 4px 0 3px 16px; color: var(--tita-ink-muted); font-size: 10.5px; line-height: 1.55; }
-.tabGuideIntroMeta svg { flex: 0 0 auto; color: var(--tita-primary); }
-.tabGuideMap { overflow-x: auto; border: 1px solid var(--tita-line); border-radius: 14px; background: var(--tita-surface); padding: 17px 16px 13px; }
-.tabGuideSvg { display: block; width: 100%; min-width: 760px; height: auto; color: var(--tita-ink); }
-.tabGuideArchitectureSvg { display: block; width: 100%; min-width: 980px; height: auto; color: var(--tita-ink); }
-.tabGuideArchitectureBand { fill: var(--tita-surface-muted); stroke: var(--tita-line); stroke-width: 1; }
-.tabGuideArchitectureLegendTitle { fill: var(--tita-ink); font-family: var(--tita-font); font-size: 11px; font-weight: 760; }
-.tabGuideArchitectureLegendText, .tabGuideArchitectureLegendNote { fill: var(--tita-ink-faint); font-family: var(--tita-font); font-size: 9.5px; }
-.tabGuideArchitectureLegendNote { text-anchor: end; }
-.tabGuideArchitectureLegendLine { fill: none; stroke-linecap: round; stroke-width: 1.6; }
-.tabGuideArchitectureLegendLine-flow { stroke: var(--tita-ink-faint); }
-.tabGuideArchitectureLegendLine-cross { stroke: var(--tita-primary); }
-.tabGuideArchitectureLegendLine-feedback { stroke: var(--tita-primary); stroke-dasharray: 5 4; }
-.tabGuideArchitectureLaneBadge { fill: var(--tita-surface); stroke: var(--tita-line-strong); stroke-width: 1; }
-.tabGuideArchitectureLaneBadge-interaction { fill: var(--tita-tone-blue-tint); stroke: var(--tita-tone-blue-line); }
-.tabGuideArchitectureLaneBadge-knowledge { fill: var(--tita-tone-violet-tint); stroke: var(--tita-tone-violet-line); }
-.tabGuideArchitectureLaneBadge-evolution { fill: var(--tita-tone-amber-tint); stroke: var(--tita-tone-amber-line); }
-.tabGuideArchitectureLaneLabel { fill: var(--tita-ink); font-family: var(--tita-font); font-size: 12px; font-weight: 760; }
-.tabGuideArchitectureLaneNote { fill: var(--tita-ink-faint); font-family: var(--tita-mono); font-size: 9.5px; }
-.tabGuideArchitectureEdge { fill: none; stroke-linecap: round; stroke-linejoin: round; }
-.tabGuideArchitectureEdge-flow, .tabGuideArchitectureEdge-branch { stroke: var(--tita-ink-faint); }
-.tabGuideArchitectureEdge-inject, .tabGuideArchitectureEdge-collect { stroke: var(--tita-primary); }
-.tabGuideArchitectureEdge-feedback { stroke: var(--tita-primary); stroke-dasharray: 5 4; }
-.tabGuideArchitectureEdgeLabel { paint-order: stroke; stroke: var(--tita-surface); stroke-width: 5px; stroke-linejoin: round; fill: var(--tita-primary); font-family: var(--tita-font); font-size: 10px; font-weight: 720; text-anchor: middle; }
-.tabGuideArchitectureNode { cursor: pointer; outline: none; }
-.tabGuideArchitectureNodeRect { fill: var(--tita-surface); stroke: var(--tita-line-strong); stroke-width: 1.2; transition: fill .16s ease, stroke .16s ease, stroke-width .16s ease, filter .16s ease; }
-.tabGuideArchitectureNode:hover .tabGuideArchitectureNodeRect { fill: var(--tita-surface-muted); stroke: var(--tita-primary-line); }
-.tabGuideArchitectureNode:focus-visible .tabGuideArchitectureNodeRect { stroke: var(--tita-primary); stroke-width: 2; }
-.tabGuideArchitectureNodeSelected .tabGuideArchitectureNodeRect { fill: var(--tita-primary-soft); stroke: var(--tita-primary); stroke-width: 2; filter: drop-shadow(0 3px 7px rgb(15 23 42 / .1)); }
-.tabGuideArchitectureNodeTitle { fill: var(--tita-ink); font-family: var(--tita-font); font-size: 12.5px; font-weight: 760; }
-.tabGuideArchitectureNodeSubtitle { fill: var(--tita-ink-muted); font-family: var(--tita-font); font-size: 9.5px; }
-.tabGuideArchitectureNodeStatus { fill: var(--tita-ink-faint); font-family: var(--tita-font); font-size: 9px; }
-.tabGuideArchitectureProblemTitle { fill: var(--tita-ink); font-family: var(--tita-font); font-size: 12px; font-weight: 760; }
-.tabGuideArchitectureProblemNote { fill: var(--tita-ink-faint); font-family: var(--tita-mono); font-size: 9.5px; }
-.tabGuideArchitectureProblemRect { fill: var(--tita-surface); stroke: var(--tita-line-strong); stroke-width: 1; }
-.tabGuideArchitectureProblemIndex { fill: var(--tita-primary); font-family: var(--tita-mono); font-size: 10px; font-weight: 760; }
-.tabGuideArchitectureProblemLabel { fill: var(--tita-ink); font-family: var(--tita-font); font-size: 11px; font-weight: 720; }
-.tabGuideArchitectureProblemText, .tabGuideArchitectureProblemMeasure { fill: var(--tita-ink-muted); font-family: var(--tita-font); font-size: 9.5px; }
-.tabGuideModuleRail { display: grid; grid-template-columns: minmax(220px, .85fr) minmax(0, 1.7fr); align-items: center; gap: 20px; border-top: 1px solid var(--tita-line); border-bottom: 1px solid var(--tita-line); padding: 14px 0; }
-.tabGuideModuleRailCopy { margin: 3px 0 0; color: var(--tita-ink-muted); font-size: 11px; line-height: 1.55; }
-.tabGuideModuleButtons { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 7px; }
-.tabGuideModuleButtons button { gap: 5px; }
-.tabGuideModuleButtons svg { color: currentColor; }
-.tabGuideConceptRelation { display: grid; grid-template-columns: minmax(230px, .8fr) minmax(0, 1.8fr); align-items: center; gap: 22px; border: 1px solid var(--tita-primary-line); border-radius: 12px; background: var(--tita-primary-soft); padding: 16px 18px; }
+
+.tabGuide { display: grid; gap: 20px; }
+.tabGuideWorkbench { display: block; }
+/* 左列只有画布，不吸顶：整图最高 1120px，比视口高 —— 吸顶会把下半张图钉在屏幕外。 */
+.tabGuideCanvasColumn { display: grid; min-width: 0; gap: 14px; }
+
+/* ---------------------------------------------------------------- 画布 */
+
+.tabGuideCanvas { position: relative; display: flex; min-width: 0; min-height: 0; flex-direction: column; overflow: hidden; border: 1px solid var(--tita-line); border-radius: 12px; background: var(--tita-canvas); box-shadow: 0 1px 2px rgb(16 24 40 / .04); container-type: inline-size; }
+
+/* 浮层：画布上只剩左上角这一排链路 Tab。它不占画布的设计尺寸。 */
+.tabGuideCanvasOverlay { position: absolute; z-index: 2; top: 10px; left: 10px; display: flex; align-items: flex-start; gap: 12px; pointer-events: none; }
+.tabGuideCanvasOverlay > * { pointer-events: auto; }
+
+.tabGuideChainTabs .tita-uiTabsList { display: inline-flex; max-width: 100%; overflow-x: auto; border: 1px solid var(--tita-line); border-radius: 9px; background: color-mix(in srgb, var(--tita-surface) 93%, transparent); padding: 2px; box-shadow: 0 1px 2px rgb(16 24 40 / .05); backdrop-filter: blur(6px); scrollbar-width: none; }
+.tabGuideChainTabs .tita-uiTabsList::-webkit-scrollbar { display: none; }
+.tabGuideChainTabs .tita-uiTabsTrigger { min-height: 30px; border: 0; border-radius: 7px; padding-inline: 13px; font-size: 12px; }
+.tabGuideChainTabs .tita-uiTabsTrigger[data-state='active'] { border-bottom-color: transparent; background: var(--tita-surface); box-shadow: 0 1px 2px rgb(15 23 42 / .12), inset 0 0 0 1px var(--tita-primary-shadow); }
+
+/* **固定边框。** 高度由这里给，不跟缩放走 —— 缩放只动框里的内容。
+   第一版把高度写成「板高 × 比例」，于是捏合时连边框一起长大/缩小，读起来像整页在动。
+
+   高度取「视口高 - 顶栏 - 内边距 - 一行读法」，上下限兜住：太矮读不了图，太高会把
+   一行读法挤出屏幕。滚动交给容器自己（滚到头会继续滚页面），**不要 `overscroll-behavior: contain`**
+   —— 那会把页面滚动锁在画布里。 */
+.tabGuideCanvasViewport { position: relative; width: 100%; height: clamp(520px, calc(100vh - 124px), 1120px); overflow: auto; background: var(--tita-canvas); cursor: default; scrollbar-color: var(--tita-line-strong) transparent; touch-action: pan-x pan-y; }
+.tabGuideCanvasViewport[data-pannable='true'] { cursor: grab; }
+.tabGuideCanvasViewportPanning { cursor: grabbing !important; user-select: none; }
+
+/* 板：设计尺寸 1172 × 902。缩放由 `transform` 承担 —— 比例是组件按裁剪区算的，
+   不写进 CSS，避免两处各写一份。 */
+.tabGuideCanvasFrame { position: absolute; overflow: hidden; }
+.tabGuideCanvasBoard { position: relative; transform-origin: top left; }
+
+/* 节点详情是画布内的 Inspector：右侧固定，内容独立滚动，不改变图的设计宽度。 */
+.tabGuideInspector { position: absolute; z-index: 3; top: 58px; right: 12px; display: flex; width: min(380px, calc(100% - 24px)); max-height: calc(100% - 70px); flex-direction: column; overflow: hidden; border: 1px solid var(--tita-line); border-radius: 10px; background: color-mix(in srgb, var(--tita-surface) 97%, transparent); box-shadow: 0 12px 28px rgb(16 24 40 / .13); backdrop-filter: blur(5px); }
+.tabGuideInspectorHeader { display: flex; flex: 0 0 auto; align-items: center; justify-content: space-between; gap: 10px; border-bottom: 1px solid var(--tita-line); padding: 9px 10px 9px 13px; color: var(--tita-ink); }
+.tabGuideInspectorHeaderCopy { display: grid; gap: 2px; min-width: 0; }
+.tabGuideInspectorHeaderCopy span { color: var(--tita-ink-faint); font-family: var(--tita-mono); font-size: 9px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
+.tabGuideInspectorHeaderCopy strong { color: var(--tita-ink); font-size: 12px; font-weight: 750; }
+.tabGuideInspectorBody { min-height: 0; overflow-y: auto; padding: 0 14px 18px; scrollbar-color: var(--tita-line-strong) transparent; }
+.tabGuideInspectorBody .tabGuideDetailColumn { gap: 0; }
+.tabGuideInspectorBody .tabGuideDetailColumn .tabGuideDetailGrid,
+.tabGuideInspectorBody .tabGuideDetailColumn .tabGuideSections { grid-template-columns: minmax(0, 1fr); }
+.tabGuideInspectorBody .tabGuideDetailColumn .tabGuideDefinitions > div { grid-template-columns: minmax(0, 1fr); gap: 3px; }
+.tabGuideInspectorBody .tabGuideDetail { border: 0; border-radius: 0; background: transparent; padding: 15px 0 18px; box-shadow: none; }
+.tabGuideInspectorBody .tabGuideConceptRelation { border-right: 0; border-left: 0; border-radius: 0; margin-inline: -14px; padding-inline: 14px; }
+
+/* ---------------------------------------------------------------- 带与连线 */
+
+.tabGuideBoardEdges { position: absolute; top: 0; left: 0; }
+/* 带只是**底纹**，不是卡片：它的作用是让人一眼看出「这几张卡是一条链路上的」。
+   所以它比画布底色只深一档，且不再铺满整屏（裁剪区有多高，它就有多高）。 */
+.tabGuideBoardBand { fill: color-mix(in srgb, var(--tita-surface-muted) 62%, var(--tita-surface)); stroke: var(--tita-line); stroke-width: 1; }
+.tabGuideBoardLaneBadge { fill: var(--tita-surface); stroke: var(--tita-line-strong); stroke-width: 1; }
+.tabGuideBoardLaneBadge-interaction { fill: var(--tita-tone-blue-tint); stroke: var(--tita-tone-blue-line); }
+.tabGuideBoardLaneBadge-knowledge { fill: var(--tita-tone-violet-tint); stroke: var(--tita-tone-violet-line); }
+.tabGuideBoardLaneBadge-evolution { fill: var(--tita-tone-amber-tint); stroke: var(--tita-tone-amber-line); }
+.tabGuideBoardLaneLabel { fill: var(--tita-ink); font-family: var(--tita-font); font-size: 11.5px; font-weight: 720; }
+.tabGuideBoardLaneNote { fill: var(--tita-ink-muted); font-family: var(--tita-mono); font-size: 9.5px; }
+.tabGuideBoardEdge { fill: none; stroke-linecap: round; stroke-linejoin: round; transition: opacity 180ms ease; }
+/* 边标签压在通道上：白底靠 `paint-order: stroke` 描一圈画布色，而不是加一块矩形
+   —— 矩形会盖住底下那条线本身。 */
+.tabGuideBoardEdgeLabel { fill: var(--tita-primary); font-family: var(--tita-font); font-size: 10px; font-weight: 700; text-anchor: middle; paint-order: stroke; stroke: var(--tita-canvas); stroke-width: 5px; stroke-linejoin: round; transition: opacity 180ms ease; }
+
+/* ---------------------------------------------------------------- 环节卡片 */
+
+.tabGuideCard { position: absolute; display: flex; box-sizing: border-box; flex-direction: column; gap: 5px; overflow: hidden; border: 1px solid var(--tita-line); border-radius: 8px; background: var(--tita-surface); padding: 10px 11px 9px; color: var(--tita-ink); font-family: var(--tita-font); text-align: left; cursor: pointer; box-shadow: 0 1px 2px rgb(16 24 40 / .04); transition: background 180ms ease, border-color 140ms ease, box-shadow 140ms ease; }
+.tabGuideCard:hover { border-color: var(--tita-primary-line); box-shadow: 0 2px 8px rgb(16 24 40 / .09); }
+.tabGuideCard:focus-visible { outline: 2px solid var(--tita-primary); outline-offset: 1px; }
+.tabGuideCardSelected { border-color: var(--tita-primary); box-shadow: 0 0 0 3px var(--tita-primary-soft), 0 2px 8px rgb(16 24 40 / .09); }
+/* 次级环节**不靠透明度**：0.14 的不透明文字是读不了的灰，而它们就在旁边，
+   仍然是这张图的一部分。改成「无底 + 无描边 + 灰字」，白底 4.97:1、灰带 4.93:1。 */
+/* 次级卡片：丢底、丢描边，**整体再压一档透明度**。
+   只把字换成灰色是不够的 —— 边上那些线已经淡到 0.1，字还站在同一个深度上，
+   看上去像「没亮的那些反而更清楚」。悬停恢复，因为点它就是要切过去。 */
+.tabGuideCardDim { border-color: transparent; background: transparent; box-shadow: none; opacity: .42; transition: opacity 180ms ease; }
+.tabGuideCardDim:hover, .tabGuideCardDim:focus-visible { opacity: 1; }
+.tabGuideCardDim .tabGuideCardTitle,
+.tabGuideCardDim .tabGuideCardSub,
+.tabGuideCardDim .tabGuideCardStep { color: var(--tita-ink-faint); }
+.tabGuideCardDim .tabGuideCardStep i { color: var(--tita-line-strong); }
+.tabGuideCardDim .tabGuideCardDot { background: var(--tita-line-strong) !important; }
+.tabGuideCardDim:hover { border-color: var(--tita-primary-line); background: var(--tita-surface); }
+.tabGuideCardDim:hover .tabGuideCardTitle { color: var(--tita-ink); }
+.tabGuideCardDim:hover .tabGuideCardSub,
+.tabGuideCardDim:hover .tabGuideCardStep { color: var(--tita-ink-muted); }
+
+.tabGuideCardHead { display: flex; min-width: 0; align-items: center; gap: 6px; }
+.tabGuideCardDot { width: 6px; height: 6px; flex: 0 0 auto; border-radius: 999px; }
+.tabGuideCardTitle { overflow: hidden; min-width: 0; font-size: 12.5px; font-weight: 650; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
+/* 状态词带色，且**四档各有自己的色**：这张图是契约，做没做出来是第一信息。 */
+
+.tabGuideCardSub { display: -webkit-box; overflow: hidden; color: var(--tita-ink-muted); font-size: 11px; line-height: 1.4; -webkit-box-orient: vertical; }
+/* 步骤表：**编号 + 一条**。编号说明顺序，而顺序正是链路的意思。 */
+.tabGuideCardSteps { display: flex; min-height: 0; flex-direction: column; overflow: hidden; }
+.tabGuideCardStep { display: flex; align-items: baseline; gap: 6px; overflow: hidden; color: var(--tita-ink-muted); font-size: 10.5px; line-height: 13.5px; white-space: nowrap; }
+.tabGuideCardStep > i { flex: 0 0 auto; width: 9px; color: var(--tita-primary); font-family: var(--tita-mono); font-size: 9px; font-style: normal; font-weight: 700; text-align: right; }
+.tabGuideCardStep[data-state='partial'] > i { color: var(--tita-tone-amber); }
+.tabGuideCardStep[data-state='todo'],
+.tabGuideCardStep[data-state='todo'] > i { color: var(--tita-ink-faint); }
+.tabGuideCardStepRest { color: var(--tita-ink-faint); font-style: italic; }
+
+/* ---------------------------------------------------------------- 右列 */
+
+.tabGuideDetailColumn { display: grid; min-width: 0; gap: 14px; }
+/* 右列只有 340–400px：详情里那两组两栏网格在这里会被挤成两条窄柱，一律改成单栏。
+   宽度再窄（≤1180px）时两栏工作台已经叠起来，那时再放开成两栏。 */
+.tabGuideDetailColumn .tabGuideDetailGrid, .tabGuideDetailColumn .tabGuideSections { grid-template-columns: minmax(0, 1fr); }
+/* 对象关系图在 400px 的右列里：三个节点 + 两支箭头要挤进一行，
+   否则「Document → Knowledge → WikiCard」会折成两行，链路就读断了。 */
+.tabGuideDetailColumn .tabGuideDefinitions > div { grid-template-columns: minmax(0, 1fr); gap: 3px; }
+
+/* 环节轨：这条链路有哪几环，点一下就走过去。它回答画布回答不了的那个问题 ——
+   画布上一条链路是空间关系，「我现在读的是第几环」是顺序关系。 */
+.tabGuideChainRail { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; border: 1px solid var(--tita-line); border-radius: 10px; background: var(--tita-surface); padding: 9px 12px; }
+.tabGuideChainRailHead { color: var(--tita-ink-faint); font-size: 10px; font-weight: 700; letter-spacing: .06em; }
+.tabGuideChainRail ol { display: flex; flex-wrap: wrap; align-items: center; gap: 3px; margin: 0; padding: 0; list-style: none; }
+.tabGuideChainRail li { display: flex; align-items: center; }
+.tabGuideChainRail li + li::before { content: '›'; margin-right: 3px; color: var(--tita-ink-faint); font-size: 11px; }
+.tabGuideChainRailStep { display: inline-flex; align-items: center; gap: 5px; border: 1px solid transparent; border-radius: 7px; background: transparent; padding: 3px 7px; color: var(--tita-ink-muted); font: inherit; font-size: 11px; cursor: pointer; transition: background 140ms ease, color 140ms ease, border-color 140ms ease; }
+.tabGuideChainRailStep:hover { background: var(--tita-surface-muted); color: var(--tita-ink); }
+.tabGuideChainRailStep:focus-visible { outline: 2px solid var(--tita-focus-ring); outline-offset: 1px; }
+.tabGuideChainRailStep[aria-pressed='true'] { border-color: var(--tita-primary-line); background: var(--tita-primary-soft); color: var(--tita-primary); font-weight: 650; }
+.tabGuideChainRailIndex { color: var(--tita-ink-faint); font-family: var(--tita-mono); font-size: 9.5px; font-variant-numeric: tabular-nums; }
+.tabGuideChainRailStep[aria-pressed='true'] .tabGuideChainRailIndex { color: var(--tita-primary); }
+
+/* ---------------------------------------------------------------- 详情 */
+
+/* 对象关系图。**它只出现在 380px 的 Inspector 里**，所以版面按窄栏定：
+   上面一段话、下面两行节点。三个节点挤一行是硬要求 —— 折成两行就把链路读断了。 */
+.tabGuideConceptRelation { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; border: 1px solid var(--tita-primary-line); border-radius: 12px; background: var(--tita-primary-soft); padding: 14px 15px; }
 .tabGuideConceptRelationIntro h3 { margin: 0; color: var(--tita-ink); font-size: 14px; font-weight: 760; line-height: 1.35; }
 .tabGuideConceptRelationIntro p:last-child { margin: 7px 0 0; color: var(--tita-ink-muted); font-size: 11px; line-height: 1.65; }
 .tabGuideRelationFlow { min-width: 0; }
-.tabGuideRelationRow { display: flex; align-items: center; justify-content: center; gap: 9px; }
-.tabGuideRelationNode { display: inline-flex; height: auto; min-width: 102px; flex-direction: column; align-items: flex-start; gap: 1px; border-color: var(--tita-primary-line); padding: 7px 10px; }
-.tabGuideRelationNode span { color: currentColor; font-family: var(--tita-mono); font-size: 10.5px; font-weight: 760; }
+.tabGuideRelationRow { display: flex; flex-wrap: nowrap; align-items: center; justify-content: flex-start; gap: 6px; }
+.tabGuideRelationNode { display: inline-flex; height: auto; min-width: 0; flex: 1 1 0; flex-direction: column; align-items: flex-start; gap: 1px; border-color: var(--tita-primary-line); padding: 6px 8px; }
+.tabGuideRelationNode span { color: currentColor; font-family: var(--tita-mono); font-size: 9.5px; font-weight: 760; }
 .tabGuideRelationNode small { color: var(--tita-ink-muted); font-size: 9px; font-weight: 500; line-height: 1.3; }
 .tabGuideRelationNode[aria-pressed="true"] small { color: inherit; opacity: .78; }
-.tabGuideRelationArrow { flex: 0 0 auto; color: var(--tita-primary); }
-.tabGuideRelationBranch { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 5px 0; color: var(--tita-primary); font-size: 9.5px; font-weight: 700; }
-.tabGuideRelationRowEvent { justify-content: center; }
-.tabGuideRelationFootnote { margin: 9px 0 0; color: var(--tita-ink-faint); font-size: 10px; line-height: 1.5; text-align: center; }
-.tabGuideDefinitionBlock { border-bottom: 1px solid var(--tita-line); padding: 14px 0 2px; }
+.tabGuideRelationArrow { width: 12px; flex: 0 0 auto; color: var(--tita-primary); }
+.tabGuideRelationBranch { display: flex; align-items: center; justify-content: flex-start; gap: 6px; margin: 5px 0; padding-left: 40px; color: var(--tita-primary); font-size: 9.5px; font-weight: 700; }
+.tabGuideRelationFootnote { margin: 9px 0 0; color: var(--tita-ink-faint); font-size: 10px; line-height: 1.5; text-align: left; }
+
+/* 说明卡：一张卡、几条发丝线，不再是一摞小方块。 */
+.tabGuideDetail { scroll-margin-top: 74px; border: 1px solid var(--tita-line); border-radius: 12px; background: var(--tita-surface); padding: 18px 20px 20px; box-shadow: 0 1px 2px rgb(16 24 40 / .04); }
+.tabGuideDetailHeader { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; gap: 12px; }
+.tabGuideDetailIcon { display: inline-flex; width: 36px; height: 36px; align-items: center; justify-content: center; border: 1px solid var(--tita-primary-line); border-radius: 10px; background: var(--tita-primary-soft); color: var(--tita-primary); }
+.tabGuideDetailIcon-knowledge { color: var(--tita-tone-violet); background: var(--tita-tone-violet-tint); border-color: var(--tita-tone-violet-line); }
+.tabGuideDetailIcon-attribution { color: var(--tita-tone-green); background: var(--tita-tone-green-tint); border-color: var(--tita-tone-green-line); }
+.tabGuideDetailIcon-memory { color: var(--tita-tone-amber); background: var(--tita-tone-amber-tint); border-color: var(--tita-tone-amber-line); }
+.tabGuideDetailIcon-eval { color: var(--tita-tone-blue); background: var(--tita-tone-blue-tint); border-color: var(--tita-tone-blue-line); }
+.tabGuideDetailHeader h2 { margin: 0; color: var(--tita-ink); font-size: 18px; font-weight: 740; letter-spacing: -.025em; line-height: 1.25; }
+.tabGuideDetailSubtitle { margin: 3px 0 0; color: var(--tita-ink-muted); font-size: 11.5px; line-height: 1.5; }
+/* 链路归属：一枚身份色圆点 + 链路名。颜色由行内 style 给（链路身份色在 model.ts 里）。 */
+.tabGuideDetailLane { display: inline-flex; align-items: center; gap: 5px; margin-top: 6px; color: var(--tita-ink-faint); font-size: 10px; }
+.tabGuideDetailLane > i { width: 6px; height: 6px; border-radius: 999px; }
+.tabGuideDetailLaneConcept { color: var(--tita-ink-faint); }
 .tabGuideDefinitionLabel { margin: 0; color: var(--tita-primary); font-family: var(--tita-mono); font-size: 10px; font-weight: 760; letter-spacing: .06em; }
-.tabGuideDetailGrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 28px; border-bottom: 1px solid var(--tita-line); }
-.tabGuideLogicSection { min-width: 0; padding: 15px 0 13px; }
-.tabGuideLogicSection h3 { margin: 0 0 8px; color: var(--tita-ink); font-size: 12.5px; font-weight: 720; }
+.tabGuideSummary { margin: 0; color: var(--tita-ink-muted); font-size: 12px; line-height: 1.75; }
+.tabGuideDefinitionBlock { display: grid; gap: 7px; border-bottom: 1px solid var(--tita-line); padding: 15px 0 15px; }
+/* 输入 → 输出：并排两格，中间一支箭头。竖着堆会把这段拉成两行半高，
+   而它只是「凭什么能工作」的一句话。 */
+.tabGuideFacts { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 10px; border-bottom: 1px solid var(--tita-line); padding: 13px 0; }
+.tabGuideDetailColumn .tabGuideFacts { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
+.tabGuideFacts > div { display: grid; min-width: 0; gap: 3px; }
+.tabGuideFacts > svg { flex: 0 0 auto; color: var(--tita-ink-faint); }
+.tabGuideDetailColumn .tabGuideFacts > svg { transform: none; }
+.tabGuideFacts span { color: var(--tita-ink-faint); font-size: 9.5px; font-weight: 700; letter-spacing: .06em; }
+.tabGuideFacts strong { color: var(--tita-ink); font-family: var(--tita-mono); font-size: 10.5px; font-weight: 650; line-height: 1.5; }
+.tabGuideDetailGrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 28px; }
+.tabGuideLogicSection { min-width: 0; border-bottom: 1px solid var(--tita-line); padding: 15px 0 14px; }
+.tabGuideLogicSection h3 { margin: 0 0 10px; color: var(--tita-ink); font-size: 12.5px; font-weight: 720; }
 .tabGuideStatusNote { margin: 0; color: var(--tita-ink-muted); font-size: 11.5px; line-height: 1.7; }
-.tabGuideStepList { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
-.tabGuideStep { display: grid; grid-template-columns: 17px minmax(0, 1fr); gap: 7px; align-items: start; color: var(--tita-tone-green); }
+/* 步骤是一条时间线：图标列下面拉一条发丝线，把「先后」画出来。 */
+.tabGuideStepList { display: grid; gap: 11px; margin: 0; padding: 0; list-style: none; }
+.tabGuideStep { position: relative; display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 8px; align-items: start; color: var(--tita-tone-green); }
+.tabGuideStep:not(:last-child)::after { content: ''; position: absolute; top: 18px; bottom: -11px; left: 7px; width: 1px; background: var(--tita-line); }
 .tabGuideStep-partial { color: var(--tita-tone-amber); }
 .tabGuideStep-todo { color: var(--tita-ink-faint); }
 .tabGuideStep > span { display: grid; gap: 2px; }
 .tabGuideStep strong { color: var(--tita-ink); font-size: 11px; font-weight: 700; line-height: 1.45; }
 .tabGuideStep small { color: var(--tita-ink-muted); font-size: 10.5px; line-height: 1.55; }
-.tabGuideBand { fill: var(--tita-surface-muted); stroke: var(--tita-line); stroke-width: 1; }
-.tabGuideLaneLabel { fill: var(--tita-ink-faint); font-family: var(--tita-font); font-size: 11px; font-weight: 700; letter-spacing: .02em; }
-.tabGuideConnector { fill: none; stroke: var(--tita-line-strong); stroke-width: 1.4; }
-.tabGuideConnectorCross { stroke: var(--tita-primary); stroke-width: 1.6; }
-.tabGuideConnectorFeedback { stroke: var(--tita-ink-faint); stroke-dasharray: 5 5; stroke-width: 1.4; }
-.tabGuideConnectorLabel { fill: var(--tita-ink-faint); font-family: var(--tita-font); font-size: 10px; text-anchor: middle; }
-.tabGuideNode { cursor: pointer; outline: none; }
-.tabGuideNodeRect { fill: var(--tita-surface); stroke: var(--tita-line-strong); stroke-width: 1.2; transition: fill .16s ease, stroke .16s ease, stroke-width .16s ease, filter .16s ease; }
-.tabGuideNode:hover .tabGuideNodeRect { fill: var(--tita-surface-muted); stroke: var(--tita-primary-line); }
-.tabGuideNode:focus-visible .tabGuideNodeRect { stroke: var(--tita-primary); stroke-width: 2; }
-.tabGuideNodeSelected .tabGuideNodeRect { fill: var(--tita-primary-soft); stroke: var(--tita-primary); stroke-width: 2; filter: drop-shadow(0 3px 7px rgb(15 23 42 / .09)); }
-.tabGuideNodeTitle { fill: var(--tita-ink); font-family: var(--tita-font); font-size: 16px; font-weight: 760; }
-.tabGuideNodeSubtitle { fill: var(--tita-ink-muted); font-family: var(--tita-font); font-size: 11px; }
-.tabGuideNodeAction { fill: var(--tita-primary); font-family: var(--tita-font); font-size: 10px; font-weight: 700; opacity: .78; }
-.tabGuideNodeSelected .tabGuideNodeAction { opacity: 1; }
-.tabGuideNode-intent .tabGuideNodeRect { stroke: var(--tita-tone-blue-line); }
-.tabGuideNode-knowledge .tabGuideNodeRect { stroke: var(--tita-tone-violet-line); }
-.tabGuideNode-attribution .tabGuideNodeRect { stroke: var(--tita-tone-green-line); }
-.tabGuideNode-memory .tabGuideNodeRect { stroke: var(--tita-tone-amber-line); }
-.tabGuideNode-eval .tabGuideNodeRect { stroke: var(--tita-tone-blue-line); }
-.tabGuideNodeSelected .tabGuideNodeRect { stroke: var(--tita-primary); }
-.tabGuideStaticNode { pointer-events: none; }
-.tabGuideStaticNodeRect { fill: var(--tita-surface); stroke: var(--tita-line-strong); stroke-width: 1.1; }
-.tabGuideStaticNode-document .tabGuideStaticNodeRect { stroke: var(--tita-tone-blue-line); }
-.tabGuideStaticNode-card .tabGuideStaticNodeRect { stroke: var(--tita-tone-green-line); }
-.tabGuideStaticNode-event .tabGuideStaticNodeRect { stroke: var(--tita-tone-amber-line); }
-.tabGuideStaticNodeTitle { fill: var(--tita-ink); font-family: var(--tita-font); font-size: 15px; font-weight: 720; }
-.tabGuideStaticNodeSubtitle { fill: var(--tita-ink-muted); font-family: var(--tita-font); font-size: 10.5px; }
-.tabGuideMapHint { display: flex; align-items: center; gap: 7px; margin: -9px 0 0; color: var(--tita-ink-faint); font-size: 10.5px; }
-.tabGuideHintDot { display: inline-block; width: 7px; height: 7px; border: 2px solid var(--tita-primary); border-radius: 999px; }
-.tabGuideDetail { scroll-margin-top: 70px; border-top: 2px solid var(--tita-primary); background: var(--tita-surface); padding: 20px 22px 22px; }
-.tabGuideDetailHeader { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; gap: 13px; }
-.tabGuideDetailIcon { display: inline-flex; width: 40px; height: 40px; align-items: center; justify-content: center; border: 1px solid var(--tita-primary-line); border-radius: 11px; background: var(--tita-primary-soft); color: var(--tita-primary); }
-.tabGuideDetailIcon-knowledge { color: var(--tita-tone-violet); background: var(--tita-tone-violet-tint); border-color: var(--tita-tone-violet-line); }
-.tabGuideDetailIcon-attribution { color: var(--tita-tone-green); background: var(--tita-tone-green-tint); border-color: var(--tita-tone-green-line); }
-.tabGuideDetailIcon-memory { color: var(--tita-tone-amber); background: var(--tita-tone-amber-tint); border-color: var(--tita-tone-amber-line); }
-.tabGuideDetailIcon-eval { color: var(--tita-tone-blue); background: var(--tita-tone-blue-tint); border-color: var(--tita-tone-blue-line); }
-.tabGuideDetailHeader .tabGuideEyebrow { margin-bottom: 2px; }
-.tabGuideDetailHeader h2 { margin: 0; color: var(--tita-ink); font-size: 20px; font-weight: 750; letter-spacing: -.025em; line-height: 1.25; }
-.tabGuideDetailSubtitle { margin: 2px 0 0; color: var(--tita-ink-muted); font-size: 11.5px; }
-.tabGuideDetailState { display: inline-flex; align-items: center; gap: 5px; color: var(--tita-tone-green); font-size: 10.5px; white-space: nowrap; }
-.tabGuideSummary { max-width: 72ch; margin: 16px 0 14px; color: var(--tita-ink-muted); font-size: 12px; line-height: 1.75; }
-.tabGuideFacts { display: flex; align-items: center; gap: 13px; border-top: 1px solid var(--tita-line); border-bottom: 1px solid var(--tita-line); padding: 13px 0; }
-.tabGuideFacts > div { display: grid; min-width: 0; gap: 3px; }
-.tabGuideFacts > div:first-child { flex: 1 1 0; }
-.tabGuideFacts > div:last-child { flex: 1.2 1 0; }
-.tabGuideFacts > svg { flex: 0 0 auto; color: var(--tita-primary); }
-.tabGuideFacts span { color: var(--tita-ink-faint); font-size: 10px; }
-.tabGuideFacts strong { color: var(--tita-ink); font-family: var(--tita-mono); font-size: 10.5px; font-weight: 650; line-height: 1.5; }
 .tabGuideSections { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 28px; }
-.tabGuideSection { border-bottom: 1px solid var(--tita-line); padding: 15px 0 13px; }
+.tabGuideSection { border-bottom: 1px solid var(--tita-line); padding: 15px 0 14px; }
 .tabGuideSectionWide { grid-column: 1 / -1; }
-.tabGuideSection h3 { margin: 0 0 7px; color: var(--tita-ink); font-size: 12.5px; font-weight: 720; }
-.tabGuideDefinitions { display: grid; margin: 0; border-top: 1px solid var(--tita-line); }
+.tabGuideSections > .tabGuideSection:last-child { border-bottom: 0; padding-bottom: 0; }
+.tabGuideSection h3 { margin: 0 0 8px; color: var(--tita-ink); font-size: 12.5px; font-weight: 720; }
+.tabGuideDefinitions { display: grid; margin: 0; }
 .tabGuideDefinitions > div { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 13px; align-items: baseline; border-bottom: 1px solid var(--tita-line); padding: 9px 0; }
+.tabGuideDefinitions > div:last-child { border-bottom: 0; padding-bottom: 0; }
 .tabGuideDefinitions dt { color: var(--tita-primary); font-family: var(--tita-mono); font-size: 10.5px; font-weight: 700; }
 .tabGuideDefinitions dd { margin: 0; color: var(--tita-ink-muted); font-size: 11.5px; line-height: 1.65; }
+/* 长提示词先折起来：380px 的栏里整段铺开会占掉好几屏，而它是参考材料不是正文。 */
+.tabGuidePromptDetails { border: 1px solid var(--tita-line); border-radius: 8px; background: var(--tita-surface-muted); }
+.tabGuidePromptDetails > summary { cursor: pointer; padding: 9px 13px; color: var(--tita-primary); font-size: 11px; font-weight: 650; list-style: none; }
+.tabGuidePromptDetails > summary::-webkit-details-marker { display: none; }
+.tabGuidePromptDetails > summary::before { content: '▸'; display: inline-block; width: 14px; color: var(--tita-ink-faint); }
+.tabGuidePromptDetails[open] > summary { border-bottom: 1px solid var(--tita-line); }
+.tabGuidePromptDetails[open] > summary::before { content: '▾'; }
+.tabGuidePromptDetails > summary:hover { color: var(--tita-primary-hover); }
+.tabGuidePromptDetails > summary:focus-visible { outline: 2px solid var(--tita-focus-ring); outline-offset: -2px; }
+.tabGuidePromptDetails .tabGuidePrompt { border: 0; border-radius: 0; background: transparent; }
+
 .tabGuidePrompt { overflow-x: auto; margin: 0; border: 1px solid var(--tita-line); border-radius: 8px; background: var(--tita-surface-muted); padding: 13px 14px; color: var(--tita-ink); font-family: var(--tita-mono); font-size: 10.5px; line-height: 1.7; white-space: pre-wrap; }
 .tabGuidePrompt + ul { margin-top: 9px; }
 .tabGuideSection ul { display: grid; gap: 6px; margin: 0; padding: 0 0 0 17px; color: var(--tita-ink-muted); font-size: 11.5px; line-height: 1.65; }
 .tabGuideSection li::marker { color: var(--tita-primary); }
 
+/* 两栏放不下时**叠成一栏**：画布拿到整幅宽度，说明落到它下面。
+   断点取 1520 而不是 1180：左列要装下 1172px 宽的整图，窄于 1520 时两栏会让图缩到
+   「一眼看全但读不出步骤」，那还不如叠起来。 */
+@media (max-width: 1520px) {
+  .tabGuideDetailColumn .tabGuideDetailGrid, .tabGuideDetailColumn .tabGuideSections { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+  .tabGuideDetailColumn .tabGuideDefinitions > div { grid-template-columns: 112px minmax(0, 1fr); gap: 13px; }
+}
+
+/* 窄到放不下「图 + 右栏」时，Inspector **落到画布下面**，不再浮在图上。
+   阈值与组件里的 `BESIDE_MIN_WIDTH` 是同一个数，两处必须一起改。 */
+@container (max-width: 1100px) {
+  .tabGuideInspector { position: static; width: auto; max-height: none; margin: 0 14px 14px; box-shadow: none; }
+  .tabGuideInspectorBody { overflow: visible; }
+}
+
+@media (max-width: 820px) {
+  .tabGuideDetailColumn .tabGuideDetailGrid, .tabGuideDetailColumn .tabGuideSections { grid-template-columns: minmax(0, 1fr); }
+  .tabGuideDetailColumn .tabGuideDefinitions > div { grid-template-columns: minmax(0, 1fr); gap: 3px; }
+}
+
 @media (max-width: 820px) {
   .attributionGuideIntro { grid-template-columns: auto minmax(0, 1fr); }
   .attributionGuideFormula { grid-column: 2; justify-items: start; text-align: left; }
-  .attributionGuidePipeline { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
-  .attributionGuidePipeline > :nth-child(6) { display: none; }
-  .attributionGuidePipeline > :nth-child(7) { grid-column: 2 / 4; }
+  .attributionGuidePipeline { grid-template-columns: 1fr; gap: 12px; }
+  .attributionGuidePipeline > .attributionGuideConnector svg { transform: rotate(90deg); }
   .attributionGuideField { grid-template-columns: 90px minmax(0, 1fr); gap: 5px 12px; }
   .attributionGuideField span { grid-column: 2; }
 }
@@ -314,9 +648,7 @@ body {
   .attributionGuideFormula { grid-column: auto; }
   .attributionGuideIntroCopy h2 { font-size: 19px; }
   .attributionGuidePipeline { grid-template-columns: 1fr; gap: 12px; padding: 14px; }
-  .attributionGuidePipeline > :nth-child(2), .attributionGuidePipeline > :nth-child(4), .attributionGuidePipeline > :nth-child(6) { display: grid; transform: none; }
   .attributionGuidePipeline > .attributionGuideConnector svg { transform: rotate(90deg); }
-  .attributionGuidePipeline > :nth-child(7) { grid-column: auto; }
   .attributionGuideConnector span { width: auto; }
   .attributionGuideRelations { display: grid; }
   .attributionGuideCaseIntro { display: grid; gap: 7px; }
@@ -424,25 +756,17 @@ body {
 @media (max-width: 760px) {
   .page-main { padding-inline: 20px; }
   .page-bar { padding-inline: 20px; }
-  .tabGuideIntro { grid-template-columns: 1fr; gap: 12px; }
-  .tabGuideIntroMeta { border-top: 1px solid var(--tita-line); border-left: 0; padding: 11px 0 0; }
   .tabGuideDetail { padding-inline: 17px; }
-  .tabGuideConceptRelation { grid-template-columns: 1fr; gap: 13px; }
-  .tabGuideConceptRelationIntro { max-width: 62ch; }
-  .tabGuideModuleRail { grid-template-columns: 1fr; gap: 11px; }
-  .tabGuideModuleButtons { justify-content: flex-start; }
   .trialPageIntro { grid-template-columns: auto minmax(0, 1fr); }
   .trialPageBoundary { grid-column: 2; justify-items: start; padding-top: 0; text-align: left; }
   .trialEmptyState { grid-template-columns: 1fr; gap: 16px; }
 }
 
+
 @media (max-width: 560px) {
   .page-main { padding: 20px 14px 90px; }
   .page-bar { padding: 11px 14px; }
-  .tabGuideIntro h2 { font-size: 21px; }
-  .tabGuideMap { margin-inline: -2px; padding-inline: 10px; }
   .tabGuideDetailHeader { grid-template-columns: auto minmax(0, 1fr); }
-  .tabGuideDetailState { grid-column: 2; }
   .tabGuideDetailGrid { grid-template-columns: 1fr; }
   .tabGuideFacts { align-items: stretch; flex-direction: column; gap: 8px; }
   .tabGuideFacts > svg { display: none; }