/**
 * 法律/说明类静态页的样式 —— server/web/css/doc.css
 * ============================================================
 * 服务对象：terms.html（用户协议）/ privacy.html（隐私政策）/
 *          kids.html（儿童个人信息保护规则）
 *
 * 为什么单独一份、不复用 main.css：
 *   ① main.css 是应用外壳（导航、iframe、手型、工坊…）的样式表，12 万字符，
 *      里面既有全局 body 规则也有大量 #id 选择器；法律页只需要"读得下去"两件事。
 *   ② 这三页要能被**单独转发**（家长群、平台审核、截图取证），所以必须自包含、
 *      断网也能正确排版 —— 除本文件外不依赖任何资源，也不加载任何 JS。
 *   ③ 将来换应用皮肤时不该连带改法律文本的排版（改一次要重新核对可读性）。
 *
 * ⚠️ 可读性是硬指标，不是审美：字号最小 14px、行高 ≥1.75、正文对比度 ≥ 7:1。
 *    这几页的读者是家长，很多人是在手机上一路划到底的。任何"为了好看压字号"的
 *    改动都是错的。
 */

* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

:root {
  --ink: #1f2430;          /* 正文：与页面底色对比 ≈ 13:1 */
  --ink-2: #4b5563;        /* 次级正文 */
  --muted: #8b93a7;        /* 页脚 / 日期 */
  --line: #e8eaf2;
  --brand: #4f46e5;
  --bg: #f6f7fb;
}

html { -webkit-text-size-adjust: 100%; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Helvetica Neue",
               "Microsoft YaHei", sans-serif;
  background: var(--bg);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  line-height: 1.75;
}

/* 版心：560px 是"手机一行 16~18 个汉字"的舒适宽度，与 contact.html 一致 */
.wrap { max-width: 640px; margin: 0 auto; min-height: 100%; display: flex; flex-direction: column; }

/* ===== 头部 ===== */
.doc-hero {
  background: linear-gradient(135deg, #5b6cff 0%, #7a5cff 55%, #9b6bff 100%);
  padding: calc(env(safe-area-inset-top, 0px) + 30px) 22px 24px;
  color: #fff;
}
.doc-hero .back {
  display: inline-block;
  font-size: 13px;
  color: rgba(255, 255, 255, .88);
  text-decoration: none;
  margin-bottom: 14px;
}
.doc-hero .back:hover { color: #fff; text-decoration: underline; }
.doc-hero h1 { font-size: 24px; font-weight: 800; letter-spacing: .3px; }
.doc-hero .meta { font-size: 12.5px; opacity: .85; margin-top: 8px; }

/* ===== 正文 ===== */
.doc-body { flex: 1; padding: 20px 16px calc(env(safe-area-inset-bottom, 0px) + 30px); }

.doc-card {
  background: #fff;
  border-radius: 16px;
  padding: 22px 20px;
  box-shadow: 0 2px 14px rgba(31, 36, 48, .06);
}

.doc-body h2 {
  font-size: 16.5px;
  font-weight: 800;
  margin: 26px 0 10px;
  padding-left: 10px;
  border-left: 4px solid var(--brand);
  line-height: 1.4;
}
.doc-body h2:first-child { margin-top: 0; }
.doc-body h3 { font-size: 14.5px; font-weight: 700; margin: 18px 0 6px; }
.doc-body p { font-size: 14.5px; color: var(--ink-2); margin: 8px 0; }
.doc-body strong { color: var(--ink); font-weight: 700; }
.doc-body ul, .doc-body ol { margin: 8px 0 8px 20px; }
.doc-body li { font-size: 14.5px; color: var(--ink-2); margin: 5px 0; }
.doc-body a { color: var(--brand); text-decoration: none; }
.doc-body a:hover { text-decoration: underline; }

/* 重点提示块：用于"我们不会做的事"这类必须被看见的承诺 */
.note {
  background: #f4f6ff;
  border: 1px solid #dfe4ff;
  border-radius: 12px;
  padding: 14px 16px;
  margin: 14px 0;
}
.note p { margin: 4px 0; }
.note b { color: var(--brand); }

/* 表格：收集清单用它（比一连串小标题更容易扫） */
.doc-body table { width: 100%; border-collapse: collapse; margin: 12px 0; font-size: 13.5px; }
.doc-body th, .doc-body td {
  border: 1px solid var(--line);
  padding: 9px 10px;
  text-align: left;
  vertical-align: top;
  color: var(--ink-2);
}
.doc-body th { background: #fafbff; color: var(--ink); font-weight: 700; white-space: nowrap; }

/* ===== 页脚 ===== */
.doc-foot {
  text-align: center;
  font-size: 11.5px;
  color: var(--muted);
  line-height: 1.9;
  padding: 4px 18px calc(env(safe-area-inset-bottom, 0px) + 20px);
}
.doc-foot a { color: var(--muted); text-decoration: none; }
.doc-foot a:hover { color: var(--brand); text-decoration: underline; }
.doc-foot .links { margin-bottom: 6px; }

@media (max-width: 375px) {
  .doc-hero { padding-left: 18px; padding-right: 18px; }
  .doc-hero h1 { font-size: 21px; }
  .doc-card { padding: 18px 16px; }
}