/*
---
generated_by: GLM-5.3-Flash (builtin:bigmodel-coding-plan)
date: 2026-09-14
core_logic: Reflect 体验 v2 Task 4——Chart 页视觉层（全部规则 #page-chart 作用域，零壳/零他页泄漏）。
   §5.6：真实 wheel 唯一大图（不叠装饰素描）、Big Three 先懂、三列事实表（星座/行星/宫位，
   视觉语言照 demos/reflect-art-direction/styles.css .placement-grid/.placement-column）、旁注区
   （demo .chart-note 的 data-chart-note 模式）。渲染器 SVG class（.zodiac-label/.house-label/
   .planet-glyph/.draw-path/.planet-node 等）金样移植并换 v2 令牌；.draw-path 入场一次性
   （forwards 单次），**不带 demo .pulse-ring 无限动画**；reduced-motion 直达（显式关动画 +
   base.css 全局降级双保险）。行星节点触控：SVG 侧 pointer-events:bounding-box 扩命中 +
   事实表行星行 44px 按钮等价手段。数据全部来自服务端 DTO 的显示映射，本文件零数值计算。
test_record: 验证协议 A–F 见 chart-view.js test_record 与 docs/reflect/ui-shots/v2-chart/
   （2026-09-14：en/zh-CN × 390×844/1280×900 × #/chart 无盘态 + QA 有盘态 + #/you、#/ 回归；
   scrollWidth≤clientWidth 全绿、禁串零命中、渲染器 node --test 12 断言组仍全绿）。
recent_changes:
   - 2026-10-12: 审查#333 收口批（配合 chart-renderer.js 同批）——新增
     .planet-major .planet-glyph 21px 规则（日/月主星强调，渲染器 inline 属性在无
     CSS 场景兜底同值）。
   - 2026-10-11: 对比度合规批（WCAG 数值自审）——house-label .72→.85（3.4→4.9:1）、
     .planet-degree .78→.85（3.6→4.7:1）、.aspect-orb .55→.85（2.0→4.7:1），全部过正文
     AA 4.5:1；渲染器同批把相位线 opacity .62→.85（非文本图形 3:1 达标）。
   - 2026-10-11: 环带批（配合 chart-renderer.js）——.zodiac-label 改 paper-light（moss
     环带上 5.4:1 可读；ochre 金在 moss 上仅 1.9:1 弃用）；zodiac 词条 hover 改 ochre
     金（深环带上做色相偏移记号）。
   - 2026-10-11: 星盘可读性批（配合 chart-renderer.js 同批）——宫位数字 8→9.5px、
     新增 .planet-degree 盘面度数标注样式（mono 8px + 纸色 halo 防压线）；文本锚定组
     选择器同步收编 .planet-degree。（"星座 glyph 透明度 .5→.68" 当日被环带批取代：
     glyph 改 paper-light 实色坐 moss 环带。）
   - 2026-09-14: 初版（Chart 页接线 Task 4）。
   - 2026-10-07: v3.4（PR-E）——页脚新增 .chart-source-note 数据来源诚实注（键 reflectSourceNote，
     自 Reflect 空态脚注下移至此；星盘数据的说明归星盘页）。
---
*/

/* ================= 作用域兜底：本页任何 [hidden] 必须真隐藏（作者 display 赢回 UA） ================= */
#page-chart [hidden] { display: none !important; }

/* ================= 页头排版（scoped 换装：衬线大标 + mono 眉标语言，覆盖 inline 旧靛蓝） ================= */
#page-chart .page-h1 {
  margin: 0;
  font-family: var(--reflect-serif);
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -.02em;
  color: var(--reflect-ink);
  outline: none;
}
#page-chart .page-lead {
  margin: 6px 0 0;
  color: var(--reflect-ink-soft);
  font-size: 15px;
  line-height: 1.6;
}
#page-chart .section-h {
  margin: 0 0 8px;
  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;
}
#page-chart .body-p {
  margin: 0;
  color: var(--reflect-ink-soft);
  font-size: 16px;
  line-height: 1.7;
}
#page-chart .back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  color: var(--reflect-ink-soft);
  font-family: var(--reflect-mono);
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-decoration: none;
  transition: color .18s var(--reflect-ease);
}
#page-chart .back-link:hover { color: var(--reflect-ink); }

/* 二级 seg 导航：纸面下划线 tab（去白药丸浮起；当前态 rust 底线） */
#page-chart .seg {
  display: flex;
  gap: 4px;
  padding: 0;
  background: transparent;
  border-bottom: 1px solid var(--reflect-line);
  border-radius: 0;
}
#page-chart .seg a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 14px;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
  color: var(--reflect-ink-soft);
  font-family: var(--reflect-mono);
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-decoration: none;
  transition: color .18s var(--reflect-ease), background .18s var(--reflect-ease);
}
#page-chart .seg a:hover { color: var(--reflect-ink); background: var(--reflect-moss-wash); }
#page-chart .seg a[aria-current="page"] {
  color: var(--reflect-ink);
  font-weight: 600;
  background: transparent;
  box-shadow: none;
  border-bottom: 2px solid var(--reflect-rust);
}

/* 按钮换装（scoped：墨底纸字主钮 + 细线 ghost；rust 只给焦点/hover 记号） */
#page-chart .btn-primary {
  background: var(--reflect-ink);
  color: var(--reflect-paper-light);
  border-radius: var(--reflect-radius-pill);
}
#page-chart .btn-primary:hover { background: var(--reflect-moss); }
#page-chart .btn-primary[disabled] { opacity: .55; }
#page-chart .btn-primary[disabled]:hover { background: var(--reflect-ink); }
#page-chart .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-chart .btn-ghost:hover { background: var(--reflect-paper-light); border-color: var(--reflect-ink); }

/* ================= 无盘诚实空态（不渲染半截盘/sample，直接进 Start） ================= */
#page-chart .chart-empty { display: flex; flex-direction: column; gap: var(--reflect-space-12); }
#page-chart .chart-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--reflect-space-12); }

/* ================= Big Three 先懂（demo .big-three 视觉语言：rust glyph + 衬线值） ================= */
#page-chart .chart-big-three-row {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--reflect-space-8) var(--reflect-space-24);
}
#page-chart .chart-big-three-row li { display: flex; align-items: baseline; gap: var(--reflect-space-8); }
#page-chart .chart-big-glyph {
  color: var(--reflect-rust);
  font-family: var(--reflect-serif);
  font-size: 20px;
  line-height: 1;
}
#page-chart .chart-big-k {
  color: var(--reflect-ink-soft);
  font-family: var(--reflect-mono);
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
}
#page-chart .chart-big-three-row strong {
  color: var(--reflect-ink);
  font-family: var(--reflect-serif);
  font-size: 19px;
  font-weight: 400;
  line-height: 1.35;
}

/* ================= 唯一大图：真实 wheel（渲染器 SVG 容器；禁装饰素描同屏争中心） ================= */
#page-chart .chart-wheel { margin: 0; }
#page-chart .chart-wheel-host {
  width: min(100%, 560px);
  margin: 0 auto;
}
#page-chart .chart-wheel-host svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

/* --- 渲染器 SVG class（demo 金样移植，令牌换 v2；这些 class 仅在本 host 内出现） --- */
#chart-wheel-host .zodiac-label,
#chart-wheel-host .house-label,
#chart-wheel-host .planet-glyph,
#chart-wheel-host .planet-degree,
#chart-wheel-host .aspect-orb,
#chart-wheel-host .transit-aspect-label {
  text-anchor: middle;
  dominant-baseline: central;
}
/* 星座/行星 glyph 是天文符号：字体栈照 demo 金样逐字（Times New Roman → Apple Symbols），
   防 macOS 把 ♈–♓ 走 emoji 表现（紫底彩块）；serif 栈兜底排版。 */
#chart-wheel-host .zodiac-label,
#chart-wheel-host .planet-glyph {
  font-family: "Times New Roman", "Apple Symbols", var(--reflect-serif);
}
#chart-wheel-host .zodiac-label {
  fill: var(--reflect-paper-light);
  font-size: 14px;
}
#chart-wheel-host .house-label {
  fill: rgba(24, 32, 27, .85); /* 2026-10-11 对比度合规批：.72 实测 3.4:1 不达 AA 4.5，.85→4.9:1 */
  font-family: var(--reflect-mono);
  font-size: 9.5px;
}
#chart-wheel-host .planet-glyph {
  fill: var(--reflect-ink);
  font-size: 18px;
}
/* 日/月主星强调（2026-10-12 审查#333 收口批）：占星阅读里日/月权重最高，
   glyph 大一号让盘面「先看见最重要的」；渲染器 inline font-size="21" 为无 CSS
   场景（onboarding/社媒出图）兜底，本规则在 host 内接管同值。 */
#chart-wheel-host .planet-major .planet-glyph {
  font-size: 21px;
}
/* 盘面度数标注（2026-10-11 可读性批）：mono 小号压节点下方，halo 描纸色防压线 */
#chart-wheel-host .planet-degree {
  fill: rgba(24, 32, 27, .85); /* 2026-10-11 对比度合规批：.78 实测 3.6:1 不达 AA 4.5，.85→4.7:1 */
  font-family: var(--reflect-mono);
  font-size: 8px;
  letter-spacing: .4px;
  stroke: var(--reflect-paper);
  stroke-width: 2.5px;
  paint-order: stroke;
  stroke-linejoin: round;
}
#chart-wheel-host .aspect-orb {
  fill: rgba(24, 32, 27, .85); /* 2026-10-11 对比度合规批：.55 实测 2.0:1 严重不达 AA，.85→4.7:1 */
  font-family: var(--reflect-mono);
  font-size: 7px;
  letter-spacing: .5px;
}
/* 行星节点：键盘可达（渲染器 tabindex=0）+ 命中扩面（SVG2 bounding-box）+ rust 聚焦记号 */
#chart-wheel-host .planet-node {
  cursor: pointer;
  pointer-events: bounding-box;
  outline: none;
}
#chart-wheel-host .planet-node circle {
  transition: fill .22s var(--reflect-ease), stroke .22s var(--reflect-ease);
}
#chart-wheel-host .planet-node:hover circle { fill: var(--reflect-rust); }
#chart-wheel-host .planet-node:focus circle { stroke: var(--reflect-rust); stroke-width: 2.5; }
#chart-wheel-host .planet-node:focus-visible circle { stroke: var(--reflect-rust); stroke-width: 2.5; }

/* 相位/连线入场：一次性 draw（forwards 单次；禁 demo .pulse-ring 无限动画，渲染器也不输出该类） */
#chart-wheel-host .draw-path {
  stroke-dasharray: 1200;
  stroke-dashoffset: 1200;
  animation: chart-draw 1.6s .2s var(--reflect-ease) forwards;
}
@keyframes chart-draw {
  to { stroke-dashoffset: 0; }
}
/* 2026-09-18 拍板：全站永不执行 prefers-reduced-motion（AGENTS.md 红线），原降级块已删 */

/* ================= 旁注区（demo .chart-note 的 data-chart-note 模式；aria-live polite） ================= */
#page-chart .chart-note {
  margin: var(--reflect-space-12) auto 0;
  max-width: 560px;
  min-height: 58px;
  padding: var(--reflect-space-12) var(--reflect-space-16);
  border: 1px solid var(--reflect-line);
  background: var(--reflect-paper-wash);
}
#page-chart .chart-note-kind {
  display: block;
  margin: 0 0 4px;
  color: var(--reflect-rust);
  font-family: var(--reflect-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
}
#page-chart .chart-note-kind:empty { display: none; }
#page-chart .chart-note-text {
  color: var(--reflect-ink-soft);
  font-size: 13px;
  line-height: 1.55;
}

/* QA 构造盘面横幅样式已随 QA 驱动移出生产树（外审 212#P1-1：website/ai/reflect-qa/，
   横幅 DOM 与样式由 QA 脚本自建，生产 CSS 零 QA 面）。 */

/* ================= 诚实失败态（渲染器 throw / 服务端盘不可得；绝不兜底造盘） ================= */
#page-chart .chart-failed {
  display: flex;
  flex-direction: column;
  gap: var(--reflect-space-8);
  padding: var(--reflect-space-16);
  border: 1px solid rgba(163, 66, 45, .4);
  border-radius: var(--reflect-radius-md);
  background: var(--reflect-rust-wash);
}
#page-chart .chart-failed-title {
  margin: 0;
  color: var(--reflect-ink);
  font-family: var(--reflect-serif);
  font-size: 17px;
  line-height: 1.4;
}

/* ================= 三列事实表（demo .placement-grid 视觉语言：细线壳 + rust mono 列头 + 发丝线行） ================= */
#page-chart .chart-facts {
  border: 1px solid var(--reflect-line);
  border-radius: var(--reflect-radius-md);
  background: var(--reflect-paper-wash);
}
#page-chart .chart-facts-title { margin: var(--reflect-space-16) var(--reflect-space-16) 0; }
#page-chart .chart-facts-grid {
  display: grid;
  grid-template-columns: .9fr 1.2fr .7fr;
  margin-top: var(--reflect-space-8);
}
#page-chart .chart-facts-col { min-width: 0; border-top: 1px solid var(--reflect-line); }
#page-chart .chart-facts-col + .chart-facts-col { border-left: 1px solid var(--reflect-line); }
#page-chart .chart-facts-col h3 {
  margin: 0;
  padding: var(--reflect-space-12) var(--reflect-space-16);
  border-bottom: 1px solid var(--reflect-line);
  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;
}
#page-chart .chart-facts-col ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
/* 行原语：星座/宫位为静态行；行星行为 <button>（44px 触控/键盘等价手段，点击落旁注区） */
#page-chart .chart-fact-row {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  min-height: 44px;
  padding: var(--reflect-space-8) var(--reflect-space-16);
  border-bottom: 1px solid var(--reflect-hairline);
}
#page-chart .chart-fact-row:last-child { border-bottom: 0; }
/* 行星行：padding 归按钮（li 只留 44px 命中容器 + 发丝线），防双重内边距 */
#page-chart .chart-fact-row.chart-fact-row-btn { padding: 0; }
#page-chart .chart-fact-btn {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  width: 100%;
  min-height: 44px;
  margin: 0;
  padding: var(--reflect-space-8) var(--reflect-space-16);
  border: 0;
  background: transparent;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  transition: background .16s var(--reflect-ease);
}
#page-chart .chart-fact-btn:hover { background: var(--reflect-moss-wash); }
#page-chart .chart-fact-btn:focus-visible {
  outline: 2px solid var(--reflect-rust);
  outline-offset: -2px;
}
#page-chart .chart-fact-k {
  color: var(--reflect-ink);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
}
#page-chart .chart-fact-row strong,
#page-chart .chart-fact-btn strong {
  color: var(--reflect-ink);
  font-family: var(--reflect-serif);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.35;
}

/* 相位摘要（DTO 给多少列多少；零相位整块隐藏） */
#page-chart .chart-aspects { border-top: 1px solid var(--reflect-line); }
#page-chart .chart-aspects > h3 {
  margin: 0;
  padding: var(--reflect-space-12) var(--reflect-space-16);
  border-bottom: 1px solid var(--reflect-hairline);
  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;
}
#page-chart .chart-aspects ul {
  margin: 0;
  padding: var(--reflect-space-4) var(--reflect-space-16) var(--reflect-space-8);
  list-style: none;
}
#page-chart .chart-aspects li {
  padding: var(--reflect-space-8) 0;
  border-bottom: 1px solid var(--reflect-hairline);
  color: var(--reflect-ink);
  font-family: var(--reflect-serif);
  font-size: 14px;
  line-height: 1.5;
}
#page-chart .chart-aspects li:last-child { border-bottom: 0; }
#page-chart .chart-aspects li small {
  color: var(--reflect-ink-soft);
  font-family: var(--reflect-mono);
  font-size: 11px;
  letter-spacing: .04em;
}

/* ================= 出生数据摘要 + Natal/Learn 入口（保留接线，只样式化） ================= */
#page-chart .birth-hint { color: var(--reflect-ink-soft); }
#page-chart .birth-row .k {
  color: var(--reflect-ink-soft);
  font-family: var(--reflect-mono);
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
}
#page-chart .birth-row strong {
  color: var(--reflect-ink);
  font-family: var(--reflect-serif);
  font-size: 15px;
  font-weight: 400;
}
#page-chart .natal-preview-title {
  margin: 0 0 6px;
  color: var(--reflect-ink);
  font-family: var(--reflect-serif);
  font-size: 17px;
  font-weight: 400;
}
#page-chart .natal-preview-body { color: var(--reflect-ink-soft); }
#page-chart .natal-fade {
  background: linear-gradient(180deg, rgba(238, 233, 221, 0), var(--reflect-paper) 92%);
}
#page-chart .natal-outline li { color: var(--reflect-ink-soft); }
#page-chart .chart-learn a {
  color: var(--reflect-moss);
  font-family: var(--reflect-mono);
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: underline;
  text-underline-offset: 3px;
}
#page-chart .chart-learn a:hover { color: var(--reflect-rust); }

/* ================= 移动端：单列事实表（DOM 序已保证 Big Three → 图 → 表） ================= */
@media (max-width: 719px) {
  #page-chart .chart-facts-grid { grid-template-columns: 1fr; }
  #page-chart .chart-facts-col + .chart-facts-col {
    border-left: 0;
    border-top: 1px solid var(--reflect-line);
  }
}

/* ================= Task 9（R-chart-2/R-chart-3）：glossary 深链 term + 相位 chips =================
   事实表行星行 [glyph 词条链][行按钮] 水平排（两段各自 44px 命中；映射缺席回退整行按钮原样）；
   星座/宫位行名链接化；相位 chip =「☽ △ ♃ 120°」紧凑单行（白话在 title）；wheel 星座 glyph/
   宫位数字为词条点击层（行星节点保持旁注行为，不夺既有交互）。全部纯展示映射，零数值计算。 */
#page-chart .chart-fact-row.chart-fact-row-btn { display: flex; align-items: stretch; padding: 0; }
#page-chart .chart-fact-row.chart-fact-row-btn .chart-fact-btn { flex: 1; min-width: 0; }
#page-chart .chart-term-link { color: inherit; text-decoration: none; }
#page-chart .chart-term-glyph {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  min-width: 44px;
  min-height: 44px;
  border-right: 1px solid var(--reflect-hairline);
  color: var(--reflect-ink-soft);
  /* 与 wheel glyph 同字体栈：防 macOS 把天文符号走 emoji 表现 */
  font-family: "Times New Roman", "Apple Symbols", var(--reflect-serif);
  font-size: 15px;
  transition: background .16s var(--reflect-ease), color .16s var(--reflect-ease);
}
#page-chart .chart-term-glyph:hover { background: var(--reflect-moss-wash); color: var(--reflect-rust); }
#page-chart .chart-fact-k.chart-term-link:hover { color: var(--reflect-rust); text-decoration: underline; text-underline-offset: 3px; }
#page-chart .chart-term-link:focus-visible { outline: 2px solid var(--reflect-rust); outline-offset: -2px; }
#page-chart .chart-aspects li.chart-aspect-chip-item { padding: 0; }
#page-chart .chart-aspect-chip {
  display: flex;
  align-items: baseline;
  gap: var(--reflect-space-8);
  min-height: 44px;
  padding: var(--reflect-space-8) 0;
  color: var(--reflect-ink);
  text-decoration: none;
}
#page-chart a.chart-aspect-chip { transition: background .16s var(--reflect-ease); }
#page-chart a.chart-aspect-chip:hover { background: var(--reflect-moss-wash); }
#page-chart a.chart-aspect-chip:focus-visible { outline: 2px solid var(--reflect-rust); outline-offset: -2px; }
#page-chart .chart-aspect-chip-glyph { font-size: 15px; letter-spacing: .18em; }
#page-chart .chart-aspect-chip-angle {
  margin-left: auto;
  color: var(--reflect-ink-soft);
  font-family: var(--reflect-mono);
  font-size: 11px;
  letter-spacing: .04em;
}
#chart-wheel-host .chart-wheel-term { cursor: pointer; outline: none; }
#chart-wheel-host .chart-wheel-term:hover,
#chart-wheel-host .chart-wheel-term:focus-visible { fill: var(--reflect-rust); }
/* 星座 glyph 在 moss 环带上：hover 换 ochre 金（与 paper-light 的色相偏移做记号） */
#chart-wheel-host .zodiac-label.chart-wheel-term:hover,
#chart-wheel-host .zodiac-label.chart-wheel-term:focus-visible { fill: var(--reflect-ochre); }

/* v3.4（PR-E）：数据来源诚实注（reflectSourceNote，自 Reflect 空态下移）——页脚脚注级弱化 */
#page-chart .chart-source-note {
  margin: var(--reflect-space-16) 0 0;
  max-width: 42ch;
  font-size: 12px;
  line-height: 1.6;
  color: var(--reflect-ink-soft);
}