/* knowledge/_shared/topic-reader.css
 * ============================================================================
 * 「深读版」阅读页的共享样式（只此一份，24 个主题共用）
 *
 * 为什么单独一份（而不是塞进 topic-page.css）：
 *   · topic-page.css 负责**教学页**（侧栏导航 / 章节卡 / 翻页条 / 工具卡）；
 *   · 本文件负责**长文阅读页**（正文排版 / 表格 / 引用块 / 目录 / 阅读进度）。
 *   两者的排版尺度完全不同（教学页是卡片流，阅读页是连续长文），
 *   混在一份里会出现"改正文行高把侧栏也改了"这类耦合。
 *
 * 生成方式：`node scripts/build-reader.mjs` 把 {topic}/docs/*.md 渲染成
 *   {topic}/_reader/*.html（本文件是它们的唯一样式来源）。
 * ⚠️ 不要直接编辑生成出来的 .html —— 它们由 md 生成，改动会在下次构建时被覆盖。
 * ========================================================================== */

:root {
  --rd-max: 46rem; /* 正文最大宽度：约 80–90 个半角字符，长文阅读的舒适区 */
  --rd-lh: 1.85; /* 中文长文行高：比英文要更松 */
  --rd-fs: 1.02rem;
}

/* ---------------- 页面骨架 ---------------- */
body.rd {
  margin: 0;
  background: var(--bg, #f6f5f1);
  color: var(--fg, #23221e);
  font-family: var(--font-sans, -apple-system, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif);
  font-size: var(--rd-fs);
  line-height: var(--rd-lh);
  -webkit-font-smoothing: antialiased;
}

.rd-progress {
  position: fixed;
  inset: 0 auto auto 0;
  height: 3px;
  width: 0;
  background: var(--accent, #3f7d5e);
  z-index: 50;
  transition: width 0.1s linear;
}

/* ---------------- 顶部栏（与教学页保持同一视觉语言） ---------------- */
.rd-topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 22px;
  background: color-mix(in srgb, var(--bg, #f6f5f1) 88%, transparent);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--line, #e7e5dc);
}
.rd-topbar__brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--fg, #23221e);
  text-decoration: none;
  white-space: nowrap;
}
.rd-topbar__brand span[aria-hidden] {
  color: var(--accent, #3f7d5e);
}
.rd-topbar__path {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--muted, #6b685d);
  font-size: 0.84rem;
}
.rd-topbar__back {
  flex-shrink: 0;
  font-size: 0.84rem;
  color: var(--accent, #3f7d5e);
  text-decoration: none;
  border: 1px solid var(--line, #e7e5dc);
  border-radius: 999px;
  padding: 5px 13px;
  background: var(--surface, #fff);
}
.rd-topbar__back:hover {
  border-color: var(--accent, #3f7d5e);
}

/* ---------------- 布局：左目录 + 右正文 ----------------
 * 🔴 为什么目录在左（第 30 轮按读者反馈调整）：
 *   ① 主流长文档站（GitHub / GitBook / VitePress / MDN 侧栏）目录都在左；
 *   ② **与教学页保持一致**——教学页的章节侧栏本来就在左边，
 *      读者从教学页点进深读版，视线不需要横跨整屏去找目录；
 *   ③ 中文正文从左侧起读，目录贴着正文左缘，"扫一眼目录再看正文"的动线更短。
 * ⚠️ 栅格顺序与 DOM 顺序必须一起改（见 build-reader.mjs 的 .rd-wrap 结构），
 *    只改 CSS 会把正文挤到左边、目录掉到下面。
 */
.rd-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 34px;
  max-width: 1180px;
  margin: 0 auto;
  padding: 30px 22px 90px;
}
@media (min-width: 1080px) {
  .rd-wrap {
    /* 目录列在**前**，正文列在后 */
    grid-template-columns: 250px minmax(0, var(--rd-max));
    justify-content: center;
    align-items: start;
  }
}

.rd-main {
  min-width: 0;
}

/* ---------------- 正文排版 ---------------- */
.rd-main h1 {
  font-size: 1.72rem;
  line-height: 1.4;
  margin: 0 0 0.5em;
  letter-spacing: -0.01em;
}
.rd-main h2 {
  font-size: 1.24rem;
  line-height: 1.5;
  margin: 2.3em 0 0.7em;
  padding-bottom: 0.34em;
  border-bottom: 1px solid var(--line, #e7e5dc);
  scroll-margin-top: 74px; /* 锚点跳转时给 sticky 顶栏留位 */
}
.rd-main h3 {
  font-size: 1.06rem;
  margin: 1.8em 0 0.55em;
  scroll-margin-top: 74px;
}
.rd-main h1 + p,
.rd-main h2 + p,
.rd-main h3 + p {
  margin-top: 0.4em;
}

.rd-main p {
  margin: 0.85em 0;
}
/* 中文正文不宜两端对齐（会出现难看的字距拉伸），保持左对齐 */
.rd-main strong {
  font-weight: 700;
  color: var(--fg-strong, #16150f);
}
.rd-main em {
  font-style: normal;
  color: var(--accent, #3f7d5e);
}

.rd-main a {
  color: var(--accent, #3f7d5e);
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.rd-main a:hover {
  text-decoration-thickness: 2px;
}

/* 行内代码：中文语境里不要用等宽字体的拉丁比例，改小一点更协调 */
.rd-main code {
  font-family: var(--font-mono, ui-monospace, "SFMono-Regular", Consolas, monospace);
  font-size: 0.88em;
  padding: 0.08em 0.36em;
  border-radius: 5px;
  background: color-mix(in srgb, var(--fg, #23221e) 7%, transparent);
}

/* 代码块 */
.rd-main pre {
  margin: 1.1em 0;
  padding: 14px 16px;
  overflow-x: auto;
  border: 1px solid var(--line, #e7e5dc);
  border-radius: 12px;
  background: var(--surface, #fff);
  box-shadow: var(--shadow-sm, 0 1px 2px rgba(36, 35, 31, 0.05));
}
.rd-main pre code {
  background: none;
  padding: 0;
  font-size: 0.86em;
  line-height: 1.75;
}

/* 引用块：md 里 5723 处，是"依据/边界声明"的主要形态 ⇒ 给足权重 */
.rd-main blockquote {
  margin: 1.1em 0;
  padding: 0.7em 1.05em;
  border-left: 3px solid var(--accent, #3f7d5e);
  border-radius: 0 10px 10px 0;
  background: color-mix(in srgb, var(--accent, #3f7d5e) 6%, transparent);
  color: color-mix(in srgb, var(--fg, #23221e) 92%, transparent);
}
.rd-main blockquote > :first-child {
  margin-top: 0;
}
.rd-main blockquote > :last-child {
  margin-bottom: 0;
}

/* 列表 */
.rd-main ul,
.rd-main ol {
  margin: 0.8em 0;
  padding-left: 1.45em;
}
.rd-main li {
  margin: 0.34em 0;
}
.rd-main li > ul,
.rd-main li > ol {
  margin: 0.3em 0;
}

/* 任务列表（自检清单，370 处）：把 [ ] 画成真方框 */
.rd-main li.task {
  list-style: none;
  margin-left: -1.25em;
}
.rd-main li.task::before {
  content: "";
  display: inline-block;
  width: 0.92em;
  height: 0.92em;
  margin-right: 0.5em;
  vertical-align: -0.1em;
  border: 1.5px solid var(--muted, #6b685d);
  border-radius: 4px;
}
.rd-main li.task.done::before {
  background: var(--accent, #3f7d5e);
  border-color: var(--accent, #3f7d5e);
}

/* ---------------- 表格：1306 处，是这个知识库的主力形态 ---------------- */
.rd-tablewrap {
  margin: 1.2em 0;
  overflow-x: auto;
  border: 1px solid var(--line, #e7e5dc);
  border-radius: 12px;
  background: var(--surface, #fff);
}
.rd-main table {
  border-collapse: collapse;
  width: 100%;
  font-size: 0.93em;
  line-height: 1.68;
}
.rd-main thead th {
  position: sticky; /* 长表格滚动时表头不丢 */
  top: 0;
  background: color-mix(in srgb, var(--accent, #3f7d5e) 9%, var(--surface, #fff));
  font-weight: 700;
  text-align: left;
  white-space: nowrap;
}
.rd-main th,
.rd-main td {
  padding: 8px 13px;
  border-bottom: 1px solid color-mix(in srgb, var(--line, #e7e5dc) 78%, transparent);
  vertical-align: top;
}
.rd-main tbody tr:last-child td {
  border-bottom: none;
}
.rd-main tbody tr:hover td {
  background: color-mix(in srgb, var(--accent, #3f7d5e) 4%, transparent);
}

/* ---------------- 左侧目录 ---------------- */
.rd-toc {
  position: sticky;
  top: 74px;
  max-height: calc(100vh - 100px);
  overflow-y: auto;
  padding: 16px 14px;
  border: 1px solid var(--line, #e7e5dc);
  border-radius: 14px;
  background: var(--surface, #fff);
  font-size: 0.86rem;
  line-height: 1.6;
  /* 视觉上与正文左缘分离一点点，避免"目录像正文的一部分" */
  box-shadow: var(--shadow-sm, 0 1px 2px rgba(36, 35, 31, 0.05));
}
.rd-toc__title {
  margin: 0 0 10px;
  font-size: 0.74rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted, #6b685d);
}
.rd-toc ol {
  margin: 0;
  padding-left: 0;
  list-style: none;
  counter-reset: toc;
}
.rd-toc li {
  margin: 3px 0;
}
.rd-toc a {
  display: block;
  padding: 3px 7px;
  border-radius: 7px;
  color: color-mix(in srgb, var(--fg, #23221e) 86%, transparent);
  text-decoration: none;
}
.rd-toc a:hover {
  background: color-mix(in srgb, var(--accent, #3f7d5e) 10%, transparent);
  color: var(--accent, #3f7d5e);
}
.rd-toc a.is-h3 {
  padding-left: 20px;
  font-size: 0.94em;
  color: var(--muted, #6b685d);
}
.rd-toc a.is-active {
  background: color-mix(in srgb, var(--accent, #3f7d5e) 14%, transparent);
  color: var(--accent, #3f7d5e);
  font-weight: 600;
}

/* ---------------- 页脚 ---------------- */
.rd-foot {
  max-width: var(--rd-max);
  margin: 0 auto;
  padding: 0 22px 70px;
  color: var(--muted, #6b685d);
  font-size: 0.82rem;
  line-height: 1.75;
}
.rd-foot hr {
  border: none;
  border-top: 1px solid var(--line, #e7e5dc);
  margin: 0 0 16px;
}

/* ---------------- （已移除）原文版视图 ---------------- */
/* 第 30 轮曾并行生成 `_reader-raw/`（等宽显示 Markdown 原文的对照视图），后按读者决定**砍掉**：
 *   · 文件数减半（720 → 360），少一半维护面与 mtime 检查量；
 *   · 渲染版已被 786 项页面测试 + 50 条反向测试验证可靠；
 *   · 想核对原文时直接看 `docs/*.md`（它才是 SSOT）。
 * ⚠️ 同时删掉了 `.rd-raw` / `.rd--raw` 的样式规则——**不要留下"没有对应输出的 class"**：
 *   真实踩过的坑就是"生成器输出 `class="rd-raw"`，但样式表里没有 `.rd-raw`"，
 *   结果那一版看起来渲染了、其实完全没样式（字号退回浏览器默认 13px）。
 *   砍视图时必须**目录 + 样式 + 断言三处一起清**，否则会留下半死不活的残留。
 */

/* ---------------- 打印 ---------------- */
@media print {
  .rd-topbar,
  .rd-toc,
  .rd-progress {
    display: none;
  }
  .rd-wrap {
    display: block;
    max-width: none;
    padding: 0;
  }
  .rd-main {
    max-width: none;
  }
  .rd-main h2 {
    page-break-after: avoid;
  }
  .rd-main table,
  .rd-main pre,
  .rd-main blockquote {
    page-break-inside: avoid;
  }
}