/* C 线的样式。**只有并排对比那一块是新的**，别的全走已有的 `aw-*`。
 *
 * 合同第二节：需要 CSS 就写自己这一个文件，主 Agent 挂 link。
 * 这个文件没挂上的话，页面只是没有颜色和分栏 —— 内容还是全的，
 * 顺序也还是对的。**功能不依赖样式。**
 *
 * ## 为什么改动状态用左边一条竖线，不用整块背景色
 *
 * 逐段对比页上八成的段落是「一字未改」。整块上色的话，
 * 满屏都是色块，真正被改的那两段反而不显眼 ——
 * 而这一页存在的全部意义就是让人一眼看到那两段。
 */

.aw-dv-list { list-style: none; margin: 0; padding: 0; }

.aw-dv-block {
  border-left: 3px solid #d9d9d9;
  padding: 8px 0 8px 12px;
  margin: 0 0 10px 0;
}
/* 一字未改的**不上色**：它是背景，不是信号。 */
.aw-dv-block.same { border-left-color: #e6e6e6; }
.aw-dv-block.minor { border-left-color: #8fbf6a; }
.aw-dv-block.major { border-left-color: #e08b3a; }
.aw-dv-block.moved { border-left-color: #6aa9d9; }
.aw-dv-block.merged { border-left-color: #6aa9d9; }
.aw-dv-block.removed { border-left-color: #cc4b3a; }
.aw-dv-block.added { border-left-color: #9a7fd1; }
/* **「没对上」用虚线**：它不是一个结论，是一个待办。
 * 和「删除」长得一样的话，人会把它当成已经查清的事。 */
.aw-dv-block.unmatched { border-left-style: dashed; border-left-color: #b08900; }

.aw-dv-mark { display: flex; gap: 8px; align-items: center; margin-bottom: 4px; }
.aw-dv-state { font-size: 12px; color: #666; }
.aw-dv-ad {
  font-size: 12px; color: #8a4b00;
  border: 1px solid #e0c9a6; border-radius: 3px; padding: 0 4px;
}

/* 并排两栏。**窄屏自动变成上下两栏** —— 这一版明确要求手机上也能用，
 * 而 400px 宽的屏幕上并排两栏等于两列各七个字。 */
.aw-dv-pair { display: flex; gap: 12px; flex-wrap: wrap; }
.aw-dv-side { flex: 1 1 280px; min-width: 0; }
.aw-dv-side.empty { opacity: 0.55; }
.aw-dv-no { font-size: 12px; color: #999; margin-bottom: 2px; }
.aw-dv-text { white-space: pre-wrap; word-break: break-word; line-height: 1.7; }

/* 段内高亮。删除线 + 底色，**两个特征一起用** ——
 * 只靠颜色的话，色觉障碍的人看到的是两段一模一样的文字。 */
.aw-dv-del { background: #fbe3e0; text-decoration: line-through; }
.aw-dv-ins { background: #e3f2dc; text-decoration: underline; }

.aw-dv-rate { font-weight: 600; white-space: nowrap; }
.aw-dv-row { cursor: pointer; }
.aw-dv-adbox { margin-top: 10px; padding-top: 8px; border-top: 1px dashed #ddd; }