/* ══════════════════════════════════════════════════════════════════
   train.css —— AI 训练站（顶栏第 4 站 · 由假壳转真）
   设计口径：output/ningge-kb-plan/proto/P0-2-电脑端-训练学习.html（5 帧）
   数据口径：backend/app/routes/train.py（4 端点）
   结构范式：app/css/kb.css（站头通栏 + `.tr-body` 三栏 + 窄窗两级让位）
   纪律：
     1. 本文件**不得出现字面色值**，一律 var() 令牌。
        引前已机械核过：下面用到的每个令牌在 tokens.css 里都有定义
        （命令见交付回报；`--cyan*` 在本仓**无定义**，kb.css 曾误用被判据抓出）。
     2. 类名一律 `tr-` 前缀 + 内容层 `#trainbody`，**与既有 .kb-/.crm-/.ph- 零复用**。
     3. 密度不降：本站是操作台，不做大留白（「高大上」≠ 松/空/大留白，见项目记忆）。
     4. 本文件**只管外观**，"哪种形态"由 js/train.js 决定 —— 一个交互一条路径。
   ══════════════════════════════════════════════════════════════════ */
.tr{display:none;flex:1 1 auto;min-width:0;min-height:0;flex-direction:column;
  background:var(--e2)}
.app.trainmode > .list,
.app.trainmode > .chat,
.app.trainmode > .side,
.app.trainmode > .spl{display:none}
.app.trainmode > #trainbody{display:flex}

/* 行内码：md() 会把后端正文里的反引号片段包成 <code>（表名 / 字段名 / 判据名）——
   它必须与周围正文**可辨**，否则「`setting_snapshots` 未建」读起来像普通词。 */
.tr code{font-family:var(--font-num);font-size:var(--fs-micro);padding:0 4px;
  border-radius:var(--r-xs);background:var(--e3);color:var(--t1)}

/* ── 站头（44px）：站名 + 当前视图 + 读数 ────────────────────────── */
.tr-hd{display:flex;align-items:center;gap:9px;flex:none;height:44px;padding:0 14px;
  border-bottom:1px solid var(--line);background:var(--e1)}
.tr-ttl{font-size:var(--fs-small);color:var(--t1);font-weight:500;white-space:nowrap}
.tr-cur{font-size:var(--fs-caption);color:var(--accent-text);white-space:nowrap}
.tr-sp{flex:1 1 auto;min-width:0}
.tr-read{font-size:var(--fs-micro);color:var(--t3);white-space:nowrap;
  font-family:var(--font-num)}
.tr-read b{color:var(--t2);font-weight:500}

/* 小标签：待拍板 / 本地快照 / P2。**「待拍板」不弱化** ——
   弱化会让人读成"次要"，而它的语义恰好是"这个值还不能当真"。 */
.tr-tag{display:inline-flex;align-items:center;flex:none;white-space:nowrap;
  font-size:var(--fs-micro);line-height:1.5;padding:1px 7px;border-radius:var(--r-xs);
  border:1px solid var(--line2);background:var(--e3);color:var(--t2)}
.tr-tag.tr-warn{background:var(--amber-bg);color:var(--amber);border-color:var(--amber-line)}

/* ── 三栏容器 ─────────────────────────────────────────────────────── */
.tr-body{flex:1 1 auto;min-height:0;display:flex}
.tr-mid{flex:1 1 auto;min-width:0;min-height:0;overflow:auto;padding:12px 16px 22px}

/* ── 左导航轨（240px）：两段 + 口径脚注 ──────────────────────────── */
.tr-rail{flex:none;width:240px;min-height:0;overflow:auto;padding:8px 0 14px;
  border-right:1px solid var(--line);background:var(--e1)}
.tr-rsec{font-size:var(--fs-micro);color:var(--t3);padding:9px 14px 4px;white-space:nowrap}
.tr-rsec h4{margin:0;font-size:var(--fs-micro);font-weight:400;color:var(--t3)}
.tr-ritem{display:flex;align-items:baseline;gap:7px;flex-wrap:wrap;
  padding:6px 14px;cursor:pointer;user-select:none;
  transition:background var(--dur-1)}
.tr-ritem:hover{background:var(--veil)}
.tr-ritem.on{background:var(--accent-wash)}
.tr-ritem > span{font-size:var(--fs-small);color:var(--t2)}
.tr-ritem.on > span{color:var(--accent-text)}
.tr-ritem > i{font-style:normal;font-family:var(--font-num);font-size:var(--fs-micro);
  color:var(--t3);margin-left:auto}
.tr-ritem > em{flex:1 1 100%;font-style:normal;font-size:var(--fs-micro);
  color:var(--t3);line-height:1.45}
/* ★ 追加帧（P2 未定义）：**必须与"真项"可辨**。三态不许合并 ——
   未验（东西在、没试）／已知证伪／**未定义（东西不在）**。
   本项属第三种 ⇒ 用虚线框 + 空心点，不置灰（置灰会被读成"暂时不可用"）。 */
.tr-ritem.na{opacity:.72}
.tr-ritem.na > span::before{content:'○';margin-right:5px;color:var(--line-strong)}
.tr-ritem.na.on{background:var(--amber-bg)}
.tr-ritem.na.on > span{color:var(--amber)}
.tr-rfoot{margin:10px 14px 0;padding-top:9px;border-top:1px solid var(--line);
  font-size:var(--fs-micro);color:var(--t3);line-height:1.65;
  display:flex;flex-direction:column;gap:2px}
.tr-rfoot b{color:var(--t2);font-weight:400}
.tr-rfoot u{text-decoration:none;color:var(--t3)}

/* ── 端点未取到：**必须显式说出来** ──────────────────────────────────
   静默失败是本站最容易犯的错（空白卡片看着像"没有数据"）。
   故用实线红框 + 逐端点列名，与 `.tr-empty`（真空态）形态明显不同。 */
.tr-err{display:flex;flex-wrap:wrap;gap:6px;padding:9px 12px;margin-bottom:10px;
  border:1px solid var(--danger-line);border-radius:var(--r-md);background:var(--danger-bg);
  font-size:var(--fs-caption);color:var(--danger-text);line-height:1.6}
.tr-err b{font-family:var(--font-num);color:var(--danger-text)}

/* ── 卡片（中栏唯一容器皮肤）──────────────────────────────────────── */
.tr-card{background:var(--e1);border:1px solid var(--line);border-radius:var(--r-md);
  padding:12px 14px;margin-bottom:12px}
.tr-chd{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:9px}
.tr-chd h3{margin:0;font-size:var(--fs-body);color:var(--t1);font-weight:500}
.tr-cnt{font-size:var(--fs-micro);color:var(--t3);font-family:var(--font-num)}
/* 本视角读数：可见/灰显两个数字要能一眼扫到 —— 它是「视角切换有没有生效」的唯一显式反馈。
   ⚠ 只给一个 b 规则即可：这里初稿写了两条同值规则（第二条是 `.tr-visn b:last-of-type`），
     是**纯冗余**（同值、同选择器求交后完全重合）—— 自查时删掉，别留死规则。 */
.tr-visn b{color:var(--t2);font-weight:600}
.tr-reset{margin-left:auto;font-size:var(--fs-micro);padding:3px 9px;cursor:pointer;
  border:1px solid var(--line2);border-radius:var(--r-sm);background:var(--e2);
  color:var(--t2);font-family:var(--font-ui)}
.tr-reset:hover{background:var(--face-hover);color:var(--t1)}
.tr-principle{padding:9px 12px;margin-bottom:10px;border-radius:var(--r-sm);
  border-left:2px solid var(--accent);background:var(--e2);
  font-size:var(--fs-small);color:var(--t2);line-height:1.7}

/* ── 「算不出来 ≠ 等于 0」的唯一渲染落点 ────────────────────────────
   两个数字**长得必须不一样**：
     · n 有值     → `.tr-num`，正常数字
     · blocked    → `.tr-blocked`，虚线 + 琥珀 + **明写依赖的表名**
   混成一种 = 界面在撒谎（把"没有这张表"读成"跑了但结果是 0"）。 */
.tr-prog{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:10px;
  font-size:var(--fs-caption);color:var(--t3)}
.tr-num{font-family:var(--font-num);font-size:var(--fs-body);color:var(--t1)}
.tr-blocked{display:inline-flex;align-items:baseline;gap:7px;flex-wrap:wrap;
  padding:5px 10px;border:1px dashed var(--amber-line);border-radius:var(--r-sm);
  background:var(--amber-bg);font-size:var(--fs-micro);color:var(--t2)}
.tr-blocked b{font-family:var(--font-num);color:var(--amber);font-weight:500}
.tr-blocked i{font-style:normal;color:var(--t2)}
.tr-blocked u{text-decoration:none;color:var(--t3);font-family:var(--font-num)}

/* ── 视图①：学习路径 S0–S3 ────────────────────────────────────────── */
.tr-stages{display:grid;grid-template-columns:repeat(auto-fill,minmax(216px,1fr));
  gap:8px;margin-bottom:14px}
.tr-stage{padding:10px 12px;border:1px solid var(--line);border-radius:var(--r-md);
  background:var(--e2)}
.tr-shd{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-bottom:6px}
.tr-sk{flex:none;min-width:22px;height:19px;padding:0 6px;display:inline-flex;
  align-items:center;justify-content:center;border-radius:var(--r-xs);
  background:var(--accent-wash);color:var(--accent-text);
  font-family:var(--font-num);font-size:var(--fs-micro);font-weight:500}
.tr-sn{font-size:var(--fs-small);color:var(--t1);font-weight:500}
.tr-shd > em{flex:1 1 100%;font-style:normal;font-size:var(--fs-micro);color:var(--t3)}
.tr-must{list-style:none;margin:0 0 7px;padding:0}
.tr-must li{position:relative;padding-left:11px;font-size:var(--fs-micro);
  color:var(--t2);line-height:1.7}
.tr-must li::before{content:'·';position:absolute;left:2px;color:var(--t3)}
.tr-gate,
.tr-fail{font-size:var(--fs-micro);line-height:1.65;padding-top:5px;margin-top:4px;
  border-top:1px solid var(--line);color:var(--t2)}
.tr-gate > span,
.tr-fail > span{display:inline-block;min-width:30px;margin-right:6px;
  color:var(--t3);font-family:var(--font-num)}
.tr-fail > span{color:var(--amber)}

/* 关卡轨（本角色红线课 → N 关）*/
.tr-track{border-top:1px solid var(--line);padding-top:10px;margin-top:4px}
.tr-track h5{margin:0 0 8px;font-size:var(--fs-caption);color:var(--t2);font-weight:500;
  display:flex;align-items:center;gap:7px}
.tr-track h5 > i{font-style:normal;font-family:var(--font-num);font-size:var(--fs-micro);
  color:var(--t3);font-weight:400}
.tr-lv{position:relative;padding:8px 11px;margin-bottom:6px;
  border:1px solid var(--line);border-radius:var(--r-sm);background:var(--e2);
  display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.tr-lv .tr-no{font-family:var(--font-num);font-size:var(--fs-micro);color:var(--t3)}
.tr-lv > b{font-size:var(--fs-small);color:var(--t1);font-weight:500}
.tr-lv > em{font-style:normal;font-size:var(--fs-micro);color:var(--t3);
  font-family:var(--font-num)}
.tr-lv > u{flex:1 1 100%;text-decoration:none;font-size:var(--fs-micro);
  line-height:1.6;color:var(--t3)}
.tr-first::before{content:'◆ ';color:var(--accent)}
/* ★★ 未解锁 ≠ 不可见（R78）—— 两种形态**必须可辨**：
     · `.tr-lock` = **未解锁**：虚线边框 + 锁标 +「写明前置关卡」（可执行信息）
     · `.tr-na`   = **当前视角不可见**：灰显占位条（不可执行、无前置）
   若两者同形，用户无法回答"我是要去做前置，还是这条路根本不属于我"。 */
.tr-lv.tr-lock{border-style:dashed;background:transparent}
.tr-lv.tr-lock > b{color:var(--t3)}
.tr-lv.tr-lock .tr-prereq{color:var(--amber)}
.tr-prereq::before{content:'🔒 ';}
.tr-unlock{margin-top:10px;padding-top:9px;border-top:1px solid var(--line);
  font-size:var(--fs-micro);color:var(--t2);line-height:1.7}
.tr-unlock > span{display:inline-block;margin-right:7px;color:var(--t3)}
.tr-unlock u{display:block;text-decoration:none;color:var(--t3);margin-top:3px}

/* ── 视图②：红线考核（帧 2 交互核心）─────────────────────────────── */
.tr-policy{display:flex;flex-direction:column;gap:3px;padding:9px 12px;margin-bottom:11px;
  border:1px solid var(--amber-line);border-radius:var(--r-sm);background:var(--amber-bg);
  font-size:var(--fs-micro);color:var(--t2);line-height:1.65}
.tr-policy b{font-size:var(--fs-caption);color:var(--amber);font-weight:500}
.tr-policy u{text-decoration:none;color:var(--t3)}
.tr-qs{display:flex;flex-direction:column;gap:9px}
.tr-q{padding:11px 13px;border:1px solid var(--line);border-radius:var(--r-md);
  background:var(--e2)}
.tr-q.tr-q-done{background:var(--e1)}
.tr-qhd{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:6px}
.tr-qid{font-family:var(--font-num);font-size:var(--fs-micro);color:var(--t3);
  font-weight:400}
.tr-qk{font-size:var(--fs-micro);padding:0 6px;border-radius:var(--r-xs);
  background:var(--e3);color:var(--t2)}
.tr-qhd > em{font-style:normal;font-size:var(--fs-micro);color:var(--accent-text);
  font-family:var(--font-num);margin-left:auto}
.tr-qstem{font-size:var(--fs-small);color:var(--t1);line-height:1.7;margin-bottom:8px}
.tr-opts{display:flex;flex-direction:column;gap:5px}
.tr-opt{display:block;width:100%;text-align:left;cursor:pointer;
  padding:7px 11px;border:1px solid var(--line2);border-radius:var(--r-sm);
  background:var(--e1);color:var(--t1);font-size:var(--fs-small);
  font-family:var(--font-ui);line-height:1.6;transition:background var(--dur-1)}
.tr-opt:hover:not(:disabled){background:var(--face-hover);border-color:var(--accent-line)}
.tr-opt:focus-visible{outline:2px solid var(--focus);outline-offset:1px}
.tr-opt:disabled{cursor:default}
/* 已作答后的沉静态：**未选且非正确**的项一律沉下去（`-done`）。
   注意 `.tr-opt-ok` 只在**答对**时才会被挂上（见 train.js 里那段自查注释）——
   答错态下正确项与未选项**视觉无法区分**，这是帧 2 铁律的 CSS 落点。 */
.tr-opt.tr-opt-done{opacity:.55}
.tr-opt.tr-opt-ok{opacity:1;border-color:var(--accent-line);
  background:var(--accent-wash);color:var(--accent-text)}
.tr-opt.tr-opt-no{opacity:1;border-color:var(--danger-line);
  background:var(--danger-bg);color:var(--danger-text)}

/* ★ 判对 / 判错两态：**用颜色区分，且语义与项目约定一致** ——
   · 判对 → `--accent`（本站主色）
   · 判错 → `--danger`。为什么这里可以用 red：本项目 **red = 健康红线专用**，
     而本考核**就是红线考核**（答错 = 红线判断失败 = 实打实的风险）。
     对照 kb.css 的 `.kb-tag.cannot` 特意用了陶土：那里是**知识条目的否定性结论**
     （如「局部减脂不存在」），不是风险 ⇒ 两者不冲突，是同一约定下的两个分支。 */
.tr-right,
.tr-wrong{margin-top:9px;padding:9px 12px;border-radius:var(--r-sm);
  display:flex;flex-direction:column;gap:4px;font-size:var(--fs-micro);line-height:1.7}
.tr-right{border-left:2px solid var(--accent);background:var(--accent-wash)}
.tr-right b{color:var(--accent-text);font-size:var(--fs-caption);font-weight:500}
.tr-right > span{color:var(--t1);font-size:var(--fs-small)}
.tr-right > em{font-style:normal;color:var(--t3)}
.tr-wrong{border-left:2px solid var(--danger);background:var(--danger-bg)}
.tr-wrong b{color:var(--danger-text);font-size:var(--fs-caption);font-weight:500}
.tr-wrong .tr-wp,
.tr-wrong .tr-wl,
.tr-wrong .tr-wt,
.tr-wrong .tr-wv{color:var(--t2);font-family:var(--font-num)}
.tr-wrong .tr-wp{font-family:var(--font-ui)}
.tr-wrong .tr-wl{color:var(--accent-text)}
.tr-why{text-decoration:none;color:var(--t3);font-family:var(--font-ui);
  padding-top:3px;border-top:1px solid var(--line)}

/* ── 视图③：权限档位与降级（帧 3）───────────────────────────────── */
.tr-tiers{display:grid;grid-template-columns:repeat(auto-fill,minmax(228px,1fr));
  gap:8px;margin-bottom:12px}
.tr-tier{padding:10px 12px;border:1px solid var(--line);border-radius:var(--r-md);
  background:var(--e2);display:flex;flex-direction:column;gap:7px}
.tr-thd{display:flex;flex-direction:column;gap:3px}
.tr-thd b{font-size:var(--fs-small);color:var(--t1);font-weight:500}
.tr-thd em{font-style:normal;font-size:var(--fs-micro);color:var(--t3);line-height:1.6}
/* ★★ 帧 3 的核心裁定：降级 = **换形态**，不是置灰、不是降透明度。
   所以 `.tr-btn-line` 与 `.tr-btn-solid` 在**填充/描边**上分叉，而不是靠 opacity。
   理由：透明度是"临时/禁用"的既有语汇；而"受查档"是一种**真实且合规的档位**，
   用户要做的事（看期限、点恢复）仍然可执行 ⇒ 用形态说话。 */
.tr-btn{display:inline-flex;align-items:center;justify-content:center;gap:5px;
  align-self:flex-start;padding:4px 11px;border-radius:var(--r-sm);
  font-size:var(--fs-micro);line-height:1.6;white-space:nowrap;font-family:var(--font-ui)}
.tr-btn-line{border:1px solid var(--line-strong);background:transparent;color:var(--t2)}
.tr-btn-solid{border:1px solid var(--accent-line);background:var(--accent-wash);
  color:var(--accent-text)}
.tr-reason{text-decoration:none;font-size:var(--fs-micro);color:var(--t3);line-height:1.6}

/* 通用小节块（降级四手段 / 到期提醒 / 客户可见面 / 记录矩阵…）*/
.tr-blk{margin-top:12px;padding-top:10px;border-top:1px solid var(--line)}
.tr-blk h5{margin:0 0 8px;font-size:var(--fs-caption);color:var(--t2);font-weight:500}
.tr-means{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.tr-means li{display:flex;flex-direction:column;gap:2px;font-size:var(--fs-micro);
  line-height:1.65}
.tr-means li > b{color:var(--t1);font-weight:500}
.tr-means li > span{color:var(--t2)}
.tr-banned{display:flex;flex-direction:column;gap:3px;margin-top:9px;padding:8px 11px;
  border:1px solid var(--danger-line);border-radius:var(--r-sm);background:var(--danger-bg);
  font-size:var(--fs-micro);line-height:1.65;color:var(--t2)}
.tr-banned > span{color:var(--danger-text);font-family:var(--font-num)}
.tr-banned u{text-decoration:none;color:var(--t3)}
.tr-inline{margin-top:8px;padding:7px 10px;border-radius:var(--r-sm);
  border-left:2px solid var(--accent-line);background:var(--e2);
  font-size:var(--fs-micro);color:var(--t2);line-height:1.65}
/* 客户可见面：**只这一枚徽标**，且绝不出现内部分档词 —— 所以它必须长得
   与站内其它徽标**不同款**（这里是实心 chip），免得被误认成"内部档位标签"。 */
.tr-badge{display:inline-flex;align-items:center;padding:4px 12px;margin-bottom:7px;
  border-radius:var(--r-full);background:var(--sel);color:var(--t1);
  font-size:var(--fs-small)}
.tr-never{font-size:var(--fs-micro);color:var(--t2);line-height:1.65;
  font-family:var(--font-num)}

/* ── 视图④：学习记录（帧 4 · 列级可见性）─────────────────────────── */
.tr-persps{display:inline-flex;gap:0;border:1px solid var(--line2);border-radius:var(--r-sm);
  overflow:hidden}
.tr-persp{padding:3px 10px;border:0;background:var(--e1);color:var(--t3);cursor:pointer;
  font-size:var(--fs-micro);font-family:var(--font-ui);white-space:nowrap}
.tr-persp:hover{background:var(--face-hover)}
.tr-persp.on{background:var(--accent-wash);color:var(--accent-text)}
.tr-rows{margin-bottom:11px}
.tr-tblwrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-sm);
  background:var(--e1);margin-bottom:4px}
.tr-tbl{border-collapse:collapse;width:100%;min-width:520px}
.tr-tbl th{text-align:left;padding:7px 10px;white-space:nowrap;
  border-bottom:1px solid var(--line2);font-size:var(--fs-micro);
  color:var(--t2);font-weight:500;vertical-align:bottom}
.tr-tbl th > i{display:block;font-style:normal;font-family:var(--font-num);
  color:var(--t3);font-weight:400}
/* ★ 「当前视角不可见」= **灰显占位条**（与 `.tr-lock` 的虚线+锁是两种形态）——
   它回答的是"这一列对你不开放"，**没有前置关卡可做** ⇒ 不给行动指向。
   槽用 `--slot-empty-*`（项目既有的"空槽"令牌对，四主题齐备）。 */
.tr-tbl th.tr-na{background:var(--slot-empty-bg);color:var(--slot-empty-fg)}
.tr-tbl th.tr-na > u{display:block;text-decoration:none;font-weight:400;
  font-size:var(--fs-micro)}
/* 空态与"算不出来"必须分开：这里是**真空态**（有表、没行）——
   而本页的实际情形是"没有表"，那一句写在 `.tr-empty` 的正文里说清楚
   （不允许用演示行填充：D §3.2 明令"系统自动写、不允许人工补录"）。 */
.tr-empty td{padding:14px 12px;font-size:var(--fs-small);color:var(--t3);
  line-height:1.75}
.tr-empty td > b{color:var(--t2)}
.tr-aud{border-collapse:collapse;width:100%}
.tr-aud th{text-align:left;padding:6px 9px;white-space:nowrap;
  font-size:var(--fs-micro);color:var(--t1);font-weight:500;
  border-bottom:1px solid var(--line);vertical-align:top}
.tr-aud td{padding:6px 9px;font-size:var(--fs-micro);color:var(--t2);
  line-height:1.65;border-bottom:1px solid var(--line)}
.tr-aud tr:last-child th,
.tr-aud tr:last-child td{border-bottom:0}
.tr-cannot{color:var(--t3)}

/* ── 视图⑤：候选处置（P2 · 未定义）─────────────────────────────────
   ★ 本视图**刻意不是**"空态"，也**刻意不是**错误态 —— 它是**第三种**：
     东西不在（未定义）。所以既不复用 `.tr-empty`（会读成"没数据，去补录"），
     也不复用 `.tr-err`（会读成"坏了，去修"）。
     琥珀虚框 + 明确写出"不做半截实现" + 三态口径，缺一不可。 */
.tr-undefined{border-style:dashed;border-color:var(--amber-line);
  background:var(--amber-bg)}
.tr-udx{display:flex;flex-direction:column;gap:7px;
  font-size:var(--fs-small);color:var(--t2);line-height:1.75}
.tr-udx > b{color:var(--amber);font-weight:500}
.tr-udx u{text-decoration:none;color:var(--t3);font-size:var(--fs-micro)}
.tr-udx em{font-style:normal;color:var(--t2)}
/* 帧 5 的两块补充：依赖实测 / 解冻条件。
   它们存在的理由 = 中栏不能只剩一张说明卡 + 一片空 —— 但**也不许编内容**，
   所以两块都只装"可复核的事实"与"设计稿已给的结构结论"。 */
.tr-deps,.tr-note2{margin-top:14px;padding-top:12px;border-top:1px dashed var(--line2)}
.tr-deps h4,.tr-note2 h4{margin:0 0 8px;font-size:var(--fs-micro);color:var(--t3);font-weight:400}
.tr-deps ul,.tr-note2 ul{margin:0;padding:0;list-style:none;
  display:flex;flex-direction:column;gap:7px}
.tr-deps li,.tr-note2 li{font-size:var(--fs-small);color:var(--t2);line-height:1.7}
.tr-deps li{display:flex;align-items:baseline;gap:8px}
.tr-deps b{font-family:var(--font-num);font-weight:500}
.tr-deps em{font-style:normal;flex:none;font-size:var(--fs-micro);padding:0 6px;
  border-radius:var(--r-xs);border:1px solid var(--line2);color:var(--t3)}
.tr-deps u{text-decoration:none;color:var(--t3);font-size:var(--fs-micro)}
/* ★ 三值三形（`true`/`false`/`null` 各有自己的样子）——这是「三态不许合并」的样式落点。
   ⚠ 颜色**只用令牌**；`未验` 刻意不用警示色：它不是坏消息，是"还不知道"。 */
.tr-dep-ok em{border-color:var(--violet);color:var(--violet)}
.tr-dep-no em{border-color:var(--amber-line);color:var(--amber)}
.tr-dep-unk em{border-style:dashed;color:var(--t3)}
.tr-note2 u{display:block;margin-top:9px;text-decoration:none;
  color:var(--t3);font-size:var(--fs-micro);line-height:1.7}
.tr-note2 li b{color:var(--t2);font-weight:600}

/* ── 右栏（336px）：口径出处 / 已裁定 / 待拍板 ───────────────────── */
.tr-side{flex:none;width:336px;min-height:0;overflow:auto;padding:12px 16px 22px;
  border-left:1px solid var(--line);background:var(--e1)}
.tr-ssec{margin-bottom:14px}
.tr-ssec h4{margin:0 0 7px;font-size:var(--fs-micro);color:var(--t3);font-weight:400}
.tr-src{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:5px}
.tr-src li{display:flex;flex-direction:column;gap:1px;
  font-size:var(--fs-micro);line-height:1.6;
  padding-bottom:5px;border-bottom:1px solid var(--line)}
.tr-src li:last-child{border-bottom:0;padding-bottom:0}
.tr-src li > b{color:var(--t2);font-weight:500}
.tr-src li > span{color:var(--t3);font-family:var(--font-num)}
.tr-src2 li{flex-direction:column}
.tr-note{font-size:var(--fs-micro);color:var(--t3);line-height:1.75;margin:0}
.tr-note b{color:var(--t2)}

/* 待拍板 / 待验证：**不弱化**，且"已裁定"与"待拍板"靠 `--ok/--wait` 分色 */
.tr-pend h5{margin:0 0 7px;font-size:var(--fs-micro);color:var(--t3);font-weight:400}
.tr-pend ul{list-style:none;margin:0;padding:0;
  display:flex;flex-direction:column;gap:6px}
.tr-pend li{display:flex;flex-direction:column;gap:2px;
  padding:7px 10px;border:1px solid var(--amber-line);border-radius:var(--r-sm);
  background:var(--amber-bg);font-size:var(--fs-micro);line-height:1.6}
.tr-pend li > b{color:var(--t1);font-weight:500}
.tr-pend li > span{color:var(--t3);font-family:var(--font-num)}
.tr-pend li.tr-decided{border-color:var(--line);background:var(--e2)}
.tr-ok,
.tr-wait{font-style:normal;align-self:flex-start;
  font-size:var(--fs-micro);padding:0 6px;border-radius:var(--r-xs)}
.tr-ok{background:var(--accent-wash);color:var(--accent-text)}
.tr-wait{background:var(--amber-bg);color:var(--amber)}

/* ── 窄窗两级让位（与 kb.css 同范式）───────────────────────────────
   ★ 只缩不让项：导航轨不 display:none，右栏也不 display:none。
     本仓头号忌讳是"静默剪裁"—— 把整段导航藏起来，用户会以为「这站就这么点东西」，
     然后自己发挥。所以 ≤980 只**换排布方向**，不减项。 */
@media (max-width:1180px){
  .tr-side{width:286px}
  .tr-rail{width:200px}
  .tr-stages{grid-template-columns:repeat(auto-fill,minmax(196px,1fr))}
}
@media (max-width:980px){
  .tr-body{flex-direction:column}
  /* 导航轨 → 横向 wrap 条（仍在文档流里、仍占位、仍可点） */
  .tr-rail{width:auto;flex:none;display:flex;flex-wrap:wrap;align-items:center;
    gap:2px 4px;padding:7px 10px;border-right:0;
    border-bottom:1px solid var(--line);max-height:150px;overflow-y:auto}
  .tr-rsec{width:100%;padding:3px 4px 1px}
  .tr-ritem{padding:5px 9px;border-radius:var(--r-sm)}
  .tr-ritem > em{display:inline;flex:0 0 auto;margin-left:5px}
  .tr-ritem > i{margin-left:4px}
  .tr-rfoot{width:100%;margin:6px 4px 0;flex-direction:row;flex-wrap:wrap;gap:3px 12px}
  .tr-side{width:auto;flex:none;max-height:46%;border-left:0;
    border-top:1px solid var(--line)}
  .tr-stages{grid-template-columns:repeat(auto-fill,minmax(176px,1fr))}
  .tr-tiers{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}
}