/* ===========================================================
   课程页动效 / 翻页感导航 / 阅读进度（继承主页设计语言）
   通过 <link> 引入，零侵入式升级；不改动任何现有课程页 HTML 结构。
   =========================================================== */

/* ---- 入场揭示：继承主页 .anim-reveal 语汇（克制：透明度 + 轻位移） ---- */
.anim-reveal {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .3s cubic-bezier(.25, .1, .25, 1),
              transform .3s cubic-bezier(.25, .1, .25, 1);
  will-change: opacity, transform;
}
.anim-reveal.visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .anim-reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ---- 编辑式孤行控制：课程页正文段落避免寡行/孤行 ---- */
p { text-wrap: pretty; }

/* ---- 顶部阅读进度条（与主页一致） ---- */
.lesson-progress {
  position: fixed; top: 0; left: 0; right: 0;
  height: 3px; z-index: 200; pointer-events: none;
}
.lesson-progress__bar {
  height: 100%; width: 0%;
  background: linear-gradient(90deg, var(--accent-warm-soft), var(--accent-warm));
  transition: width .08s linear;
}

/* ---- 正文内联术语锚点 + 悬停释义 ----
   外部审美借鉴：Klim / Nouvelle Noire「等宽技术词作单一 accent 锚点」；
   GitHub 机制：ibelick/motion-primitives tooltip.tsx（opacity + 2px Y + scale .95→1，
   hover/focus 触发，零辉光、克制）。为零基础用户把 jargon 当场翻译成大白话。 */
/* term tooltip removed */

.lesson-nav a,
.lesson-nav .disabled {
  flex: 1 1 0;
  display: flex; flex-direction: column; justify-content: center; gap: 7px;
  padding: 22px 26px;
  border: 1px solid var(--border);
  border-radius: var(--radius, 12px);
  background: var(--card, #fbf9f6);
  text-decoration: none;
  position: relative; overflow: hidden;
  transition: transform var(--transition, .25s), border-color var(--transition, .25s),
              box-shadow var(--transition, .25s), color var(--transition, .25s);
}
.lesson-nav a { color: var(--accent-warm-ink); }
.lesson-nav a:hover {
  transform: translateY(-3px);
  border-color: var(--accent-warm-soft);
  box-shadow: var(--shadow-card-hover, 0 14px 34px rgba(44, 43, 40, .12));
}
.lesson-nav .disabled {
  color: var(--text-soft, #a09b95);
  opacity: .6; pointer-events: none;
  background: var(--panel-2, #f0eae3);
}
/* 翻页折角：hover 时右上角轻微折起（纯 CSS，无新增辉光） */
.lesson-nav a::after {
  content: ""; position: absolute; top: 0; right: 0;
  border-width: 0 18px 18px 0;
  border-style: solid;
  border-color: transparent var(--bg, #f4f1ed) transparent transparent;
  transition: border-width var(--transition, .25s);
}
.lesson-nav a:hover::after { border-width: 0 26px 26px 0; }
.lesson-nav .nav-dir {
  font-family: var(--font-mono, monospace);
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--accent-warm);
}
.lesson-nav .nav-title {
  font-family: var(--font-serif, serif);
  font-size: 1.05rem; font-weight: 600; letter-spacing: .01em;
  color: var(--text);
  line-height: 1.3;
}

@media (prefers-reduced-motion: reduce) {
  .lesson-nav a:hover { transform: none; }
}

/* ===========================================================
   本轮新增：页内目录 TOC / 回到顶部 / 相关课程交叉引用
   元素均由 js/lesson-anim.js 零侵入注入，此处仅定义样式。
   设计语言：暖橙 mono 标签 (.22em)、克制位移、玻璃感、无新增辉光。
   =========================================================== */

/* 锚点跳转不被固定导航遮挡 */
.lesson-h { scroll-margin-top: 88px; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* ---- 回到顶部 ---- */
.to-top {
  position: fixed; right: 24px; bottom: 24px; z-index: 160;
  width: 46px; height: 46px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--accent-warm, #c97b5a);
  color: #fffaf6; border: none; cursor: pointer;
  box-shadow: 0 10px 28px rgba(201,123,90,0.32);
  opacity: 0; transform: translateY(12px); pointer-events: none;
  transition: opacity .3s var(--ease, ease), transform .3s var(--ease, ease),
              box-shadow .3s var(--ease, ease);
}
.to-top svg { width: 20px; height: 20px; }
.to-top.is-visible { opacity: 1; transform: none; pointer-events: auto; }
.to-top:hover { box-shadow: 0 14px 34px rgba(201,123,90,0.46); transform: translateY(-2px); }
@media (prefers-reduced-motion: reduce) {
  .to-top { transition: opacity .2s; transform: none !important; }
}

/* ---- 页内目录 TOC ---- */
.toc-fab {
  position: fixed; left: 24px; bottom: 24px; z-index: 160;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 18px; border-radius: 999px;
  background: var(--panel, #fbf9f6); color: var(--accent-warm-ink, #ad5f3f);
  border: 1px solid var(--border, #d9d4ce); cursor: pointer;
  font-family: var(--font-mono, monospace); font-size: 12px;
  letter-spacing: var(--label-track, .22em); text-transform: uppercase;
  box-shadow: var(--shadow-md, 0 4px 20px rgba(0,0,0,.06));
  transition: transform .3s var(--ease, ease), border-color .3s var(--ease, ease), box-shadow .3s var(--ease, ease);
}
.toc-fab:hover { transform: translateY(-2px); border-color: var(--accent-warm-soft, #e7b9a4); }
.toc-fab svg { width: 16px; height: 16px; }

.lesson-toc {
  position: fixed; top: 0; right: 0; z-index: 165;
  width: 300px; max-width: 86vw; height: 100vh;
  background: var(--panel, #fbf9f6);
  border-left: 1px solid var(--border-light, rgba(0,0,0,.06));
  box-shadow: -20px 0 50px rgba(44,43,40,0.10);
  padding: 92px 26px 40px;
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform .42s var(--ease, cubic-bezier(.22,1,.36,1));
}
.lesson-toc.is-open { transform: translateX(0); }
.lesson-toc__close {
  position: absolute; top: 26px; right: 22px;
  background: none; border: none; cursor: pointer;
  color: var(--muted, #8b7e74); font-size: 24px; line-height: 1;
}
.lesson-toc__label {
  font-family: var(--font-mono, monospace);
  font-size: 11px; letter-spacing: var(--label-track, .22em);
  text-transform: uppercase; color: var(--accent-warm, #c97b5a);
  margin-bottom: 18px;
}
.lesson-toc ul { list-style: none; padding: 0; margin: 0; }
.lesson-toc li { margin: 0; }
.lesson-toc a {
  display: block; padding: 9px 12px 9px 14px;
  border-left: 2px solid transparent;
  color: var(--text-muted, #7a7671); text-decoration: none;
  font-size: 14px; line-height: 1.5;
  transition: color .2s var(--ease, ease), border-color .2s var(--ease, ease), background .2s var(--ease, ease);
}
.lesson-toc a:hover { color: var(--text, #2c2b28); background: var(--panel-2, #f0eae3); }
.lesson-toc a.active {
  color: var(--accent-warm-ink, #ad5f3f);
  border-left-color: var(--accent-warm, #c97b5a);
  background: var(--accent-warm-bg, #f6e7dd);
  font-weight: 600;
}
/* 次级「本节大纲」浮钮：堆叠在「目录」上方，弱化配色 */
.toc-fab--local {
  bottom: 74px;
  background: var(--panel, #fbf9f6);
  color: var(--text-muted, #7a7671);
  border-color: var(--border, #d9d4ce);
}
.toc-fab--local:hover {
  transform: translateY(-2px);
  border-color: var(--accent-warm-soft, #e7b9a4);
  color: var(--accent-warm-ink, #ad5f3f);
}

/* 课程目录：模块分组标题 + 编号 + 在读标记 */
.lesson-toc__group {
  font-family: var(--font-mono, monospace);
  font-size: 10.5px; letter-spacing: var(--label-track, .22em);
  text-transform: uppercase; color: var(--muted, #8b7e74);
  margin: 22px 0 8px; padding-left: 14px;
}
.lesson-toc__group:first-of-type { margin-top: 2px; }
.lesson-toc .toc-link {
  display: flex; gap: 10px; align-items: baseline;
  padding: 7px 12px 7px 14px; border-left: 2px solid transparent;
  color: var(--text-muted, #7a7671); text-decoration: none;
  font-size: 13.5px; line-height: 1.45;
  transition: color .2s var(--ease, ease), border-color .2s var(--ease, ease), background .2s var(--ease, ease);
}
.lesson-toc .toc-link:hover { color: var(--text, #2c2b28); background: var(--panel-2, #f0eae3); }
.lesson-toc .toc-link.active {
  color: var(--accent-warm-ink, #ad5f3f);
  border-left-color: var(--accent-warm, #c97b5a);
  background: var(--accent-warm-bg, #f6e7dd);
  font-weight: 600;
}
.lesson-toc .toc-num {
  font-family: var(--font-mono, monospace); font-size: 11px;
  color: var(--accent-warm, #c97b5a); min-width: 22px; letter-spacing: .04em;
}
.lesson-toc .toc-link.active .toc-num { color: var(--accent-warm-ink, #ad5f3f); }
.lesson-toc .toc-title { flex: 1; }
.lesson-toc__cur {
  font-family: var(--font-mono, monospace); font-size: 10px;
  letter-spacing: .18em; color: var(--accent-warm, #c97b5a); opacity: .85;
  margin-left: 4px; white-space: nowrap;
}

/* 宽屏（>=1600px）：课程总目录转为常驻右侧细栏（无遮罩），「目录」浮钮隐藏 */
@media (min-width: 1600px) {
  .toc-fab--course { display: none; }
  .lesson-toc--course {
    transform: none; width: 250px; height: auto;
    max-height: calc(100vh - 140px); top: 110px; right: 24px;
    background: transparent; border-left: 1px solid var(--divider, #e3ddd3);
    box-shadow: none; padding: 0 0 0 18px;
  }
  .lesson-toc--course .lesson-toc__close { display: none; }
  .toc-fab--local { bottom: 24px; }
}

/* ---- 相关课程交叉引用 ---- */
.lesson-related {
  margin-top: 64px; padding-top: 36px;
  border-top: 1px solid var(--border, #d9d4ce);
}
.lesson-related__kicker {
  font-family: var(--font-mono, monospace);
  font-size: 11px; letter-spacing: var(--label-track, .22em);
  text-transform: uppercase; color: var(--accent-warm, #c97b5a);
  margin-bottom: 6px;
}
.lesson-related__title {
  font-family: var(--font-serif, serif);
  font-size: 1.3rem; font-weight: 600; margin: 0 0 22px;
  letter-spacing: .01em; color: var(--text, #2c2b28);
}
.related-grid {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.related-card {
  display: flex; flex-direction: column; gap: 7px;
  padding: 18px 20px; border-radius: var(--radius, 12px);
  background: var(--card, #fbf9f6);
  border: 1px solid var(--border, #d9d4ce);
  text-decoration: none; color: inherit;
  transition: transform .3s var(--ease, ease), border-color .3s var(--ease, ease), box-shadow .3s var(--ease, ease);
}
.related-card:hover {
  transform: translateY(-3px);
  border-color: var(--accent-warm-soft, #e7b9a4);
  box-shadow: var(--shadow-card-hover, 0 14px 34px rgba(44,43,40,.12));
}
.related-card__tag {
  font-family: var(--font-mono, monospace);
  font-size: 10.5px; letter-spacing: var(--label-track, .22em);
  text-transform: uppercase; color: var(--accent-warm, #c97b5a);
}
.related-card__title {
  font-family: var(--font-serif, serif);
  font-size: 1.02rem; font-weight: 600; color: var(--text, #2c2b28);
  line-height: 1.35;
}
.related-card__why {
  font-size: 13px; color: var(--text-muted, #7a7671); line-height: 1.6;
}

/* ===========================================================
   第 43 轮新增：阅读版心 + 模块化间距（借鉴 Every Layout / Standard Ebooks
   「限定阅读版心 + 模块化尺度」——把课程长文/区块约束到 --measure，
   英雄头图/价值网格/翻页导航/目录保持全宽，形成「全宽头图 → 限宽正文」编辑式节奏）
   纯静态排版，零动效、零辉光、无移动端断点；仅启用 tokens.css 中已定义但此前未启用的令牌。
   =========================================================== */
/* 正文段落靠 body max-width:1040px 自然限宽；
   callout/info 框不再额外缩窄，与正文同宽、撑满整行 */
.lesson-h {
  max-width: var(--measure, 72ch);
}
.try-it,
.insight-box,
.pro-tip,
.compare,
.insight-strip,
.lesson-faq,
.lesson-refs {
  max-width: none;
}

/* ===========================================================
   第 47 轮新增（落地本轮外部审美令牌，零新辉光 / 无移动端断点）
   1) 编辑式标题 kerning（type-together 真实字体特性：启用字距/连字/上下文替代，
      让衬线大标题的拉丁字形更精密；typ.io 印证「衬线 display + 几何 sans body」分层）
   2) 正文链接 hover 渐绘暖橙下划线 —— 与首页 a:hover 同源实现，统一全站链接语言
      （解决长期遗留：课程页静态 border-bottom 与首页 background-size 渐绘两风格不一致）
   =========================================================== */
.lesson-h,
.lesson-refs__title,
.lesson-related__title,
.related-card__title,
.toc-fab {
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
  text-rendering: optimizeLegibility;
}

/* 统一课程页正文链接 hover 与首页一致：渐绘暖橙下划线（零新辉光、reduced-motion 安全） */
p a, li a, td a, .callout a, .insight-box a, .story-box a, .footnote a, .quiz-box a {
  background-image: linear-gradient(var(--accent-warm), var(--accent-warm));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 1.5px;
  transition: color var(--transition), border-color var(--transition), background-size var(--transition);
}
p a:hover, li a:hover, td a:hover, .callout a:hover, .insight-box a:hover,
.story-box a:hover, .footnote a:hover, .quiz-box a:hover {
  color: var(--accent-warm-deep);
  background-size: 100% 1.5px;
  border-bottom-color: transparent;
}

/* ===========================================================
   阅读体验收口：统一补齐小屏布局、触控尺寸和键盘焦点。
   所有课程页都加载本文件，因此不需要逐页复制修复。
   =========================================================== */
:focus-visible {
  outline: 3px solid var(--accent-warm-deep, #9e4b2e);
  outline-offset: 3px;
}

/* 印章保留为静态识别点，移除每节课重复的扫描和呼吸，阅读更安静。 */
.lesson-seal,
.lesson-seal::before,
.lesson-hero:hover::after {
  animation: none !important;
}

.lesson-hero:hover::after { opacity: 0 !important; }



/* ===== animated-group 交错淡入（GitHub ibelick/motion-primitives animated-group fade preset · vanilla 移植，纯透明度零位移，守克制红线） ===== */
[data-ag] > .ag-i { opacity: 0; transition: opacity 0.55s var(--ease, cubic-bezier(.22,1,.36,1)); }
[data-ag].in > .ag-i { opacity: 1; transition-delay: calc(var(--i, 0) * 0.09s); }
@media (prefers-reduced-motion: reduce) {
  [data-ag] > .ag-i { opacity: 1; transition: none; }
}

/* 编辑式屏幕排版精炼（源自 editorial typography 共识：防孤行 + 悬挂标点，提升中文长文可读性；纯排版、零动效、零新辉光） */
p { text-wrap: pretty; hanging-punctuation: allow-end; }

/* 编辑式列表标记（外部借鉴 ModernCSS「Totally Custom List Styles」::marker 手法；呼应 The Type 衬线书卷克制——单一暖橙 accent 作列表锚点，替代默认灰黑圆点。全 20 课经本文件一次性生效；零 HTML、零动效、零新辉光、无移动端断点） */
ul li::marker {
  color: var(--accent-warm);
  content: "—  ";
  font-weight: 600;
}

/* ===========================================================
   中文强调正统解法：着重号（text-emphasis）替代难看的伪斜体
   —— 中文没有真正的斜体，浏览器默认对 <em> 施加 font-style:italic
      会把方块汉字机械倾斜成"伪斜体（faux oblique）"，是经典中文排版坑。
      W3C clreq / The Type 权威做法：中文强调用「着重号」（字下小圆点，
      等价于拉丁文的 italic）。改后全 20 课的中文 <em> 强调更地道、更书卷。
   · 单一暖橙作稀有强调锚点（着重号本就是稀有强调，不破单 accent 克制原则）
   · 纯 CSS、零 HTML、零动效、零新辉光、无移动端断点、reduced-motion 无关
   =========================================================== */
em {
  font-style: normal;
  font-weight: inherit;
  text-emphasis: filled dot var(--accent-warm-ink, #9e4b2e);
  -webkit-text-emphasis: filled dot var(--accent-warm-ink, #9e4b2e);
  text-emphasis-position: under right;
  -webkit-text-emphasis-position: under;
}
/* 拉丁书名/引文（如 What Is ChatGPT Doing…）仍用传统斜体——着重号点在
   每个拉丁字母下会显杂乱，故对页脚推荐阅读里的拉丁书名恢复 italic、去点。 */
.footnote em, cite {
  font-style: italic;
  font-weight: inherit;
  text-emphasis: none;
  -webkit-text-emphasis: none;
}

/* ===========================================================
   内联代码芯片：全站课程页统一（长期缺口——10 页正文有内联 <code>
   如 skills_list() / skill_view(...)，此前只有 practical/codex-notes.html
   一处本地规则，其余课程页的内联 <code> 是浏览器默认无样式，与全站
   编辑式贵感割裂）。
   令牌来源（真实抓取）：
   · @tailwindcss/typography 权威 prose —— inline `code` 与 `pre code`
     的作用域隔离手法（内联加芯片、块级代码重置回退，避免 <pre><code>
     被套上错误的芯片边框/内边距）。
   · ibelick/prompt-kit globals.css —— code{font-family:var(--font-mono);
     font-feature-settings} 的等宽技术字形处理。
   · tailwindcss.com —— 内联码浅底芯片 + 相对正文略小字号。
   落地为莫兰迪中性浅底 + 细边 + 暖橙墨技术字，克制无辉光、纯 CSS、
   零 HTML、零动效、无移动端断点；全 20+ 课经本文件一次性生效。
   =========================================================== */
code {
  font-family: var(--font-mono);
  font-feature-settings: "kern" 1, "calt" 1;
  font-size: 0.88em;
  background: var(--panel-2, #f0eae3);
  border: 1px solid var(--border-light, rgba(0,0,0,0.06));
  border-radius: 5px;
  padding: 0.1em 0.4em;
  color: var(--accent-warm-ink, #9e4b2e);
  word-break: break-word;
}
/* 块级代码（<pre><code>）显式重置回退——不套内联芯片
   （@tailwindcss/typography 权威 'pre code' 重置手法逐字移植）。 */
pre code {
  background: none;
  border: 0;
  border-radius: 0;
  padding: 0;
  font-size: inherit;
  color: inherit;
  word-break: normal;
}

/* ===========================================================
   第 71 轮新增：编辑式数据表格（全站课程页统一）
   现状缺口：11 课含 <table>，其中 2 课（context/1、agent/2）完全无表格
   样式（浏览器默认渲染，与全站割裂）；其余 9 课仅最简 table+th,td，
   且表头 th 与正文 td 样式完全相同、毫无层级——数据表读起来笨重。
   本文件在各页内联 <style> 之后加载，同特异性元素选择器覆盖并统一之。

   参考（真实拆解）：
   · A List Apart《Web Typography: Designing Tables to be Read》(Richard Rutter)
     —— 去底色 / 去斑马纹（会扭曲数据、分散注意力）、发丝线代替网格、
        留白代边框、文本左对齐、数字用 tabular-nums 纵向对齐。
   · @tailwindcss/typography styles.js（GitHub 真源）—— 表头加粗 + 更强底边、
     首尾列 padding 归零使表格内容与正文列边缘齐平（去"电子表格框感"）。
   单一暖橙锚点仅落在「表头下边线」一处，不破单 accent 红线；
   纯静态排版，零辉光、零移动端断点。 */
table {
  width: 100%;
  border-collapse: collapse;
  margin: 26px 0;
  font-size: 0.94rem;
  line-height: 1.6;
  font-variant-numeric: tabular-nums;   /* 数字纵向可比 */
}
th, td {
  padding: 11px 16px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--divider, #e3ddd3);  /* 发丝线，比 --border 更轻 */
}
/* 表头：不用底色块，靠字重 + 单一暖橙下边线区分（编辑式，非电子表格风） */
thead th,
tr:first-child th {
  font-weight: 600;
  color: var(--text, #2c2b28);
  border-bottom: 1.5px solid var(--accent-warm, #c97b5a);
  letter-spacing: .01em;
}
/* 首尾列与正文列边缘齐平 */
th:first-child, td:first-child { padding-inline-start: 0; }
th:last-child,  td:last-child  { padding-inline-end: 0; }
/* 末行去线，收干净底边 */
tbody tr:last-child td,
tr:last-child td { border-bottom: none; }
/* 克制行 hover：唯一的背景用途，极浅中性底，助读密表；非持久斑马纹 */
tr:hover td { background: var(--panel-2, #f0eae3); }
td { transition: background var(--transition, .25s); }
@media (prefers-reduced-motion: reduce) {
  td { transition: none; }
}