/* ===========================================================
   全站样式表 —— 首页 + 19 个章节页共用，唯一的样式来源
   参照 tw93/Kami 的设计原则重写（MIT）：
     羊皮纸底 · 单一墨蓝强调 · 衬线承载层级 · 暖灰 · 填充而非描边

   相对 Kami 原作，四处刻意的取舍：
   1. 字体：Kami 用仓耳今楷02，该字体仅限个人使用、商用需授权，
      本文件换成自托管的思源宋体子集（OFL，可商用）。
      这是效果打折最明显的一处。
   2. 深色模式：Kami 本身没有主题切换（它的"深色"是印刷里的明暗
      分节交替）。这里为夜间手机阅读补了一套，只重定义 token。
   3. 行高：Kami 印刷正文 1.5–1.55，本文件放到 1.78 ——
      手机上连读几千字，印刷节奏太紧。这是有意偏离。
   4. 语义色：Kami 只允许一个强调色，唯一破例是警示用的暖褐。
      本文件沿用那一处破例来做安全提示，不再引入第三色。
      因此 .type-card.sensitive / .comparison-card.normal 这类修饰类
      一律不给独立配色，只由基类负责外观。

   ── 结构分类的依据 ──────────────────────────────────────
   下面的组件规则按元素的**实际子结构**分族，不按类名后缀。
   类名会骗人：.pathway-card / .stage-card / .reason-card 挂在 .content
   下、内容是 h3+p，是文档流小节而不是卡片；反过来 .solution-step /
   .test-step 是 grid 的子项，是卡片。曾经按后缀归类，把只含 h3+p 的
   块塞进 grid，结果标题被挤成 38px 宽、一字一行。
   新增组件前先确认它的父容器和子元素，别看名字。
   =========================================================== */

/* 自托管思源宋体子集（OFL，可商用）。
   可变字重轴，站内只取 400（正文）/ 500（标题）两档——
   font-weight 声明成 400 500，浏览器会把 <strong> 的 700 请求钳到 500，
   正好实现「衬线不用合成粗体」这条规矩。
   子集只含站内 1517 个字符，新增内容用到生僻字需重跑子集，见 fonts/README.md */
@font-face{
  font-family:"Noto Serif SC Subset";
  src:url("fonts/NotoSerifSC-subset.woff2") format("woff2-variations"),
      url("fonts/NotoSerifSC-subset.woff2") format("woff2");
  font-weight:400 500;
  font-style:normal;
  font-display:swap;
}

:root{
  /* 表面：羊皮纸，绝不用纯白 */
  --parchment:#F5F4ED;
  --ivory:#FAF9F5;
  --warm-sand:#E8E6DC;

  /* 唯一强调色：墨蓝。覆盖面积控制在 5% 以内 */
  --brand:#1B365D;
  --brand-light:#2D5A8A;
  --brand-tint:#EEF2F7;

  /* 文字四级，全部暖灰（R≈G>B，黄褐底调） */
  --near-black:#141413;
  --dark-warm:#3D3D3A;
  --olive:#504E49;
  --stone:#6B6A64;

  --border:#E8E6DC;
  --border-soft:#E5E3D8;

  /* 唯一的语义破例：安全警示的暖褐 */
  --caution-bg:#F0E0D8;
  --caution-fg:#8B4513;

  /* 字号阶梯：只有 7 档，不允许出现邻居值 */
  --t-micro:11px;   /* 全大写微标签 */
  --t-small:13px;   /* 注释、图注 */
  --t-body:17px;    /* 阅读正文 */
  --t-lead:19px;    /* 导语、小标题 */
  --t-h2:25px;
  --t-h1:34px;

  /* 行高：只有 4 档 */
  --lh-tight:1.3;
  --lh-dense:1.5;
  --lh-read:1.78;
  --lh-label:1.4;

  --radius:4px;
  --radius-chip:2px;

  /* 容器内边距：只有三档，窄屏统一收紧一档即可，不必逐个组件改 */
  --pad-card:18px 20px;    /* 卡片、提示盒、警示块 */
  --pad-box:20px 24px;     /* 大段说明块、清单 */
  --pad-step:14px 18px;    /* 行式步骤条目 */

  --serif:"Noto Serif SC Subset","Source Han Serif SC","Noto Serif CJK SC","Songti SC","STSong",Georgia,serif;
  --sans:var(--serif);              /* Kami 铁律：一页只有一种字体 */
  --ui:"PingFang SC","Hiragino Sans GB",system-ui,sans-serif;   /* 仅用于标签等 UI 元素 */
  --mono:"JetBrains Mono","SF Mono",Menlo,Consolas,monospace;

  --read:34em;
}

/* ---------- 深色模式 ----------
   Kami 本身没有主题切换（它的"深色"是印刷里的明暗分节交替）。
   这是为夜间手机阅读补的，用它自己的深色 token 打底：
   页底 #141413、容器 #30302e。墨蓝在近黑底上对比度不足，
   提亮成 #8FB4D9；暖褐警示同理换成低饱和的深底 + 亮字。
   只重定义 token，组件规则一律不动。 */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --parchment:#141413;
    --ivory:#1F1F1D;
    --warm-sand:#30302E;
    --brand:#8FB4D9;
    --brand-light:#A8C8E6;
    --brand-tint:#1E2A36;
    --near-black:#F1EFE8;
    --dark-warm:#CFCBC0;
    --olive:#A8A49A;
    --stone:#807C73;
    --border:#332F2A;
    --border-soft:#2A2723;
    --caution-bg:#2E2018;
    --caution-fg:#D9A06B;
  }
}
:root[data-theme="dark"]{
  --parchment:#141413;
  --ivory:#1F1F1D;
  --warm-sand:#30302E;
  --brand:#8FB4D9;
  --brand-light:#A8C8E6;
  --brand-tint:#1E2A36;
  --near-black:#F1EFE8;
  --dark-warm:#CFCBC0;
  --olive:#A8A49A;
  --stone:#807C73;
  --border:#332F2A;
  --border-soft:#2A2723;
  --caution-bg:#2E2018;
  --caution-fg:#D9A06B;
}

*{margin:0;padding:0;box-sizing:border-box;}

body{
  background:var(--parchment);
  color:var(--near-black);
  font-family:var(--serif);
  font-size:var(--t-body);
  line-height:var(--lh-read);
  letter-spacing:.01em;          /* 中文正文需要一点密度补偿 */
  -webkit-font-smoothing:antialiased;
  /* iOS Safari 转横屏时会自作主张放大正文，压到 100% 保持字号阶梯 */
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
  /* 正文以中文为主可随处断行，但夹带的英文长词和链接会顶破容器 */
  overflow-wrap:break-word;
}

.container{max-width:940px;margin:0 auto;padding:0 24px 96px;}

/* ---------- 顶部导航 ---------- */
.nav-bar{
  display:flex;align-items:center;justify-content:space-between;
  gap:16px;flex-wrap:wrap;
  padding:22px 0 18px;
  border-bottom:1px solid var(--border);
  margin-bottom:52px;
}
.home-link{
  font-family:var(--ui);
  font-size:var(--t-micro);
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--stone);text-decoration:none;
}
.home-link:hover{color:var(--brand);}
.nav-links{display:flex;gap:8px;flex-wrap:wrap;}
.nav-button{
  font-family:var(--ui);
  font-size:var(--t-small);
  line-height:var(--lh-label);
  padding:7px 15px;
  color:var(--dark-warm);
  background:var(--warm-sand);
  border-radius:var(--radius);
  text-decoration:none;white-space:nowrap;
  box-shadow:0 0 0 1px var(--border);   /* 环形阴影代替描边 */
  transition:box-shadow .18s ease,color .18s ease;
}
.nav-button:hover{color:var(--brand);box-shadow:0 0 0 1px var(--brand);}
.nav-button.disabled,.nav-button[aria-disabled="true"]{opacity:.4;pointer-events:none;}
/* 退出登录是 <button>，UA 默认边框会在环形阴影外多描一圈 */
button.nav-button{border:none;cursor:pointer;}

/* ---------- 章节页头 ----------
   衬线标题 + 全大写 eyebrow，最后 1px 细线收口。

   面包屑前面原本有一道 10×2 的墨蓝短横，是照搬 Kami 的页头签名。
   在 Kami 那里它是整套设计系统的品牌记号，搬到这儿不指代任何东西，
   读者会停下来想"这代表什么"——装饰性的结构元素引出这个疑问，
   本身就是该去掉的理由。结构元素要编码真实信息，否则不要有。 */
.chapter-header{margin-bottom:44px;}
.chapter-breadcrumb{
  font-family:var(--ui);
  font-size:var(--t-micro);
  line-height:var(--lh-label);
  letter-spacing:.16em;text-transform:uppercase;
  color:var(--stone);
  margin-bottom:16px;
}
.chapter-title{
  font-family:var(--serif);
  font-size:clamp(26px,4.2vw,var(--t-h1));
  font-weight:500;                 /* 衬线只用 400/500，不用粗体 */
  line-height:var(--lh-tight);
  letter-spacing:.02em;
  color:var(--near-black);
  text-wrap:balance;
  max-width:20em;
}
.chapter-subtitle{
  margin-top:14px;
  padding-bottom:20px;
  border-bottom:1px solid var(--border);
  font-size:var(--t-lead);
  line-height:var(--lh-dense);
  color:var(--olive);
  max-width:var(--read);
}

/* ---------- 正文 ----------
   Kami 的长文没有"卡片包正文"这一层，正文直接落在羊皮纸上 */
.content{background:transparent;padding:0;}
.content>*{max-width:var(--read);}
.content>.experience-grid,
.content>.comparison-table,
.content>.section-divider{max-width:none;}

/* 章节标题：墨蓝左柱，结构分隔用 2.5px 一档 */
.content h2{
  font-family:var(--serif);
  font-size:var(--t-h2);
  font-weight:500;
  line-height:var(--lh-tight);
  letter-spacing:.02em;
  color:var(--near-black);
  margin:52px 0 18px;              /* 上 52 / 下 18，邻近律：下方间距明显小于上方 */
  padding-left:12px;
  border-left:2.5px solid var(--brand);
  border-radius:1.5px;
  text-wrap:balance;
}
.content h2:first-child{margin-top:0;}
.content h3{
  font-family:var(--serif);
  font-size:var(--t-lead);
  font-weight:500;
  line-height:var(--lh-dense);
  color:var(--near-black);
  margin:34px 0 10px;
}
.content p{margin-bottom:18px;color:var(--dark-warm);}
.content p:last-child{margin-bottom:0;}

/* 强调靠颜色，不靠加粗 */
.content strong{font-weight:500;color:var(--brand);}

/* 列表用原生 marker，把 marker 染成墨蓝；不用 ::before 假造 */
.content ul,.content ol{margin:0 0 18px;padding-left:1.5em;color:var(--dark-warm);}
.content li{margin-bottom:9px;line-height:var(--lh-read);}
.content li::marker{color:var(--brand);}
.content ol li::marker{font-weight:500;}
.content a{color:var(--brand-light);text-underline-offset:3px;}

.section-divider{
  height:1px;background:var(--border);
  border:none;margin:52px 0;
}

/* ---------- 引语：只有左柱、无填充 ---------- */
.quote{
  font-family:var(--serif);
  font-size:var(--t-lead);
  line-height:var(--lh-read);
  color:var(--olive);
  border-left:2px solid var(--brand);
  padding:6px 0 6px 18px;
  margin:36px 0;
  max-width:var(--read);
}

/* ---------- 提示盒：象牙填充 + 左柱，不描全边 ---------- */
.important-note,.key-point,.key-insight,.highlight-box,
.important-concept,.metaphor-box,.intro-box,.science-box,
.psychological-support,.prevention-tips{
  background:var(--ivory);
  border-left:2px solid var(--brand);
  border-radius:var(--radius);
  padding:var(--pad-card);
  margin:30px 0;
}
.important-note :is(h3,h4),.key-point :is(h3,h4),.key-insight :is(h3,h4),
.highlight-box :is(h3,h4),.important-concept :is(h3,h4),
.metaphor-box :is(h3,h4),.intro-box :is(h3,h4),.science-box :is(h3,h4),
.psychological-support :is(h3,h4),.prevention-tips :is(h3,h4){
  font-family:var(--ui);
  font-size:var(--t-micro);
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--brand);
  margin:0 0 10px;
}
.important-note p:last-child,.key-point p:last-child,
.key-insight p:last-child,.science-box p:last-child{margin-bottom:0;}
.metaphor-box,.intro-box{background:transparent;border-left-color:var(--border);}

/* 安全警示：与上面的提示盒**同一个形态**，只把左柱换成暖褐。
   原先整块铺 --caution-bg，在羊皮纸上是全页唯一的大色块，
   视觉重量压过正文；警示要醒目靠的是位置和标签，不是面积。
   列表按声明的分量走次级字号，不占正文的视觉层级。 */
.warning-box{
  background:var(--ivory);
  border-left:2px solid var(--caution-fg);
  border-radius:var(--radius);
  padding:var(--pad-card);margin:30px 0;
  max-width:var(--read);        /* 首页不在 .content 里，宽度得自己管 */
}
.warning-box :is(h3,h4){
  font-family:var(--ui);
  font-size:var(--t-micro);font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--caution-fg);margin:0 0 12px;
}
.warning-box ul{margin-bottom:0;padding-left:1.3em;}
.warning-box li{
  font-size:var(--t-small);
  line-height:var(--lh-read);
  color:var(--dark-warm);
  margin-bottom:6px;
}
.warning-box li:last-child{margin-bottom:0;}
.warning-box li::marker{color:var(--caution-fg);}

/* ---------- 卡片：靠填充色浮起，不加闭合描边 ---------- */
.experience-grid,.method-grid,.technique-grid,.tips-grid,
.support-grid,.mindset-grid,.causes-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:14px;
  margin:30px 0;
}
.experience-grid>:is(h2,h3,h4,p),.method-grid>:is(h2,h3,h4,p){grid-column:1 / -1;}
.experience-card,.method-card,.technique-card,.tip-item,
.support-card,.mindset-card,.cause-card{
  background:var(--ivory);
  border-radius:var(--radius);
  padding:var(--pad-card);
  transition:box-shadow .2s ease;
}
.experience-card:hover,.method-card:hover,.technique-card:hover{
  box-shadow:0 4px 24px rgba(20,20,19,.05);   /* 耳语阴影，纸张微抬 */
}
.experience-card h4,.method-card h4,.technique-card h4{
  font-family:var(--serif);
  font-size:var(--t-lead);
  font-weight:500;
  line-height:var(--lh-dense);
  color:var(--near-black);
  margin:0 0 8px;
}
.experience-card p,.method-card p,.technique-card p{
  font-size:var(--t-small);
  line-height:var(--lh-dense);
  color:var(--olive);
  margin:0;
}
.emoji{font-style:normal;margin-right:6px;}

/* ---------- 清单：原生 marker ---------- */
.checklist{
  background:var(--ivory);
  border-radius:var(--radius);
  padding:var(--pad-box);margin:30px 0;
}
.checklist ul{padding-left:1.4em;margin:0;}
.checklist li::marker{color:var(--brand);}

/* ---------- 表格 ---------- */
.comparison-table{margin:30px 0;}
.comparison-table h3{
  font-family:var(--ui);
  font-size:var(--t-micro);font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--stone);margin:0 0 12px;
}
.table-wrapper{overflow-x:auto;}
table{width:100%;border-collapse:collapse;font-size:var(--t-small);min-width:440px;}
th{
  text-align:left;font-weight:500;
  color:var(--dark-warm);
  padding:9px 12px;
  border-bottom:1px solid var(--border);
}
td{
  padding:9px 12px;
  border-bottom:1px solid var(--border-soft);
  color:var(--dark-warm);
  vertical-align:top;
  line-height:var(--lh-dense);
}
tbody tr:last-child td{border-bottom:none;}
td strong{color:var(--near-black);font-weight:500;}

/* ---------- 底部翻页 ---------- */
.navigation{
  display:flex;align-items:center;justify-content:space-between;
  gap:12px;flex-wrap:wrap;
  margin-top:56px;padding-top:24px;
  border-top:1px solid var(--border);
}

:focus-visible{outline:2px solid var(--brand);outline-offset:2px;}
@media (prefers-reduced-motion:reduce){*{transition:none!important;}}

/* 窄屏规则统一收在文件末尾的一个 @media 块里，不要在这里另开一处 */

/* ╔═══════════════════════════════════════════════════════════╗
   ║  组件层                                                    ║
   ║  分族依据是元素的父容器与子元素，不是类名后缀。            ║
   ║  每族上方注明它的实际 DOM 形状，改动前先核对。            ║
   ╚═══════════════════════════════════════════════════════════╝ */

/* ───────── 正文内的四五级标题 ─────────
   h4 复用正文字号，靠字重与颜色分级，不新开字号档；
   h5 降为 UI 字体的微标签。 */
.content h4{
  font-family:var(--serif);
  font-size:var(--t-body);
  font-weight:500;
  line-height:var(--lh-dense);
  color:var(--near-black);
  margin:28px 0 8px;
}
.content h5{
  font-family:var(--ui);
  font-size:var(--t-small);
  font-weight:600;
  letter-spacing:.08em;
  color:var(--dark-warm);
  margin:20px 0 6px;
}

/* ═══════════ 首页 ═══════════ */

/* header = h1 + p.subtitle */
.header{
  padding:64px 0 26px;
  margin-bottom:44px;
  border-bottom:1px solid var(--border);
}
.header h1{
  font-family:var(--serif);
  font-size:clamp(28px,5vw,var(--t-h1));
  font-weight:500;
  line-height:var(--lh-tight);
  letter-spacing:.03em;
  color:var(--near-black);
  text-wrap:balance;
}
.subtitle{
  margin-top:14px;
  font-size:var(--t-lead);
  line-height:var(--lh-dense);
  color:var(--olive);
}

/* chapters-container = chapter-section ×6，纵向章节流 */
.chapters-container{display:flex;flex-direction:column;gap:60px;}

/* chapter-section = section-header + lessons-grid */
.section-header{margin-bottom:20px;}
.chapter-number{
  font-family:var(--ui);
  font-size:var(--t-micro);
  line-height:var(--lh-label);
  letter-spacing:.16em;
  color:var(--brand);
  margin-bottom:11px;
}
.chapter-number::before{content:"第 ";}
.chapter-number::after{content:" 章";}
.section-title{
  font-family:var(--serif);
  font-size:var(--t-h2);
  font-weight:500;
  line-height:var(--lh-tight);
  letter-spacing:.02em;
  color:var(--near-black);
  text-wrap:balance;
}
.section-subtitle{
  margin-top:8px;
  font-size:var(--t-small);
  line-height:var(--lh-dense);
  color:var(--stone);
}

/* lessons-grid = a.lesson-item ×N */
.lessons-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(258px,1fr));
  gap:12px;
}
/* 课程项是 <a>，必须清掉浏览器默认的链接色与下划线 */
.lesson-item{
  display:block;
  background:var(--ivory);
  border-radius:var(--radius);
  padding:var(--pad-card);
  color:inherit;
  text-decoration:none;
  transition:box-shadow .2s ease;
}
.lesson-item:hover{box-shadow:0 4px 24px rgba(20,20,19,.06);}
.lesson-number{
  font-family:var(--ui);
  font-size:var(--t-micro);
  line-height:var(--lh-label);
  letter-spacing:.14em;
  color:var(--brand);
  margin-bottom:9px;
}
.lesson-title{
  font-family:var(--serif);
  font-size:var(--t-lead);
  font-weight:500;
  line-height:var(--lh-dense);
  color:var(--near-black);
  margin-bottom:7px;
  text-wrap:balance;
}
.lesson-description{
  font-size:var(--t-small);
  line-height:var(--lh-dense);
  color:var(--olive);
}

/* footer = h3 + p×4 */
.footer{
  margin-top:72px;
  padding-top:26px;
  border-top:1px solid var(--border);
  font-size:var(--t-small);
  line-height:var(--lh-read);
  color:var(--stone);
}
.footer h3{
  font-family:var(--ui);
  font-size:var(--t-micro);
  font-weight:600;
  letter-spacing:.14em;
  color:var(--stone);
  margin-bottom:12px;
}
.footer p{margin-bottom:5px;}
.footer p:last-child{margin-bottom:0;}

/* ═══════════ 并列卡片网格 ═══════════
   容器的子元素是 3–4 个同类卡片，彼此无先后顺序。 */
.advanced-grid,.brief-traps,.change-grid,.environment-grid,.errors-grid,
.features-grid,.feeling-grid,.medical-situations,.path-grid,
.personalization-grid,.prevention-grid,.signals-grid,.signal-grid,
.strategies-grid,.symptoms-grid,.type-grid,.intro-grid,.comparison-grid,
.case-grid,.balance-tips,.feature-list{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:14px;
  margin:30px 0;
}
/* 结构性保险：容器里若混入标题或段落，让它横跨整行，
   否则会被塞进第一列、压成一字一行。 */
.advanced-grid>:is(h2,h3,h4,h5,p,ul,ol,table),
.brief-traps>:is(h2,h3,h4,h5,p,ul,ol,table),
.change-grid>:is(h2,h3,h4,h5,p,ul,ol,table),
.environment-grid>:is(h2,h3,h4,h5,p,ul,ol,table),
.errors-grid>:is(h2,h3,h4,h5,p,ul,ol,table),
.features-grid>:is(h2,h3,h4,h5,p,ul,ol,table),
.feeling-grid>:is(h2,h3,h4,h5,p,ul,ol,table),
.medical-situations>:is(h2,h3,h4,h5,p,ul,ol,table),
.path-grid>:is(h2,h3,h4,h5,p,ul,ol,table),
.personalization-grid>:is(h2,h3,h4,h5,p,ul,ol,table),
.prevention-grid>:is(h2,h3,h4,h5,p,ul,ol,table),
.signals-grid>:is(h2,h3,h4,h5,p,ul,ol,table),
.signal-grid>:is(h2,h3,h4,h5,p,ul,ol,table),
.strategies-grid>:is(h2,h3,h4,h5,p,ul,ol,table),
.symptoms-grid>:is(h2,h3,h4,h5,p,ul,ol,table),
.type-grid>:is(h2,h3,h4,h5,p,ul,ol,table),
.intro-grid>:is(h2,h3,h4,h5,p,ul,ol,table),
.comparison-grid>:is(h2,h3,h4,h5,p,ul,ol,table),
.case-grid>:is(h2,h3,h4,h5,p,ul,ol,table),
.balance-tips>:is(h2,h3,h4,h5,p,ul,ol,table),
.feature-list>:is(h2,h3,h4,h5,p,ul,ol,table){
  grid-column:1 / -1;max-width:none;
}
/* body-signals 只是 signal-grid 的一层包装，别叠两次外边距 */
.body-signals{margin:30px 0;}
.body-signals>.signal-grid{margin:0;}

/* 卡片本体：靠象牙填充浮起，不加闭合描边 */
.advanced-card,.balance-tip,.brief-trap-card,.case-item,.change-card,
.comparison-card,.environment-card,.error-card,.feature-card,.feature-item,
.feeling-card,.intro-card,.medical-situation,.path-card,.personalization-card,
.prevention-card,.signal-card,.strategy-card,.symptom-card,.type-card,
.solution-step,.test-step,.timeline-content{
  background:var(--ivory);
  border-radius:var(--radius);
  padding:var(--pad-card);
}
.advanced-card :is(h3,h4,h5):first-child,.balance-tip :is(h3,h4,h5):first-child,
.brief-trap-card :is(h3,h4,h5):first-child,.case-item :is(h3,h4,h5):first-child,
.change-card :is(h3,h4,h5):first-child,.comparison-card :is(h3,h4,h5):first-child,
.environment-card :is(h3,h4,h5):first-child,.error-card :is(h3,h4,h5):first-child,
.feature-card :is(h3,h4,h5):first-child,.feature-item :is(h3,h4,h5):first-child,
.feeling-card :is(h3,h4,h5):first-child,.intro-card :is(h3,h4,h5):first-child,
.medical-situation :is(h3,h4,h5):first-child,.path-card :is(h3,h4,h5):first-child,
.personalization-card :is(h3,h4,h5):first-child,.prevention-card :is(h3,h4,h5):first-child,
.signal-card :is(h3,h4,h5):first-child,.strategy-card :is(h3,h4,h5):first-child,
.symptom-card :is(h3,h4,h5):first-child,.type-card :is(h3,h4,h5):first-child,
.solution-step :is(h3,h4,h5):first-child,.test-step :is(h3,h4,h5):first-child,
.timeline-content :is(h3,h4,h5):first-child{
  margin-top:0;
}
.advanced-card p,.balance-tip p,.brief-trap-card p,.case-item p,.change-card p,
.comparison-card p,.environment-card p,.error-card p,.feature-card p,
.feature-item p,.feeling-card p,.intro-card p,.medical-situation p,
.path-card p,.personalization-card p,.prevention-card p,.signal-card p,
.strategy-card p,.symptom-card p,.type-card p,.solution-step p,.test-step p,
.timeline-content p{
  font-size:var(--t-small);
  line-height:var(--lh-read);
  color:var(--olive);
  margin-bottom:9px;
}
.advanced-card p:last-child,.balance-tip p:last-child,.brief-trap-card p:last-child,
.case-item p:last-child,.change-card p:last-child,.comparison-card p:last-child,
.environment-card p:last-child,.error-card p:last-child,.feature-card p:last-child,
.feature-item p:last-child,.feeling-card p:last-child,.intro-card p:last-child,
.medical-situation p:last-child,.path-card p:last-child,
.personalization-card p:last-child,.prevention-card p:last-child,
.signal-card p:last-child,.strategy-card p:last-child,.symptom-card p:last-child,
.type-card p:last-child,.solution-step p:last-child,.test-step p:last-child,
.timeline-content p:last-child{
  margin-bottom:0;
}

/* h4 里的行内分级标签（signal-level 的父元素就是 h4） */
.signal-level{
  display:inline-block;
  margin-left:8px;
  padding:1px 7px;
  font-family:var(--ui);
  font-size:var(--t-micro);
  font-weight:600;
  letter-spacing:.1em;
  line-height:1.7;
  color:var(--brand);
  background:var(--brand-tint);
  border-radius:var(--radius-chip);
  vertical-align:middle;
}

/* brief-trap-card 内的两段有语义分工 */
.trap-desc{color:var(--olive);}
.solution-text{color:var(--dark-warm);}
.solution-text strong{color:var(--brand);font-weight:500;}

/* ═══════════ 纵向序列 ═══════════
   子项之间有先后顺序（步骤、阶段、时间线、分级），
   横排会丢掉顺序信息，一律纵向。 */
.steps-container,.confirmation-steps,.timeline,.process-timeline,
.training-phases,.treatment-levels,.symptom-treatments,.solution-steps,
.test-steps,.trap-content{
  display:flex;
  flex-direction:column;
  gap:12px;
  margin:30px 0;
}
/* 容器里的引导标题不吃 flex 间距叠加 */
.steps-container>:is(h3,h4):first-child,
.confirmation-steps>:is(h3,h4):first-child,
.timeline>:is(h3,h4):first-child,
.process-timeline>:is(h3,h4):first-child{
  margin:0;
}

/* step-item = span.step-number + strong + 裸文本
   裸文本不能进 grid（会被当成第三个格子），用行内块排编号 */
.step-item{
  background:var(--ivory);
  border-radius:var(--radius);
  padding:var(--pad-step);
  font-size:var(--t-small);
  line-height:var(--lh-read);
  color:var(--olive);
}
.step-number{
  display:inline-block;
  min-width:1.7em;
  font-family:var(--ui);
  font-weight:600;
  color:var(--brand);
}
.step-item strong{color:var(--near-black);font-weight:500;}

/* timeline-item = timeline-number + timeline-content */
.timeline-item{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:14px;
  align-items:start;
}
.timeline-number{
  font-family:var(--ui);
  font-size:var(--t-small);
  font-weight:600;
  line-height:2.2;
  color:var(--brand);
  min-width:1.6em;
  text-align:right;
}

/* timeline-stage / training-phase：编号 + 标题 + 时间 的头，加正文段 */
.timeline-stage,.training-phase{
  background:var(--ivory);
  border-radius:var(--radius);
  padding:var(--pad-card);
}
.stage-header,.phase-header{
  display:flex;
  align-items:baseline;
  gap:10px;
  flex-wrap:wrap;
  margin-bottom:12px;
}
.stage-number,.phase-number{
  font-family:var(--ui);
  font-size:var(--t-small);
  font-weight:600;
  color:var(--brand);
}
.stage-title,.phase-title{
  font-family:var(--serif);
  font-size:var(--t-body);
  font-weight:500;
  color:var(--near-black);
}
.stage-time,.phase-time{
  margin-left:auto;
  font-family:var(--ui);
  font-size:var(--t-micro);
  letter-spacing:.08em;
  color:var(--stone);
}
.timeline-stage p,.training-phase p{
  font-size:var(--t-small);
  line-height:var(--lh-read);
  color:var(--olive);
  margin-bottom:8px;
}
.timeline-stage p:last-child,.training-phase p:last-child{margin-bottom:0;}

/* trap-container = trap-header + trap-content(trap-section ×3) */
.trap-container{margin:38px 0;}
.trap-header{
  display:flex;
  align-items:baseline;
  gap:11px;
  padding-bottom:11px;
  margin-bottom:4px;
  border-bottom:1px solid var(--border);
}
.trap-number{
  font-family:var(--ui);
  font-size:var(--t-micro);
  font-weight:600;
  letter-spacing:.14em;
  color:var(--brand);
}
.trap-title{
  font-family:var(--serif);
  font-size:var(--t-lead);
  font-weight:500;
  line-height:var(--lh-dense);
  color:var(--near-black);
}
.trap-container>.trap-content{margin:0;}   /* 序列容器自带的 30px 外边距在这里会顶开标题 */
.trap-section{margin:0;}
.trap-section>:is(h3,h4,h5):first-child{margin-top:0;}

/* danger-alert 走警示色，solution-box 走强调色 —— 全站仅此一处双色对照 */
.danger-alert{
  background:var(--caution-bg);
  border-left:2px solid var(--caution-fg);
  border-radius:var(--radius);
  padding:var(--pad-card);
}
.danger-alert :is(h4,h5){
  font-family:var(--ui);
  font-size:var(--t-micro);
  font-weight:600;
  letter-spacing:.14em;
  color:var(--caution-fg);
  margin:0 0 9px;
}
.danger-alert p{
  font-size:var(--t-small);
  line-height:var(--lh-read);
  color:var(--dark-warm);
  margin-bottom:7px;
}
.danger-alert p:last-child{margin-bottom:0;}
.solution-box{
  background:var(--ivory);
  border-left:2px solid var(--brand);
  border-radius:var(--radius);
  padding:var(--pad-card);
}
.solution-box :is(h4,h5){
  font-family:var(--ui);
  font-size:var(--t-micro);
  font-weight:600;
  letter-spacing:.14em;
  color:var(--brand);
  margin:0 0 9px;
}
.solution-box p{
  font-size:var(--t-small);
  line-height:var(--lh-read);
  color:var(--olive);
  margin-bottom:7px;
}
.solution-box p:last-child{margin-bottom:0;}

/* symptom-treatment = symptom-header + treatment-levels(treatment-level ×2) */
.symptom-treatment{
  background:var(--ivory);
  border-radius:var(--radius);
  padding:var(--pad-card);
}
.symptom-header h4{margin:0;}
.symptom-treatment>.treatment-levels{margin:12px 0 0;gap:10px;}
.treatment-level{
  padding-left:12px;
  border-left:2px solid var(--border);
}
.treatment-level h5{margin-top:0;}
.treatment-level p{
  font-size:var(--t-small);
  line-height:var(--lh-read);
  color:var(--olive);
  margin-bottom:6px;
}
.treatment-level p:last-child{margin-bottom:0;}

/* ═══════════ 独立小节 ═══════════
   父元素是 .content，内容是 h3/h4 + 段落或列表。
   这些是文档流的一部分，给间距即可，绝不能做成 grid。 */
.activation-steps,.beginner-features,.comparison-section,.connection,
.danger-signals,.difference-comparison,.identification-section,
.long-term-section,.medical-help,.method-steps,.mindset-section,
.normal-inflammation,.pathway-card,.prevention-section,.reason-card,
.rest-importance,.restart-methods,.solution-section,.special-cases,
.stage-card,.timeline-section,.training-method,.treatment-section,
.why-identify{
  display:block;
  margin:32px 0;
}
.activation-steps>:is(h3,h4):first-child,.beginner-features>:is(h3,h4):first-child,
.comparison-section>:is(h3,h4):first-child,.connection>:is(h3,h4):first-child,
.danger-signals>:is(h3,h4):first-child,.difference-comparison>:is(h3,h4):first-child,
.identification-section>:is(h3,h4):first-child,.long-term-section>:is(h3,h4):first-child,
.medical-help>:is(h3,h4):first-child,.method-steps>:is(h3,h4):first-child,
.mindset-section>:is(h3,h4):first-child,.normal-inflammation>:is(h3,h4):first-child,
.pathway-card>:is(h3,h4):first-child,.prevention-section>:is(h3,h4):first-child,
.reason-card>:is(h3,h4):first-child,.rest-importance>:is(h3,h4):first-child,
.restart-methods>:is(h3,h4):first-child,.solution-section>:is(h3,h4):first-child,
.special-cases>:is(h3,h4):first-child,.stage-card>:is(h3,h4):first-child,
.timeline-section>:is(h3,h4):first-child,.training-method>:is(h3,h4):first-child,
.treatment-section>:is(h3,h4):first-child,.why-identify>:is(h3,h4):first-child{
  margin-top:0;
}
/* 小节内嵌的网格/序列已自带外边距，收掉一半避免间距翻倍 */
.beginner-features>.feature-list,.difference-comparison>.comparison-grid,
.identification-section>.test-steps,.long-term-section>.balance-tips,
.restart-methods>.method-grid,.solution-section>.solution-steps,
.special-cases>.case-grid,.training-method>.training-phases{
  margin:16px 0 0;
}

/* 带填充的说明块：内容自成一体，与正文分离 */
.definition-box,.combination-box,.formula-box,.step-box,.strategy-box,
.final-message{
  background:var(--ivory);
  border-radius:var(--radius);
  padding:var(--pad-box);
  margin:32px 0;
}
.definition-box>:is(h3,h4):first-child,.combination-box>:is(h3,h4):first-child,
.formula-box>:is(h3,h4):first-child,.step-box>:is(h3,h4):first-child,
.strategy-box>:is(h3,h4):first-child,.final-message>:is(h3,h4):first-child{
  margin-top:0;
}
.definition-box p:last-child,.combination-box p:last-child,
.formula-box p:last-child,.final-message p:last-child{margin-bottom:0;}
.step-box ol,.strategy-box ol,.method-steps ol,.activation-steps ol{margin-bottom:0;}
.formula{
  font-family:var(--ui);
  font-size:var(--t-lead);
  line-height:var(--lh-dense);
  letter-spacing:.04em;
  color:var(--brand);
  text-align:center;
  padding:14px 0;
}

/* 求医提示走警示色 —— 与 .danger-alert 同一语义 */
.danger-signals,.medical-help{
  background:var(--caution-bg);
  border-left:2px solid var(--caution-fg);
  border-radius:var(--radius);
  padding:var(--pad-card);
}
.danger-signals :is(h3,h4),.medical-help :is(h3,h4){
  font-family:var(--ui);
  font-size:var(--t-micro);
  font-weight:600;
  letter-spacing:.14em;
  color:var(--caution-fg);
  margin:0 0 9px;
}
.danger-signals p:last-child,.medical-help p:last-child{margin-bottom:0;}

/* 已学完的章节在翻页条上降一档 */
.nav-button.completed{color:var(--stone);}
.nav-button.completed::after{content:" ·";color:var(--brand);}

/* ═══════════ 宽度例外 ═══════════
   .content>* 默认收窄到 --read（34em ≈ 578px，中文约 34 字/行）。

   放开整幅宽度的只有**横向多列**的容器：分列本身就把行长切短了，
   940px 里放三列，每列仍是易读宽度。

   纵向单列的序列（步骤、时间线、阶段、分级）**不在这里**——
   它们只有一列，容器多宽正文行就多长。曾经把它们一起放开，
   结果一行 55 个中文字，比舒适行长多出一半。
   带 grid 的小节按它内含的容器方向决定，不看自己的名字。 */
.content>.advanced-grid,.content>.brief-traps,.content>.change-grid,
.content>.environment-grid,.content>.errors-grid,.content>.features-grid,
.content>.feeling-grid,.content>.medical-situations,.content>.path-grid,
.content>.personalization-grid,.content>.prevention-grid,
.content>.signals-grid,.content>.signal-grid,.content>.strategies-grid,
.content>.symptoms-grid,.content>.type-grid,.content>.intro-grid,
.content>.comparison-grid,.content>.case-grid,.content>.balance-tips,
.content>.feature-list,.content>.body-signals,
.content>.difference-comparison,.content>.long-term-section,
.content>.restart-methods,.content>.special-cases,
.content>.beginner-features{
  max-width:none;
}
/* ═══════════ 窄屏 ═══════════
   全站唯一的窄屏断点。优先改 token（字号、内边距），
   组件规则只在布局必须变向时才写进来。

   刻意没做的一件事：正文字号不下调。
   之前这里写着 body{font-size:16px}，手机屏幕比桌面离眼睛更近、
   可视面积却更小，正文反而比桌面小一号是说不通的。改成保持 17px，
   只把次级文字从 13px 提到 14px —— 卡片说明、图注在手机上 13px 偏小。 */
@media (max-width:640px){
  :root{
    --t-small:14px;
    --pad-card:15px 17px;
    --pad-box:17px 19px;
    --pad-step:13px 15px;
  }

  .container{padding:0 18px 64px;}
  .content h2{margin:40px 0 14px;}

  .header{padding:44px 0 22px;margin-bottom:34px;}
  .chapters-container{gap:46px;}
  .lessons-grid{grid-template-columns:1fr;}

  /* 触摸目标：手指的可靠命中区约 44px，13px 字 + 7px 内边距只有 32px */
  .nav-button{padding:12px 18px;}
  .navigation{flex-direction:column;align-items:stretch;}
  .navigation .nav-button{text-align:center;}

  /* 「编号 + 标题 + 时间」三段横排，窄屏放不下就换行，时间不再右推 */
  .stage-header,.phase-header,.trap-header{flex-wrap:wrap;}
  .stage-time,.phase-time{margin-left:0;}

  .timeline-item{grid-template-columns:1fr;gap:6px;}
  .timeline-number{text-align:left;line-height:var(--lh-label);}
}

/* ═══════════ 未登录门禁页 ═══════════
   由 chapter-protection.js 替换整个 body 后注入。
   样式放在这里而不是 JS 的内联属性里，深色模式和字体才跟全站一致。 */
.gate{
  display:flex;
  justify-content:center;
  align-items:center;
  min-height:100vh;
  padding:24px;
}
.gate-card{
  max-width:420px;
  width:100%;
  padding:40px 36px;
  text-align:center;
  background:var(--ivory);
  border-radius:var(--radius);
  box-shadow:0 18px 50px rgba(20,20,19,.10);
}
.gate-eyebrow{
  font-family:var(--ui);
  font-size:var(--t-micro);
  font-weight:600;
  line-height:var(--lh-label);
  letter-spacing:.16em;
  color:var(--brand);
  margin-bottom:14px;
}
.gate-card h2{
  font-family:var(--serif);
  font-size:var(--t-h2);
  font-weight:500;
  line-height:var(--lh-tight);
  letter-spacing:.02em;
  color:var(--near-black);
  margin-bottom:12px;
}
.gate-card p{
  font-size:var(--t-small);
  line-height:var(--lh-read);
  color:var(--olive);
  margin-bottom:24px;
}
.gate-countdown{
  font-family:var(--ui);
  letter-spacing:.08em;
  color:var(--stone);
}
.gate-card .nav-button{
  display:inline-block;
  cursor:pointer;
  border:none;
}

/* 待撰写的章节：不是链接，视觉上退到背景里并注明状态 */
.lesson-item.pending{
  background:transparent;
  box-shadow:inset 0 0 0 1px var(--border);
  cursor:default;
}
.lesson-item.pending:hover{box-shadow:inset 0 0 0 1px var(--border);}
.lesson-item.pending .lesson-number{color:var(--stone);}
.lesson-item.pending .lesson-number::after{
  content:"　即将上线";
  letter-spacing:.14em;
}
.lesson-item.pending .lesson-title{color:var(--olive);}
.lesson-item.pending .lesson-description{color:var(--stone);}

/* 首页没有导航条，配色切换单独起一行靠右 */
.theme-bar{
  display:flex;
  justify-content:flex-end;
  padding-top:20px;
}
.theme-toggle{min-width:4.6em;text-align:center;}