/* ============================================================
   css/typography.css — 字号阶梯统一层

   为什么需要这个文件：
   内页各有 11–15 种 font-size（27.2 / 19.2 / 17 / 14.5 / 13.5 / 12.5 / 11…），
   而首页只有 6 种。同类元素在不同页大小不一，视觉不统一。

   本文件把正文字号收敛到 7 级标准阶梯，组件内尺寸（牌面字/图标/大数字）不动。

   加载顺序：css/style.css → css/typography.css → css/beautify.css
   必须在 style.css 之后（否则压不住 style.css 里的字号），
   且在 beautify.css 之前（beautify.css 负责主题与对比度修复，留它在最后一层）。
   ⚠ 所有页面都必须按此顺序引入本文件 —— 漏引的页面会退回 style.css 的旧字号。
   ============================================================ */

/* ---------- 7 级字号阶梯 ----------
   42  页面主标题 h1
   26  章节标题 h2
   20  小节标题 h3 / 卡片标题
   16  正文（基准）
   14  次要正文、表格
   13  说明文字、辅助信息
   11.5 极次要、脚注、徽标
   （12 与 10 保留给需要更小/更大的极端场景）
   ------------------------------------------- */

/* --- 标题层 --- */
.chapter h1,
.hero-box h1 { font-size: 42px; }

.chapter h2,
.section-title { font-size: 26px; }

.chapter h3,
.module h3,
.chapter .chapter-head h1 { font-size: 20px; }

/* --- 正文层 --- */
.chapter p,
.chapter li,
.chapter td,
.chapter dd,
.chapter dt { font-size: 16px; }

/* --- 次要层：原 15 / 14.5 / 14 归到 14 --- */
.chapter h4,
.chapter .sub,
.chapter .section-sub,
.chapter td,
.chapter th,
.chapter .ans,
.chapter .faq-item .a,
.chapter blockquote,
.chapter .ac-check-how,
.chapter .ac-check-see,
.chapter .ac-check-cost,
.chapter .ac-hub-desc,
.chapter .ac-hub p,
.chapter .ac-inspect-note,
.chapter .video-use,
.chapter .video-title,
.hq-fb-line,
.hq-fb-tip,
.hq-fb-uke,
.dr-fb-line,
.dr-fb-tip,
.dr-uke,
.dr-cand,
.dr-uke-list { font-size: 14px; }

/* --- 说明层：原 13.5 / 13 / 12.5 归到 13 --- */
.chapter .hint,
.chapter .tip,
.chapter .warn,
.chapter .warn *,
.chapter .tip *,
.chapter .declaration,
.chapter .declaration *,
.chapter .lead-box,
.chapter .video-copy,
.chapter .video-meta,
.hq-stat-l,
.hq-badge,
.dr-badge,
.dr-stat,
.dr-opt,
.ac-check-cost,
.ac-check-h,
.ac-hub-name { font-size: 13px; }

/* --- 极次要层：原 12 / 11.5 / 10.5 / 11 归到 11.5 --- */
.chapter .footer p,
.footer p,
.footer a,
.chapter small,
.hq-stat-l,
.dr-tab-rate,
.ac-check-no,
.ac-hub-ico,
.chapter .module-num,
.module-num { font-size: 11.5px; }

/* --- 归一化零散值 --- */
.chapter .tiles { font-size: 26px; }          /* 原 1.7rem=27.2px */
.chapter p code,
.chapter li code,
.chapter td code { font-size: 14px; }

/* ============================================================
   兜底：收敛仍存在的零散字号
   页面内联 <style> 与组件样式里的 12.5 / 13.5 / 19.2 等
   ============================================================ */

/* 组件类：牌面字(21) / 大数字(40) / 图标(19) 保持不动 —— 它们是有意的尺寸强调 */

/* 说明类 12.5 → 13
   ⚠ 这里**不能**再列 .video-use：它已经由上面的「次要层」定为 14px，
     重复列在这里会因为「同特异性、后者胜」把它压回 13px ——
     这正是「同类元素大小不一」的典型来源。同理 .video-meta 只在这里出现一次。 */
.chapter .pu-verdict-note,
.chapter .pu-tip-inline,
.chapter .pu-warn-inline,
.chapter .video-meta,
.chapter .video-copy { font-size: 13px; }

/* .pu-chart-title（course-probability.html 的图表标题）原本是 11.5px ——
   那是阶梯里**最小**的一档（页脚/署名用），而它承担的是「阴影 = 与你的数据
   同样或更极端的概率」这种**解释图例**的活，实测是整页最小的字。
   同页其它 .pu-* 都由上面这条覆盖到 13px，只有它漏在外面 ⇒ 补上。
   注意：页面内联 <style> 里写的仍是 11.5px，靠特异性(0,2,0 > 0,1,0)压过。 */
.chapter .pu-chart-title { font-size: 13px; }

/* 按钮与小徽标 13.5 → 13 */
.chapter .hq-btn,
.chapter .dr-newbtn,
.chapter .hq-stat-n,
.chapter .hq-stat-l { font-size: 13px; }

/* 19.2 是 1.2rem 计算值，归到 20（与卡片标题同级） */
.chapter p[style*="1.2rem"],
.chapter strong[style*="1.2rem"] { font-size: 20px; }

/* 17px 的结论标题归到 20 */
.chapter .pu-verdict-text,
.chapter .ac-hub h3 { font-size: 20px; }

/* ============================================================
   圆角统一（3 档）
   卡片 16px / 内嵌块 12px / 控件 8px
   ============================================================ */
.chapter table,
.chapter .q,
.chapter .ac-check,
.chapter .ac-hub,
.chapter .tool,
.chapter .dr-wrap,
.chapter .hq-panel,
.chapter .guarantee { border-radius: 12px; }

.chapter .btn,
.chapter input,
.chapter select,
.chapter textarea { border-radius: 8px; }

/* ============================================================
   行高与字间距微调（提升长文可读性）
   ============================================================ */
.chapter p,
.chapter li {
  line-height: 1.78;
  letter-spacing: 0.01em;
}

.chapter h1,
.chapter h2,
.chapter h3 {
  line-height: 1.35;
  letter-spacing: 0;
}

/* 表格数字对齐（点数/符数表大量数字） */
.chapter td,
.chapter th { line-height: 1.6; }

/* ============================================================
   深浅主题下的边框与卡片对比度微调
   （实测两个主题已达标，这里只做极轻微的层次增强）
   ============================================================ */
:root {
  --radius-card: 12px;
  --radius-inner: 12px;
  --radius-control: 8px;
}

/* 移动端字号微调（保持阶梯、只降一档避免溢出） */
/* ============================================================
   移动端排版层（≤640px）
   ------------------------------------------------------------
   实测（宽度扫描，取 .chapter p 的计算值）：
     320 / 360 / 390 / 414 / 560 → 15px
     600 / 640 / 768 / 1024 / 1440 → 16px
   即「手机上的正文比桌面小一档」，与响应式排版惯例相反：
   屏幕更小、观看距离更近，字号不该反而缩水。

   列表项还更小（14px）：style.css 里 .chapter ul li 的优先级
   (0,1,2) 高于本文件的 .chapter li (0,1,1)，被它那条移动端
   降级压住 —— 于是列表比段落还小。

   本层把移动端正文拉回桌面基准 16px；标题降档保留（屏窄，
   42px 确实过大）。阶梯仍是 7 级，只修正「不该降」的那几档。
   ============================================================ */
@media (max-width: 640px) {
  .chapter h1 { font-size: 30px; }
  .chapter h2, .section-title { font-size: 22px; }
  .chapter h3, .module h3 { font-size: 18px; }

  /* 正文层：与桌面一致（原 15px，列表项 14px） */
  .chapter p,
  .chapter li,
  .chapter ul li,
  .chapter ol li,
  .chapter td,
  .chapter dd,
  .chapter dt { font-size: 16px; }

  /* 说明层：13px → 14px
     提示 / 警告 / 声明 / 速查块在手机上也该看得清 —— 它们承载的是
     关键提醒，不是边角料。必须用 * 覆盖子元素：原规则写成
     .chapter .declaration * 这种「命中子元素」的形式，只改父元素
     会被子元素上那条直接生效的规则压住。 */
  .chapter .tip, .chapter .tip *,
  .chapter .warn, .chapter .warn *,
  .chapter .declaration, .chapter .declaration *,
  .chapter .lead-box, .chapter .lead-box *,
  .chapter .hint,
  .chapter blockquote { font-size: 14px; }

  /* 上面的 * 会一并压到块内强调字号，单独提回 15px
     （优先级 .chapter .declaration b = 0,2,1 > .chapter .declaration * = 0,2,0） */
  .chapter .tip b, .chapter .warn b, .chapter .declaration b,
  .chapter .lead-box b { font-size: 15px; }

  /* 卡片描述（首页/板块页的模块卡，原 14px） */
  .module p { font-size: 15px; }

  /* ------------------------------------------------------------
     说明层地板：手机上「成句的说明文字」不得小于 14px
     ------------------------------------------------------------
     实测全站 41 页（390px）：仍有 573 个元素 < 14px。逐条看下来，
     大多数是**徽标 / 数字 / 单行标签**，小是有意的层级，不动：
       .module-num「STAGE 1」、.chapter-num「STAGE 5 · 高级教学」、
       .sub「8 课 · 零基础可学」、.before/.after 徽标、
       <small> 里的「400/700」、.tp-grade / .tr-tag / .win、
       .lq-tech-use「练何切·练听牌」、页脚 11.5px。

     但下面这些是**成句的说明文字**，12~13.5px 在手机上偏小，
     统一抬到 14px（阶梯第 5 级「次要正文」）：

       .why          course-script / scoring 卡片里「口诀怎么用」的解释句
       .scene        script-box 的卡片小标题 —— 原 12px，**比它自己的正文
                     （.why 13px）还小**，层级是倒的；这是本轮主要修的一处
       .faq-item .a  FAQ 答案（原 13px；与上面「.chapter .faq-item .a → 13px」
                     那条冲突，这里统一到 14px）
       .tr-fallback / .pf-note / .rd-mn / .lq-tech-note / .rk-tier-desc
       .bg-ex-h / .tr-note / .rd-cl-lb

     ⚠ .pf-why 的页面内联（course-endgame / course-pushfold）带 !important，
       这里必须同样带才盖得住：.chapter .pf-why(0,2,0) > .pf-why(0,1,0)。
     ------------------------------------------------------------ */
  .chapter .why,
  .chapter .scene,
  .chapter .faq-item .a,
  .chapter .tr-fallback,
  .chapter .pf-note,
  .chapter .rd-mn,
  .chapter .lq-tech-note,
  .chapter .rk-tier-desc,
  .chapter .bg-ex-h,
  .chapter .tr-note,
  .chapter .rd-cl-lb { font-size: 14px; }

  .chapter .pf-why { font-size: 14px !important; }
}

/* ============================================================================
   无障碍：标题层级修复的视觉补偿（2026-10-04）
   ----------------------------------------------------------------------------
   背景：全站 23 个页面有 65 处「标题跳级」（h2→h4 62 处、h1→h3 3 处），
   读屏 / 键盘用户的文档大纲是断的。修法是改标签：
     · 94 个 <h4> → <h3>：.key 要点框 / .pf-case 场景卡 / .rd-case 阅读案例 /
       .q 何切题 / .hq-how 步骤 / .mid-case 案例 / .sk-resid 残牌案例
       —— 这些容器都是 <article class="chapter"> 的直接子元素，与 <h3> 平级。
     · 5 个 <h3> → <h2>：.ac-hub 入口卡 ×2 / .price-card 版本卡 ×3，
       它们直接挂在 h1 下、中间没有 h2（checkout.html 缺了 index.html 里
       <h2>选择你的路径</h2> 那层分组）。外观由元素行内样式钉住，见各页 HTML。
     · anti-cheat.html 的 2.1 / 2.2 / 2.3 保持 <h4>（前面已有 h3，本就不跳级）。

   ★ 为什么需要这一块：标签一改，命中的规则就换了一条。实测改前快照
     （_shots/_head_before.json，全计算属性）与「若直接改标签」的差异清单，
     必须钉住的有五项 ——
     1. font-size / line-height：.chapter h3 是 20px/1.35（本文件 34 行 + 177 行），
        原 h4 是 14px/1.6。
     2. margin：.chapter h3 是 22px 0 10px，原 h4 是 0 0 8px。
     3. color：.chapter h3 是正文色，原 h4 是金色 var(--gold2)。
     4. text-wrap：beautify.css:118 给 h1,h2,h3 设了 text-wrap:balance，
        h4 不在其中 —— 不钉的话长标题在窄屏会换一种折行方式。
     5. ::before 的 content：style.css:670 的
        body:not(.is-vip) .chapter h3::before{content:"🔒 "} 会给**非 VIP**
        用户加锁图标 —— 不钉的话 94 个要点标题凭空多出 🔒。
        （那 5 个 h2 不钉：它们本来就是 h3、本来就带锁，保持原样。）

   验证方式：headings.js 导出改前/改后全属性快照，546 个标题 × 1180/390 两个宽度
   逐条比对，要求差异为 0。
   ============================================================================ */

.chapter .key > h3,
.chapter .pf-case > h3,
.chapter .rd-case > h3,
.chapter .q > h3,
.chapter .hq-how > h3,
.chapter .mid-case > h3,
.chapter .sk-resid > h3 {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: normal;
  color: var(--gold2);
  margin: 0 0 8px;
  text-wrap: wrap;
}

/* 各容器 margin-bottom 实测不同：key / hq-how = 8px（上面那条的默认），
   pf-case / q = 10px，rd-case / mid-case = 5px，sk-resid = 4px。 */
.chapter .pf-case > h3,
.chapter .q > h3 { margin-bottom: 10px; }
.chapter .rd-case > h3,
.chapter .mid-case > h3 { margin-bottom: 5px; }
.chapter .sk-resid > h3 { margin-bottom: 4px; }

/* 非 VIP 锁图标：这 94 个原来没有。
   选择器 (0,3,3) 胜过 style.css 的 body:not(.is-vip) .chapter h3::before (0,2,3)；
   连同 ::before 的计算值（font-size / line-height / vertical-align）一起还原，
   这样全属性比对才不会有残留差异。 */
body:not(.is-vip) .chapter .key > h3::before,
body:not(.is-vip) .chapter .pf-case > h3::before,
body:not(.is-vip) .chapter .rd-case > h3::before,
body:not(.is-vip) .chapter .q > h3::before,
body:not(.is-vip) .chapter .hq-how > h3::before,
body:not(.is-vip) .chapter .mid-case > h3::before,
body:not(.is-vip) .chapter .sk-resid > h3::before {
  content: none;
  font-size: 14px;
  line-height: 1.6;
  vertical-align: baseline;
  text-wrap: wrap;
}

/* 5 个 h3 → h2 的**字号**：必须走 CSS，不能写在行内样式里 ——
   .price-card 的版本卡原来是「桌面 20px / ≤640px 18px」（跟随 .chapter h3 的
   响应式降档），而行内样式压得住媒体查询，会把移动端也钉成 20px
   （实测踩过：390px 下 18px → 20px，高度 24.3 → 27px）。
   .ac-hub 原来是恒定 20px —— typography.css 第 145 行的
   `.chapter .ac-hub h3{font-size:20px}` 是 (0,2,1)，本来就压得住 ≤640px 的降档。
   下面两条的 (0,2,1) 同样压得住 `.chapter h2` 的 26px 与移动端的 22px。 */
.chapter .ac-hub > h2,
.chapter .price-card > h2 { font-size: 20px; }
@media (max-width: 640px) {
  .chapter .price-card > h2 { font-size: 18px; }
}