/* 法律文本的排版。一份样式伺候两个地方：
   - 独立页 /terms、/privacy（注册页链过去的），底下是 auth.css；
   - 产品里「帮助 → 用户协议 / 隐私政策」那个弹窗，底下是 styles.css。

   这两套样式表的变量名完全不同（--auth-text vs --text），所以这里不直接用
   任何一套，而是先在 .legal-doc 上兑成自己的一组：var(--auth-text, var(--text))
   在登录页取到前者，在产品里前者没定义、退到后者。**别把它拆成两份抄进两个
   样式表**——CLAUDE.md 里滑轨页签那条栽过两次，就是抄了一份之后各飘各的。 */

.legal-doc {
  --legal-text: var(--auth-text, var(--text));
  --legal-muted: var(--auth-muted, var(--muted));
  --legal-line: var(--auth-line, var(--line));
  --legal-accent: var(--auth-brand, var(--accent-text));
  /* 底色不写死色值：中性灰的半透明压在白卡上是浅灰、压在深色面板上是提亮一档，
     两种主题下都是「和正文分开的一块」。 */
  --legal-tint: rgba(127, 127, 127, .10);
  color: var(--legal-text);
  font-size: 14px;
  line-height: 1.85;
  /* 条款要能复制：全站的 user-select: none 到这里为止。 */
  user-select: text;
  -webkit-user-select: text;
}

.legal-title { margin: 0 0 6px; font-size: 20px; font-weight: 600; }

.legal-doc p,
.legal-doc li { margin: 10px 0; color: var(--legal-text); }

.legal-doc > p:first-child { margin-top: 0; }

/* 第一段是「更新日期 / 生效日期」。 */
.legal-doc .legal-updated { margin: 0 0 20px; color: var(--legal-muted); }

.legal-doc h2 {
  margin: 30px 0 10px;
  padding-top: 2px;
  font-size: 16px;
  font-weight: 600;
  color: var(--legal-text);
}

.legal-doc h3 {
  margin: 22px 0 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--legal-text);
}

.legal-doc strong { font-weight: 600; }

.legal-doc ul,
.legal-doc ol { margin: 10px 0; padding-left: 22px; }
.legal-doc li { margin: 6px 0; }
/* 项里套项：外层已经有上下间距了，里层再撑一次就散了。 */
.legal-doc li > ul,
.legal-doc li > ol { margin: 6px 0 2px; }

/* 章与章之间那条线。文本本来就长，靠它把节奏断开。 */
.legal-doc hr {
  height: 0;
  margin: 30px 0 0;
  border: 0;
  border-top: 1px solid var(--legal-line);
}

/* 开头「写在最前面」「请重点阅读」那一块。 */
.legal-doc .legal-callout {
  margin: 18px 0;
  padding: 14px 16px;
  border-left: 3px solid var(--legal-accent);
  border-radius: 0 4px 4px 0;
  background: var(--legal-tint);
}
.legal-doc .legal-callout > :first-child { margin-top: 0; }
.legal-doc .legal-callout > :last-child { margin-bottom: 0; }

/* 表格窄屏要能横着滚，但页面本身不许出现横向滚动条。 */
.legal-table { margin: 14px 0; overflow-x: auto; }
.legal-doc table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  line-height: 1.7;
}
.legal-doc th,
.legal-doc td {
  padding: 9px 12px;
  border: 1px solid var(--legal-line);
  text-align: left;
  vertical-align: top;
}
.legal-doc th { background: var(--legal-tint); font-weight: 600; white-space: nowrap; }

.legal-doc code {
  padding: 1px 5px;
  border-radius: 3px;
  background: var(--legal-tint);
  font-family: var(--font-mono);
  font-size: .92em;
}

.legal-doc a { color: var(--legal-accent); }

@media (max-width: 640px) {
  .legal-doc th { white-space: normal; }
}