/* @layer ui — 申请、节点、导入与捕获（0.2）。
 *
 * 一条规则贯穿全文件：**这里没有新组件，只有已有角色的新实例。**
 *   · 申请行 = 待办行（发丝线分行、悬停浮一层纸），不是卡片
 *   · 提议卡与预览卡 = 对话里的「等你确认」计划卡（.chat-plan），只是每条多了来源与把握
 *   · 分段 = .seg / .seg__item，芯片 = 胶囊，按钮 = --radius-sm 实心
 * 所以本文件只写位置与间距，材质一律 var()，深浅两套由令牌自己成立。
 * 见 ../../../../docs/product/UI_PATTERNS.md。
 */

/* ---------------- 待办面顶部分段 ---------------- */

.tasks-seg { margin-bottom: 18px; }
.tasks-seg .seg__item small {
  margin-left: 5px;
  font-size: var(--fs-micro);
  color: var(--text-faint);
  font-variant-numeric: tabular-nums;
}
.tasks-seg .seg__item.is-active small { color: var(--accent-ink); }

/* ---------------- 节点：待办卡上多出来的两行 ---------------- */

.task-countdown { font-variant-numeric: tabular-nums; }
.task-countdown.is-alert { color: var(--today); font-weight: 560; }
.task-card__why {
  font-size: var(--fs-tiny);
  line-height: 1.6;
  color: var(--text-muted);
}
.task-card__why b {
  margin-right: 6px;
  font-size: var(--fs-micro);
  font-weight: 620;
  letter-spacing: var(--tracking-caps);
  color: var(--text-faint);
}

/* ---------------- 申请列表 ---------------- */

.track-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 18px;
}
/* 这一句解释的是它上面那枚「按时间 / 按阶段」分段。原来 `margin-left: auto`
   把它甩到 46em 版心的最右端并右对齐——一句中文正文与它所解释的控件之间隔着 400px 空白，
   而且是这一屏唯一一段右对齐的文字。
   改成上下叠、同一条起始线：`--stack` 让这条工具栏竖排（它只有分段 + 一句话），
   34em 的行长上限沿用 .ledger-note 的口径（11px 上约 34 字一行）。
   （不靠 `flex-basis: 100%` 换行：flex 的换行看的是被 max-width 夹过之后的假定宽度，
   34em 夹完只有 459px，和 115px 的分段并排放得下，于是根本不会断行。） */
.track-toolbar--stack { flex-direction: column; align-items: flex-start; gap: 10px; }
.track-toolbar__hint {
  max-width: 34em;
  font-size: var(--fs-micro);
  line-height: 1.6;
  color: var(--text-faint);
}
.track-rows { display: flex; flex-direction: column; }
.track-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 8px;
  text-align: left;
  border-radius: var(--radius-sm);
  transition: background var(--dur-fast) var(--ease);
}
.track-row + .track-row::before {
  content: '';
  position: absolute;
  left: 8px; right: 8px; top: 0;
  height: 1px;
  background: var(--hairline);
}
.track-row:hover { background: var(--surface); }
.track-row__main { display: flex; flex-direction: column; gap: 5px; min-width: 0; flex: 1; }
.track-row__title {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
  font-size: var(--fs-body);
  font-weight: 550;
  letter-spacing: var(--tracking-body);
}
.track-row__title small {
  font-size: var(--fs-tiny);
  font-weight: 400;
  color: var(--text-faint);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.track-row__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  font-size: var(--fs-micro);
  color: var(--text-faint);
}
.track-row__meta .is-alert { color: var(--today); font-weight: 560; }
.track-row__chevron { flex: none; color: var(--text-faint); font-size: var(--fs-lead); line-height: 1; }
.track-row:hover .track-row__chevron { color: var(--text-muted); }

/* 空态那两句是要读进去的话（「暂无申请记录…」「节点由申请信息和规则生成…」），
   不加行长上限时它们会摊满 46em 版心：13px 上一行 48 个汉字，读到行尾要回扫。
   材质不动——空态的底与字归 tasks.css 的 .task-empty 管，同一个角色不在两个文件里各长一张脸。 */
.track-empty { display: flex; flex-direction: column; gap: 8px; max-width: 34em; text-align: left; }
.track-empty__teach { color: var(--text-faint); font-size: var(--fs-tiny); }

/* ---------------- 阶段进度条 ---------------- */

.track-stages {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 14px;
}
.track-stages__step { display: flex; align-items: center; }
.track-stages__step button {
  height: 26px;
  padding: 0 10px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--hairline);
  font-size: var(--fs-micro);
  color: var(--text-faint);
  transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.track-stages__step button:hover { color: var(--text); border-color: var(--border-strong); }
.track-stages__step.is-done button { color: var(--text-muted); border-color: var(--accent-line); }
.track-stages__step.is-current button {
  background: var(--accent);
  border-color: transparent;
  color: var(--accent-text);
  font-weight: 560;
}

.modal--track { width: min(560px, 100%); }
.modal--track-editor { width: min(640px, 100%); }
.track-detail__headline { font-size: var(--fs-small); font-weight: 400; color: var(--text-faint); }
.track-detail .task-section { margin-top: 18px; margin-bottom: 0; }
.event-detail__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; justify-content: flex-end; }

/* ---------------- 表单与节点预览 ---------------- */

.track-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.track-form .field { min-width: 0; }
.track-notes {
  display: flex; flex-direction: column; gap: 4px;
  margin: 8px 0 12px;
  padding-left: 16px;
  font-size: var(--fs-tiny);
  color: var(--text-muted);
  list-style: disc;
}
.track-preview { margin-top: 4px; }
.track-preview .chat-plan__item em { font-size: var(--fs-micro); color: var(--text-faint); font-style: normal; }

/* ---------------- 节点看板 ---------------- */

.node-board { display: flex; flex-direction: column; }
.node-board .task-section { margin-bottom: 22px; }

/* ---------------- 导入 ---------------- */

.modal--import { width: min(720px, 100%); }
.import-pick { display: flex; flex-direction: column; gap: 12px; }
.import-pick__file { align-self: flex-start; position: relative; overflow: hidden; }
.import-pick__file input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.import-pick__text { font-family: var(--font-mono); }
.import-pick__links { display: flex; gap: 14px; }
.import-column-map { margin: 12px 0; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.import-column-map .field__label { overflow-wrap: anywhere; }
.import-column-map select { min-height: var(--touch-target, 44px); }
@media (max-width: 560px) { .import-column-map { grid-template-columns: minmax(0, 1fr); } }

.import-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 10px 0 14px;
}
/* `flex: 1` 会把五个格子摊满 720px 的弹窗，每格 130px 里只放一个两字标签
   和一个两位数——同 .ledger-figures 的老毛病：块宽跟着容器走而不是跟着内容走。
   收成 76–120px 后五格靠左成一条摘要带，右边留白，一眼能看出"这是一排小计"。 */
.import-summary span {
  flex: 1 1 76px;
  max-width: 120px;
  display: flex; flex-direction: column; gap: 1px;
  padding: 8px 9px;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  /* 边取 --border（一个真实物体的边），与 modules.css 的 .ledger-figures > div 同级：
     两处是同一个角色（一格数字），线不该有两种。
     底仍是 --surface-2 而不是 --surface：这一格长在弹窗的**纸**上（往下沉一级），
     .ledger-figures 长在工作面的**地**上（往上抬一级）——脚下不同，方向就相反。 */
  border: 1px solid var(--border);
  font-size: var(--fs-micro);
  color: var(--text-faint);
}
.import-summary b { font-size: var(--fs-lead); font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }

.import-rows { display: flex; flex-direction: column; }
.import-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 6px;
  border-top: 1px solid var(--hairline);
  font-size: var(--fs-small);
}
.import-row__no {
  flex: none;
  width: 26px;
  font-size: var(--fs-micro);
  color: var(--text-faint);
  font-variant-numeric: tabular-nums;
}
/* 状态徽标与 modules.css 的 .asset-badge / .trash-row__kind 是同一个角色，
   边一律 --border；--hairline 那一级是"行与行之间的分隔"，不是一个物体的边。 */
.import-row__state {
  flex: none;
  padding: 1px 7px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border);
  font-size: var(--fs-micro);
  color: var(--text-muted);
}
.import-row.is-ready .import-row__state { border-color: var(--accent-line); color: var(--accent-ink); }
.import-row.is-needs_input .import-row__state { border-color: color-mix(in srgb, var(--warning) 45%, transparent); color: var(--warning); }
.import-row.is-exists .import-row__state { color: var(--text-faint); }
.import-row__main { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.import-row__main b { font-weight: 550; overflow-wrap: anywhere; }
.import-row__main small { font-size: var(--fs-micro); color: var(--text-faint); line-height: 1.5; }
.import-row__acts { display: flex; gap: 4px; flex: none; }
.import-row__acts .seg__item {
  min-height: var(--touch-target);
  height: auto;
  min-width: var(--touch-target);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-pill);
}
.import-row__acts .seg__item.is-active {
  border-color: transparent;
  background: var(--accent);
  color: var(--accent-text);
  box-shadow: none;
}
.import-row__note { font-size: var(--fs-micro); color: var(--text-faint); }
.import-row.is-skipped .import-row__main { opacity: 0.62; }
.import-dupes { margin-top: 10px; }
.import-dupes summary {
  cursor: pointer;
  font-size: var(--fs-small);
  color: var(--text-muted);
  padding: 6px 0;
  min-height: var(--touch-target);
  box-sizing: border-box;
  align-content: center;
}
.modal--import .modal__foot .btn,
.modal--import .modal__head .icon-btn,
.modal--import .import-pick__links .seg__item,
.modal--import .import-pick__links .link-btn,
.modal--import .import-pick__file {
  min-height: var(--touch-target);
  min-width: var(--touch-target);
  height: auto;
  touch-action: manipulation;
}
.import-done { display: flex; flex-direction: column; gap: 10px; }
.import-done__line { font-size: var(--fs-lead); font-weight: 600; line-height: 1.5; }

/* ---------------- 记一下：提议卡与收件箱 ---------------- */

.modal--capture-inbox { width: min(600px, 100%); }
.capture-inbox { display: flex; flex-direction: column; gap: 14px; }
.capture-card { margin: 10px auto; }
.capture-card__teach {
  padding: 8px 16px 0;
  font-size: var(--fs-tiny);
  color: var(--text-muted);
}
.capture-card > footer {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-top: 1px solid var(--hairline);
}
.capture-card > footer .btn { margin-left: auto; }
.capture-card > footer .btn + .btn { margin-left: 0; }
.capture-card.is-busy .chat-plan__warning,
.capture-card > footer .settings__note { margin-right: auto; }

.capture-source { margin-top: 4px; }
.capture-source summary {
  cursor: pointer;
  font-size: var(--fs-micro);
  color: var(--text-faint);
}
.capture-source q {
  display: block;
  margin-top: 4px;
  padding-left: 9px;
  border-left: 2px solid var(--accent-line);
  font-size: var(--fs-micro);
  line-height: 1.6;
  color: var(--text-muted);
}
.capture-edit { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0; }
.capture-edit .input { height: 28px; font-size: var(--fs-small); }
.capture-edit__acts { display: flex; gap: 6px; margin-left: auto; }

/* ---------------- 下一节点 / 待确认：侧栏与对话空态共用的一行 ---------------- */

.next-node {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 100%;
  padding: 9px 11px;
  text-align: left;
  border-radius: var(--radius-sm);
  border: 1px solid var(--hairline);
  background: var(--surface);
  transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.next-node:hover { border-color: var(--accent-line); }
.next-node b { font-size: var(--fs-small); font-weight: 550; }
.next-node span { font-size: var(--fs-micro); color: var(--text-faint); line-height: 1.5; }
.next-node.is-warning { border-color: color-mix(in srgb, var(--warning) 40%, transparent); }

/* ---------------- 写入回执芯片 ---------------- */

.receipt-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--fs-micro);
  color: var(--text-faint);
}
.receipt-chip.is-recorded { color: var(--text-muted); }
.receipt-chip .link-btn { font-size: var(--fs-micro); }

/* ---------------- 侧栏「+ 新建」下的次要入口（0.4.1 已整组移走）----------------
 *
 * 原来这里是 .side__new-actions：五个并列的白胶囊（申请 / 记一笔 / 导入表格 /
 * 物品或订阅 / 一件事），排成固定两列挂在主键下面。0.3.3 为它修过「三张脸」与命中区，
 * 但真正的毛病在更上一层：**它们和主键平级**——既抢那颗主键的眼，彼此之间又没有分组逻辑。
 *
 * 0.4.1 把它们整组收进主键旁边的一枚溢出键，展开是一列文字项。样式跟着角色走，
 * 落在 layout.css 的 .side__more / .side__more-list / .side__more-item：
 * 那里仍然保留 0.3.3 修过的两条（悬停换的是底不是 opacity、窄屏命中区补到 --touch-target），
 * 也仍然是 X12 那张按压表里的一处。功能模块登记的还是只有 label 与 command
 * （registry 的 newActions），一个字没改。
 */

/* ---------------- 设置 › 导入与捕获 ---------------- */

.settings__details { margin: 4px 0 2px; }
.settings__details summary { cursor: pointer; font-size: var(--fs-small); color: var(--text-muted); padding: 4px 0; }
.settings__pre {
  max-height: 240px;
  overflow: auto;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  background: var(--surface-sunken);
  border: 1px solid var(--hairline);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  line-height: 1.65;
  white-space: pre-wrap;
  color: var(--text-muted);
}

/* ---------------- 拖入撰写卡 ---------------- */

.chat-workspace.is-dropping .chat-composer {
  border-color: var(--accent);
  box-shadow: 0 0 0 3.5px var(--accent-soft);
}

@media (max-width: 820px) {
  .track-form { grid-template-columns: minmax(0, 1fr); }
  .import-row { flex-wrap: wrap; }
  .import-row__acts { margin-left: 36px; }
  /* UI_PATTERNS §9：窄屏下命中区不小于 44×44。这几处是本次分工里剩下的最后几枚小控件——
     阶段芯片 26px、导入行的两枚决定 24px、候选编辑的输入 28px，手指够不着。
     视觉尺寸不必跟着变（只长高，字号不动），这是 §9 明写的做法。 */
  .import-row__acts .seg__item,
  .track-stages__step button { min-height: var(--touch-target); touch-action: manipulation; }
  .capture-edit .input { height: var(--touch-target); }
}

/* 侧栏「接下来」里的节点行：与它上面的日程行同宽同缩进，只是多一行理由。 */
.side__next-node { margin-bottom: 6px; }