/*
---
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——Natal 报告视觉层（§5.9 Reports）。作用域 #page-chart 内
  #natal-section / .natal-*（报告区只存在于 Chart 页）。长文版式语言来自 demo 金样
  （demos/reflect-art-direction/styles.css）：.transit-reading p 的 serif 正文节奏（17px/1.78，
  zh 1.9）、.landing-note 的 rust 左边线引块（.natal-quote）、.method-note 的 mono 元数据脚注
  （.natal-disclaimer）。信息形态 ≥4：目录（.natal-outline 计数目录）、章节（hairline 分节）、
  正文段落、引用（.natal-quote）、静想问句卡（.natal-interaction）、图框占位（.natal-visual）、
  表格（.natal-table）、免责脚注——章节间 hairline 分隔 + 卡/引块节奏防连续三屏纯正文。
  锁区信任边界零参与：本文件纯 CSS，未购锁后正文结构性零 DOM（natal-view.js 不变），
  渐隐只作用于服务端下发的首章 preview（max-height + 纸色渐变自然收尾）。
  全部取值走 tokens.css 令牌；触控 ≥44px（#natal-unlock 沿用 .btn-primary 44px）；禁 infinite。
test_record: 验证协议 A–E 见 task-9-report.md（2026-09-14）：en/zh-CN × 390/1280 截图 +
  未购锁区 DOM 断言（preview 首章之外的章节标题零命中、锁区容器存在且渐隐、无 hidden 全文节点）+
  scrollWidth≤clientWidth + 禁串零命中 + CTA ≥44px。
recent_changes:
  - 2026-09-14: 初版——报告头/锁区（试读眉标+serif 预览+纸色渐隐+计数目录+解锁预告 CTA）/
    全文分节节奏/引块/问句卡/图框/表格/免责脚注纸感换装。
  - 2026-09-14: 外审 212 修复轮 Task 3——#natal-cover 封面升格间距 + .natal-ask 页尾次级
    动作（Ask Reflect 纯导航）；锁区/全文既有规则零变化。
---
*/

/* ================= 报告标题：唯一、直接，正文紧随其后 ================= */
#page-chart .report-head { display: flex; flex-direction: column; }
#page-chart .report-title {
  margin: 0;
  color: var(--reflect-ink);
  font-family: var(--reflect-serif);
  font-size: clamp(28px, 5vw, 42px);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: -.025em;
}
#page-chart #natal-cover { padding-bottom: var(--reflect-space-16); }
#page-chart .natal-ask { margin-top: var(--reflect-space-24); }

/* ================= 锁定态：服务端已发布正文 + 自然渐隐 ================= */
#page-chart .natal-preview-body {
  max-height: 22em;
  overflow: hidden;
  color: var(--reflect-ink-soft);
  font-family: var(--reflect-serif);
  font-size: 17px;
  line-height: 1.78;
  white-space: pre-wrap;
}
html[lang="zh-CN"] #page-chart .natal-preview-body { line-height: 1.9; }
#page-chart .natal-fade {
  position: relative;
  z-index: 1;
  height: 128px;
  margin-top: -128px;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(238, 233, 221, 0) 0%,
    rgba(238, 233, 221, .22) 24%,
    rgba(238, 233, 221, .72) 66%,
    var(--reflect-paper) 96%
  );
}

/* --- 目录（全部一级大纲；mono 计数 + 衬线章题 + 发丝线行） --- */
#page-chart .report-toc-label { margin: var(--reflect-space-8) 0 var(--reflect-space-12); }
#page-chart .natal-outline {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: natal-toc;
}
#page-chart .natal-outline li {
  counter-increment: natal-toc;
  display: flex;
  align-items: baseline;
  gap: var(--reflect-space-12);
  min-height: 44px;
  padding: var(--reflect-space-8) 0;
  border-bottom: 1px solid var(--reflect-hairline);
  color: var(--reflect-ink);
  font-family: var(--reflect-serif);
  font-size: 16px;
  line-height: 1.5;
}
#page-chart .natal-outline li:last-child { border-bottom: 0; }
#page-chart .natal-outline li::before {
  content: counter(natal-toc, decimal-leading-zero);
  flex: none;
  color: var(--reflect-rust);
  font-family: var(--reflect-mono);
  font-size: 12px;
  letter-spacing: .08em;
}
/* CTA 只在正文渐隐后按文档流出现；不 sticky、不悬浮。点击前报价区完全 hidden。 */
#page-chart .report-unlock {
  position: static;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--reflect-space-12);
  margin-top: var(--reflect-space-8);
}
#page-chart #natal-unlock { min-height: 48px; }
#page-chart .report-toc { margin-top: var(--reflect-space-24); }
#page-chart .natal-offer {
  width: min(100%, 420px);
  padding: var(--reflect-space-12) var(--reflect-space-16);
  border-left: 2px solid var(--reflect-rust);
  background: var(--reflect-rust-wash);
}
#page-chart .natal-offer-price {
  margin: 0;
  color: var(--reflect-ink);
  font-family: var(--reflect-serif);
  font-size: 22px;
  line-height: 1.3;
}
#page-chart .natal-offer-benefits {
  margin: var(--reflect-space-8) 0 0;
  padding-left: 1.25em;
  color: var(--reflect-ink-soft);
  font-size: 14px;
  line-height: 1.6;
}

/* ================= 已购全文（已发布：目录之外 ≥4 种信息形态 + 分节节奏） =================
   禁连续三屏纯正文：章节 hairline 分节 + 引块/问句卡/图框/表格打拍子；本文件只给节奏，
   形态由服务端 envelope 决定（natal-view.js blocksOf 全块渲染）。 */
#page-chart .natal-full-body { gap: 0; }
#page-chart .natal-full-section { padding: var(--reflect-space-8) 0 var(--reflect-space-16); }
#page-chart .natal-full-section:first-child { padding-top: 0; }
#page-chart .natal-full-section + .natal-full-section {
  margin-top: var(--reflect-space-16);
  padding-top: var(--reflect-space-24);
  border-top: 1px solid var(--reflect-hairline);
}
#page-chart .natal-full-section-title {
  margin: 0 0 var(--reflect-space-12);
  color: var(--reflect-ink);
  font-family: var(--reflect-serif);
  font-size: clamp(21px, 3vw, 26px);
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: -.01em;
}
/* 正文段落：serif 长文节奏（demo .transit-reading p） */
#page-chart .natal-full-section p {
  margin: 0 0 var(--reflect-space-16);
  color: var(--reflect-ink-soft);
  font-family: var(--reflect-serif);
  font-size: 17px;
  line-height: 1.78;
}
html[lang="zh-CN"] #page-chart .natal-full-section p { line-height: 1.9; }
#page-chart .natal-full-section p:last-child { margin-bottom: 0; }

/* 引块：demo .landing-note 语言——rust 左边线 + 苔绿洗，衬线斜体（视觉区分非正文） */
#page-chart .natal-quote {
  margin: var(--reflect-space-16) 0;
  padding: var(--reflect-space-16) var(--reflect-space-24);
  border-left: 3px solid var(--reflect-rust);
  background: var(--reflect-moss-wash);
  color: var(--reflect-ink);
  font-family: var(--reflect-serif);
  font-size: 16px;
  font-style: italic;
  line-height: 1.7;
}
/* 静想问句卡（interaction）：虚线陶锈容器 + mono 小节标 + 衬线问句 */
#page-chart .natal-interaction {
  margin: var(--reflect-space-16) 0;
  padding: var(--reflect-space-16);
  border: 1px dashed rgba(163, 66, 45, .55);
  border-radius: var(--reflect-radius-md);
  background: var(--reflect-rust-wash);
}
#page-chart .natal-interaction .natal-interaction-label {
  margin: 0 0 var(--reflect-space-8);
  color: var(--reflect-rust);
  font-family: var(--reflect-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
}
#page-chart .natal-interaction .natal-interaction-prompt {
  margin: 0;
  color: var(--reflect-ink);
  font-family: var(--reflect-serif);
  font-size: 16px;
  line-height: 1.7;
}
/* 图框占位（visual）：响应不带 visual 数据——只给纸面空框，绝不显示假数据/假图 */
#page-chart .natal-visual {
  margin: var(--reflect-space-16) 0;
  padding: var(--reflect-space-32) var(--reflect-space-16);
  border: 1px solid var(--reflect-line);
  border-radius: var(--reflect-radius-sm);
  background: var(--reflect-paper-wash);
  text-align: center;
}
#page-chart .natal-visual .natal-visual-label {
  margin: 0;
  color: var(--reflect-ink-soft);
  font-family: var(--reflect-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
}
#page-chart .natal-visual .natal-visual-note {
  margin: var(--reflect-space-8) 0 0;
  color: var(--reflect-ink-soft);
  font-size: 13px;
  line-height: 1.6;
}
/* 表格：发丝线网格 + mono 表头（仅日期/事实元数据语言，不长文） */
#page-chart .natal-table { margin: var(--reflect-space-16) 0; border-collapse: collapse; width: 100%; }
#page-chart .natal-table th,
#page-chart .natal-table td {
  border: 1px solid var(--reflect-hairline);
  padding: var(--reflect-space-8) var(--reflect-space-12);
  text-align: left;
  color: var(--reflect-ink-soft);
  font-size: 14px;
  line-height: 1.5;
}
#page-chart .natal-table th {
  background: var(--reflect-moss-wash);
  color: var(--reflect-ink);
  font-family: var(--reflect-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
}
/* 免责脚注（服务端 envelope 一次性）：demo .method-note 元数据语言 */
#page-chart .natal-disclaimer {
  margin: var(--reflect-space-32) 0 0;
  padding-top: var(--reflect-space-16);
  border-top: 1px solid var(--reflect-line);
  color: var(--reflect-ink-soft);
  font-family: var(--reflect-mono);
  font-size: 12px;
  line-height: 1.7;
  letter-spacing: .04em;
}