/*
---
generated_by: GLM-5.3-Flash (builtin:bigmodel-coding-plan)
date: 2026-09-14
core_logic: Reflect 体验 v2 Task 5——Transit Detail 二级页视觉层（全部规则 #page-transit 作用域，
   零壳/零他页泄漏）。§5.7 固定层级排版：事件标题（衬线大标）→日期窗口（mono 眉标，DTO 原值）→
   真实盘面主信息图（渲染器 SVG class 样式与 chart.css 金样同源移植：#chart-wheel-host 同值，
   换 #transit-wheel-host 作用域；行运高亮 .transit-node/.transit-line/.transit-ring rust 记号）
   →五通道段落（rust mono 通道眉标 + sans 正文；experiments 独立小卡网格，demo .list-panel
   视觉语言）→来源说明+免责（发丝线上界收尾）。安全页 = chart-failed 同族（rust 洗容器）。
   动效一次性（.draw-path forwards 单次）；禁 demo .pulse-ring
   无限动画；触控 ≥44px（back/按钮/盘面节点 bounding-box 扩命中）。本文件零数值计算。
test_record: 2026-09-14 Task 5 验证协议 A–E 见 transit-view.js test_record 与
   docs/reflect/ui-shots/v2-transit/（en/zh-CN × 390×844/1280×900 × 安全页 + QA 全层级 +
   #/ #/chart #/you 回归；scrollWidth≤clientWidth 全绿；禁串零命中；交互 ≥44px）。
recent_changes:
   - 2026-09-14: 初版（Transit Detail 二级页 Task 5）。
   - 2026-10-11: 盘面可读性环带批同步 chart.css——zodiac-label 改 paper-light（moss 星座环带上
     5.4:1 可读，环带填色由渲染器负责）；house-label 8px→9.5px；新增 .planet-degree 规则
     （行星度数标注 mono 8px）；降噪 text-anchor 列表纳入 .planet-degree。当日对比度合规批
     再提亮：house-label/planet-degree/aspect-orb 统一 .85（正文 AA 4.5:1 达标）。
---
*/

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

/* ================= 页头排版（与 chart.css 同族：衬线大标 + mono 眉标，覆盖 inline 旧靛蓝） ================= */
#page-transit .page-pad { display: block; }
#page-transit .page-h1 {
  margin: 0;
  font-family: var(--reflect-serif);
  font-size: clamp(26px, 4vw, 38px);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -.02em;
  color: var(--reflect-ink);
  outline: none;
}
#page-transit .back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  margin-bottom: var(--reflect-space-8);
  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-transit .back-link:hover { color: var(--reflect-ink); }

/* 日期窗口（层级 2：标题之下、盘面之上；DTO 原值直显，mono 只承载日期元数据） */
#page-transit .transit-window {
  margin: var(--reflect-space-12) 0 0;
  color: var(--reflect-rust);
  font-family: var(--reflect-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
}

/* 按钮换装（与 chart.css 同族） */
#page-transit .btn-primary {
  min-height: 44px;
  background: var(--reflect-ink);
  color: var(--reflect-paper-light);
  border-radius: var(--reflect-radius-pill);
}
#page-transit .btn-primary:hover { background: var(--reflect-moss); }

/* ================= 安全页（404/无权/未购/网络失败统一态；chart-failed 同族视觉） ================= */
#page-transit .transit-safe {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--reflect-space-12);
  margin-top: var(--reflect-space-24);
  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-transit .transit-safe .body-p { color: var(--reflect-ink); }
#page-transit .transit-actions-row { display: flex; flex-wrap: wrap; gap: var(--reflect-space-12); }

/* loading（短暂在途态；body-p 同族弱化） */
#page-transit .transit-loading { margin-top: var(--reflect-space-16); color: var(--reflect-ink-soft); }

/* QA 构造横幅样式已随 QA 驱动移出生产树（外审 212#P1-1：website/ai/reflect-qa/） */

/* ================= 主信息图：真实盘面（§5.7；唯一大图，禁素描争中心） ================= */
#page-transit .transit-wheel { margin: var(--reflect-space-24) 0 0; position: relative; }
/* 外审 212#P1-2：结构性徽标——此图恒为「本命底图」（契约 DTO 不携带行运坐标，绝不推算；
   行运叠加 geometry 待服务端 API 就绪后再渲染）。纸感 mono 小签，不与盘面争视觉。 */
#page-transit .transit-wheel-badge {
  display: inline-block;
  margin: 0 auto var(--reflect-space-8);
  padding: 3px 10px;
  border: 1px solid rgba(24, 32, 27, .22);
  border-radius: 999px;
  background: var(--reflect-paper, #f7f3ea);
  color: var(--reflect-ink-soft, #4b5563);
  font-family: var(--reflect-mono, ui-monospace, monospace);
  font-size: 11px;
  letter-spacing: .07em;
  text-transform: uppercase;
}
#page-transit .transit-wheel-host {
  width: min(100%, 560px);
  margin: 0 auto;
}
#page-transit .transit-wheel-host svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

/* --- 渲染器 SVG class（chart.css 金样同源移植：同值换 #transit-wheel-host 作用域） --- */
#transit-wheel-host .zodiac-label,
#transit-wheel-host .house-label,
#transit-wheel-host .planet-glyph,
#transit-wheel-host .planet-degree,
#transit-wheel-host .aspect-orb,
#transit-wheel-host .transit-aspect-label {
  text-anchor: middle;
  dominant-baseline: central;
}
/* 星座/行星 glyph 天文符号字体栈照 chart.css 金样逐字（防 emoji 表现） */
#transit-wheel-host .zodiac-label,
#transit-wheel-host .planet-glyph {
  font-family: "Times New Roman", "Apple Symbols", var(--reflect-serif);
}
#transit-wheel-host .zodiac-label {
  fill: var(--reflect-paper-light);
  font-size: 14px;
}
#transit-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;
}
#transit-wheel-host .planet-glyph {
  fill: var(--reflect-ink);
  font-size: 18px;
}
/* 盘面度数标注（chart.css 同律，2026-10-11） */
#transit-wheel-host .planet-degree {
  fill: rgba(24, 32, 27, .85); /* 2026-10-11 对比度合规批：同 chart.css，.78→.85（4.7:1） */
  font-family: var(--reflect-mono);
  font-size: 8px;
  letter-spacing: .4px;
}
#transit-wheel-host .aspect-orb {
  fill: rgba(24, 32, 27, .85); /* 2026-10-11 对比度合规批：同 chart.css，.55→.85（4.7:1） */
  font-family: var(--reflect-mono);
  font-size: 7px;
  letter-spacing: .5px;
}
/* 行星节点：键盘可达 + SVG2 bounding-box 扩命中 + rust 聚焦记号（chart.css 同律） */
#transit-wheel-host .planet-node {
  cursor: pointer;
  pointer-events: bounding-box;
  outline: none;
}
#transit-wheel-host .planet-node circle {
  transition: fill .22s var(--reflect-ease), stroke .22s var(--reflect-ease);
}
#transit-wheel-host .planet-node:hover circle { fill: var(--reflect-rust); }
#transit-wheel-host .planet-node:focus circle { stroke: var(--reflect-rust); stroke-width: 2.5; }
#transit-wheel-host .planet-node:focus-visible circle { stroke: var(--reflect-rust); stroke-width: 2.5; }

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

/* 行运高亮记号（QA fixture 演示态；rust=当前行运，实心节点本就 rust，hover 提亮描边即可） */
#transit-wheel-host .transit-node circle { fill: var(--reflect-rust); }
#transit-wheel-host .transit-node:hover circle { fill: var(--reflect-ochre); }
#transit-wheel-host .transit-node .planet-glyph { fill: var(--reflect-paper-light); font-size: 15px; }
#transit-wheel-host .transit-aspect-label {
  fill: var(--reflect-rust);
  font-family: var(--reflect-mono);
  font-size: 8px;
  letter-spacing: .8px;
}

/* 盘面旁注（chart-note 同族：细线纸卡 + rust mono kind + 说明行） */
#page-transit .transit-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-transit .transit-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-transit .transit-note-kind:empty { display: none; }
#page-transit .transit-note-text {
  color: var(--reflect-ink-soft);
  font-size: 13px;
  line-height: 1.55;
}

/* 盘面诚实缺席注记（正文不受影响） */
#page-transit .transit-chart-unavailable {
  margin: var(--reflect-space-24) 0 0;
  color: var(--reflect-ink-soft);
}

/* ================= 五通道正文（rust mono 通道眉标 + sans 正文；固定 §5.7 顺序由视图保证） ================= */
#page-transit .transit-section { margin: var(--reflect-space-32) 0 0; }
#page-transit .transit-section-title {
  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;
}
#page-transit .transit-p {
  margin: 0 0 var(--reflect-space-12);
  color: var(--reflect-ink-soft);
  font-size: 16px;
  line-height: 1.7;
}
#page-transit .transit-p:last-child { margin-bottom: 0; }

/* 非宿命实验：独立小卡网格（demo .transit-actions/.list-panel 视觉语言；2–3 张） */
#page-transit .transit-section-exp {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--reflect-space-16);
}
#page-transit .transit-section-exp .transit-section-title { grid-column: 1 / -1; margin: 0; }
#page-transit .transit-experiment {
  display: flex;
  align-items: baseline;
  gap: var(--reflect-space-12);
  padding: var(--reflect-space-16);
  border-top: 1px solid var(--reflect-line);
  background: var(--reflect-paper-wash);
}
#page-transit .transit-experiment-n {
  flex: none;
  color: var(--reflect-rust);
  font-family: var(--reflect-mono);
  font-size: 12px;
  letter-spacing: .08em;
}
#page-transit .transit-section-exp .transit-p {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
}

/* ================= 来源说明 + 免责（层级收尾；发丝线上界） ================= */
#page-transit .transit-source {
  margin-top: var(--reflect-space-32);
  padding-top: var(--reflect-space-16);
  border-top: 1px solid var(--reflect-hairline);
}
#page-transit .transit-disclaimer {
  margin: var(--reflect-space-12) 0 0;
  color: var(--reflect-ink-soft);
  font-family: var(--reflect-mono);
  font-size: 12px;
  line-height: 1.6;
}

/* ================= 移动端：单列优先（auto-fit 已单列化；此处只收紧行距） ================= */
@media (max-width: 719px) {
  #page-transit .transit-section { margin-top: var(--reflect-space-24); }
  #page-transit .transit-section-exp { gap: var(--reflect-space-12); }
}