/*
---
generated_by: GLM-5.3-Flash (builtin:bigmodel-coding-plan, Reflect experience v2 Task 9)
date: 2026-09-14
core_logic: Reflect 体验 v2 Task 9——Learn 页视觉层（§5.8：免费解释术语；topic 六段结构
  一句定义→日常比喻→图/事实例子→如何在 Reflect 使用→非预测边界→相关深链）。
  作用域 #page-learn，零壳/零他页泄漏。现有 learn-transits 文案（learnP1–P4/learnEnd，11 语
  STRINGS 既有键）逐字保留只重排进六段；缺段（图/事实例子）只补结构占位（小幅素描 alt=""
  + mono 段标），不编新知识内容（内容完整性归 V7 内容批）。版式语言：衬线正文（demo
  .transit-reading p 节奏 17px/1.78，zh 1.9）+ rust mono 段标 + 发丝线分段；素描走
  components.css .sketch 博物馆印刷处理（§5.8 小型素描做章节间隔）。
  全部取值走 tokens.css 令牌；触控 ≥44px（back-link/Go to Chart）；禁 infinite。
test_record: 验证协议 A–E 见 task-9-report.md（2026-09-14）：en/zh-CN × 390/1280 截图 +
  scrollWidth≤clientWidth + img naturalWidth>0 + 禁串零命中 + 段标/返回链 ≥44px 抽查。
recent_changes:
  - 2026-09-14: 初版——页头（眉标+衬线标题）/六段 topic 结构（mono 段标+发丝线分节）/
    小幅素描间隔（sketch--dock）/深链行纸感换装。
---
*/

/* ================= 页头（eyebrow + 衬线标题；次级页共用语言见 you.css） ================= */
#page-learn .page-h1 {
  margin: 0;
  font-family: var(--reflect-serif);
  font-size: clamp(30px, 5vw, 40px);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -.02em;
  color: var(--reflect-ink);
}
/* 返回链：苔绿 → 墨色 hover；44px 触控（Settings 同语言） */
#page-learn .back-link {
  color: var(--reflect-moss);
  min-height: 44px;
  padding: 12px 8px 12px 0;
}
#page-learn .back-link:hover { color: var(--reflect-ink); }

/* ================= topic 六段结构（定义→比喻→例子→如何用→非预测边界→深链） ================= */
#page-learn .learn-topic { display: flex; flex-direction: column; }
#page-learn .learn-step { padding: var(--reflect-space-8) 0 var(--reflect-space-24); }
#page-learn .learn-step + .learn-step {
  margin-top: var(--reflect-space-8);
  padding-top: var(--reflect-space-24);
  border-top: 1px solid var(--reflect-hairline);
}
#page-learn .learn-step-label {
  margin: 0 0 var(--reflect-space-12);
  color: var(--reflect-rust);
  font-family: var(--reflect-mono);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: .14em;
  text-transform: uppercase;
}
/* 段正文：现有 learnP* 文案逐字保留，只换 serif 长文节奏 */
#page-learn .learn-reading {
  margin: 0;
  color: var(--reflect-ink-soft);
  font-family: var(--reflect-serif);
  font-size: 17px;
  line-height: 1.78;
}
html[lang="zh-CN"] #page-learn .learn-reading { line-height: 1.9; }
@media (min-width: 768px) {
  #page-learn .learn-reading { font-size: 18px; }
}

/* 例子段：小型素描章节间隔（§5.8；装饰 alt=""，博物馆印刷处理归 components.css .sketch） */
#page-learn .learn-sketch {
  width: 100%;
  max-width: 460px;
  height: 136px;
  margin: 0;
}
@media (min-width: 768px) {
  #page-learn .learn-sketch { height: 176px; }
}

/* 深链行：一句收束 + Go to Chart（纸面 ghost 药丸，Chart 页同语言） */
#page-learn .learn-next-actions { margin-top: var(--reflect-space-16); }
#page-learn .btn-ghost {
  color: var(--reflect-ink);
  border: 1px solid var(--reflect-line);
  border-radius: var(--reflect-radius-pill);
  background: var(--reflect-paper-wash);
  text-decoration: none;
}
#page-learn .btn-ghost:hover { background: var(--reflect-paper-light); border-color: var(--reflect-ink); }

/* ================= mech atelier（机制图九图：细线框装裱 + mono 图注，版式词汇同上） ================= */
#page-learn .mech-atelier { margin-top: 64px; }
#page-learn .mech-plate { border: 1px solid var(--reflect-hairline); background: var(--reflect-paper-light); padding: 18px 18px 10px; margin: 16px 0 6px; }
#page-learn .mech-plate-label { font-family: var(--reflect-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--reflect-ink-soft); text-align: center; margin: 8px 0 4px; }