/* 0-Note 教学工作区 · 共享样式表(所有项目的 lessons/ 与 reference/ 都链接这一份)
   风格目标:Tufte 式——衬线正文、宽留白、少边框、可打印;屏幕与纸上都像同一门课。
   位置:90-模板/teach-assets/lesson.css(唯一副本,不按项目复制) */

:root {
  --ink: #1a1a1a;
  --muted: #6b6b6b;
  --rule: #d8d4cc;
  --paper: #fdfcf9;
  --accent: #7a5c2e;
  --ok: #2f6b3a;
  --no: #a33a2a;
  --code-bg: #f4f2ec;
  /* 标题用的无衬线栈:与衬线正文形成对比,且中文有真正的多字重 */
  --sans: -apple-system, "Segoe UI", "Microsoft YaHei", "PingFang SC", "Source Han Sans SC", sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0 auto;
  padding: 3.5rem 1.5rem 6rem;
  max-width: 46rem;
  background: var(--paper);
  color: var(--ink);
  /* 全站统一一套无衬线栈(标题与正文同一字体);中文会落到微软雅黑/苹方,
     它有真正的多字重,所以加粗看得见。层次靠字号/字重/分隔线拉开,不靠换字体。 */
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.75;
}

/* 正文里的加粗要真的看得见(中文尤其要显式指定) */
strong, b { font-weight: 700; }

/* 课程头:编号 / 项目 / 时长 */
.lesson-meta {
  font-family: var(--sans);
  font-size: .78rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  border-bottom: 1px solid var(--rule);
  padding-bottom: .6rem;
  margin-bottom: 2.2rem;
}
.lesson-meta a { color: var(--muted); }

/* 标题:h1/h2/h3 一律换无衬线 + 明显放大,和衬线正文拉开层次
   (旧值 h2=1.18rem、h3=1rem 与 17px 正文几乎同大小,加上中文字重渲染,标题读起来和正文一样) */
h1 { font-size: 2rem; line-height: 1.25; margin: 0 0 .55rem; font-weight: 700; letter-spacing: -.005em; }
h2 { font-size: 1.45rem; line-height: 1.32; margin: 2.9rem 0 .85rem; padding-top: .8rem; border-top: 2px solid var(--rule); font-weight: 700; }
h3 { font-size: 1.15rem; line-height: 1.4; margin: 1.9rem 0 .5rem; font-weight: 700; }
h4 { font-size: 1.02rem; margin: 1.4rem 0 .4rem; font-weight: 700; }

p { margin: .85rem 0; }
a { color: var(--accent); text-decoration: none; border-bottom: 1px solid var(--rule); }
a:hover { border-bottom-color: var(--accent); }

ul, ol { padding-left: 1.3rem; }
li { margin: .3rem 0; }
/* 自帯编号的列表(① ② ③ / 1. 2. 3.):不要再出现圆点,否则读成「• ① …」双标记 */
ul.points { list-style: none; padding-left: 1.5rem; }
ul.points > li { margin: .45rem 0; }
/* 第 10 节里的「自测」组:与上面的「辨析练习」组用一条虚线分开 */

code, pre, .cmd {
  font-family: Consolas, "Cascadia Mono", Menlo, monospace;
  font-size: .88em;
}
code { background: var(--code-bg); padding: .1em .35em; border-radius: 3px; }
pre {
  background: var(--code-bg);
  border-left: 3px solid var(--rule);
  padding: .8rem 1rem;
  overflow-x: auto;
  line-height: 1.5;
}
pre code { background: none; padding: 0; }

/* 这节课的胜利 —— 每节课必须有一个 */
.win {
  border: 1px solid var(--rule);
  border-left: 4px solid var(--accent);
  background: #fff;
  padding: .9rem 1.1rem;
  margin: 1.4rem 0;
}
.win strong { color: var(--accent); }

/* 三段式:痛点 / 定义 / 大白话,每段各自独立成行(2026-09-25 起;18 个教学工作区共用) */
.pain, .def, .plain { margin: .3rem 0; }
.pain strong { color: var(--no); }
.def strong { color: var(--accent); }
.dfn {
  display: block;
  margin: 0.2rem 0 0.1rem;
}

.plain {
  display: block;
  margin: 0.15rem 0 0.6rem;
  padding: 0.1rem 0.6rem;
  border-left: 3px solid rgba(120, 120, 120, 0.45);
  background: rgba(120, 120, 120, 0.05);
  color: #3d3d3d;
}

.plain strong { color: var(--ok); }

/* 心智模型:链条图(名词卡第 3 节,2026-09-26 起。盒子 + 箭头,自动换行,不引外部图) */
.chain {
  font-family: -apple-system, "Segoe UI", sans-serif;
  font-size: .82rem;
  line-height: 2.4;
  margin: 1.2rem 0;
}
.chain span {
  border: 1px solid var(--rule);
  background: #fff;
  border-radius: 3px;
  padding: .3rem .55rem;
  white-space: nowrap;
}
.chain .arw {
  border: 0;
  background: none;
  padding: 0 .15rem;
  color: inherit;
}

.chain a { color: inherit; border-bottom: 1px dotted var(--accent); }

/* 引用 / 提醒 */
blockquote {
  margin: 1.2rem 0;
  padding-left: 1rem;
  border-left: 3px solid var(--rule);
  color: var(--muted);
  font-style: italic;
}

table { border-collapse: collapse; margin: 1.1rem 0; width: 100%; font-size: .95rem; }
tbody tr:nth-child(even) { background: rgba(0, 0, 0, .018); }
th, td { text-align: left; padding: .45rem .6rem; border-bottom: 1px solid var(--rule); }
th { font-weight: 600; border-bottom: 2px solid var(--ink); }

/* 测验:等长选项 + 即时反馈 */
/* 练习块:单独的 .quiz(尚未分组的课)自带顶部实线;放进 .drill / .quiz-set 后改用组内点线 */
.quiz { border-top: 1px solid var(--rule); margin-top: 2rem; padding-top: 1.2rem; }
.drill .quiz, .quiz-set .quiz { margin-top: 1.2rem; padding-top: .8rem; border-top: 1px dotted var(--rule); }
.drill .item:first-child, .quiz-set .quiz:first-child { margin-top: .6rem; padding-top: 0; border-top: none; }

/* 两组练习同款卡片:左边一条强调色,和正文区分开 */
.drill, .quiz-set {
  border: 1px solid var(--rule);
  border-left: 4px solid var(--accent);
  background: #fff;
  padding: .2rem 1.1rem 1rem;
  margin: 1.4rem 0;
}

/* 组末/题末的小结文字:两组用同一套样式 */
.drill .drill-score, .quiz .score {
  margin: 1.2rem 0 .2rem;
  padding-top: .7rem;
  border-top: 1px solid var(--rule);
  font-size: .85rem;
  color: var(--muted);
}
.quiz .q { font-weight: 600; margin-bottom: .6rem; }
.quiz button {
  display: block;
  width: 100%;
  text-align: left;
  margin: .35rem 0;
  padding: .55rem .8rem;
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: 3px;
  font: inherit;
  font-size: .95rem;
  cursor: pointer;
}
.quiz button:hover { border-color: var(--accent); }
.quiz button.correct { border-color: var(--ok); background: #f1f7f2; color: var(--ok); }
.quiz button.wrong { border-color: var(--no); background: #fbf1ef; color: var(--no); }
.quiz .why {
  display: none;
  margin: .6rem 0 0;
  padding: .6rem .8rem;
  background: var(--code-bg);
  font-size: .92rem;
}
.quiz .why.show { display: block; }

/* 辨析练习(名词解释类工作区):一组「场景 → 是哪类」的判断,逐例即时反馈(v0.1 起) */

/* 页脚:一手资源 + 追问提醒 */
footer {
  margin-top: 3.5rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--rule);
  font-size: .92rem;
  color: var(--muted);
}
footer h2 { font-size: 1rem; color: var(--ink); }

.ask {
  margin-top: 1.6rem;
  padding: .9rem 1.1rem;
  background: #fff;
  border: 1px dashed var(--rule);
}

@media print {
  body { padding: 0; max-width: none; font-size: 11.5pt; }
  .quiz button { border: none; padding-left: 0; }
  .ask { border: 1px solid var(--rule); }
  a { border: none; }
}

/* 关键名词:正文里首次出现时用 <span class="term"> 标出,便于单独识别 */
.term {
  background: rgba(90, 90, 90, 0.09);
  border-radius: 3px;
  padding: 0 0.2rem;
}

/* 关系网盒子里的重点名词:盒子里已有白底,名词要再压一层,才和描述文字分得开 */
.chain .term {
  background: rgba(120, 120, 120, 0.2);
  border-bottom: 1px solid rgba(90, 90, 90, 0.35);
}

/* 关系网盒子里的描述字:默认 .8rem×0.8 约 10.5px 偏小,提到可读下限 */
.chain small {
  font-size: 0.76rem;
  line-height: 1.35;
}

/* 练习选项里的浅色小字备注:术语照写,解释放这里(<small class="hint">) */
.hint {
  color: #8a8a8a;
  font-size: 0.8em;
  font-weight: 400;
  margin-left: 0.35rem;
}