/* ⚠ 2026-08-11：这份样式第一版用的是 --ink / --mid / --card / --line ——
   那是 _build/legal/ 那个复核稿页面自己的变量名，**站上根本没有定义**。
   后果不是"颜色不对"，是 `border: 2px solid var(--ink)` 整条声明在计算值阶段失效，
   边框宽度归 0 —— 而《民法典》第 496 条要的显著提示框就这么**静默消失**了。
   页面看着还挺正常（背景色是继承来的），只有量 borderTopWidth 才看得出来。
   ⇒ 站上的 token 是 --text-hi / --text-mid / --text-low / --bg-base / --bg-raised /
     --line-subtle（定义在 vendor/tokens.css 的 [data-theme] 下），照这套写。 */
/* 法务两页（site/legal/）。
   这两页和站上其余页面的目标相反：别的页面要让人想看，这两页要让人**看得懂**。
   所以刻意朴素——不做视差、不做入场动画、不放任何画面素材（它们门前可达，
   放图就要过分级那一关，而这两页根本不需要图）。

   版式的唯一取向是长文可读性：一行 34em 左右、行高 1.85、段距大于行距。
   页面由 _build/legal/build.mjs 生成，正文结构与那份复核稿同源，
   所以选择器沿用 .doc 那一套（h3 / p / ul / table.kv / callout）。 */

.lg-page { background: var(--bg-base); color: var(--text-hi); }

/* ⚠ vendor 的 .vx-nav 是 position:fixed、背景全透明（rgba(0,0,0,0)）。
   在别的页面那是对的：底下是大图，导航浮在上面很好看。
   这两页底下是**四千字正文**——透明的固定条意味着条款正文一行行从它背后穿过去，
   截图实测第八条最后一款被压掉半行。法务文本被挡住一行不是美观问题。
   ⇒ 这两页把导航改回 static，让它老老实实占一行、跟着正文一起滚。 */
.lg-page .vx-nav.lg-nav {
  position: static;
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 28px; gap: 16px;
  background: var(--bg-base);
}
.lg-nav .vx-nav__brand img { height: 26px; display: block; }
.lg-back {
  color: var(--text-mid); text-decoration: none; font-size: 14px; letter-spacing: .04em;
  padding: 6px 2px; transition: color .2s;
}
.lg-back:hover { color: var(--text-hi); }

.lg-shell {
  max-width: 34em;            /* 中文长文的舒适行宽：约 38–42 字 */
  margin: 0 auto;
  padding: 28px 22px 96px;
}
.lg-title {
  font-size: 27px; line-height: 1.35; margin: 8px 0 6px;
  letter-spacing: .02em; font-weight: 700;
}
/* 语种排。放在标题正下方、说明条上面：
   看不懂这一页的人，第一眼要看到的是"有没有我读得懂的版本"，
   而不是先读完一段他读不懂的说明才发现有译本。
   当前语种是 <span> 不是 <a>——点了没反应的链接比没有链接更像坏了。 */
.lg-langs {
  display: flex; flex-wrap: wrap; gap: 6px 8px;
  margin: 10px 0 16px;
  font-size: 13.5px; line-height: 1.6;
}
.lg-langs a, .lg-langs .on {
  padding: 4px 10px; border-radius: 999px;
  border: 1px solid var(--line-subtle); text-decoration: none;
}
.lg-langs a { color: var(--text-mid); transition: color .2s, border-color .2s; }
.lg-langs a:hover { color: var(--text-hi); border-color: var(--text-mid); }
.lg-langs .on { color: var(--text-hi); border-color: var(--text-hi); background: var(--bg-raised); }

/* 正式本／参考译本的说明条。必须说在最前面，不能藏在页脚——
   看不懂的人正是最需要这条信息的人。 */
.lg-lang {
  margin: 0 0 22px; padding: 10px 14px;
  background: var(--bg-raised); border-left: 3px solid var(--line-subtle);
  border-radius: 0 8px 8px 0;
  color: var(--text-mid); font-size: 13.5px; line-height: 1.7;
}

/* ── 正文（与 legal-draft 的 .doc 同构，数值另调，因为这里是给客人读的）── */
.lg-shell .doc { font-size: 15.5px; line-height: 1.85; }
.lg-shell .doc p { margin: 14px 0; }
.lg-shell .doc h3 {
  font-size: 17.5px; margin: 34px 0 8px; padding-top: 18px;
  border-top: 1px solid var(--line-subtle); letter-spacing: .01em;
}
.lg-shell .doc h3:first-of-type { border-top: 0; padding-top: 0; margin-top: 20px; }
.lg-shell .doc ul, .lg-shell .doc ol { margin: 12px 0; padding-left: 24px; }
.lg-shell .doc li { margin: 8px 0; }
.lg-shell .doc code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .92em; background: var(--bg-raised); border-radius: 4px; padding: 1px 5px;
}
.lg-shell .doc .meta {
  color: var(--text-mid); font-size: 13.5px; background: var(--bg-raised);
  border-radius: 8px; padding: 11px 14px; margin-bottom: 18px;
}
.lg-shell .doc table.kv {
  border-collapse: collapse; width: 100%; margin: 16px 0; font-size: 14px; line-height: 1.65;
}
.lg-shell .doc table.kv th,
.lg-shell .doc table.kv td {
  border: 1px solid var(--line-subtle); padding: 8px 10px; text-align: left; vertical-align: top;
}
.lg-shell .doc table.kv th { background: var(--bg-raised); font-weight: 600; }
.lg-shell .doc table.kv td:first-child {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; white-space: nowrap;
}

/* ⚠ 显著提示框。《民法典》第 496 条：格式条款里"与对方有重大利害关系"的部分
   没有以显著方式提示的，对方可以主张它不成为合同内容。
   ⇒ 这个框是**免责条款与管辖条款能否生效的前提**，不是装饰。
   谁要精简样式，先读这一句：删掉它 = 那两条可能整条不算数。 */
.lg-shell .doc .callout {
  border: 2px solid var(--text-hi); border-radius: 10px;
  padding: 16px 18px; margin: 22px 0; background: var(--bg-raised);
}
.lg-shell .doc .callout-t { margin: 0 0 10px; font-weight: 700; }
.lg-shell .doc .callout ol { margin: 8px 0 2px; padding-left: 22px; }
.lg-shell .doc .callout li { margin: 10px 0; }

.lg-foot {
  display: flex; flex-wrap: wrap; gap: 8px 18px; justify-content: center;
  padding: 26px 22px 40px; border-top: 1px solid var(--line-subtle);
  color: var(--text-low); font-size: 13px;
}

@media (max-width: 560px) {
  .lg-nav { padding: 14px 18px; }
  .lg-shell { padding: 22px 18px 72px; }
  .lg-title { font-size: 23px; }
  /* 那张六项表在窄屏上会撑破版心，让它自己横向滚，别把页面挤歪 */
  .lg-shell .doc table.kv { display: block; overflow-x: auto; }
}