/**
 * 协议 / 清单类静态页的主题样式
 * 作用页面：agreement.html、privacyPolicy.html、SDKList.html、devicePermissionList.html、personalInfoList.html
 *
 * 这些页面在 App 内 WebView 打开，需要跟随 App 的主题。App 主题是 light / dark / auto 三态且用户
 * 可手动选，手选 dark 而系统为 light 时只靠媒体查询会跟错，故 App 打开时以 ?theme=dark|light 精确
 * 指定（同 lang、orgTypeValue 走 URL 参数的机制）；未传参则回落到系统偏好，浏览器直接打开也正常。
 *
 * 浅色取值与改造前各页硬编码的颜色一致，观感不变；深色取值对齐壳内协议页（底 #1c1c1e）。
 * 表格边框不用单独声明——Word 粘贴出来的行内 style 只写了 border-style/width 没写 border-color，
 * 默认取 currentColor，改文字色边框会自动跟随。
 */
:root {
  color-scheme: light dark;
  --legal-bg: #ffffff;
  --legal-text: #333333;
  --legal-heading: #444444;
  --legal-strong: #000000;
  --legal-link: #0000ee;
  --legal-muted: #666666;
  --legal-rule: #dddddd;
}

/* auto（未传 theme）：跟随系统。显式 ?theme=light 时不被系统暗色劫持。 */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --legal-bg: #1c1c1e;
    --legal-text: #c9c9cd;
    --legal-heading: #e5e6eb;
    --legal-strong: #ffffff;
    --legal-link: #4ea1ff;
    --legal-muted: #8e8e93;
    --legal-rule: #3a3a3c;
  }
}

/* 显式 ?theme=dark：无论系统是什么都用深色。 */
:root[data-theme="dark"] {
  --legal-bg: #1c1c1e;
  --legal-text: #c9c9cd;
  --legal-heading: #e5e6eb;
  --legal-strong: #ffffff;
  --legal-link: #4ea1ff;
  --legal-muted: #8e8e93;
  --legal-rule: #3a3a3c;
}

html,
body {
  background-color: #ffffff;
  background-color: var(--legal-bg);
  color: #333333;
  color: var(--legal-text);
  /* 这些页面从未声明过字体，一直吃浏览器默认的衬线体（Times New Roman）：中英混排时
     数字与字母是衬线、中文回落到系统无衬线，观感割裂。统一到系统 UI 字体栈。 */
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB",
    "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

/* 条款正文里的列表（如服务协议「4.1」下的 (a)(b)(c)…）。
   隐私政策自带了这两条规则，服务协议漏了，于是列表项用浏览器默认的 16px + 项目符号 +
   行高 normal，比正文大一号、行距更挤，夹在条款中间很突兀。在这里补齐，两页一致。
   限定在 .container 内，避免影响清单页的卡片列表（.legal-list）。 */
.container ul {
  padding: 0;
}

.container ul li {
  list-style: none;
  font-size: 14px;
  line-height: 1.8;
}

a {
  color: #0000ee;
  color: var(--legal-link);
}

/* ---------------------------------------------------------------------------
 * 清单页（SDKList / devicePermissionList / personalInfoList）的卡片式布局
 *
 * 这些清单原本是 Word 粘贴出来的表格，列宽写死成 pt，在 390px 的手机上每个字占一行、
 * 表头还带行内浅灰底（深色下浅字压浅底看不清）。清单是给用户读的，故改为每条一张卡片、
 * 标签值上下排布，窄屏不横向滚动；宽屏限制最大宽度居中，不至于拉成长条。
 * ------------------------------------------------------------------------ */
.legal-page {
  max-width: 900px;
  margin: 0 auto;
  padding-bottom: 24px;
}

.legal-page h1 {
  font-size: 18px;
  color: #000000;
  color: var(--legal-strong);
  margin: 12px 0;
}

.legal-intro {
  font-size: 14px;
  line-height: 1.8;
  margin: 10px 0;
  text-align: justify;
}

.legal-list {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
}

.legal-item {
  border: 1px solid #dddddd;
  border: 1px solid var(--legal-rule);
  border-radius: 8px;
  padding: 12px 14px;
  margin-bottom: 12px;
}

.legal-item-title {
  font-size: 15px;
  font-weight: bold;
  color: #000000;
  color: var(--legal-strong);
  margin: 0 0 8px;
  line-height: 1.5;
}

.legal-fields {
  margin: 0;
  font-size: 14px;
  line-height: 1.7;
}

.legal-fields dt {
  float: left;          /* grid 在老 WebView 上支持不全，用 float 两列更稳 */
  clear: left;
  width: 6em;
  color: #666666;
  color: var(--legal-muted);
}

.legal-fields dd {
  margin: 0 0 4px 6.8em;
  word-break: break-word;
}

.legal-fields::after {
  content: "";
  display: block;
  clear: both;
}

.legal-updated {
  font-size: 13px;
  color: #666666;
  color: var(--legal-muted);
  margin-top: 20px;
}