dsh-data-domain-knowledge 0.1.0-alpha.2 → 0.1.0-alpha.4

package/src/client/styles.css

@@ -125,11 +125,24 @@ body {
   box-shadow: 0 1px 2px rgb(15 23 42 / .12), inset 0 0 0 1px var(--tita-primary-shadow);
 }
 .tita-tabsList .tita-uiTabsTrigger[data-state='active'] svg { opacity: 1; }
-/* 抽屉里那一枚是**行内次级控件**：它站在「内容」这个小节标题旁边，所以比顶栏那枚小
-   一号（顶栏是面板级导航，这里是同一个分块里的两种读法）。放在基础规则之后覆盖 ——
-   选择器权重相同，靠顺序取胜。 */
+/* 抽屉里那一枚是**行内次级控件**：它站在正文块自己的「读法工具栏」上（0042 之前挤在
+   「内容」小节标题那一行里），所以比顶栏那枚小一号（顶栏是面板级导航，这里是同一个
+   分块里的两种读法）。放在基础规则之后覆盖 —— 选择器权重相同，靠顺序取胜。 */
 .tita-kbViewTabs { min-height: 24px; }
-.tita-kbViewTabs .tita-uiTabsTrigger { min-height: 20px; padding: 0 8px; font-size: 11px; }
+.tita-kbViewTabs .tita-uiTabsTrigger { min-height: 22px; padding: 0 9px; font-size: 11px; }
+/*
+ * wiki 栏内部的二级 tab（0042）：**要比面板一级 tab 明显低一层**。
+ * 两排 tab 同时出现在一屏里时，层级差不是好不好看的问题，是会不会点错的问题 ——
+ * 所以这里用更小的字、更矮的按钮、更轻的底色，且左对齐（一级 tab 也是左对齐）。
+ */
+.tita-kbSubTabs { display: grid; gap: 10px; }
+.tita-kbSubTabsList { justify-self: start; min-height: 28px; }
+.tita-kbSubTabsList .tita-uiTabsTrigger { min-height: 24px; padding: 0 12px; font-size: 11.5px; }
+/* 「新页面打开」是抽屉头上的**出口**，不是主操作：它和标题同一行、比面板级按钮小一号，
+   不去抢标题。0042 之前它长在「内容」小节里，且**只在正文被截断时**才渲染 ——
+   于是短文档上它根本不存在（用户报告的原话是「那个按钮我也没看到」）。
+   入口的显隐不能依赖内容长度：位置与可见性稳定，人才学得到「全文在那个整页里」。 */
+.tita-drawerHeadAction { height: 26px; min-height: 26px; flex: 0 0 auto; gap: 4px; padding: 0 9px; font-size: 11px; }
 
 /* ---------------------------------------------------------------- header */
 /* 标题行只占一行：图标 + 标题 + 一句说明。状态徽标与 ⋯ 菜单已撤（0022）。 */
@@ -328,17 +341,76 @@ body {
  */
 .tita-drawer { width: min(440px, 100vw); }
 /*
- * 正文分块：块与块之间 14px。
+ * 抽屉头：左边是「这是什么」（标题 + 路径），右边是**出口**（新页面打开）。
+ * `min-width: 0` 是必需的：路径可以很长，没有它这一行会被撑破而不是省略。
+ */
+.tita-drawerHead { display: flex; min-width: 0; flex: 1 1 auto; align-items: flex-start; justify-content: space-between; gap: 10px; }
+.tita-drawerHeadCopy { min-width: 0; flex: 1 1 auto; }
+/*
+ * 编译那一枚按钮的下拉（0042）。
+ *
+ * **宽度不能跟触发器走。** 共享组件的 `DropdownMenuContent` 默认是
+ * `w-(--radix-dropdown-menu-trigger-width)` —— 触发器是「编译 ⌄」这么宽的一枚按钮，
+ * 于是菜单里每一句话都被挤进 ~110px 的竖条里，一句话断成六行（实测截图就是这样）。
+ * 这里把宽度还给菜单自己，并把每一项排成「名字 + 一行说明」。
+ */
+.tita-kbCompileMenu { width: 268px; max-width: calc(100vw - 24px); }
+.tita-kbCompileMenu [data-slot='dropdown-menu-item'] { display: block; padding: 6px 8px; }
+.tita-kbCompileItem { display: grid; gap: 1px; }
+.tita-kbCompileItem b { color: var(--tita-ink); font-size: 11.5px; font-weight: 650; }
+.tita-kbCompileItem small { color: var(--tita-ink-muted); font-size: 10.5px; line-height: 1.5; }
+/*
+ * 正文分块：块与块之间 14px，块与块之间**画一条分隔线**（0042）。
  *
  * 它必须挂在抽屉正文上、而**分块容器**挂在每一块上 —— 因为一块（比如「元信息」）是
  * 「小标题 + 它自己的表」两个同级节点，只在外层给统一 gap 会把标题和它自己的内容也
  * 拉开 14px，读起来标题就不再管着下面那块了。
+ *
+ * 0042 补上分隔线：三块的分界原来只靠 14px 的间距，而小节头与正文又是同字号，
+ * 于是一条长抽屉读起来是一整段文字。分隔线是「这三块是三件事」最省字的表达。
  */
 .tita-drawerStack { display: grid; gap: 14px; align-content: start; }
-/* 一块内部：标题与自己的内容贴紧。 */
-.tita-drawerSection { display: grid; gap: 6px; align-content: start; }
+/* 一块内部：标题与自己的内容贴紧。上分隔线画在块上，第一块不画（它顶着抽屉头）。 */
+.tita-drawerSection { display: grid; gap: 6px; align-content: start; border-top: 1px solid var(--tita-line); padding-top: 12px; }
+.tita-drawerSection:first-child { border-top: 0; padding-top: 0; }
 /* 分块之后，标题的上边距交给块间距 —— 否则 14 + 16 会在两处叠出一个空洞。 */
 .tita-drawerSection > .tita-kbSubHead { margin: 0; }
+
+/*
+ * 小节头：**三种层级里的中间那层**。标题 15px（UI 包的 `uiDrawerTitle`）/
+ * 小节头 13px / 正文 12px。
+ *
+ * 0042 之前这里是 12px/700 —— 与正文**同字号**，只差一个字重，中间也没有分隔线，
+ * 所以「内容」两个字读起来是正文的第 0 行。字号差 1px 是刻意的：再大就和小节里的
+ * 正文抢，再小就回到原来那个问题。
+ */
+.tita-drawerSubHead { display: flex; min-width: 0; align-items: baseline; justify-content: space-between; gap: 8px; }
+.tita-drawerSubHead h4 { display: inline-flex; min-width: 0; align-items: center; gap: 6px; margin: 0; color: var(--tita-ink); font-size: 13px; font-weight: 700; }
+.tita-drawerSubHead h4 svg { flex: 0 0 auto; color: var(--tita-ink-faint); }
+/* 小节右侧的**一组**东西（事实 + 动作）。成组是为了让 `space-between` 只分一次：
+   三个平级子节点会把中间那个摆到行正中，看起来像另一栏。 */
+.tita-drawerHeadAside { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 8px; }
+
+/* 小节右侧的事实（字符数 / 条目数）：与标题同一行、比标题轻。 */
+.tita-drawerHeadFact { flex: 0 0 auto; color: var(--tita-ink-faint); font-size: 10.5px; font-variant-numeric: tabular-nums; }
+
+/* 读法工具栏：正文块自己的两种读法（Markdown / 文本）+ 本地展开。 */
+.tita-drawerToolbar { display: flex; min-width: 0; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
+.tita-drawerMore { height: 22px; min-height: 22px; flex: 0 0 auto; gap: 4px; padding: 0 7px; font-size: 10.5px; }
+
+/*
+ * 正文块：**锁高内滚 + 阅读栏上限。**
+ *
+ * 0042 之前正文没有高度上限，整条抽屉体（`.tita-uiDrawerBody`）是一根长滚动条 ——
+ * 正文有多长，「版本」就被推到多远，而版本正是要动手的地方（回滚）。
+ * 现在正文自己滚，下面的分块位置不再随正文长度漂移。
+ * `min(45vh, 460px)`：矮窗口下按视口走，高窗口下不占满整屏。
+ *
+ * `max-width: 68ch` 是另一半：抽屉壳**可以拖宽**（宽表格需要宽度，那是壳的属性），
+ * 但正文的行宽不该跟着长 —— 12px 下一行 68 个字符，是能一眼读完的长度。
+ * 这个上限只在把抽屉拖宽之后才咬得住，默认 440px 下正文本来就更窄。
+ */
+.tita-drawerBody { max-height: min(45vh, 460px); max-width: 68ch; overflow: auto; overscroll-behavior: contain; }
 .tita-toneBlue { background: var(--tita-primary-soft); color: var(--tita-primary); }
 .tita-toneViolet { background: var(--tita-tone-violet-tint); color: var(--tita-tone-violet); }
 .tita-toneGreen { background: var(--tita-tone-green-tint); color: var(--tita-tone-green); }
@@ -381,15 +453,19 @@ body {
  * 把 `max-w-xs` 删掉，限宽于是彻底失效（实测宽度从 320px 变成 996px）。双写是这里唯一
  * 与样式表顺序无关的写法。
  *
- * 限宽**不往窄了压**（这里 320px，和 UI 包默认同值）：说明要出现在图标**上方**，而第一
- * 小节的标题离视口顶部只有 80 多像素 —— 压到 260px 会多出一行，整块高度超过那段空间，
- * 顶部就被视口裁掉（实测裁了 21px）。让它宽一点、少一行，才既在上方又不被裁。
+ * 限宽**不往窄了压**（这里 320px，和 UI 包默认同值）：说明是整句中文，窄一档就多一行，
+ * 而多出来的那行会把它推向视口边缘。位置本身现在由 radix 决定（上方放不下就翻到下方，
+ * 见 `InfoHint`），所以这里只需要管「一行多长」这一件事。
  */
 .tita-infoHintPanel.tita-infoHintPanel { display: block; max-width: 320px; padding: 8px 12px; line-height: 1.65; text-align: left; white-space: normal; }
 /* 小节标题旁的说明入口：图标常驻、说明悬停才出现（见 `InfoHint`）。 */
 .tita-infoHint { display: inline-flex; width: 16px; height: 16px; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--tita-subtle); cursor: help; }
 .tita-infoHint:hover { background: var(--tita-surface-muted); color: var(--tita-ink-muted); }
 .tita-infoHint:focus-visible { outline: 2px solid var(--tita-blue); outline-offset: 1px; }
+/* 标题里的那枚（`<h3>来源类型<InfoHint/></h3>`、设置小节同理）：与标题文字留一格气，
+   并对齐文字的光学中线 —— 它与标题同在一行，不是独立一行。 */
+.tita-settingsSectionHeader h3 > .tita-infoHint,
+.tita-settingsSectionHeader h4 > .tita-infoHint { margin-left: 6px; vertical-align: -2px; }
 .tita-settingsSectionHeader p { margin: 4px 0 0; color: var(--tita-ink-muted); font-size: 11px; }
 .tita-settingMeta { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 4px; color: var(--tita-ink-faint); font-size: 10px; text-align: right; }
 /* 写失败时那一行不是「状态」，是**待处理的事**，所以给它警示色而不是灰。 */
@@ -405,17 +481,18 @@ body {
  * 一列之后每项的宽度、标签基线、控件左边缘都一致，占两列那个变体也就没有意义了。
  */
 .tita-settingsGrid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
-.tita-settingField { display: grid; min-width: 0; gap: 5px; }
-.tita-settingField > span { color: var(--tita-ink-muted); font-size: 11px; font-weight: 600; }
-.tita-settingField input { width: 100%; min-height: 34px; border: 1px solid var(--tita-line-strong); border-radius: 8px; background: var(--tita-surface); color: var(--tita-ink); padding: 0 9px; font: inherit; font-size: 12px; }
-.tita-settingField input:disabled { background: var(--tita-surface-muted); color: var(--tita-ink-faint); cursor: not-allowed; }
-/* 只读的路径框：它读起来必须像「值」，不像「待填的空」—— 所以底色是沉的，
-   边框是浅的，光标是文本光标（能选中复制）。 */
-.tita-settingField input[readonly] { border-color: var(--tita-line); background: var(--tita-surface-muted); color: var(--tita-ink); cursor: text; }
-/* 开关不该被网格拉伸成整行宽：它是控件本身，不是「一整行」。 */
-.tita-settingField > button[role='switch'] { justify-self: start; }
-/* 字段说明：贴在字段下面，一行小字。 */
-.tita-settingHint { color: var(--tita-ink-faint); font-size: 10px; line-height: 1.5; }
+/*
+ * 字段本身（标题 / 控件 / 说明）撤掉了，改用 `packages/ui` 的 `Field`。
+ *
+ * 这里曾经有过一整套 `.tita-settingField` + `.tita-settingHint`：标题 11px/600、
+ * 说明 10px、输入框圆角 8px / 底色 `--tita-surface`。而弹层里的 `.tita-kbField` 是
+ * 12px/400 的标题、11px 的说明，`Input` 自己是 7px 圆角 / 白底 —— **同一个 `Input`
+ * 组件，放进设置行和放进弹层就长两个样**，而那个分叉完全由「它套在哪个容器里」决定。
+ * `.tita-settingField input` 那条还以 (0,1,1) 压过 `Input` 自己的工具类，所以设置抽屉
+ * 里的输入框实际渲染的是 8px 圆角，不是共享控件声明的 7px。
+ *
+ * 现在只有一处定义（`Field`），边框、圆角、字号、只读态都从共享控件来。
+ */
 
 /* --------------------------------------------------- 根路径：选择 + 预览 */
 .tita-pickerRow { display: flex; min-width: 0; align-items: center; gap: 8px; }
@@ -517,7 +594,6 @@ body {
   .tita-skillGrid { grid-template-columns: minmax(0, 1fr); }
   .tita-skillHero { align-items: flex-start; flex-wrap: wrap; }
   .tita-skillHero > .tita-uiButton { width: 100%; }
-  .tita-settingFieldWide { grid-column: auto; }
   .tita-inputRow { align-items: stretch; flex-direction: column; }
   .tita-inputRow .tita-uiButton { width: 100%; }
 }
@@ -557,6 +633,14 @@ body {
 .tita-kbEyebrow { display: inline-flex; align-items: center; gap: 5px; color: var(--tita-ink-faint); font-size: 9.5px; font-weight: 700; letter-spacing: .09em; }
 .tita-kbCardHead h3 { margin: 3px 0 0; color: var(--tita-ink); font-size: 14px; font-weight: 750; letter-spacing: -.01em; }
 .tita-kbCount { flex: 0 0 auto; color: var(--tita-ink-faint); font-size: 11px; }
+/*
+ * 行右侧的次要事实（类型 · 时间 / N 个来源 / N 张）。
+ *
+ * 0042 补的定义：这个类名被五处用着（卡片行、原文抽屉的编译产物、意图任务、
+ * 类型定义、Wiki 类型编辑器）却**一直没有样式** —— 于是它只传递了一个名字，
+ * 右对齐与「比主文字轻」全靠父级的 flex 碰运气。一次定义到位。
+ */
+.tita-kbTypeCount { flex: 0 0 auto; margin-left: auto; color: var(--tita-ink-faint); font-size: 10.5px; white-space: nowrap; font-variant-numeric: tabular-nums; }
 .tita-kbHint { margin: 8px 0 0; color: var(--tita-ink-muted); font-size: 11px; line-height: 1.65; }
 .tita-kbHint b { color: var(--tita-ink-muted); }
 .tita-kbEmpty { margin: 12px 0 0; border: 1px dashed var(--tita-line); border-radius: 9px; color: var(--tita-ink-faint); padding: 12px; font-size: 11.5px; text-align: center; }
@@ -579,12 +663,11 @@ body {
 .tita-kbPromptSteps { margin: 8px 0 0; padding-left: 18px; color: var(--tita-ink); font-size: 11px; line-height: 1.85; }
 .tita-kbPromptSteps code { border-radius: 4px; background: var(--tita-surface-muted); padding: 0 4px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10px; }
 .tita-kbPromptOff { color: var(--tita-danger); text-decoration: line-through; }
-.tita-kbTextarea { width: 100%; min-height: 58px; resize: vertical; border: 1px solid var(--tita-line); border-radius: 8px; background: var(--tita-surface); color: var(--tita-ink); padding: 7px 9px; font-family: inherit; font-size: 11.5px; line-height: 1.6; }
-.tita-kbTextarea:focus { border-color: var(--tita-primary-line); outline: 2px solid var(--tita-focus-ring); }
 .tita-kbSourcePick { display: inline-flex; align-items: center; gap: 6px; color: var(--tita-ink-muted); font-size: 11px; }
 .tita-kbSourcePick select { min-width: 150px; }
-.tita-kbSourceAdd { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-top: 10px; }
-.tita-kbSourceAdd .tita-kbHint { margin: 0; }
+/* 「新增类型」现在独占这一行：它旁边那段常驻说明搬进了节标题的说明图标，
+   所以这里只负责把按钮放到右侧（原来是 `space-between` 把说明和按钮分到两头）。 */
+.tita-kbSourceAdd { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; margin-top: 10px; }
 
 /* 筛选行：搜索 · 来源分类 · 文件类型 · 刷新 · 添加文件。
    0027 之前这里是两行（上传行 + 筛选行），而「来源分类」在两个地方各有一个控件；
@@ -606,14 +689,22 @@ body {
 .tita-kbDocMeta { overflow: hidden; color: var(--tita-ink-faint); font-size: 10.5px; text-overflow: ellipsis; white-space: nowrap; }
 .tita-kbDocActions { display: flex; flex: 0 0 auto; align-items: center; gap: 2px; }
 
+/* 弹层里的字段**一格一行**。字段本身（标题 / 控件 / 说明）由 `packages/ui` 的
+   `Field` 提供，这里只剩「一组字段之间的间距」—— `.tita-kbField` 撤掉了，
+   它和 `Field` 是同一件事的两份写法。 */
 .tita-kbForm { display: grid; gap: 10px; }
-.tita-kbField { display: grid; gap: 5px; }
+/* 元数据字段声明（0048）：一行 = 键 / 显示名 / 必填 / 删除。
+   键那一列给得比显示名宽 —— 它要装 `sources[0].last_modified` 这种路径。 */
+.tita-kbFieldRows { display: grid; gap: 6px; justify-items: start; }
+.tita-kbFieldRow { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr) auto auto; align-items: center; gap: 6px; width: 100%; }
+.tita-kbFieldRequired { display: inline-flex; align-items: center; gap: 4px; color: var(--tita-ink-faint); font-size: 11px; white-space: nowrap; }
 .tita-kbKv { display: grid; margin: 0; gap: 4px; }
 .tita-kbKv > div { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 8px; }
 .tita-kbKv dt { color: var(--tita-ink-faint); font-size: 11px; }
 .tita-kbKv dd { margin: 0; overflow-wrap: anywhere; color: var(--tita-ink); font-size: 11.5px; }
 .tita-kbCode { border-radius: 4px; background: var(--tita-surface-muted); padding: 1px 4px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10px; overflow-wrap: anywhere; }
-.tita-kbAssets { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; margin-top: 12px; }
+.tita-kbAssetsNote { margin: 12px 0 0; color: var(--tita-ink-muted); font-size: 10.5px; }
+.tita-kbAssets { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; margin-top: 12px; max-height: 260px; overflow: auto; }
 .tita-kbAsset { margin: 0; border: 1px solid var(--tita-line); border-radius: 8px; padding: 4px; }
 .tita-kbAsset img { display: block; width: 100%; height: 62px; object-fit: contain; }
 .tita-kbAsset figcaption { margin-top: 3px; color: var(--tita-ink-faint); font-size: 10px; text-align: center; }
@@ -626,6 +717,9 @@ body {
 .tita-kbMarkdown > :last-child { margin-bottom: 0; }
 .tita-kbMarkdown img { max-width: 100%; border-radius: 6px; }
 .tita-kbPre { max-height: 320px; margin: 0; border: 1px solid var(--tita-line); border-radius: 9px; background: var(--tita-surface); color: var(--tita-ink); padding: 10px; overflow: auto; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10.5px; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; }
+/* 文本视图的 `<pre>` 自带 max-height（它同时被意图 / 类型定义两处用），进了正文块之后
+   由外层那一层负责滚 —— 同一件事不画两条滚动条。 */
+.tita-drawerBody .tita-kbPre { max-height: none; }
 
 /* ------------------------------------------------------ intent (issue 0019) */
 .tita-intentHead { display: flex; align-items: center; gap: 8px; }
@@ -715,36 +809,107 @@ body {
 
 /* Wiki 类型注册表（issue 0024）：这张界面就是"SourceRaw → Wiki"的约束入口。 */
 .tita-wikiTypeBar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 10px; }
-.tita-wikiTypeMode { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; }
-.tita-wikiTypeMode > span { display: grid; gap: 1px; }
-.tita-wikiTypeMode strong { color: var(--tita-ink); font-size: 11.5px; }
-.tita-wikiTypeMode small { color: var(--tita-ink-faint); font-size: 10px; }
 .tita-wikiTypeIssueCount { border: 1px solid var(--tita-tone-amber-line); border-radius: 999px; background: var(--tita-tone-amber-tint); color: var(--tita-tone-amber); padding: 2px 9px; font-size: 10.5px; }
 .tita-wikiTypeList { display: grid; margin: 8px 0 0; padding: 0; list-style: none; gap: 6px; }
 /*
- * 一行一个类型。**窄栏优先**：这里是 380–420px 的宿主侧边栏，不是宽屏表格。
+ * 一行一个类型。**一行就是一行**：名字 + id + 层级 / 自定义标签 + 说明图标，
+ * 右边是张数、开关、编辑、删除。
  *
- * 原来这一行是 6 列 grid，首列 `minmax(200px, auto)`、第三列固定 56px、后面还有
- * 三个 auto 列（开关 + 两个图标按钮）：光最小宽度就是
- * 200 + 0 + 56 + 3×28 + 5×8(gap) + 18(padding) ≈ 398px，正好卡满整个面板 ——
- * 于是中间那列说明文字被压成 0 宽，描述和「必填小节」直接看不见，整块看起来就是
- * 「间距异常」。
+ * 这个格子换过两次形，两次都是为了同一件事 —— 窄栏（380–420px）里放不下第四个东西：
+ * 1. 最早是 6 列 grid，最小宽度约 398px，中间那列说明被压成 0 宽、整块看起来像「间距异常」。
+ * 2. 改成 flex 两行：第一行身份 + 操作，说明用 `order: 1` 换到第二行占满整宽。
+ * 3. 现在（2026-09-26）说明也搬进行首那枚图标：十一个类型本来要读三十多行小字，
+ *    而这一页问的是「有哪些类型、哪个没启用」。要定义、必填小节与必填字段时，
+ *    悬停或聚焦那枚图标就有 —— 内容没删，只是不再常驻。
  *
- * 现在改成 flex：第 1 行是身份 + 操作，说明用 `order: 1` 换到第 2 行占满整宽。
- * 视觉顺序变成「名字 → 操作 → 说明」，而 DOM 顺序仍是「名字 → 说明 → 操作」，
- * 读屏照旧先听到描述。最长的文本拿到整宽才读得下去，第一行也不再有 200px 硬下限。
+ * `align-items: baseline` 保留：名字、id、层级标签三样要坐在同一条基线上才读得成一行。
+ * 说明图标自己 `align-self: center`，因为一个只有 svg 的按钮没有可用的文字基线。
  */
 .tita-wikiTypeRow { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; border: 1px solid var(--tita-line); border-radius: 9px; background: var(--tita-surface); padding: 8px 10px; }
 .tita-wikiTypeName { display: flex; flex: 1 1 auto; min-width: 0; flex-wrap: wrap; align-items: baseline; gap: 6px; }
 .tita-wikiTypeLabel { color: var(--tita-ink); font-size: 12px; font-weight: 620; }
 .tita-wikiTypeTag { flex: 0 0 auto; border-radius: 4px; background: var(--tita-primary-soft); color: var(--tita-primary); padding: 1px 5px; font-size: 9.5px; }
-/* 说明排到最后一行、占满整宽：它是最长的文本，只有整宽才读得下去。 */
-.tita-wikiTypeMeta { order: 1; flex: 1 1 100%; min-width: 0; color: var(--tita-ink-faint); font-size: 10.5px; line-height: 1.6; }
+/* 行首那枚说明图标：长名字不把它挤扁（它跟着的是「这一行是什么」），
+   也不与文字比基线 —— 一个只装 svg 的按钮没有可用的基线。 */
+.tita-kbSourceName > .tita-infoHint,
+.tita-wikiTypeName > .tita-infoHint { flex: 0 0 auto; align-self: center; }
 .tita-wikiTypeIssues { display: grid; margin: 8px 0 0; padding: 0; list-style: none; gap: 5px; }
 .tita-wikiTypeIssues li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; color: var(--tita-ink-muted); font-size: 11px; line-height: 1.6; }
 .tita-wikiTypeIssues code { border-radius: 4px; background: var(--tita-surface-muted); padding: 1px 4px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10px; }
 .tita-wikiTypeIssueLevel { border-radius: 4px; background: var(--tita-surface-muted); color: var(--tita-ink-muted); padding: 0 5px; font-size: 9.5px; }
 
+/*
+ * 按 id 前缀折成的一组（0040 §4.3）。
+ *
+ * 分组只做一件事：让「这五个是同一套 schema」在列表里看得出来。所以组**不是一个
+ * 盒子**：它没有边框、没有底色，只有一条左缩进与一枚可点的组名行。真正承载内容的
+ * 还是里面那些 `.tita-wikiTypeRow` —— 给组再加一层描边，一组五个人就会看起来像
+ * 卡片套卡片，而这一屏本来就已经是列表套列表。
+ *
+ * 缩进是唯一的结构信号。组的 `<details>` 默认展开（`open`）：折叠是给"太长"用的，
+ * 而这里折叠是**默认的阅读顺序**，不是隐藏内容。
+ */
+.tita-wikiTypeGroup { margin: 0; }
+.tita-wikiTypeGroupBox { display: grid; gap: 5px; }
+.tita-wikiTypeGroupHead { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; border-radius: 6px; padding: 2px 4px; cursor: pointer; list-style: none; }
+.tita-wikiTypeGroupHead::-webkit-details-marker { display: none; }
+/* 展开态把箭头转 90°（`▸` → `▾`）：图形只有一个，方向由状态决定。
+   `transition` 与按钮那套时长一致，转起来不抢注意力。 */
+.tita-wikiTypeGroupCaret { flex: 0 0 auto; color: var(--tita-ink-faint); transition: transform 150ms cubic-bezier(0.22, 0.61, 0.36, 1); }
+.tita-wikiTypeGroupBox[open] > .tita-wikiTypeGroupHead .tita-wikiTypeGroupCaret { transform: rotate(90deg); }
+@media (prefers-reduced-motion: reduce) { .tita-wikiTypeGroupCaret { transition: none; } }
+.tita-wikiTypeGroupHead:hover { background: var(--tita-surface-muted); }
+/* 组名比成员更重、比整个抽屉的节标题更轻：它在"有哪些类型"这一层里是一个中间层级。 */
+.tita-wikiTypeGroupLabel { color: var(--tita-ink-muted); font-size: 11px; font-weight: 650; letter-spacing: .01em; }
+.tita-wikiTypeGroupCount { margin-left: auto; color: var(--tita-ink-faint); font-size: 10px; }
+/* 成员缩进 12px：正好是组名那枚 `▾` 加间距的宽度，缩进后成员与组名对齐成一条轴。 */
+.tita-wikiTypeGroupList { display: grid; margin: 0; padding: 0 0 0 12px; list-style: none; gap: 6px; }
+
+/*
+ * 模板卡预览（0040 §4.4 第 3、4 条）。它是**只读块**，不是控件：
+ * 沉底（`--tita-surface-muted`）+ 虚线描边 + 等宽内容，与旁边那几个白底实边框的
+ * `Input` / `Textarea` 一眼可分。虚线而不是实线，是因为实线在这个面板里已经
+ * 专门表示"可编辑的输入框"。
+ *
+ * 两块（front matter / 正文）共用同一套排版，只有标题与说明不同 —— 它们的分工
+ * 靠**标题**说清，不靠两套长相。
+ */
+.tita-wikiPreview { display: grid; gap: 8px; }
+.tita-wikiPreviewHead { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; }
+.tita-wikiPreviewHead h4 { margin: 0; color: var(--tita-ink); font-size: 12px; }
+.tita-wikiPreviewOrigin { color: var(--tita-ink-faint); font-size: 10.5px; }
+.tita-wikiPreviewBlock { display: grid; gap: 5px; border: 1px dashed var(--tita-line-strong); border-radius: 9px; background: var(--tita-surface-muted); padding: 9px 10px; }
+.tita-wikiPreviewBlockTitle { margin: 0; color: var(--tita-ink-muted); font-size: 11px; font-weight: 700; }
+.tita-wikiPreviewBlockNote { margin: 0; color: var(--tita-ink-faint); font-size: 10.5px; line-height: 1.6; }
+.tita-wikiPreviewFields { display: grid; margin: 2px 0 0; gap: 3px; }
+.tita-wikiPreviewField { display: flex; min-width: 0; flex-wrap: wrap; align-items: baseline; gap: 6px; }
+.tita-wikiPreviewField dt { flex: 0 0 auto; margin: 0; color: var(--tita-ink); font-family: var(--font-tita-mono); font-size: 10.5px; }
+.tita-wikiPreviewField dd { margin: 0; color: var(--tita-ink-muted); font-size: 10.5px; line-height: 1.6; overflow-wrap: anywhere; }
+.tita-wikiPreviewSections { display: grid; margin: 2px 0 0; padding: 0; list-style: none; gap: 3px; }
+.tita-wikiPreviewSections li { display: flex; min-width: 0; flex-wrap: wrap; align-items: baseline; gap: 6px; }
+.tita-wikiPreviewSections code { color: var(--tita-ink); font-family: var(--font-tita-mono); font-size: 10.5px; }
+.tita-wikiPreviewPlaceholder { color: var(--tita-ink-faint); font-size: 10.5px; }
+.tita-wikiPreviewEmpty { margin: 2px 0 0; color: var(--tita-ink-faint); font-size: 10.5px; line-height: 1.6; }
+
+/*
+ * 只读字段的形态（0040 §4.4 第 1 条）。
+ *
+ * `Input` 的 `readonly` 样式（`packages/ui`）已经给了沉底 + 浅描边 + 文本光标，
+ * 这里补的是"这不能改"那一点：文字收到 `--tita-ink-muted`。**不用 opacity** ——
+ * 靠透明度变灰会把对比度一起压下去，而 4.5:1 是硬线；`--tita-ink-muted` 在
+ * `--tita-surface-muted` 上是 6.98:1（按主题真值实算），灰得明确又读得清。
+ *
+ * 选择器写 `[data-tita-readonly='true']` 而不是 `input[readonly]`：这条规约只作用于
+ * **声明了它**的字段，不能顺手把别处（目录选择器那种"当前值"框）的只读输入框也改掉。
+ * 对话框走 Portal，不在 `.tita-panel` 里，所以两处都写上。
+ */
+.tita-panel input[data-tita-readonly='true'],
+.tita-uiPortal input[data-tita-readonly='true'] { border-color: var(--tita-line); background: var(--tita-surface-muted); color: var(--tita-ink-muted); }
+
+/* 组名行是 `<summary>`，也就是一个可聚焦的按钮：焦点环走全局面板规则，
+    但它的圆角只有 6px，偏移 2px 会顶到相邻行，所以这一处收一点。 */
+.tita-wikiTypeGroupHead:focus-visible { outline-offset: 1px; }
+
 /* 意图分类注册表（issue 0023）：预置项是模型的匹配依据，所以定义与"例如"要露在行上。 */
 .tita-intentCategoryList { display: grid; margin: 10px 0 0; padding: 0; list-style: none; gap: 6px; }
 .tita-intentCategoryRow { display: grid; grid-template-columns: minmax(210px, auto) minmax(0, 1fr) auto auto auto; align-items: center; gap: 8px; border: 1px solid var(--tita-line); border-radius: 9px; background: var(--tita-surface); padding: 7px 9px; }
@@ -753,12 +918,10 @@ body {
 .tita-intentCategoryExample { overflow: hidden; min-width: 0; color: var(--tita-ink-faint); font-size: 10.5px; line-height: 1.6; text-overflow: ellipsis; white-space: nowrap; }
 
 /* --------------------------------------------------- recall routes (3-way) */
-.tita-routeRow { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 11px; }
 .tita-routeChip { display: inline-flex; align-items: center; gap: 5px; border: 1px dashed var(--tita-line); border-radius: 999px; background: var(--tita-surface); color: var(--tita-ink-faint); padding: 3px 9px; font-size: 10.5px; }
 .tita-routeChipOn { border-style: solid; border-color: var(--tita-tone-green-line); background: var(--tita-tone-green-tint); color: var(--tita-tone-green); font-weight: 620; }
 /* 降级不是「没跑」，也不是「跑了」：它要能被看见，并且带上原因（芯片的 title）。 */
 .tita-routeChipOff { border-style: solid; border-color: var(--tita-tone-amber-line); background: var(--tita-tone-amber-tint); color: var(--tita-tone-amber); font-weight: 620; }
-.tita-routeBackend { margin-left: auto; color: var(--tita-ink-faint); font-size: 10px; font-weight: 700; letter-spacing: .08em; }
 
 
 /* 节点指标：顶部链路计数条下沉到节点后的落点（0022）。数字跟着它描述的那个节点走。 */
@@ -788,6 +951,43 @@ body {
 .tita-hitRouteGraph { background: var(--tita-tone-green-tint); color: var(--tita-tone-green); }
 .tita-hitRouteHybrid { background: var(--tita-tone-amber-tint); color: var(--tita-warning); }
 .tita-hitScore { margin-left: auto; color: var(--tita-ink-faint); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10px; }
+/* 账本行（0050）：名次、以及**被丢弃**的标记。
+   丢弃不靠降透明度表达 —— 那是「不可用」，而这里要表达的是「算过、没过线」：
+   虚线边框 + 淡色标题 + 一句原因，信息还在，只是退到后面。 */
+.tita-hitRank { flex: 0 0 auto; min-width: 16px; color: var(--tita-ink-faint); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10px; text-align: right; }
+.tita-hitDropped { flex: 0 0 auto; border-radius: 999px; background: var(--tita-surface-muted); color: var(--tita-ink-faint); padding: 1px 7px; font-size: 9.5px; }
+.tita-hitRowDropped { border-style: dashed; background: transparent; }
+.tita-hitRowDropped .tita-hitTitle { color: var(--tita-ink-muted); font-weight: 560; }
+
+/* 召回栏的步骤轨比知识库那条更紧凑（0050 第二版）：三步平分整行，不需要 132px 的
+   基准宽，也要把纵向高度让给下面的列表。只覆盖布局与尺寸，配色仍来自 `.tita-kbStep`。 */
+.tita-recallSteps .tita-kbStep { flex: 1 1 96px; gap: 1px; padding: 5px 8px; }
+.tita-recallSteps .tita-kbStepTop { gap: 4px; }
+.tita-recallSteps .tita-kbStepTop b { font-size: 11.5px; }
+.tita-recallSteps .tita-kbStepVerb { font-size: 9px; padding: 0 3px; }
+.tita-recallSteps .tita-kbStepFacts { gap: 4px; }
+.tita-recallSteps .tita-kbStepValue { font-size: 9.5px; }
+.tita-recallSteps .tita-kbStepNote { font-size: 9px; }
+/* 每一步的耗时：右对齐、等宽数字。它与计数同色但更轻 —— 它是读数，不是结论。 */
+.tita-kbStepCost { margin-left: auto; color: var(--tita-ink-faint); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 9px; font-style: normal; white-space: nowrap; }
+.tita-recallTiming { margin-left: auto; color: var(--tita-ink-faint); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10px; }
+
+/* 命中行的正文默认两行：一条笔记的片段常有几百字，全摊开一屏只能看两条。
+   `-webkit-line-clamp` 是截**显示**不是截数据，展开后是同一段文字。 */
+.tita-hitSnippetClamp { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
+.tita-hitToggle { border: 0; background: none; color: var(--tita-primary); padding: 0; font: inherit; font-size: 10px; cursor: pointer; }
+.tita-hitToggle:hover { text-decoration: underline; text-underline-offset: 2px; }
+.tita-hitToggle:focus-visible { outline: 2px solid var(--tita-focus-ring); outline-offset: 1px; border-radius: 3px; }
+/* 卡片标题在「扩展」那一栏是可以点开的：做成链接的样子，但用按钮的语义。 */
+.tita-cardLink { min-width: 0; overflow: hidden; border: 0; background: none; padding: 0; color: var(--tita-primary); font: inherit; font-size: 11.5px; font-weight: 640; text-align: left; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; }
+.tita-cardLink:hover { text-decoration: underline; text-underline-offset: 2px; }
+.tita-cardLink:focus-visible { outline: 2px solid var(--tita-focus-ring); outline-offset: 1px; border-radius: 3px; }
+
+/* 召回栏的三个 tab（0050）：召回 / 重排 / 扩展。分段控件与工具栏同一套样式。 */
+.tita-recallTabs { margin-top: 12px; }
+.tita-recallRoutes { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 10px; }
+.tita-recallRoutes .tita-routeChip { cursor: pointer; font: inherit; font-size: 10.5px; }
+.tita-recallRoutes .tita-routeChip:hover { border-color: var(--tita-line-strong); color: var(--tita-ink); }
 .tita-hitSnippet { margin: 0; color: var(--tita-ink-muted); font-size: 11px; line-height: 1.6; overflow-wrap: anywhere; }
 .tita-hitFoot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; color: var(--tita-ink-faint); font-size: 10px; }
 
@@ -804,16 +1004,60 @@ body {
 /* 记忆：真实落盘计数（04_memory）与「示意」卡片分开摆，避免把占位数字读成真实数据。 */
 .tita-memoryReal { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-bottom: 14px; }
 
-/* 知识库文档详情：该文档编译出的 wiki 卡片（对应 WeKnora 的「分块」列表）。 */
-.tita-cardList { display: grid; margin: 8px 0 0; padding: 0; list-style: none; gap: 6px; }
-.tita-cardRow { display: grid; min-width: 0; gap: 4px; border: 1px solid var(--tita-line); border-radius: 9px; background: var(--tita-surface); padding: 8px 9px; }
+/*
+ * 相关卡片（0049）：卡片抽屉里那一份可点的出链 / 入链。
+ *
+ * 一行一个**按钮**，常态没有边框 —— 与 `.tita-cardRow` 同一个理由：一屏里十来个
+ * 描边盒子会变成「框套框」，而这里问的是「它跟谁有关」。hover / 聚焦才显边框与浅底，
+ * 所以它读起来是一份列表，不是一堆卡片。
+ *
+ * 分组标签（「它引用」/「引用它」）比副标题更轻：它们只回答方向，不是内容。
+ */
+.tita-kbRelated { display: grid; gap: 3px; margin-top: 8px; }
+.tita-kbRelatedGroup { margin: 4px 0 1px; color: var(--tita-ink-faint); font-size: 10px; font-weight: 700; letter-spacing: .04em; }
+.tita-kbRelatedList { display: grid; margin: 0; padding: 0; list-style: none; gap: 2px; }
+.tita-kbRelatedRow {
+  display: flex;
+  width: 100%;
+  min-width: 0;
+  flex-wrap: wrap;
+  align-items: baseline;
+  gap: 6px;
+  border: 1px solid transparent;
+  border-radius: 7px;
+  background: none;
+  padding: 4px 7px;
+  color: inherit;
+  font: inherit;
+  text-align: left;
+  cursor: pointer;
+}
+.tita-kbRelatedRow:hover { border-color: var(--tita-line); background: var(--tita-surface-muted); }
+.tita-kbRelatedRow:focus-within { border-color: var(--tita-primary-line); background: var(--tita-surface-muted); }
+.tita-kbRelatedTitle { min-width: 0; overflow: hidden; color: var(--tita-ink); font-size: 11.5px; font-weight: 620; text-overflow: ellipsis; white-space: nowrap; }
+.tita-kbRelatedMeta { margin-left: auto; color: var(--tita-ink-faint); font-size: 10px; white-space: nowrap; }
+
+/* 知识库文档详情：该文档编译出的 wiki 卡片（对应 WeKnora 的「分块」列表）。
+   两处用同一套类名：wiki 栏的卡片列表，以及原文抽屉里的「编译产物」列表。 */
+.tita-cardList { display: grid; margin: 8px 0 0; padding: 0; list-style: none; gap: 4px; }
+/*
+ * **一条列表，不是一堆卡片**（0042）。
+ *
+ * 0042 之前每一行都有一圈常驻边框 + 圆角，外面还套着一层 `Card`（`.tita-kbCard` 也有
+ * 边框）—— 3 张卡片就是 3 个框、行与行之间又各画一圈，看到的是「框套框」。
+ * 现在照 `.tita-kbDocRow` 的做法：**常态边框透明**，hover 才显边框 + 浅底。
+ * 顺带修掉原来的空转规则：`：hover` 给的取值与常态完全相同，等于没有反馈。
+ */
+.tita-cardRow { display: grid; min-width: 0; gap: 4px; border: 1px solid transparent; border-radius: 8px; padding: 6px 8px; }
 .tita-cardRowHead { display: flex; min-width: 0; flex-wrap: wrap; align-items: center; gap: 6px; }
 .tita-cardRowTitle { min-width: 0; overflow: hidden; color: var(--tita-ink); font-size: 11.5px; font-weight: 620; text-overflow: ellipsis; white-space: nowrap; }
+/* 摘要只出现在**抽屉里**那份列表（那一屏是逐条核对的，不是扫的）。 */
 .tita-cardRowText { margin: 0; color: var(--tita-ink-muted); font-size: 10.5px; line-height: 1.6; overflow-wrap: anywhere; }
 /* 0025：卡片行变成可点入口（点开看内容与版本）。按钮要抹掉浏览器默认外观，
    同时保留 `.tita-cardRow` 的网格排版 —— 否则文字会掉到按钮默认的居中样式里。 */
 .tita-cardRowMain { display: grid; width: 100%; gap: 4px; border: 0; background: none; padding: 0; color: inherit; font: inherit; text-align: left; cursor: pointer; }
-.tita-cardRow:hover { border-color: var(--tita-line); background: var(--tita-surface); }
+.tita-cardRow:hover { border-color: var(--tita-line); background: var(--tita-surface-muted); }
+.tita-cardRow:focus-within { border-color: var(--tita-primary-line); background: var(--tita-surface-muted); }
 
 /* 知识库的步骤轨：**一条流水线，不是一排并列的 tab**。
    收录 → 编译 → 关联 → 检索 → 精排，步与步之间用箭头连起来 —— 方向本身就是信息
@@ -871,11 +1115,6 @@ body {
 .tita-graphArrow { color: var(--tita-ink-faint); font-size: 11px; }
 
 /* 重排分栏：进入上下文包的 topN。序号是它的阅读顺序，所以用等宽数字列。 */
-.tita-contextList { display: grid; gap: 8px; margin: 12px 0 0; padding: 0; list-style: none; }
-.tita-contextRow { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 9px; border: 1px solid var(--tita-line); border-radius: 10px; background: var(--tita-surface); padding: 9px 10px; }
-.tita-contextRank { display: inline-flex; height: 20px; align-items: center; justify-content: center; border-radius: 6px; background: var(--tita-primary-soft); color: var(--tita-primary); font-size: 10.5px; font-weight: 700; }
-.tita-contextCopy { display: grid; min-width: 0; gap: 4px; }
-.tita-contextHead { display: flex; min-width: 0; align-items: center; gap: 6px; }
 
 /* ======================================================================
    台账世界的基线（issues/0026）
@@ -938,3 +1177,107 @@ body {
 .tita-panel ::-webkit-scrollbar-thumb { border: 3px solid transparent; border-radius: 999px; background-clip: content-box; background-color: var(--tita-line-strong); }
 .tita-panel ::-webkit-scrollbar-thumb:hover { background-color: var(--tita-ink-faint); }
 .tita-panel ::-webkit-scrollbar-corner { background: transparent; }
+
+/* ════════════════════════════════════════════════════════════════════════════
+   智能归因图谱 · 动线视角的泳道带（0021 §7.7）
+
+   它叠在 G6 画布上，只负责「这一段是什么、这一段有几个、哪一段断在这里」。
+   两条约束决定它必须这么写：
+
+   1. **整层不吃事件**（`pointer-events: none`，§7.4 第 10 条）：带子只负责读，
+      命中一律落到画布上，否则点节点、拖画布都会被这层吞掉。
+   2. **坐标由 TS 算**（`laneLayoutOf` 的 `top/left/width/height` 走行内 style）：
+      这里只描述「长什么样」，不描述「摆在哪」。同一份几何同时喂画布与这一层，
+      两处不可能对不上。
+
+   颜色全部是 `color-mix()` 混出来的，基底取共享令牌 —— 主题一换，带子跟着走，
+   不需要第二份颜色。`--tita-band-tint` 由 React 按段给（实例层偏琥珀，其余偏蓝）。
+   ════════════════════════════════════════════════════════════════════════════ */
+.tita-attrBand {
+  position: absolute;
+  /* 5% 是「看得出有分区、但绝不和节点抢注意力」的那一档；段头带稍重一点（9%），
+     因为它是这一段唯一的文字锚点。 */
+  background: color-mix(in srgb, var(--tita-band-tint, var(--tita-tone-blue)) 5%, var(--tita-surface));
+  border-radius: 8px;
+}
+.tita-attrBandHeader {
+  display: flex;
+  width: 100%;
+  min-width: 0;
+  align-items: center;
+  /* 不换行：段头高 20px，一换行就把段名顶出带子。放不下的部分由各段自己省略。 */
+  flex-wrap: nowrap;
+  gap: 6px;
+  padding: 0 8px;
+  background: color-mix(in srgb, var(--tita-band-tint, var(--tita-tone-blue)) 9%, var(--tita-surface));
+  border-radius: 8px 8px 0 0;
+}
+/* 段头左侧那一块（段名 + 计数 + 读法）是一个按钮：点它收起 / 展开这一段。
+   按钮的默认外观必须显式抹掉 —— 没有 preflight 时它的字体、字号、对齐、边框、
+   背景都会退回浏览器默认值，表现出来就是「段头的字比别处大一号、还带一圈近黑描边」。 */
+.tita-attrBandHeadMain {
+  display: flex;
+  min-width: 0;
+  flex: 1 1 auto;
+  align-items: center;
+  gap: 6px;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  font: inherit;
+  color: inherit;
+  text-align: left;
+  cursor: pointer;
+}
+/* 不能收起 / 展开的段头（空段、被切面关掉的段、只剩一个节点的段）：纯读数，不该看起来能点。 */
+.tita-attrBandHeadMain:disabled { cursor: default; }
+.tita-attrBandHeadMain:not(:disabled):hover .tita-attrBandName { color: var(--tita-primary); }
+.tita-attrBandHeadMain:focus-visible { outline: 2px solid var(--tita-primary); outline-offset: 1px; border-radius: 4px; }
+/* ① 段的「换一个现象」入口。它是**换一条动线**，不是筛选 —— 所以做成段头上的小按钮，
+   不进左栏的筛选组（那会让人以为图被裁掉了）。 */
+.tita-attrBandPicks { display: flex; flex: 0 0 auto; align-items: center; gap: 4px; white-space: nowrap; }
+.tita-attrBandPicksLabel { color: var(--tita-ink-faint); font-size: 10px; }
+.tita-attrBandPick {
+  padding: 1px 5px;
+  border: 1px solid var(--tita-line-strong);
+  border-radius: 5px;
+  background: var(--tita-surface);
+  color: var(--tita-ink-muted);
+  font-family: var(--tita-mono);
+  font-size: 10px;
+  line-height: 14px;
+  cursor: pointer;
+}
+.tita-attrBandPick:hover { border-color: var(--tita-primary); color: var(--tita-primary); }
+.tita-attrBandPick:focus-visible { outline: 2px solid var(--tita-primary); outline-offset: 1px; }
+/* 被收起 / 被关掉的段：带子沉下去，与「这一段是空的」区分开 ——
+   空段仍然是正常底色（它是一条待办），而收起是用户的选择，视觉上要退到后面。 */
+.tita-attrBand[data-tita-lane-state='collapsed'],
+.tita-attrBand[data-tita-lane-state='off'] { opacity: .72; }
+/* 段名：这一段唯一必须读到的字。11px / 650 让它压得住节点标题（10.5px / 600）。 */
+.tita-attrBandName { flex: 0 0 auto; white-space: nowrap; color: var(--tita-ink); font-size: 11px; font-weight: 650; letter-spacing: -.01em; }
+/* 计数：等宽 + 表格数字，段与段之间扫一眼就能比大小。 */
+.tita-attrBandCount { flex: 0 0 auto; color: var(--tita-ink); font-family: var(--tita-mono); font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; }
+.tita-attrBandCountDim { color: var(--tita-ink-faint); font-weight: 500; }
+/* 排序依据（或空段说明）：段头右侧的弱化文字。它是「这一段怎么读」的读法，
+   不是标题，所以不抢墨色；但仍然是 10px 的正文级对比度，不用 ad-hoc 灰。 */
+.tita-attrBandHint {
+  min-width: 0;
+  flex: 1 1 auto;
+  overflow: hidden;
+  color: var(--tita-ink-faint);
+  font-size: 10px;
+  line-height: 1.3;
+  text-align: right;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+/* 内容左沿的一条竖线：段头文字与节点左对齐到同一列，这一段才读起来像一段。
+   1px 且只有段高的一半 —— 它是对齐提示，不是分隔线。 */
+.tita-attrBandRule {
+  position: absolute;
+  top: 100%;
+  bottom: 0;
+  width: 1px;
+  background: color-mix(in srgb, var(--tita-band-tint, var(--tita-tone-blue)) 26%, transparent);
+}