/*
---
generated_by: GLM-5.3 (ZCode agent, Reflect experience v2 Task 2)
date: 2026-09-14
core_logic: Reflect 体验 v2 跨页排版/组件原语——.eyebrow（rust mono 眉标）、.section-title（衬线大标）、.body-copy、.list-panel（Do/Don't 型列表）、.cta-line、.paper-card（细线纸卡）、.sketch 博物馆印刷图像处理（灰阶/轻 sepia/multiply/苔绿陶锈洗/内衬线框）及六个 object-position 变体。供后续页 Task 消费；本 Task 页面 DOM 尚未引用。
test_record: 本 Task 未进页面 DOM（预置原语）；.sketch 规则逐字沿用 demo 金样（demos/reflect-art-direction/styles.css 191-227 行），视觉一致性由金样背书。加载链无 404、无 CSS 解析错误经 Playwright 全路由验证（2026-09-14）。
recent_changes:
  - 2026-09-14: 初版——eyebrow/section-title/body-copy/list-panel/cta-line/paper-card/sketch 及变体。
  - 2026-09-24: 配图扩量批 B1——sketch 三变体 moon/water/birds（同构追加，既有类零覆写）+ learn 骑缝版式 .learn-seam 与页脚素材 credit 行 .learn-credit（#page-learn 作用域）。
  - 2026-10-11: 星盘缩略图降噪列表纳入 .planet-degree/.degree-tick（渲染器环带批新增元素，缩略尺寸同样不可读）。
---
*/

/* === 眉标：陶锈 mono 小标签（GC#6：辅助文字 ≥12px AA；rust 为关键标记用途） === */
.eyebrow {
  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;
}

/* === 区块大标：衬线（标题衬线/正文无衬线，GC#6） === */
.section-title {
  margin: 0;
  font-family: var(--reflect-serif);
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -.02em;
  color: var(--reflect-ink);
}

/* === 正文：无衬线 16px/1.7（手机 ≥16px） === */
.body-copy {
  margin: 0;
  color: var(--reflect-ink-soft);
  font-family: var(--reflect-sans);
  font-size: 16px;
  line-height: 1.7;
}
@media (min-width: 768px) {
  .body-copy { font-size: 17px; }
}

/* === Do/Don't 型列表面板：墨色顶线 + mono 小节标 + 发丝线行分隔 === */
.list-panel {
  padding-top: var(--reflect-space-12);
  border-top: 1px solid var(--reflect-ink);
}
.list-panel h3 {
  margin: 0 0 var(--reflect-space-12);
  color: var(--reflect-rust);
  font-family: var(--reflect-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.list-panel ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.list-panel li {
  padding: 10px 0;
  border-bottom: 1px solid var(--reflect-hairline);
  font-family: var(--reflect-sans);
  font-size: 16px;
  line-height: 1.5;
  color: var(--reflect-ink);
}

/* === CTA 引导行：mono 小字距标签 + ↗（rust 留给少量关键 CTA 的 hover） === */
.cta-line {
  display: inline-flex;
  align-items: center;
  gap: var(--reflect-space-8);
  margin-top: var(--reflect-space-12);
  color: var(--reflect-ink);
  font-family: var(--reflect-mono);
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-decoration: none;
}
.cta-line::after { content: "↗"; font-size: 14px; }
a.cta-line:hover, button.cta-line:hover { color: var(--reflect-rust); }

/* === 纸卡：1px 细线边 + 纸色浅底 + 平阴影（禁白 SaaS 卡片海：靠留白/细线/纸色分层） === */
.paper-card {
  border: 1px solid var(--reflect-line);
  border-radius: var(--reflect-radius-md);
  background: var(--reflect-paper-wash);
  box-shadow: var(--reflect-shadow-flat);
}

/* === 博物馆印刷图像处理（逐字沿用 demo 金样；装饰图 alt=""，禁展签 DOM） ===
   灰阶/轻 sepia/multiply + 苔绿→陶锈洗 + 内衬纸线框；源文件像素不改。 */
.sketch {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: #d8d2c5;
}
.sketch img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) sepia(.17) saturate(.72) contrast(1.17) brightness(1.01);
  mix-blend-mode: multiply;
}
.sketch::before {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 0;
  pointer-events: none;
  opacity: .45;
  background: radial-gradient(circle at 75% 20%, rgba(255, 255, 255, .55), transparent 35%), linear-gradient(128deg, rgba(82, 107, 86, .18), transparent 53%, rgba(163, 66, 45, .11));
  mix-blend-mode: color;
}
.sketch::after {
  content: "";
  position: absolute;
  z-index: 3;
  inset: 11px;
  pointer-events: none;
  border: 1px solid rgba(248, 245, 237, .46);
}
/* object-position 变体（逐版位登记，不裁改主体含义） */
.sketch--pond img { object-position: center 56%; }
.sketch--plow img { object-position: center; }
.sketch--tree img { object-position: center 48%; filter: grayscale(1) sepia(.2) saturate(.66) contrast(1.25) brightness(.94); }
.sketch--dock img { object-position: center 60%; }
.sketch--oak img { object-position: center; filter: grayscale(1) sepia(.15) contrast(1.05) brightness(1.17); }
.sketch--juniper img { object-position: center 43%; }
/* 2026-09-24 星空换装批（用户：中心主体构图被横条切坏 → 换弥散纹理星空/云）：
   learn 三缝改 stars-lyre/comet/clouds；旧 moon/water/birds 变体删除（资产留 manifest 备后续页面复用）。 */
.sketch--stars-lyre img { object-position: center 12%; filter: grayscale(1) invert(1) contrast(.95) brightness(1.06); }
.sketch--comet img { object-position: center 25%; filter: grayscale(1) sepia(.12) contrast(1.06) brightness(1.12); }
.sketch--clouds img { object-position: center 42%; filter: grayscale(1) sepia(.15) saturate(.7) contrast(1.02) brightness(1.1); }

/* 2026-10-07 PR-B 商店 v3.2 版位变体（图纸 notes.md §v3.2 + _src/shop.html；逐版位登记同上）：
   stars-night = 商店免费钩子带（夜底星云照片）：沿用管线去色偏棕滤镜族（图纸值），但底为
   夜色 #111814——multiply 会把亮星云压没，故此版位 mix-blend-mode 改 normal、不画纸线框
   与色洗（图纸 .fhook 即此做法）；scale(1.1) 裁掉照片白衬边（施工单 §6）。
   instruments = 商店本命报告 hero（天球仪与仪器，object-position 抬中防裁顶部）。
   crystals-plus / crystals-pro = 订阅两档卡头图（图纸 .plan .art：position 60% + 1.32 放大裁纸边）。 */
.sketch--stars-night img { object-position: center 60%; transform: scale(1.1); filter: grayscale(1) sepia(.22) saturate(.8) contrast(1.12) brightness(1.02); mix-blend-mode: normal; }
.sketch--stars-night::before,
.sketch--stars-night::after { content: none; }
.sketch--instruments img { object-position: center 45%; }
.sketch--instruments::after { content: none; } /* 图纸 hero 无纸线框（mock .sk 无 ::after），色洗保留 */
.sketch--crystals-plus img,
.sketch--crystals-pro img { object-position: center 60%; transform: scale(1.32); transform-origin: 50% 58%; }

/* === Learn 页骑缝图 + 素材 credit 行（2026-09-24 配图扩量批 B1；#page-learn 作用域） ===
   版式：蚀刻横条骑在两段发丝线上——figure 置段首、负 margin 跨过上一段 border-top，
   发丝线从图后穿过=「骑缝」；移动端退化全宽横条。处理链零新增：沿用上方 .sketch
   博物馆印刷 + object-position 变体法；装饰 alt=""；禁展签 DOM，署名归页脚 credit 行。
   版式归 components.css（styles/views/learn.css 本批不碰，旧 .learn-sketch 规则留存不用）。 */
#page-learn .learn-seam {
  position: relative;
  width: 100%;
  height: 120px;
  margin: -40px auto var(--reflect-space-16);
}
@media (min-width: 768px) {
  #page-learn .learn-seam { height: 150px; max-width: 560px; margin-top: -44px; }
}
#page-learn .learn-credit {
  margin: var(--reflect-space-24) 0 0;
  padding-top: var(--reflect-space-12);
  border-top: 1px solid var(--reflect-hairline);
  color: var(--reflect-ink-soft);
  font-family: var(--reflect-mono);
  font-size: 12px;
  line-height: 1.6;
  letter-spacing: .05em;
}

/* ###################################################################
   ### B3 批（2026-09-24）追加段：报告头「你的真盘」SVG 静态缩略      ###
   ### 只增不改：上方既有规则（含 B1 learn 段）零改动                  ###
   ################################################################### */

/* === 头部布局：标题左、真盘缩略右（本文件加载序在 views/report.css 之前，
       故用双 id 特异度覆盖 #page-chart .report-head 的单列排；仅作用此一处头部） === */
#page-chart #natal-cover {
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--reflect-space-16);
}

/* === 真盘缩略纸卡（D26）：paper-light 底 + hairline 边 + 平阴影；
       内容 = chart-renderer 输出的 600×600 SVG（CSS 缩尺寸，几何零改） === */
.chart-head-thumb {
  flex: 0 0 auto;
  box-sizing: border-box;
  width: 112px;
  height: 112px;
  padding: 6px;
  border: 1px solid var(--reflect-hairline);
  border-radius: var(--reflect-radius-md);
  background: var(--reflect-paper-light);
  box-shadow: var(--reflect-shadow-flat);
}
.chart-head-thumb svg {
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none; /* 静态装饰小图：零 hover/选中态（交互留给大图 wheel） */
}
/* 迷你盘降噪：星座/宫位/度数/相位 orb 标注在缩略尺寸不可读，纯展示层隐藏（SVG 几何不动） */
.chart-head-thumb .zodiac-label,
.chart-head-thumb .house-label,
.chart-head-thumb .planet-degree,
.chart-head-thumb .degree-tick,
.chart-head-thumb .aspect-orb { display: none; }
.chart-head-thumb .house-line { opacity: .34; }
.chart-head-thumb .zodiac-spoke { opacity: .1; }
/* 行星 glyph 放大保可辨（缩略 ×0.18 缩放下 18px 会糊成点；serif 栈防 emoji 表现，同大图） */
.chart-head-thumb .planet-glyph {
  fill: var(--reflect-ink);
  font-family: "Times New Roman", "Apple Symbols", var(--reflect-serif);
  font-size: 34px;
  font-weight: 700;
  text-anchor: middle;
  dominant-baseline: central;
}
@media (min-width: 768px) {
  .chart-head-thumb { width: 128px; height: 128px; }
}

/* ### B3 追加段结束 ### */

/* ### PR-G 追加段（G2 按下回弹；2026-10-07 motion_spec §2 G2） ###
   纯 CSS :active（规格 §5：不必用 JS）——按下 120ms 变形、松开 220ms snap 回弹；
   行级块（.entry）用更小幅度 .985 防大块晃动。零 JS、零 reduce 分支。 */
.btn-primary,
.reflect-chip,
.rc-btn,
.entry,
.home-deep-row, /* R21 修：H18 只并入 :active 漏了基础块——松手 220ms snap 回弹不播放（duration 0s 瞬弹） */
.sy-custom-row,
#bottom-nav a {
  transition: transform var(--m-release-dur) var(--m-ease-snap);
  -webkit-tap-highlight-color: transparent;
}
.btn-primary:active,
.reflect-chip:active,
.rc-btn:active,
#bottom-nav a:active {
  transform: scale(.965);
  transition-duration: var(--m-press-dur);
  transition-timing-function: var(--m-ease-out);
}
/* R20 修：G2「行」全覆盖——首页往深三行/商店手动行同为可交互行级 <a>，并入行级回弹 */
.entry:active,
.home-deep-row:active,
.sy-custom-row:active {
  transform: scale(.985);
  transition-duration: var(--m-press-dur);
  transition-timing-function: var(--m-ease-out);
}

/* ================= LINKER（2026-10-08）：正文术语链接（速览/卡牌解读共用） =================
   手册 §3：继承正文色 + 点状下划线，不新增颜色 token；hover 才实线（克制不抢正文）。
   页面无关全局类（glossary-link 由 glossary-linker 消费方统一挂）。 */
.glossary-link {
  color: inherit;
  text-decoration: underline dotted;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.glossary-link:hover {
  text-decoration-style: solid;
}
.glossary-link:focus-visible {
  outline: 2px solid var(--reflect-rust);
  outline-offset: 1px;
}