/* 审核工作台样式。
   布局目标：1440px 桌面屏无横向滚动；顶栏 sticky；左树可折叠；右侧为唯一主滚动容器。
   为什么右侧必须是自己的滚动容器而不是整页滚动：sticky 顶栏 + 树点击定位 + 滚动观察
   三者要在同一个坐标系里算，用页面级滚动会让 IntersectionObserver 的 root 失去意义。 */

:root {
  --line: #e4e7ec;
  --ink: #101828;
  --ink-2: #344054;
  --muted: #667085;
  --faint: #98a2b3;
  --brand: #155eef;
  --bg: #f5f7fb;
  --hd: 56px;          /* 顶栏高度 */
  --anchor-gap: 20px;  /* 规格 §7.5：目标段落与 sticky 顶栏之间保留 16–24px */
}

* { box-sizing: border-box; }
body {
  margin: 0; background: var(--bg); color: var(--ink-2);
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
}

/* ---------- 顶栏 ---------- */
.rv-header {
  position: sticky; top: 0; z-index: 20; height: var(--hd);
  background: #fff; border-bottom: 1px solid var(--line);
  display: flex; align-items: center; gap: 12px; padding: 0 18px;
}
.rv-doc-title { font-size: 15px; font-weight: 600; color: var(--ink); }
.rv-sub { font-size: 11.5px; color: var(--faint); }
.rv-spacer { flex: 1; }
.rv-synthetic {
  font-size: 11px; padding: 2px 9px; border-radius: 99px;
  background: #fffaeb; color: #b54708; border: 1px solid #fedf89;
}
.rv-local {
  font-size: 11px; padding: 2px 9px; border-radius: 99px;
  background: #ecfdf3; color: #067647; border: 1px solid #abefc6;
}

/* ---------- 主体两栏 ---------- */
.rv-body { display: flex; height: calc(100vh - var(--hd)); overflow: hidden; }

.rv-side {
  flex: 0 0 316px; width: 316px; border-right: 1px solid var(--line);
  background: #fff; display: flex; flex-direction: column; overflow: hidden;
  transition: flex-basis .18s ease, width .18s ease;
}
.rv-side.collapsed { flex-basis: 0; width: 0; border-right: 0; }
.rv-side-head { padding: 12px 14px 10px; border-bottom: 1px solid var(--line); }
.rv-tree-scroll { flex: 1; overflow-y: auto; padding: 8px 6px 26px; }

.rv-main { flex: 1; min-width: 0; display: flex; flex-direction: column; overflow: hidden; }
.rv-toolbar {
  position: sticky; top: 0; z-index: 10; background: #fff;
  border-bottom: 1px solid var(--line); padding: 9px 18px;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.rv-scroll { flex: 1; overflow-y: auto; padding: 16px 18px 50vh; }
/* 不设 scroll-behavior：定位是功能不是装饰，由 JS 每次显式指定并校验落点，
   见 review-detail.js 的 scrollToParagraph。 */
/* 底部留半屏：最后几段也能滚到激活线，否则末尾节点永远高亮不到 */

/* ---------- 左树 ---------- */
.rv-node { user-select: none; }
.rv-node-row {
  display: flex; align-items: flex-start; gap: 5px; padding: 5px 8px;
  border-radius: 7px; cursor: pointer; font-size: 13px; line-height: 1.5;
  color: var(--ink-2);
}
.rv-node-row:hover { background: #f2f5fb; }
.rv-node-row:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
.rv-node-row.active { background: #eaf0ff; color: var(--brand); font-weight: 600; }
.rv-node-row.on-path { color: var(--ink); }
.rv-caret {
  flex: 0 0 14px; width: 14px; text-align: center; color: var(--faint);
  font-size: 10px; margin-top: 3px; transition: transform .15s;
}
.rv-caret.open { transform: rotate(90deg); }
.rv-node-label { flex: 1; word-break: break-word; }
.rv-node-count {
  flex: 0 0 auto; font-size: 10.5px; color: var(--faint);
  background: #f2f4f7; border-radius: 99px; padding: 1px 6px; margin-top: 2px;
}
.rv-node-row.active .rv-node-count { background: #d9e4ff; color: var(--brand); }

/* ---------- 右侧段落行 ---------- */
.rv-para {
  background: #fff; border: 1px solid var(--line); border-radius: 10px;
  padding: 13px 16px; margin-bottom: 10px; scroll-margin-top: var(--anchor-gap);
}
.rv-para.is-heading { border-left: 3px solid #b9c6e0; }
.rv-para.flash { animation: rv-flash 1.1s ease; }
@keyframes rv-flash {
  0%, 22% { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(21,94,239,.12); }
  100% { border-color: var(--line); box-shadow: none; }
}
.rv-para-head {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: 11.5px; color: var(--faint); margin-bottom: 7px;
}
.rv-crumb { color: var(--muted); }
.rv-crumb b { color: var(--ink-2); font-weight: 600; }
.rv-para-text { font-size: 14px; line-height: 1.85; color: var(--ink-2); white-space: pre-wrap; }
.rv-para.is-heading .rv-para-text { font-weight: 600; color: var(--ink); }

/* ---------- 状态 ---------- */
.rv-state {
  margin: 40px auto; max-width: 460px; text-align: center;
  color: var(--muted); font-size: 13.5px; line-height: 1.9;
}
.rv-state h4 { color: var(--ink); font-size: 15px; margin: 0 0 6px; }
.rv-state.err h4 { color: #b42318; }

/* ---------- 移动端：不追求完整双栏，明确提示 ---------- */
.rv-mobile-hint { display: none; }
@media (max-width: 900px) {
  .rv-side { position: fixed; left: 0; top: var(--hd); bottom: 0; z-index: 30; box-shadow: 0 8px 30px rgba(16,24,40,.18); }
  .rv-side.collapsed { box-shadow: none; }
  .rv-mobile-hint {
    display: block; background: #fffaeb; border: 1px solid #fedf89; color: #b54708;
    border-radius: 8px; padding: 9px 12px; font-size: 12px; margin-bottom: 12px;
  }
}