/* ==========================================================================
   条款排版 + 两个全屏层。
   条款样式先在这里定义 —— 风险卡的「看前后文」也用它，Task 8 就要用上。
   全屏层本体由 Task 9 填充。
   ========================================================================== */

/* ------------------------------------------------------------- 条款排版 */

.clause {
  display: grid;
  grid-template-columns: 46px 1fr;
  gap: var(--sp-2);
  padding: 5px 0;
}
/**
 * 条号。从 10px/--ink3 提到 11px/--ink2。
 *
 * 这一列是全系统的坐标系 —— 问题清单说「第 7 条」、硬规则说「第 7 条」、
 * 对话里也说「第 7 条」，用户全靠它在正文里找位置。它原先比正文淡得多,
 * 而正文是 14px 衬线 --ink,落差大到扫一眼找不到号。
 *
 * 没提到 12px 是因为它右对齐贴着 46px 的窄列,再大会挤压正文起始位置。
 */
.clause-no {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: .04em;
  color: var(--ink2);
  text-align: right;
  padding-top: 4px;
}
.clause-body {
  font-family: var(--font-serif);
  font-size: var(--fs-body);
  line-height: 1.95;
  color: var(--ink);
}

/* 章节标题行 */
.clause-heading { padding-top: var(--sp-4); }
.clause-heading .clause-body {
  font-size: var(--fs-md);
  font-weight: 600;
  letter-spacing: .04em;
}

/* 整条退化标注：quote 没能精确命中时，整条着色而不是猜位置 */
.clause.mk-whole-high .clause-body {
  border-left: 3px solid var(--high);
  background: var(--mk-high-bg);
  padding: 4px 9px;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.clause.mk-whole-mid .clause-body {
  border-left: 3px solid var(--mid);
  background: var(--mk-mid-bg);
  padding: 4px 9px;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

/* AI 新增或改写的整条（clauses.js 输出的类名是 .clause-new） */
.clause.clause-new .clause-body {
  border-left: 3px solid var(--gen-bd);
  background: var(--gen-bg);
  padding: 4px 9px;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
/* 手工改动过的条 */
.clause.is-dirty .clause-no { color: var(--high); }

/* 条款上的四种小标签。clauses.js 的输出里用了这些类名。
   这些标签是**状态告知**，不是装饰：「标注已失效」「AI 改写过」
   「手工编辑过」都是用户必须看到才能正确判断这一条可不可信的信息。
   带色的三种（ai/gen/dirty）本来就够显眼,灰的那个降级标签提一档。 */
.degraded-tag, .ai-tag, .gen-tag, .dirty-tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: .04em;
  padding: 1px 6px;
  margin-left: 6px;
  vertical-align: middle;
  border: 1px solid var(--line-s);
  border-radius: 3px;
  color: var(--ink2);
  white-space: nowrap;
}
.degraded-tag.is-miss { border-color: var(--mid); color: var(--mid); }
.ai-tag    { border-color: var(--ai-bd);  color: var(--ai-bd); }
.gen-tag   { border-color: var(--gen-bd); color: var(--gen-bd); }
.dirty-tag { border-color: var(--high);   color: var(--high); }

/* 生成条款上的撤销按钮 */
.gen-undo {
  margin-left: 6px;
  padding: 0 6px;
  background: transparent;
  border: 1px solid var(--gen-bd);
  border-radius: 3px;
  color: var(--gen-bd);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
}
.gen-undo:hover { background: var(--gen-bg); }

/* --------------------------------------------------------------- 全屏层 */

.overlay {
  position: fixed; inset: 0;
  background: var(--bg);
  transform: translateX(100%);
  transition: transform 240ms var(--ease);
  z-index: 50;
  overflow: hidden;
}
.overlay.is-open { transform: translateX(0); }
body.is-locked { overflow: hidden; }

/* ---------------------------------------------------------------- 骨架 */

.ov {
  position: relative;
  display: grid;
  grid-template-rows: auto auto 1fr;
  height: 100%;
  overflow: hidden;
}

.ov-bar {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-4);
  border-bottom: 1px solid var(--line-s);
  background: var(--surface);
}
.ov-meta { min-width: 0; }
.ov-name {
  font-family: var(--font-serif);
  font-size: var(--fs-md);
  color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ov-sub {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: .04em;
  color: var(--ink3);
}

/* 渲染兜底的错误态。顶栏照常在，关闭按钮必须点得到 ——
   这一层带着 body 滚动锁，关不掉就只能刷新页面。 */
.ov-err {
  padding: var(--sp-6) var(--sp-4);
  max-width: 46rem;
  margin: 0 auto;
  font-size: var(--fs-sm);
  line-height: 1.7;
  color: var(--ink2);
}
.ov-spacer { flex: 1; }

.ov-tally { display: flex; gap: var(--sp-3); }
.ov-tally span {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: .06em;
  color: var(--ink3);
}

/* 保守 / 辅助模式开关 */
.rm-switch {
  display: inline-flex;
  border: 1px solid var(--line-s);
  border-radius: var(--radius-pill);
  overflow: hidden;
}
.rm-opt {
  padding: 4px 12px;
  background: transparent;
  border: 0;
  color: var(--ink3);
  font-size: var(--fs-xs);
  white-space: nowrap;
}
.rm-opt:hover { color: var(--ink); }
.rm-opt.is-on { background: var(--surface-2); color: var(--brass); }

/* ---------------------------------------------------------------- 总览 */

.ov-overview {
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--line-s);
  background: var(--surface);
}
.ov-verdict {
  display: flex; align-items: center; gap: var(--sp-3);
  padding-bottom: var(--sp-3);
  margin-bottom: var(--sp-3);
  border-bottom: 1px solid var(--line-s);
}
.ov-badge {
  padding: 3px 11px;
  border: 1px solid var(--c);
  border-radius: var(--radius-pill);
  color: var(--c);
  font-family: var(--font-serif);
  font-size: var(--fs-base);
  white-space: nowrap;
}
.ov-vtext b {
  display: block;
  font-size: var(--fs-base);
  font-weight: 400;
  color: var(--ink);
}
.ov-vtext span {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  color: var(--ink3);
}

/* 展开/收起细目。
   放在结论那一行的最右边 —— 那是唯一始终可见的一行，
   开关必须跟着它，否则收起之后就找不到怎么再展开了。 */
.ov-fold {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--ink3);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  cursor: pointer;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.ov-fold:hover { color: var(--ink); border-color: var(--ink3); }
.ov-fold svg { width: 13px; height: 13px; transition: transform var(--dur) var(--ease); }
.ov-fold[aria-expanded="true"] svg { transform: rotate(180deg); }

/* hidden 属性必须真的生效。
   `display: grid` 的优先级高于浏览器给 [hidden] 的 display:none，
   所以光写 hidden 折不掉 —— 实测收起前后顶部都是 256px，
   折叠开关点了没反应。这一行是那个 bug 的修复。 */
.ov-cols[hidden] { display: none; }

.ov-cols {
  display: grid;
  grid-template-columns: 1fr 1.2fr 1fr;
  gap: var(--sp-5);
  /* 硬上限 + 自己滚。
     不设的后果实测过：逐条审查出 64 处风险、24 个各不相同的分类，
     条形图把整个上半屏铺满，正文（这一层真正的主体）被挤到屏幕外面
     只剩一行。细目再多也不该抢正文的位置。 */
  max-height: 34vh;
  overflow-y: auto;
}
.ov-col > .label { display: block; margin-bottom: var(--sp-2); }

.ov-list { max-height: 132px; overflow-y: auto; }
.ov-item {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: 3px 6px;
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.ov-item:hover { background: var(--surface-2); }
.ov-item.is-fixed { opacity: .5; }
/* 「问题清单 · 点击定位」里的每一行。这是进条款的主要入口 ——
   条号要跟正文那列的条号读起来是同一个东西,所以两处同档。 */
.ov-item-no {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: currentColor;
  min-width: 26px;
}
.ov-item-t {
  flex: 1;
  font-size: var(--fs-sm);
  color: var(--ink2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ov-item:hover .ov-item-t { color: var(--ink); }
.ov-item-fix {
  padding: 1px 7px;
  background: transparent;
  border: 1px solid var(--line-s);
  border-radius: 3px;
  color: var(--brass);
  font-size: var(--fs-xs);
}
.ov-item-fix:hover { border-color: var(--brass); }

/* 硬规则触发。规则名标红本来就显眼,后面那句解释原先是 --ink3 ——
   而它恰恰是「为什么这条有问题」的说明,不该比规则名弱那么多。 */
.ov-rule { margin-bottom: 6px; }
.ov-rule b {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: .04em;
  color: var(--high);
  margin-right: 5px;
}
.ov-rule span { font-size: var(--fs-sm); color: var(--ink2); line-height: 1.6; }

.ov-progress {
  font-size: var(--fs-sm);
  color: var(--ink2);
  line-height: 1.7;
}
.ov-progress b { color: var(--ink); font-weight: 600; }
.pbar {
  height: 3px;
  background: var(--line-s);
  border-radius: 2px;
  overflow: hidden;
  margin: 5px 0;
}
.pbar i { display: block; height: 100%; background: var(--brass); }

/* -------------------------------------------------------- 正文 + 侧栏 */

.ov-main {
  display: grid;
  grid-template-columns: 1fr 400px;
  min-height: 0;
}

.ov-paper {
  overflow-y: auto;
  padding: var(--sp-6) var(--sp-8);
  background: var(--paper);
}
.ov-paper-head {
  max-width: 780px; margin: 0 auto var(--sp-6);
  text-align: center;
  padding-bottom: var(--sp-4);
  border-bottom: 1px solid var(--line-s);
}
.ov-paper-head h1 {
  font-family: var(--font-serif);
  font-size: 19px;
  letter-spacing: .06em;
  line-height: 1.6;
  margin-bottom: var(--sp-3);
}
.ov-parties {
  display: flex; justify-content: center; gap: var(--sp-6);
  font-family: var(--font-serif);
  font-size: var(--fs-sm);
  color: var(--ink2);
}
.ov-clauses { max-width: 780px; margin: 0 auto; }

/* 编辑提示条：只在编辑模式显示 */
.edit-hint {
  display: none;
  align-items: flex-start; gap: var(--sp-2);
  max-width: 780px; margin: 0 auto var(--sp-4);
  padding: 8px 12px;
  background: var(--mk-mid-bg);
  border-left: 2px solid var(--mid);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: var(--fs-xs);
  line-height: 1.7;
  color: var(--ink2);
}
.ov-paper.is-editing .edit-hint { display: flex; }
.edit-hint svg {
  width: 14px; height: 14px; color: var(--mid);
  flex-shrink: 0; margin-top: 2px;
}

.ov-paper.is-editing .clause-body {
  background: var(--surface-2);
  padding: 3px 8px;
  border-radius: var(--radius-sm);
  outline: none;
}
.ov-paper.is-editing .clause-body:focus {
  box-shadow: inset 0 0 0 1px var(--brass);
}

/**
 * 定位闪烁。focusClause（侧栏 → 原文）用，是 focusFinding 的反方向。
 *
 * 峰值色从 --gen-bg 换成 --line，两个原因：
 *
 * 1. 语义。--gen-bg 是绿色，全站固定读作「AI 新增的内容」
 *    （.clause-new、mark.gen、.kgen 都用它）。拿它做「跳到这儿了」，
 *    等于闪一下说这条是新增的。--line 是黄铜的 alpha，而黄铜正是
 *    .scard.is-active 描边用的强调色 —— 两个跳转方向从此同一种颜色语言：
 *    黄铜 = 当前落点。
 * 2. 有条款上它根本闪不出来。绿底的 .clause-new 和红/黄底的
 *    .mk-whole-* 都把背景画在子元素 .clause-body 上，闪烁画在外层
 *    .clause 上：闪绿色时，clause-new 整行连成一片同色，看着像没反应；
 *    退化标注那批则是红底外围套一圈绿，两种语义色直接撞在一起。
 *
 * 与 is-active 不冲突：这支是 1.2s 一次性动画、作用在 .clause 的背景；
 * is-active 是常驻态、作用在 mark 与 .scard。两边属性和元素都不重叠，
 * 点侧栏卡（触发 flash）时若原文里还留着上次的选中高亮，叠着也读得清。
 */
.clause.is-flash { animation: flash 1.2s var(--ease); }
@keyframes flash {
  0%, 100% { background: transparent; }
  25%      { background: var(--line); }
}

/* --------------------------------------------------------------- 侧栏 */

.ov-side {
  display: flex; flex-direction: column;
  min-height: 0;
  border-left: 1px solid var(--line-s);
  background: var(--surface);
}

.side-tabs { display: flex; border-bottom: 1px solid var(--line-s); }
.side-tab {
  flex: 1;
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  padding: 9px 0;
  background: transparent;
  border: 0; border-bottom: 2px solid transparent;
  color: var(--ink3);
  font-size: var(--fs-sm);
}
.side-tab:hover { color: var(--ink); }
.side-tab.is-active { color: var(--ink); border-bottom-color: var(--brass); }
.badge {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  padding: 0 5px;
  border: 1px solid var(--line-s);
  border-radius: 8px;
  color: var(--ink3);
}

.side-scroll { flex: 1; overflow-y: auto; padding: var(--sp-3); }
.side-pane { display: none; }
.side-pane.is-active { display: block; }

/* 硬规则块 */
.escalate {
  padding: 9px 11px;
  margin-bottom: var(--sp-3);
  background: var(--mk-high-bg);
  border: 1px solid var(--high);
  border-left-width: 3px;
  border-radius: var(--radius-sm);
}
.escalate-top {
  display: flex; align-items: center; gap: 6px;
  margin-bottom: 6px;
}
.escalate-top svg {
  width: 14px; height: 14px; color: var(--high); flex-shrink: 0;
}
.escalate-top strong { font-size: var(--fs-sm); color: var(--high); }
.escalate ul { margin: 0; padding-left: 0; list-style: none; }
.escalate li {
  font-size: var(--fs-xs);
  line-height: 1.7;
  color: var(--ink2);
  margin-bottom: 3px;
}

/* 侧栏风险卡：与对话里的 .rcard 同视觉语言，但默认展开（空间够） */
.scard {
  padding: 10px 11px;
  margin-bottom: var(--sp-2);
  background: var(--bg);
  border: 1px solid var(--line-s);
  border-left: 2px solid currentColor;
  border-radius: var(--radius-sm);
  cursor: pointer;
  /* 滚过来时留一点余量，别贴着侧栏顶边 —— focusFinding 用的是
     block:'nearest'，会把卡顶到容器边缘，紧贴着看不出上面还有没有卡。 */
  scroll-margin: var(--sp-3) 0;
  /* 只过渡选中态会动的三个属性。--dur 是 160ms：这是点击的即时回执，
     再长就变成一段动画，用户会等它演完才确认自己点中了。 */
  transition: background-color var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
}
.scard.lv-high   { color: var(--high); }
.scard.lv-medium { color: var(--mid); }
.scard.lv-low    { color: var(--low); }
.scard.is-fixed  { color: var(--ai-bd); }
.scard.is-stale  { opacity: .55; }

/**
 * 刚跳过来的那张卡。focusFinding 滚到它、并给两侧一起打 is-active。
 *
 * 用哪些属性是挑过的 —— 上面五个状态类全靠 color 和 opacity 表意
 * （风险等级三档、已改、已失效），选中态一个都不能碰，否则
 * 「高风险」变成「选中」色，卡片说的话就变了。剩下能用的是
 * 背景、边框色、阴影：
 *   - 背景抬到 --surface-2，从侧栏底色（--surface）里浮出来一层
 *   - 外框描 --brass。这是全站的强调色（side-tab 选中、qbox 建议、
 *     焦点环都是它），用户已经把它读作「当前在这儿」
 *   - --shadow-lift 给落点感：卡片实际抬起来，而不只是换了个颜色
 *   - inset 那道把 2px 的左侧色条视觉上加厚到 4px。用 inset shadow
 *     而不是改 border-left-width —— 改宽度会让卡里的文字横向挪 2px，
 *     二十几张卡连着滚的时候那一下抖得很明显
 *
 * 左侧色条仍是 currentColor，所以「哪一档风险」照旧读得出来。
 */
.scard.is-active {
  background: var(--surface-2);
  /* 只描上/右/下三边。border-left 那道是 currentColor 画的风险等级，
     写 border-color 会把它一起刷成黄铜，卡片就不说自己是几档风险了。 */
  border-top-color: var(--brass);
  border-right-color: var(--brass);
  border-bottom-color: var(--brass);
  box-shadow: var(--shadow-lift), inset 2px 0 0 currentColor;
}

.scard-top {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  margin-bottom: 5px;
}
.sev {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: .08em;
  padding: 1px 6px;
  border: 1px solid currentColor;
  border-radius: 3px;
}
.cref {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  color: var(--ink3);
}
.scard-title {
  font-size: var(--fs-base);
  color: var(--ink);
  line-height: 1.55;
  margin-bottom: 4px;
}
.scard-why {
  font-size: var(--fs-xs);
  line-height: 1.75;
  color: var(--ink2);
}

.scard-more { margin-top: var(--sp-2); }
.mb { margin-bottom: var(--sp-2); }
.mb .label { display: block; margin-bottom: 3px; }
.mb p {
  font-size: var(--fs-xs);
  line-height: 1.75;
  color: var(--ink2);
  margin: 0;
}
.qbox {
  font-family: var(--font-serif);
  font-size: var(--fs-sm);
  line-height: 1.85;
  padding: 7px 10px;
  background: var(--surface-2);
  border-left: 1px solid var(--line);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  color: var(--ink2);
}
.qbox.is-suggest { color: var(--ink); border-left-color: var(--brass); }

.scard-acts {
  display: flex; gap: 6px; flex-wrap: wrap;
  margin-top: var(--sp-2);
  padding-top: var(--sp-2);
  border-top: 1px solid var(--line-s);
}

.miss-genall {
  width: 100%;
  justify-content: center;
  margin-bottom: var(--sp-3);
}

/* ------------------------------------------------------ 需重新审查条 */

.recheck {
  position: absolute; left: 50%; bottom: var(--sp-5);
  transform: translateX(-50%);
  display: flex; align-items: center; gap: var(--sp-3);
  padding: 9px 14px;
  background: var(--surface);
  border: 1px solid var(--mid);
  border-left-width: 3px;
  border-radius: var(--radius);
  box-shadow: var(--shadow-lift);
  font-size: var(--fs-sm);
  color: var(--ink);
  z-index: 10;
}
.recheck[hidden] { display: none; }
.recheck svg { width: 15px; height: 15px; color: var(--mid); flex-shrink: 0; }

/* ------------------------------------------------------------- 函件层 */

.lr-verdict {
  display: flex; align-items: center; gap: var(--sp-3);
  max-width: 780px; margin: 0 auto var(--sp-5);
  padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--line-s);
}
.lr-verdict span:last-child { font-size: var(--fs-sm); color: var(--ink2); }

.lr-paper {
  max-width: 780px; margin: 0 auto;
  font-family: var(--font-serif);
  font-size: var(--fs-body);
  line-height: 2.1;
  color: var(--ink);
  white-space: pre-wrap;
  outline: none;
}
.lr-paper:focus { box-shadow: inset 0 0 0 1px var(--brass); }

/* ----------------------------------------------------------- 窄屏适配 */

@media (max-width: 1100px) {
  .ov-main { grid-template-columns: 1fr 340px; }
  .ov-paper { padding: var(--sp-5); }
  .ov-cols { grid-template-columns: 1fr 1fr; }
  .ov-cols .ov-col:last-child { grid-column: 1 / -1; }
}