/* ==========================================================================
   五种卡片：风险卡 / 文档卡 / 清单卡 / 函件卡 / 工作台卡。
   外加分类图、需要留意、硬规则三块。
   只用 tokens.css 里的变量，不写死色值。
   ========================================================================== */

.cards-group { margin-top: var(--sp-3); }

/* 保守模式说明条：按钮消失要给理由，不然像功能坏了 */
.mode-note {
  padding: 8px 12px;
  margin-bottom: var(--sp-3);
  background: var(--surface-2);
  border-left: 2px solid var(--brass);
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm);
  color: var(--ink2);
  line-height: 1.75;
}
.mode-note b { color: var(--ink); font-weight: 600; }

/* --------------------------------------------------------------- 通用块 */

/* 条款原文引文：衬线体、左侧竖线，读起来像文件而不是界面 */
.quote {
  font-family: var(--font-serif);
  font-size: var(--fs-body);
  line-height: 1.95;
  color: var(--ink2);
  padding: 9px 12px;
  margin-bottom: var(--sp-3);
  background: var(--bg);
  border-left: 1px solid var(--line);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.quote.is-degraded { border-left-style: dashed; }
.quote.is-degraded .label { display: block; margin-bottom: 4px; }

/* 标注：透明底 + 下边框着色。方案 A 的克制感来源，不用块状底色 */
mark.mk {
  background: transparent;
  padding: 0 1px;
  font-weight: 600;
  border-bottom: 1.5px solid currentColor;
  /* 选中态（下面 .is-active）只改这三个属性，所以只过渡这三个。
     不写 all —— color 也在过渡范围里的话，切风险等级时字色会拖一下。 */
  transition: background-color var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease),
              border-bottom-color var(--dur) var(--ease);
}
mark.mk-high { color: var(--high); }
mark.mk-mid  { color: var(--mid); }

/* AI 改写：蓝，与风险的红/黄明确区分 */
mark.ai {
  background: var(--ai-bg);
  color: var(--ai-bd);
  padding: 0 2px;
  border-bottom: 1.5px solid var(--ai-bd);
  border-radius: 2px;
  transition: box-shadow var(--dur) var(--ease),
              border-bottom-color var(--dur) var(--ease);
}
del.ai-old {
  color: var(--ink3);
  font-size: .92em;
  margin-right: 4px;
  text-decoration-thickness: 1px;
}

/* AI 新增条款：绿，与改写的蓝区分 */
mark.gen {
  background: var(--gen-bg);
  color: var(--gen-bd);
  padding: 0 2px;
  border-bottom: 1.5px solid var(--gen-bd);
  border-radius: 2px;
}
del.gen-old { color: var(--ink3); font-size: .92em; display: block; margin-bottom: 3px; }

/* ------------------------------------------------- 高亮的选中态 */

/**
 * 「我点的就是这一句」。overlay/index.js 的 focusFinding 给 mark[data-fid]
 * 切这个类，同时右侧对应的 .scard 也会亮。
 *
 * 为什么不是换底色：一屏二十多处高亮，其中标红的那批本身就带
 * --mk-high-bg 一类的底，再换一档底色，两者的差别小到要对比着看才认得出，
 * 而这个反馈必须一眼可辨 —— 用户点下去是要确认「点中的是这句」。
 *
 * 所以走三层叠加，每一层都不与未选中态的表达撞车：
 *   1. box-shadow 描边。用 shadow 而不是 outline：outline 在换行处
 *      会被拆成上下两段各自闭合的框，一句跨行的高亮看着像两个方块；
 *      inline 元素的 box-shadow 同样断行，但没有那圈闭合边，读作
 *      「同一段被框住了」。同理不用 border —— border 会挤动排版。
 *   2. 底色垫一层 --surface-2。它是全站的「抬升面」，语义正好是
 *      这一片被拿到前面来了；且它是中性色，压在红/黄/蓝三种高亮下面
 *      都不会把原本的风险色相带偏。
 *   3. 下划线加粗到 2.5px。原本 1.5px，同色加粗是纯粹的层级信号，
 *      不引入新颜色。
 *
 * currentColor 是关键：三种高亮（红/黄/蓝）各自的 color 已经定好，
 * 描边跟着走，一条规则覆盖全部，也不会新增硬编码色值。
 */
mark.is-active {
  background: var(--surface-2);
  box-shadow: 0 0 0 1.5px currentColor;
  border-radius: 2px;
  border-bottom-width: 2.5px;
}

/* AI 改写那支本来就有 --ai-bg 底色。选中时保留它自己的蓝底，
   只加描边 —— 换成中性的 --surface-2 会把「这是 AI 改的」那层信息抹掉。
   （mark.gen 不用管：它带的是 data-cid，focusFinding 只找 data-fid。） */
mark.ai.is-active { background: var(--ai-bg); }

/* 影响 / 话术 / 兜底 三行 */
.rrow {
  display: grid;
  grid-template-columns: 38px 1fr;
  gap: var(--sp-2);
  margin-bottom: 6px;
  font-size: var(--fs-sm);
  line-height: 1.8;
}
.rrow .k {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: .08em;
  color: var(--ink3);
  padding-top: 3px;
}
.rrow .v { color: var(--ink2); }
.rrow .v b { color: var(--ink); font-weight: 600; }
.rrow .v del { color: var(--ink3); }
.rrow .v.is-suggest {
  font-family: var(--font-serif);
  padding: 7px 10px;
  background: var(--surface-2);
  border-radius: var(--radius-sm);
  color: var(--ink);
}

/* 动作按钮 */
.racts, .kacts, .lcard-acts {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-top: var(--sp-3);
  padding-top: var(--sp-2);
  border-top: 1px solid var(--line-s);
}
.act {
  padding: 4px 11px;
  background: transparent;
  border: 1px solid var(--line-s);
  border-radius: var(--radius-pill);
  color: var(--ink2);
  font-size: var(--fs-xs);
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.act:hover { color: var(--ink); border-color: var(--line); }
.act.pri { color: var(--brass); border-color: var(--line); }
.act.pri:hover { border-color: var(--brass); }

/* 小标签 */
.stale-tag, .ktag {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: .08em;
  padding: 1px 5px;
  border: 1px solid var(--line-s);
  border-radius: 3px;
  color: var(--ink3);
}
.stale-tag { border-color: var(--high); color: var(--high); }
.ktag.lv-high { border-color: var(--high); color: var(--high); }

/* --------------------------------------------------------------- 风险卡 */

.rcard {
  background: var(--surface);
  border: 1px solid var(--line-s);
  border-left: 2px solid currentColor;
  border-radius: var(--radius);
  margin-bottom: var(--sp-2);
  overflow: hidden;
}
.rcard.lv-high   { color: var(--high); }
.rcard.lv-medium { color: var(--mid); }
.rcard.lv-low    { color: var(--low); }
.rcard.is-fixed  { color: var(--ai-bd); }
.rcard.is-stale  { opacity: .55; }

.rcard-head {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: 9px 12px;
  cursor: pointer;
  user-select: none;
}
.rcard-head:hover { background: var(--surface-2); }

.rno {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: .06em;
  color: var(--ink3);
  flex-shrink: 0;
}
.rtag {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: .1em;
  padding: 1px 6px;
  border: 1px solid currentColor;
  border-radius: 3px;
  opacity: .85;
  flex-shrink: 0;
}
.rtitle {
  flex: 1;
  font-size: var(--fs-base);
  color: var(--ink);
  line-height: 1.5;
}
.rcaret {
  width: 14px; height: 14px;
  color: var(--ink3);
  flex-shrink: 0;
  transition: transform var(--dur) var(--ease);
}
.rcard.is-open .rcaret { transform: rotate(180deg); }

.rcard-body { display: none; padding: 0 12px 11px; }
.rcard.is-open .rcard-body { display: block; }

/* 就地展开的前后文。条款本身的样式由 overlay.css 提供，这里只管容器 */
.rctx {
  margin-top: var(--sp-3);
  padding: 10px;
  background: var(--bg);
  border-radius: var(--radius-sm);
}

/* --------------------------------------------------------------- 文档卡 */

.dcard {
  margin-top: var(--sp-3);
  background: var(--surface);
  border: 1px solid var(--line-s);
  border-radius: var(--radius);
  overflow: hidden;
}
.dcard-head {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: 10px 12px;
  border-bottom: 1px solid var(--line-s);
}
.dcard-head svg { width: 14px; height: 14px; color: var(--ink3); flex-shrink: 0; }
.dname { flex: 1; font-size: var(--fs-base); color: var(--ink); }
.dstat {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: .05em;
  color: var(--ink3);
  white-space: nowrap;
}
.dstat b { font-weight: 600; }

.dbody { padding: 9px 12px; background: var(--paper); }
.dline {
  display: flex; gap: var(--sp-2);
  font-family: var(--font-serif);
  font-size: var(--fs-sm);
  line-height: 1.9;
  color: var(--ink3);
  white-space: nowrap; overflow: hidden;
}
.dline i {
  font-style: normal;
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  color: var(--ink3);
  flex-shrink: 0;
  min-width: 26px;
}

.dcard-foot {
  display: flex; align-items: center; gap: 6px;
  width: 100%;
  padding: 8px 12px;
  background: transparent;
  border: 0; border-top: 1px solid var(--line-s);
  color: var(--brass);
  font-size: var(--fs-sm);
  text-align: left;
}
.dcard-foot:hover { background: var(--surface-2); }
.dcard-foot svg { width: 13px; height: 13px; }

/* --------------------------------------------------------------- 清单卡 */

.kcard {
  margin-top: var(--sp-3);
  background: var(--surface);
  border: 1px solid var(--line-s);
  border-radius: var(--radius);
  padding: 11px 12px;
}
.kcard-head {
  display: flex; align-items: center; gap: var(--sp-2);
  padding-bottom: var(--sp-2);
  margin-bottom: var(--sp-2);
  border-bottom: 1px solid var(--line-s);
}
.kcount {
  flex: 1;
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  color: var(--ink3);
}

.kitem {
  display: flex; gap: var(--sp-2);
  padding: 9px 0;
  border-bottom: 1px solid var(--line-s);
}
.kitem:last-child { border-bottom: 0; padding-bottom: 0; }

.kmark {
  display: grid; place-items: center;
  width: 19px; height: 19px;
  flex-shrink: 0;
  margin-top: 2px;
  border: 1px solid currentColor;
  border-radius: 50%;
  font-size: 10px;
  line-height: 1;
}
.kmark.no   { color: var(--high); }
.kmark.weak { color: var(--mid); }
.kmark.ok   { color: var(--low); }
.kmark.gen  { color: var(--gen-bd); }

.kmain { flex: 1; min-width: 0; }
.kname {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  font-size: var(--fs-base);
  color: var(--ink);
  margin-bottom: 3px;
}
.kwhy, .knote {
  font-size: var(--fs-sm);
  line-height: 1.75;
  color: var(--ink2);
  margin-bottom: 3px;
}
.knote { color: var(--ink3); }
.kgen {
  font-family: var(--font-serif);
  font-size: var(--fs-sm);
  line-height: 1.85;
  padding: 8px 10px;
  margin: 5px 0;
  background: var(--gen-bg);
  border-left: 2px solid var(--gen-bd);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  color: var(--ink);
}
.kgen .label { display: block; margin-bottom: 3px; color: var(--gen-bd); }

.kacts { border-top: 0; padding-top: 4px; margin-top: 5px; }
.kanchor {
  font-size: var(--fs-xs);
  color: var(--brass);
  cursor: pointer;
  align-self: center;
}
.kanchor:hover { text-decoration: underline; }

/* --------------------------------------------------------------- 函件卡 */

.lcard {
  margin-top: var(--sp-3);
  background: var(--surface);
  border: 1px solid var(--line-s);
  border-radius: var(--radius);
  overflow: hidden;
}

/* 草稿色带：need_v1.md §3.2 约束 1 —— 草稿与定稿必须视觉可分 */
.lcard-band {
  display: flex; align-items: flex-start; gap: var(--sp-2);
  padding: 9px 12px;
  background: var(--mk-mid-bg);
  border-left: 3px solid var(--mid);
  font-size: var(--fs-sm);
  line-height: 1.7;
}
.lcard-band svg { width: 15px; height: 15px; color: var(--mid); flex-shrink: 0;
  margin-top: 2px; }
.lcard-band b { color: var(--ink); font-weight: 600; margin-right: 5px; }
.lcard-band span { color: var(--ink2); }

.lcard-meta {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: 7px 12px;
  border-bottom: 1px solid var(--line-s);
}
.ltype { font-size: var(--fs-base); color: var(--ink); }
.ltone {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: .08em;
  padding: 1px 6px;
  border: 1px solid var(--line-s);
  border-radius: 3px;
  color: var(--ink3);
}

.lcard-paper {
  padding: var(--sp-5) var(--sp-6);
  background: var(--paper);
  font-family: var(--font-serif);
  font-size: var(--fs-body);
  line-height: 2;
  color: var(--ink);
  outline: none;
  max-height: 420px;
  overflow-y: auto;
}
.lcard-paper:focus { box-shadow: inset 0 0 0 1px var(--brass); }
.lline { min-height: 1.6em; }
.lline.is-blank { min-height: .9em; }
.lline:first-child {
  text-align: center;
  font-size: var(--fs-md);
  letter-spacing: .3em;
  margin-bottom: var(--sp-3);
}
.cite {
  color: var(--brass);
  border-bottom: 1px dotted var(--brass);
}

.lcard-acts { padding: 0 12px 11px; border-top: 0; }

.lcard-note {
  padding: 0 12px 10px;
  font-size: var(--fs-xs);
  color: var(--ink3);
  line-height: 1.6;
}

/* ---- 定稿态：色带换绿、正文锁定并盖章 ---- */

.lcard.is-final { border-color: var(--gen-bd); }

.lcard-band.is-final {
  background: var(--gen-bg);
  border-left-color: var(--gen-bd);
}
.lcard-band.is-final svg { color: var(--gen-bd); }

.ltag {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: .08em;
  padding: 1px 6px;
  border: 1px solid var(--line);
  border-radius: 3px;
  color: var(--brass);
}

/* 定稿件正文不可编辑，给一枚淡章说明它已锁定 */
.lcard.is-final .lcard-paper {
  position: relative;
  cursor: default;
}
.lcard.is-final .lcard-paper::after {
  content: '已审定';
  position: absolute; right: 22px; top: 18px;
  width: 58px; height: 58px;
  display: grid; place-items: center;
  border: 2px solid var(--gen-bd);
  border-radius: 50%;
  color: var(--gen-bd);
  font-family: var(--font-serif);
  font-size: var(--fs-sm);
  letter-spacing: .1em;
  opacity: .55;
  transform: rotate(-12deg);
  pointer-events: none;
}

/* ------------------------------------------------------------ 函件审查卡 */

.lrcard {
  margin-top: var(--sp-3);
  background: var(--surface);
  border: 1px solid var(--line-s);
  border-radius: var(--radius);
  overflow: hidden;
}
.lrcard-head {
  display: flex; align-items: center; gap: var(--sp-3);
  flex-wrap: wrap;
  padding: 10px 12px;
  border-left: 3px solid var(--c);
  border-bottom: 1px solid var(--line-s);
}
.lrverdict {
  font-family: var(--font-serif);
  font-size: var(--fs-md);
  color: var(--c);
}
.lrvtext { font-size: var(--fs-sm); color: var(--ink2); }

.lrsec { padding: 11px 12px; }
.lrsec + .lrsec { border-top: 1px solid var(--line-s); }
.lrsec > .label { display: block; margin-bottom: var(--sp-2); }

.lritem {
  padding: 9px 0;
  border-bottom: 1px solid var(--line-s);
}
.lritem:last-child { border-bottom: 0; padding-bottom: 0; }
.lritem.lv-high   { color: var(--high); }
.lritem.lv-medium { color: var(--mid); }

.lrtop {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  margin-bottom: 6px;
}
.lrtag {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  padding: 1px 6px;
  border: 1px solid currentColor;
  border-radius: 3px;
}
.lrcat {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: .06em;
  color: var(--ink3);
}
.lrtitle { flex: 1; font-size: var(--fs-base); color: var(--ink); }

.lrcard-foot {
  display: flex; align-items: center; gap: 6px;
  width: 100%;
  padding: 8px 12px;
  background: transparent;
  border: 0; border-top: 1px solid var(--line-s);
  color: var(--brass);
  font-size: var(--fs-sm);
  text-align: left;
}
.lrcard-foot:hover { background: var(--surface-2); }
.lrcard-foot svg { width: 13px; height: 13px; }

/* ------------------------------------------------------------- 工作台卡 */

.wcard {
  margin-top: var(--sp-3);
  background: var(--surface);
  border: 1px solid var(--line-s);
  border-radius: var(--radius);
  padding: 11px 12px;
}
.wcard-head {
  display: flex; align-items: center; gap: var(--sp-3);
  flex-wrap: wrap;
  margin-bottom: var(--sp-3);
}
.wfilters { display: flex; gap: 4px; flex-wrap: wrap; }
.wf {
  padding: 2px 9px;
  background: transparent;
  border: 1px solid var(--line-s);
  border-radius: var(--radius-pill);
  color: var(--ink3);
  font-size: var(--fs-xs);
}
.wf:hover { color: var(--ink); border-color: var(--line); }
.wf.is-on { color: var(--brass); border-color: var(--brass); }

.wgrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(228px, 1fr));
  gap: var(--sp-2);
}
.wempty {
  padding: var(--sp-5);
  text-align: center;
  color: var(--ink3);
  font-size: var(--fs-sm);
}

.wc {
  position: relative;
  text-align: left;
  padding: 10px 11px;
  background: var(--bg);
  border: 1px solid var(--line-s);
  border-radius: var(--radius-sm);
  transition: border-color var(--dur) var(--ease);
}
.wc:hover { border-color: var(--brass); }

.wc-top {
  display: flex; align-items: center; justify-content: space-between;
  gap: 6px; margin-bottom: 5px;
}
.wc-state {
  display: inline-flex; align-items: center; gap: 4px;
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: .06em;
  color: var(--c);
}
.wc-state i {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--c);
}
.wc-type {
  font-size: var(--fs-label);
  color: var(--ink3);
  white-space: nowrap;
}
.wc-title {
  font-size: var(--fs-sm);
  color: var(--ink);
  line-height: 1.55;
  margin-bottom: 3px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.wc-party {
  font-size: var(--fs-xs);
  color: var(--ink3);
  margin-bottom: 6px;
}
.wc-stat { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 3px; }
.wc-stat b {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--ink2);
}
.wc-meta {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  color: var(--ink3);
}
.wc-bar {
  height: 3px;
  background: var(--line-s);
  border-radius: 2px;
  overflow: hidden;
  margin-bottom: 4px;
}
.wc-bar i { display: block; height: 100%; background: var(--brass); }
.wc-full {
  position: absolute; top: 8px; right: 9px;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--brass);
  font-size: 0;
}

/* --------------------------------------------------------------- 分类图 */

.ccard {
  margin-top: var(--sp-3);
  background: var(--surface);
  border: 1px solid var(--line-s);
  border-radius: var(--radius);
  padding: 11px 12px;
}
.ccard > .label { display: block; margin-bottom: var(--sp-3); }
.cbars { display: flex; flex-direction: column; gap: 6px; }
.cbar {
  display: grid;
  grid-template-columns: 68px 1fr 24px;
  align-items: center;
  gap: var(--sp-2);
}
.cname { font-size: var(--fs-xs); color: var(--ink2); }
.ctrack {
  height: 6px;
  background: var(--bg);
  border-radius: 3px;
  overflow: hidden;
}
.ctrack i { display: block; height: 100%; border-radius: 3px; }
.cnum {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  color: var(--ink3);
  text-align: right;
}

/* ------------------------------------------------------------- 需要留意 */

.acard {
  margin-top: var(--sp-3);
  background: var(--surface);
  border: 1px solid var(--line-s);
  border-radius: var(--radius);
  padding: 11px 12px;
}
.acard > .label { display: block; margin-bottom: var(--sp-2); }
.aitem {
  display: flex; gap: var(--sp-2);
  padding: 7px 0;
  border-bottom: 1px solid var(--line-s);
}
.aitem:last-child { border-bottom: 0; padding-bottom: 0; }
.aitem svg { width: 14px; height: 14px; color: var(--high); flex-shrink: 0;
  margin-top: 3px; }
.aitem b {
  display: block;
  font-size: var(--fs-sm);
  font-weight: 400;
  color: var(--ink);
  line-height: 1.5;
}
.aitem span {
  display: block;
  font-size: var(--fs-xs);
  color: var(--ink3);
  line-height: 1.65;
}

/* ---------------------------------------------------------- 硬规则触发 */

.ecard {
  margin-top: var(--sp-3);
  background: var(--mk-high-bg);
  border: 1px solid var(--high);
  border-left-width: 3px;
  border-radius: var(--radius);
  padding: 10px 12px;
}
.ecard-head {
  display: flex; align-items: center; gap: var(--sp-2);
  margin-bottom: var(--sp-2);
}
.ecard-head svg { width: 15px; height: 15px; color: var(--high); flex-shrink: 0; }
.ecard-head b { font-size: var(--fs-base); color: var(--high); font-weight: 600; }
.ecard-list { margin: 0; padding-left: 0; list-style: none; }
.ecard-list li {
  font-size: var(--fs-sm);
  line-height: 1.75;
  color: var(--ink2);
  margin-bottom: 4px;
}
.erule {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: .06em;
  color: var(--high);
  margin-right: 6px;
}

/* ------------------------------------------------------------- 渲染失败 */

.card-err {
  margin-top: var(--sp-3);
  padding: 9px 12px;
  border: 1px solid var(--high);
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm);
  color: var(--ink2);
}

/* 审的是内置示例时的说明条 —— 不能让人误会审的是他给的内容 */
.lrcard-sample {
  padding: 7px 12px;
  border-bottom: 1px solid var(--line-s);
  background: var(--surface-2);
  font-size: var(--fs-xs);
  line-height: 1.7;
  color: var(--ink3);
}

/* ============================================================ 通用列表卡
   模板库、异常登记、争议案件、版本记录共用。
   每条可折叠，展开后是详情 + 处理进展时间线。 */

.lscard {
  margin-top: var(--sp-3);
  background: var(--surface);
  border: 1px solid var(--line-s);
  border-radius: var(--radius);
  overflow: hidden;
}
.lscard-head {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: 9px 12px;
  border-bottom: 1px solid var(--line-s);
}
.lscard-head .label { flex-shrink: 0; }
.lscard-note {
  padding: 7px 12px;
  border-bottom: 1px solid var(--line-s);
  background: var(--surface-2);
  font-size: var(--fs-xs);
  line-height: 1.7;
  color: var(--ink3);
}

.lsitem { border-bottom: 1px solid var(--line-s); }
.lsitem:last-child { border-bottom: 0; }

.lsitem-head {
  display: flex; align-items: center; gap: var(--sp-2);
  width: 100%;
  padding: 9px 12px 5px;
  background: transparent; border: 0;
  text-align: left;
}
.lsitem-head:hover { background: var(--surface-2); }
.lstitle {
  flex: 1;
  font-size: var(--fs-base);
  color: var(--ink);
  line-height: 1.5;
}
.lstag {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: .06em;
  padding: 1px 5px;
  border: 1px solid var(--line-s);
  border-radius: 3px;
  color: var(--ink3);
  flex-shrink: 0;
  white-space: nowrap;
}
.lstag.lv-high   { border-color: var(--high); color: var(--high); }
.lstag.lv-medium { border-color: var(--mid);  color: var(--mid); }
.lstag.lv-low    { border-color: var(--low);  color: var(--low); }
.lsitem.is-open .rcaret { transform: rotate(180deg); }

.lsmeta {
  display: flex; flex-wrap: wrap; gap: var(--sp-2);
  padding: 0 12px 9px 12px;
  font-size: var(--fs-xs);
  color: var(--ink3);
}
.lssub { color: var(--ink2); }

.lsbody { display: none; padding: 0 12px 11px; }
.lsitem.is-open .lsbody { display: block; }

.lsdetail {
  margin: 0 0 var(--sp-3);
  padding: 8px 10px;
  background: var(--bg);
  border-left: 1px solid var(--line);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: var(--fs-sm);
  line-height: 1.85;
  color: var(--ink2);
}

/* 处理进展时间线 */
.lssteps { margin-top: var(--sp-3); }
.lssteps .label { display: block; margin-bottom: 6px; }
.lsstep {
  display: grid;
  grid-template-columns: 78px 52px 1fr;
  gap: var(--sp-2);
  padding: 4px 0;
  font-size: var(--fs-sm);
  line-height: 1.7;
  border-left: 1px solid var(--line-s);
  padding-left: 10px;
  margin-left: 3px;
  position: relative;
}
.lsstep::before {
  content: '';
  position: absolute; left: -3px; top: 11px;
  width: 5px; height: 5px;
  background: var(--brass-l);
  border-radius: 50%;
}
.lsat { font-family: var(--font-mono); font-size: var(--fs-label);
  color: var(--ink3); padding-top: 3px; }
.lsby { color: var(--ink3); font-size: var(--fs-xs); padding-top: 2px; }
.lstext { color: var(--ink2); }

.lsresult {
  margin-top: var(--sp-3);
  padding: 8px 10px;
  background: var(--gen-bg);
  border-left: 2px solid var(--gen-bd);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: var(--fs-sm);
  line-height: 1.8;
  color: var(--ink2);
}
.lsresult .label { display: block; margin-bottom: 3px; }

/* ============================================================== 面板卡
   分步计算 / 无锚点风险 / 版本对照，三种形态共用外框。 */

.pcard {
  margin-top: var(--sp-3);
  background: var(--surface);
  border: 1px solid var(--line-s);
  border-radius: var(--radius);
  overflow: hidden;
}
.pcard-head {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: 9px 12px;
  border-bottom: 1px solid var(--line-s);
}
.pcount {
  flex: 1; text-align: right;
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  color: var(--ink3);
}

/* ---- 分步计算 ---- */
.csteps { padding: 10px 12px 4px; }
.cstep {
  display: flex; gap: var(--sp-2);
  padding: 5px 0;
  font-size: var(--fs-sm);
  line-height: 1.75;
  color: var(--ink2);
}
.cstep i {
  flex-shrink: 0;
  width: 16px; height: 16px;
  display: grid; place-items: center;
  margin-top: 3px;
  border: 1px solid var(--line);
  border-radius: 50%;
  font-family: var(--font-mono);
  font-size: 9px;
  font-style: normal;
  color: var(--ink3);
}
.cresult {
  display: flex; align-items: baseline; gap: var(--sp-3);
  margin: 4px 12px 0;
  padding: 10px 0;
  border-top: 1px solid var(--line-s);
}
.clabel {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: .08em;
  color: var(--ink3);
}
.cresult b {
  font-family: var(--font-serif);
  font-size: 21px;
  font-weight: 400;
  color: var(--brass);
}
.calt, .cnote {
  padding: 0 12px 8px;
  font-size: var(--fs-xs);
  line-height: 1.7;
  color: var(--ink3);
}
.calt { color: var(--ink2); }

/* ---- 无锚点风险列表 ---- */
.prisk {
  padding: 10px 12px;
  border-bottom: 1px solid var(--line-s);
  border-left: 2px solid currentColor;
}
.prisk:last-child { border-bottom: 0; }
.prisk.lv-high   { color: var(--high); }
.prisk.lv-medium { color: var(--mid); }
.prisk.lv-low    { color: var(--low); }
.prisk-top {
  display: flex; align-items: baseline; gap: var(--sp-2);
  margin-bottom: var(--sp-2);
}

/* ---- 版本对照 ---- */
.drow {
  padding: 9px 12px;
  border-bottom: 1px solid var(--line-s);
}
.drow:last-child { border-bottom: 0; }
.drow-top {
  display: flex; align-items: baseline; gap: var(--sp-2);
  margin-bottom: 6px;
}
.dkind {
  flex-shrink: 0;
  width: 17px; height: 17px;
  display: grid; place-items: center;
  border-radius: 3px;
  font-size: var(--fs-label);
  color: var(--surface);
}
.d-chg .dkind { background: var(--ai-bd); }
.d-add .dkind { background: var(--gen-bd); }
.d-del .dkind { background: var(--high); }
.dno {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: .06em;
  color: var(--ink3);
  flex-shrink: 0;
}
.dwhy { font-size: var(--fs-xs); color: var(--ink2); line-height: 1.6; }
.dtext {
  font-family: var(--font-serif);
  font-size: var(--fs-sm);
  line-height: 1.9;
  padding: 4px 0 4px 25px;
}
.dbefore del { color: var(--ink3); text-decoration-thickness: 1px; }
.drow.d-same {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: 5px 12px;
  opacity: .5;
}
.dsame-note { font-size: var(--fs-xs); color: var(--ink3); }

/* ================================================== 风险卡分组标题
   用工文件审核要把「违法条款」与「建议优化」分开摆（R-007）。 */

.group-label {
  display: inline-block;
  margin-bottom: var(--sp-2);
  padding: 3px 9px;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  font-size: var(--fs-xs);
  color: var(--ink2);
}
.group-label.is-high {
  border-color: var(--high);
  color: var(--high);
}

/* 纯清单卡顶部的说明条 */
.knote-top {
  padding: 6px 0 8px;
  margin-bottom: var(--sp-2);
  border-bottom: 1px solid var(--line-s);
  font-size: var(--fs-xs);
  line-height: 1.7;
  color: var(--ink3);
}

/* 起草出来的初稿标识（need_v1 §3.2 约束 1：草稿与定稿视觉可分） */
.draft-tag {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: .08em;
  padding: 1px 6px;
  border: 1px solid var(--mid);
  border-radius: 3px;
  color: var(--mid);
  flex-shrink: 0;
}
/* 模板来源说明。模板改版不回溯已生成的合同，这一点要写在脸上 */
.dsrc {
  padding: 6px 12px;
  border-bottom: 1px solid var(--line-s);
  background: var(--surface-2);
  font-size: var(--fs-xs);
  line-height: 1.7;
  color: var(--ink3);
}

/* ==========================================================================
   卡片入场。
   卡片是在文字吐完后一次性挂上的，没有过渡会显得「砰」一下砸出来。
   只给首次挂载做，重画时不重放 —— 否则点一次改写全屏卡片一起抖。
   ========================================================================== */

.msg.is-enter .rcard,
.msg.is-enter .dcard,
.msg.is-enter .kcard,
.msg.is-enter .lcard,
.msg.is-enter .lrcard,
.msg.is-enter .wcard,
.msg.is-enter .ccard,
.msg.is-enter .acard,
.msg.is-enter .ecard,
.msg.is-enter .lscard,
.msg.is-enter .pcard {
  animation: cardIn 260ms var(--ease) both;
}
@keyframes cardIn {
  from { opacity: 0; transform: translateY(5px); }
  to   { opacity: 1; transform: none; }
}

/* 同一条消息里多张卡片依次进场，错开一点更顺 */
.msg.is-enter .rcard:nth-child(2)  { animation-delay: 30ms; }
.msg.is-enter .rcard:nth-child(3)  { animation-delay: 60ms; }
.msg.is-enter .rcard:nth-child(4)  { animation-delay: 90ms; }
.msg.is-enter .rcard:nth-child(n+5) { animation-delay: 110ms; }

/* 展开 / 折叠：高度动画在内容高度未知时不可靠，改用透明度与位移 */
.rcard-body,
.lsbody {
  animation: none;
}
.rcard.is-open .rcard-body,
.lsitem.is-open .lsbody {
  animation: bodyIn 180ms var(--ease) both;
}
@keyframes bodyIn {
  from { opacity: 0; transform: translateY(-3px); }
  to   { opacity: 1; transform: none; }
}