/* 官网文档页共用样式（隐私政策 / 用户协议）
   配色与排版令牌取自 web/index.html 的着陆页体系：昼夜双主题 + 衬线标题。
   令牌在此独立定义一份，不引用着陆页内联样式——那部分是 <style> 内联，抽出来要动的面太大。
   改这里 = 同时改两个对外页面，请两页一起复看。

   2026-09-21：顶栏与页脚的样式已外移到 css/site-nav.css（六页共用同一套标记），
   本文件不再拥有 nav-header、nav-links、nav-link、brand-* 与 footer 这几组类名 ——
   它们是旧头尾的遗留，留着会和共用样式抢同一批类名。
   （注：注释里不要写出 星号+斜杠 的连写，会提前闭合注释——
   上面这条曾把整块 :root 令牌一起吞掉，全站颜色令牌集体失效。） */

:root {
  --canvas: #faf9f5;
  --surface-soft: rgba(245, 240, 232, 0.6);
  --surface-card: rgba(239, 233, 222, 0.7);
  --ink: #141413;
  --body: #4a4a46;
  --muted: #6e6b65;
  --hairline: rgba(20, 20, 19, 0.1);
  --primary: #cc785c;
  --primary-hover: #a9583e;
  --on-primary: #ffffff;
  --accent-teal: #5db8a6;
  --font-display: 'Noto Serif SC', 'Source Han Serif SC', 'STZhongsong', 'SimSun', serif;
  --font-sans: 'Noto Sans SC', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
  --radius-md: 8px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    color-scheme: dark;
    --canvas: #0a0c11;
    --surface-soft: rgba(20, 24, 34, 0.5);
    --surface-card: rgba(26, 32, 46, 0.6);
    --ink: #f0efea;
    --body: #a5a8b0;
    --muted: #6b6f7b;
    --hairline: rgba(255, 255, 255, 0.08);
    --primary: #d98a72;
    --primary-hover: #e8a590;
    --on-primary: #141413;
    --accent-teal: #5db8a6;
  }
}
[data-theme='dark'] {
  color-scheme: dark;
  --canvas: #0a0c11;
  --surface-soft: rgba(20, 24, 34, 0.5);
  --surface-card: rgba(26, 32, 46, 0.6);
  --ink: #f0efea;
  --body: #a5a8b0;
  --muted: #6b6f7b;
  --hairline: rgba(255, 255, 255, 0.08);
  --primary: #d98a72;
  --primary-hover: #e8a590;
  --on-primary: #141413;
  --accent-teal: #5db8a6;
}

* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
}
body {
  margin: 0;
  background: var(--canvas);
  color: var(--body);
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.85;
  -webkit-font-smoothing: antialiased;
}

.container {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 24px;
}

/* 页头/导航/页脚见 css/site-nav.css（全站共用）：.site-nav / .site-footer */

/* 文档骨架 */
.doc-head {
  padding: 24px 0 40px;
  border-bottom: 1px solid var(--hairline);
}
.doc-eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--primary);
  margin-bottom: 16px;
}
h1 {
  font-family: var(--font-display);
  font-size: 44px;
  font-weight: 600;
  line-height: 1.25;
  color: var(--ink);
  margin: 0 0 20px;
  letter-spacing: -0.5px;
}
.doc-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 28px;
  font-size: 13px;
  color: var(--muted);
}
.doc-meta b {
  color: var(--body);
  font-weight: 500;
}

.lead {
  font-family: var(--font-display);
  font-size: 17px;
  line-height: 1.9;
  color: var(--body);
  max-width: 760px;
  margin: 0 0 8px;
}

.doc-layout {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 56px;
  padding: 48px 0 96px;
  align-items: start;
}

/* 本页目录 */
.toc {
  position: sticky;
  /* 88px = 全站粘性顶栏高度 + 呼吸量，否则目录会滑到顶栏底下 */
  top: 88px;
}
.toc-title {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 14px;
}
.toc ol {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: toc;
}
.toc li {
  margin: 0;
}
.toc a {
  display: block;
  padding: 5px 0 5px 12px;
  border-left: 1px solid var(--hairline);
  color: var(--muted);
  text-decoration: none;
  font-size: 13px;
  line-height: 1.5;
  transition:
    color 0.15s,
    border-color 0.15s;
}
.toc a:hover {
  color: var(--primary);
  border-left-color: var(--primary);
}

/* 正文 */
.doc-body {
  max-width: 720px;
  min-width: 0;
}
h2 {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 600;
  color: var(--ink);
  margin: 56px 0 16px;
  line-height: 1.4;
}
h2:first-child {
  margin-top: 0;
}
h2 .no {
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--primary);
  margin-right: 10px;
  font-weight: 400;
}
h3 {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
  margin: 32px 0 10px;
}
p {
  margin: 0 0 16px;
}
ul {
  margin: 0 0 16px;
  padding-left: 20px;
}
li {
  margin-bottom: 8px;
}
li::marker {
  color: var(--primary);
}
strong {
  color: var(--ink);
  font-weight: 600;
}
a {
  color: var(--primary);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
a:hover {
  color: var(--primary-hover);
  border-bottom-color: currentColor;
}
code {
  font-family: var(--font-mono);
  font-size: 12.5px;
  padding: 2px 6px;
  border-radius: 4px;
  background: var(--surface-card);
  color: var(--ink);
  /* 只在真放不下时才断行：break-all 会把 open-meteo 拆成 "open-me teo" */
  overflow-wrap: anywhere;
  word-break: normal;
}

/* 提示块：区分"我们不会"与"需要注意" */
.note {
  border-left: 2px solid var(--accent-teal);
  background: var(--surface-soft);
  padding: 16px 20px;
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  margin: 0 0 24px;
  font-size: 14px;
}
.note.warn {
  border-left-color: var(--primary);
}
.note p:last-child {
  margin-bottom: 0;
}

table {
  width: 100%;
  border-collapse: collapse;
  margin: 8px 0 28px;
  font-size: 13.5px;
}
caption {
  caption-side: top;
  text-align: left;
  font-size: 12.5px;
  color: var(--muted);
  padding-bottom: 10px;
}
th {
  text-align: left;
  font-weight: 600;
  color: var(--ink);
  font-size: 12px;
  letter-spacing: 0.5px;
  padding: 10px 12px 10px 0;
  border-bottom: 1px solid var(--hairline);
  white-space: nowrap;
}
td {
  padding: 12px 12px 12px 0;
  border-bottom: 1px solid var(--hairline);
  vertical-align: top;
}
td:last-child,
th:last-child {
  padding-right: 0;
}
td code {
  background: transparent;
  padding: 0;
  font-size: 12.5px;
}

/* 页脚样式见 css/site-nav.css（.site-footer） */

@media (max-width: 900px) {
  .doc-layout {
    grid-template-columns: 1fr;
    gap: 32px;
    padding-bottom: 64px;
  }
  .toc {
    position: static;
    top: auto;
  }
  .toc ol {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 0 12px;
  }
  h1 {
    font-size: 32px;
  }
}
@media (max-width: 560px) {
  h2 {
    font-size: 20px;
  }
  /* 窄屏不改成横向滚动 + nowrap：那样正文整列会被推出可视区，
           看起来像内容丢了。保持表格布局，靠缩字号、收内边距、允许任意断词挤进 320px。 */
  table,
  th,
  td {
    font-size: 12.5px;
  }
  th,
  td {
    padding-right: 10px;
  }
  td {
    overflow-wrap: anywhere;
  }
}