/* ══════════════════════════════════════════════════════════════════
   todos.css —— 「待办」站（顶栏第 3 站 · 新增真站，2026-10-03）

   用户令：「**M0 可以开工**」；落点裁定 = `规划-客户流程改造-总纲-20261003.md §17`。

   数据口径（M0 批，**只用已有端点**，见 js/todos.js 文件头）：
     `GET /api/v1/crm/customers/query?todo=unbound`  「还没加上微信的人」
     `GET /api/v1/crm/automation/rules`              「规则已生成的待发」

   结构范式：app/css/colleagues.css（站内容层 + 组头 + 行 + 窄窗兜底）。
   四条纪律（照 colleagues.css 的同一套，引前逐条核过）：
     1. 本文件**不得出现字面色值**，一律 var() 令牌；且只用四主题齐备的
        （`tokens.css` 里出现 4 次的那些）。★ 正向态**不用绿**（本仓 `--ok*` 不存在），
        用 `--accent*`（本仓 accent = "正常/激活"的语义色）；风险用 `--danger*`；
        次级强调用 `--amber*`。
     2. 类名一律 `tdo-` 前缀 + 内容层 `#tdbody`。`.tdo-` / `#tdbody` 在本仓
        **引前 0 命中**（实测命令见交付回报；`R58` 同族：命名撞车必须提前查）。
     3. ★★ **「忙」「空」「坏」必须是三个类**（xiaoe.css 头注那条教训）：
        `.tdo-busy`（取数中）/ `.tdo-empty`（取到了、结果就是空）/ `.tdo-bad`（取数失败，
        **带原因**）。合成一个会让等待条件退化 ⇒ 偶发假绿。
     4. 正文里的**人名 / 规则名 / 手机号掩码全部来自服务端** ⇒ 渲染层一律 `esc`
        （XSS 面在 js 侧守）。机械键（`contact_pk` / `unbound` / `M18` 那类）
        **永不上屏** —— 受控术语上屏 = 0（复杂度红线⑤）。

   ⚠ 复杂度红线②：一行 = 头像 + 名字 + **一行**副标题 + 右侧**恰一个**按钮。
     本文件里 `.tdo-sub` 必须 `text-overflow:ellipsis` + 单行 —— 否则内容一长
     就换成两行，而"换行"这件事**不会报错**，只会让整列高矮不齐。
   ══════════════════════════════════════════════════════════════════ */

.tdo{display:none;flex:1 1 auto;min-width:0;min-height:0;flex-direction:column;
  background:var(--e2)}
.app.todosmode > .list,
.app.todosmode > .chat,
.app.todosmode > .side,
.app.todosmode > .spl{display:none}
.app.todosmode > #tdbody{display:flex}

/* 站头（与 xiaoe / colleagues 同高 44px —— 换站时不跳） */
.tdo-hd{flex:0 0 auto;display:flex;align-items:center;gap:10px;
  height:44px;padding:0 16px;border-bottom:1px solid var(--line);background:var(--e1)}
.tdo-ttl{font-size:var(--fs-h3);font-weight:500;color:var(--t1)}
.tdo-cnt{margin-left:auto;font-size:var(--fs-caption);color:var(--t2)}

.tdo-body{flex:1 1 auto;min-height:0;overflow:auto;padding:12px 16px 20px}

/* 组头：标题 + 计数 + 一句行为说明 */
.tdo-gh{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;
  padding:14px 2px 8px;border-bottom:1px solid var(--line-strong)}
.tdo-gh:first-child{padding-top:2px}
.tdo-gh.muted{opacity:.72}
.tdo-gt{font-size:var(--fs-small);font-weight:500;color:var(--t1)}
.tdo-gn{font-size:var(--fs-caption);color:var(--t2)}
.tdo-gnote{margin-left:auto;font-size:var(--fs-caption);color:var(--t3)}

/* 一行 = 头像 + 名字 + 一行副标题 + 右侧恰一个按钮（红线②） */
.tdo-row{display:flex;align-items:center;gap:10px;
  padding:9px 2px;border-bottom:1px solid var(--hairline)}
.tdo-av{flex:0 0 auto;width:26px;height:26px;border-radius:var(--r-full);
  display:flex;align-items:center;justify-content:center;
  font-size:var(--fs-micro);color:var(--accent-text);background:var(--accent-wash)}
/* 规则行**不摆头像**：对象是规则不是人，摆头像会被读成"这是个人" */
.tdo-tag{flex:0 0 auto;padding:3px 7px;border-radius:var(--r-sm);
  font-size:var(--fs-micro);color:var(--t2);background:var(--e3)}
.tdo-nm{flex:0 0 auto;max-width:190px;font-size:var(--fs-small);font-weight:500;
  color:var(--t1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tdo-sub{flex:1 1 auto;min-width:0;font-size:var(--fs-caption);color:var(--t2);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ★ M2c：SLA 超期（`escalated_at` 非空）的**事实标记**。
   ⚠ 它**不是**一个可点元素（红线④：不许"要 hover 才知道能点"）—— 就是一条左侧色条，
     配合副标题里那句「已超期」说同一件事（**同一信息两处同形**是有意的：
     色条负责"一眼扫到"，文字负责"读得懂"）。
   ⚠ 不加动画、不加图标：本仓「符号必须配图例 = 培训成本 = 不要」。 */
.tdo-row.over{border-left:2px solid var(--danger-line);padding-left:8px;
  background:var(--danger-bg)}
.tdo-row.over .tdo-nm{color:var(--danger-text)}

/* 右侧按钮：**不靠 hover**（红线④）—— 常驻可见、有边框有内边距 */
.tdo-go{flex:0 0 auto;padding:4px 10px;border:1px solid var(--line-strong);
  border-radius:var(--r-md);font-size:var(--fs-caption);color:var(--t1);
  cursor:pointer;background:var(--e1)}
.tdo-go:hover{border-color:var(--accent-line);color:var(--accent-text)}
.tdo-go:focus-visible{outline:2px solid var(--ring);outline-offset:1px}

/* 三态分开（纪律 3）：忙 / 空 / 坏 */
.tdo-empty{padding:14px 2px;font-size:var(--fs-caption);color:var(--t3);line-height:1.7}
.tdo-empty.bad{color:var(--danger-text);background:var(--danger-bg);
  border:1px solid var(--danger-line);border-radius:var(--r-md);padding:12px 14px}
.tdo-why{display:block;margin-top:6px;color:var(--t3)}

/* 来源句：说清"这一组现在是拿什么撑的"（M0 批如实交底用） */
.tdo-src{padding:8px 2px 2px;font-size:var(--fs-micro);color:var(--t3);line-height:1.6}
/* 分页交底：本页 N / 共 M —— 两个数都给（只给一个会被读成"就这么点"） */
.tdo-more{padding:8px 2px;font-size:var(--fs-caption);color:var(--amber)}

/* ══ 工作台区块（需求①：采集机·已采集到的联系人从客户站迁来，2026-10-xx）══
   工作台 = 待处理事项的集合入口；现在只有「采集机·已采集到的联系人」这一组，
   未来其他待处理事项也归进这里。样式**逐条对齐**客户站旧 `.coll` 那套视觉，
   但类名独立（`tdo-wb-` / `tdo-wbg-`）—— 迁移后客户站那套样式随结构一起删了。 */
.tdo-wb{margin:0 0 12px;border-radius:var(--r-md);
  background:var(--e1);border:1px solid var(--line);overflow:hidden}
.tdo-wb-hd{display:flex;flex-wrap:wrap;align-items:center;gap:7px;row-gap:6px;
  padding:9px 11px;border-bottom:1px solid var(--line)}
.tdo-wb-ic{width:16px;height:16px;border-radius:5px;flex:0 0 auto;display:flex;
  align-items:center;justify-content:center;font-size:10px;font-weight:800;
  color:var(--accent-text);background:var(--accent-wash);border:1px solid var(--accent-line)}
.tdo-wb-hd b{font-size:var(--fs-small);font-weight:700;color:var(--t1);letter-spacing:.2px}
.tdo-wb-sub{margin-left:auto;font-size:var(--fs-micro);color:var(--t3)}

/* 工作台内的一组：采集机·已采集到的联系人（读数列 + 一个动作钮） */
.tdo-wbg{padding:9px 11px}
.tdo-wbg-hd{display:flex;flex-wrap:wrap;align-items:center;gap:7px;row-gap:6px}
.tdo-wbg-t{font-size:var(--fs-caption);font-weight:600;color:var(--t2)}
/* 加载中 / 取不到：推到右缘，且失败态换色 —— "取不到"与"读取中"必须一眼可分 */
.tdo-wbg-st{margin-left:auto;font-size:var(--fs-micro);color:var(--t3)}
.tdo-wbg-st.bad{color:var(--danger-text)}
.tdo-wbg-mt{display:inline-flex;align-items:baseline;gap:3px;margin-left:12px;
  font-size:var(--fs-micro);color:var(--t3)}
.tdo-wbg-mt b{font-size:var(--fs-caption);font-weight:800;color:var(--t1);font-family:var(--font-num)}
/* 「已进客户列表」的数字用强调色：这一组里**唯一会增长**的数（动作的反馈就靠它）。 */
.tdo-wbg-mt b.ok{color:var(--accent-text)}
.tdo-wbg-btn{display:inline-flex;align-items:center;height:22px;padding:0 9px;
  margin-left:auto;border-radius:var(--r-md);font-size:var(--fs-micro);font-weight:700;
  cursor:pointer;color:var(--accent-text);background:var(--accent-wash);
  border:1px solid var(--accent-line)}
.tdo-wbg-btn:hover{border-color:var(--accent-text)}
.tdo-wbg-btn:focus-visible{outline:2px solid var(--ring);outline-offset:1px}
/* 请求在飞：**降不透明度 + 吃掉点击**（防重入的视觉面；语义面在 `COLLC.syncing`）。 */
.tdo-wbg-btn.busy{opacity:.55;pointer-events:none}
/* 「已全部转入」= 不是按钮（读数），置灰且无指针。 */
.tdo-wbg-btn.off{cursor:default;color:var(--t3);background:var(--e3);border-color:var(--line)}
.tdo-wbg-btn.off:hover{border-color:var(--line)}
/* 第二行 = 采集质量读数（诊断用）。顶线是「名单读数」与「质量读数」两个口径的分界。 */
.tdo-wbg-ft{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px;margin-top:6px;
  padding-top:6px;border-top:1px solid var(--line);
  font-size:var(--fs-micro);color:var(--t3)}
.tdo-wbg-ft b{font-weight:700;color:var(--t2);font-family:var(--font-num)}
.tdo-wbg-ft b.warn{color:var(--amber)}
.tdo-wbg-why{font-style:normal;color:var(--t3)}

/* 窄窗兜底：副标题先让位（与 colleagues.css 的同一取舍） */
@media (max-width:1180px){
  .tdo-nm{max-width:140px}
  .tdo-gnote{display:none}
}
@media (max-width:949px){
  .tdo-sub{display:none}
  .tdo-body{padding:10px 10px 16px}
}