/* ============================================================
   doc-page.css —— 生成型内容页(/tools/*.html、/articles.html)的版式。

   🔴 这里**不定义任何颜色 token**。色板 / 昼夜的唯一真源是
   css/liquid-glass.css(见 CLAUDE.md §9 与 docs/DESIGN-SYSTEM.md §15),
   本文件只消费 var(--ink) / var(--bg) 这些既有变量。
   在这里另抄一份色值 = 第二真源,昼夜切换会漏掉这些页面。

   字体同理:不引入新字体(DESIGN-REVIEW 禁「5 套之外的新字体」)。
   拉丁走首页已自托管的 IBM Plex Mono,中文走系统字体后备栈 ——
   两者都由 liquid-glass.css / 首页的 --serif/--sans 定义。
   ============================================================ */

:root {
  --doc-maxw: 720px;
}

body.docpage * { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body.docpage {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans, -apple-system, BlinkMacSystemFont, "PingFang SC",
               "Hiragino Sans GB", "Microsoft YaHei", sans-serif);
  font-size: 16px;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}

body.docpage .wrap {
  max-width: var(--doc-maxw);
  margin: 0 auto;
  padding: 0 20px 96px;
}

/* ── 顶栏:回站点的唯一出口,别做成花哨导航 ───────────────── */
body.docpage .docnav {
  border-bottom: 1px solid var(--hairline);
  margin-bottom: 40px;
}
body.docpage .docnav-inner {
  max-width: var(--doc-maxw);
  margin: 0 auto;
  padding: 12px 20px;
  display: flex;
  align-items: center;
  gap: 18px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}
body.docpage .docnav a { color: var(--ink2); text-decoration: none; }
body.docpage .docnav a:hover { color: var(--gold-dark); }

/* ── 页头 ────────────────────────────────────────────────── */
body.docpage .eyebrow {
  font-family: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-dark);
  margin: 0 0 10px;
}
body.docpage h1 {
  font-family: var(--serif);
  font-size: 32px;
  line-height: 1.3;
  margin: 0 0 6px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
body.docpage h1 .en {
  display: block;
  font-family: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.04em;
  color: var(--ink3);
  margin-top: 6px;
}
body.docpage .lede {
  font-size: 17px;
  color: var(--ink2);
  margin: 18px 0 0;
}

body.docpage h2 {
  font-family: var(--serif);
  font-size: 18px;
  font-weight: 600;
  margin: 44px 0 14px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--hairline);
}
body.docpage h3 { font-size: 15px; font-weight: 600; margin: 26px 0 8px; }

body.docpage p { margin: 0 0 14px; }
body.docpage a { color: var(--gold-dark); }
/* 上一条 (0,1,2) 压过 .cta (0,1,0),会把金钮文字也染成金色 = 金底金字看不清;按钮保持自己的前景色 */
body.docpage a.cta { color: var(--cta-ink); }
body.docpage a.cta.s { color: var(--ink); }

/* ── 关键词 chip:AI / 搜索召回的主要抓手,视觉上刻意收敛 ──── */
body.docpage .chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 8px; padding: 0; list-style: none; }
body.docpage .chips li {
  font-size: 13px;
  color: var(--ink2);
  background: var(--bg-card2);
  border: 1px solid var(--hairline);
  border-radius: 999px;
  padding: 4px 12px;
}

/* ── 事实表(在哪打开 / 分类 / 是否 Pro / 4 语名)────────── */
body.docpage .facts { width: 100%; border-collapse: collapse; margin: 0 0 8px; font-size: 15px; }
body.docpage .facts th,
body.docpage .facts td {
  text-align: left;
  padding: 10px 0;
  border-bottom: 1px solid var(--hairline);
  vertical-align: top;
}
/* 🔴 padding-right 不能省:96px 是按中文标签(「在哪打开」四个字)量的,而
   英文标签「Where to find it」「Other languages」宽得多。表格是 auto 布局,
   nowrap 的表头会把列撑开,但撑开后**紧贴**右边的值,读成一个词
   (`Other languages星空`)。列宽自适应,间距得自己给。 */
body.docpage .facts th {
  width: 96px; padding-right: 20px;
  color: var(--ink3); font-weight: 400; white-space: nowrap;
}

/* ── 卡片网格(工具索引页 / 相关工具 / 文章索引)──────────── */
body.docpage .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
body.docpage .card {
  display: block;
  padding: 16px;
  border: 1px solid var(--hairline);
  border-radius: 12px;
  background: var(--bg-card);
  color: inherit;
  text-decoration: none;
}
body.docpage .card:hover { border-color: var(--gold-line); }
body.docpage .card .name { font-weight: 600; font-size: 15px; margin-bottom: 4px; }
/* 文章卡是 <div>(内含多个独立语言链接),标题链接需自己去掉下划线 */
body.docpage .card .name a { color: inherit; text-decoration: none; }
body.docpage .card .name a:hover { color: var(--gold-dark); }
body.docpage .card .lang a { color: var(--ink2); }
body.docpage .card .desc { font-size: 13px; color: var(--ink2); line-height: 1.6; }
body.docpage .card .lang { font-size: 12px; color: var(--ink3); margin-top: 6px; }

/* ── FAQ ─────────────────────────────────────────────────── */
body.docpage .faq { margin: 0 0 18px; }
body.docpage .faq h3 { margin-top: 22px; }
body.docpage .faq p { color: var(--ink2); }

/* ── 底部 CTA ────────────────────────────────────────────── */
body.docpage .dl {
  margin: 48px 0 0;
  padding: 20px;
  border: 1px solid var(--gold-line);
  border-radius: 12px;
  background: var(--bg-card2);
}
body.docpage .dl p { margin: 0 0 12px; font-size: 15px; }
body.docpage .dl .cta { text-decoration: none; }

body.docpage footer {
  margin-top: 56px;
  padding-top: 18px;
  border-top: 1px solid var(--hairline);
  font-size: 13px;
  color: var(--ink3);
}
body.docpage footer a { color: var(--ink2); }

@media (max-width: 520px) {
  body.docpage h1 { font-size: 26px; }
  body.docpage .wrap { padding-bottom: 64px; }
}