/* ========================================================================
   计算物理导论 —— 讲义放映样式（slide 风格）
   配色：深青 #06303a / 青 #1b93a8 / 淡青白 #f2f9fb
   支持：全屏放映（F / 按钮）、键盘翻页、缩略图概览、字号统一缩放

   【字号统一缩放 —— --fs】
   本文件里**讲义正文**的每一处字号都写成 `calc(Npx * var(--fs))`，
   全部由一个变量 `--fs` 控制（1 = 原始字号）。放映时按 Ctrl + / Ctrl −
   或工具栏的 A− / A＋ 即可整体缩放，设置记在浏览器里。
   新增样式时请沿用同样写法，不要再写死的 px，否则那一处不会跟着缩放。
   注意：顶栏 / 工具栏 / 目录遮罩 / 缩略图卡属于「放映器外壳」，
   与讲义内容无关，它们的字号保持固定 px。
   ======================================================================== */

:root {
  /* 讲义字号统一缩放系数：1 = 原始字号。由 slide.js 在 <html> 上覆盖 */
  --fs: 1;
  --color-bg: #f2f9fb;
  --color-bg-alt: #ffffff;
  --color-text: #06303a;
  --color-text-soft: #2b4a54;
  --color-muted: #55717a;
  --color-accent: #1b93a8;
  --color-accent-soft: #d7eef3;
  --color-hero: #06303a;
  --color-hero-text: #f2f9fb;
  --color-border: #cfe4ea;
  --color-card: #ffffff;
  --color-info-bg: #ecf7f9;
  --color-warn-bg: #fdf6e3;
  --color-ok-bg: #e6f4ea;
  --shadow-sm: 0 2px 6px rgba(0, 0, 0, .06);
  --shadow-md: 0 6px 20px rgba(0, 0, 0, .08);
  --radius: 10px;
  --font-cn: "Noto Serif SC", "Source Han Serif SC", "Songti SC", "SimSun", "Microsoft YaHei", sans-serif;
  --font-mono: "JetBrains Mono", "Fira Code", Consolas, "Courier New", monospace;
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0; height: 100%;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-cn);
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}

/* ---------- 顶部状态栏 ---------- */
.topbar {
  position: fixed; top: 0; left: 0; right: 0; height: 50px;
  background: var(--color-hero); color: var(--color-hero-text);
  display: flex; align-items: center; padding: 0 20px; z-index: 100;
  box-shadow: var(--shadow-sm);
}
.topbar .brand {
  font-size: 15px; font-weight: 700; letter-spacing: 1px;
  color: var(--color-accent); margin-right: 16px; white-space: nowrap;
}
.topbar .crumb { font-size: 13px; color: #a9c6ce; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topbar .crumb a { color: #a9c6ce; text-decoration: none; margin-right: 6px; }
.topbar .crumb a:hover { color: var(--color-accent); }
.topbar .crumb .sep { color: #2c6b78; margin: 0 6px; }
.topbar .pageinfo { font-size: 12px; color: #a9c6ce; font-family: var(--font-mono); white-space: nowrap; }

/* ---------- 舞台与页面 ---------- */
.stage {
  position: absolute; top: 50px; bottom: 54px; left: 0; right: 0;
  display: flex; align-items: center; justify-content: center;
  padding: 18px; overflow: hidden;
}
.slide {
  display: none; width: 100%; max-width: 1240px; height: 100%;
  background: var(--color-bg-alt); border-radius: var(--radius);
  padding: 40px 60px 48px; overflow-y: auto;
  box-shadow: var(--shadow-md); border: 1px solid var(--color-border);
  animation: slideIn .3s ease;
  /* 基准字号：未单独声明字号的文字（如 .fml-note）继承它，随之缩放 */
  font-size: calc(16px * var(--fs, 1));
}
.slide.active { display: block; }
@keyframes slideIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* 页码 / 小节标签 */
.slide-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding-bottom: 8px; margin-bottom: 18px;
  border-bottom: 1px dashed var(--color-border);
}
.slide-head .sec { font-size: calc(12.5px * var(--fs, 1)); color: var(--color-muted); font-family: var(--font-mono); letter-spacing: .5px; }
.slide-head .pg {
  font-size: calc(12px * var(--fs, 1)); font-family: var(--font-mono); color: #0b6b7d;
  background: var(--color-accent-soft); border-radius: 20px; padding: 2px 10px; white-space: nowrap;
}

/* ---------- 标题 ---------- */
.slide h1 {
  margin: 0 0 20px; font-size: calc(32px * var(--fs, 1)); line-height: 1.35; color: var(--color-hero);
  border-left: 6px solid var(--color-accent); padding-left: 16px; font-weight: 700;
}
.slide h2 {
  margin: 24px 0 12px; font-size: calc(22px * var(--fs, 1)); color: var(--color-hero);
  border-bottom: 2px solid var(--color-accent); padding-bottom: 6px;
}
.slide h3 { margin: 18px 0 10px; font-size: calc(18px * var(--fs, 1)); color: var(--color-accent); }
.slide h4 { margin: 14px 0 6px; font-size: calc(16px * var(--fs, 1)); color: var(--color-text); }
.slide p, .slide li { font-size: calc(17px * var(--fs, 1)); line-height: 1.9; color: var(--color-text); margin: .5em 0; }
.slide ul, .slide ol { margin: 6px 0 12px; padding-left: 26px; }
.slide li { margin-bottom: 5px; }
.slide li::marker { color: var(--color-accent); }
@media (max-width: 1100px) {
  .slide { padding: 28px 32px 36px; }
  .slide h1 { font-size: calc(26px * var(--fs, 1)); }
  .slide p, .slide li { font-size: calc(16px * var(--fs, 1)); }
}

/* ---------- 重点块 ---------- */
.callout {
  border-left: 5px solid var(--color-accent); background: var(--color-info-bg);
  padding: 14px 18px; margin: 16px 0; border-radius: 6px; font-size: calc(16px * var(--fs, 1)); line-height: 1.8;
  /* 兜底：公式/长文本写在 callout 里时，callout 自身没有横向滚动容器，
     窄视口（1366 及以下）会把整页撑宽。加这一条后由 callout 内部滚动。 */
  overflow-x: auto;
}
.callout.warn { border-color: #6fd0e0; background: var(--color-warn-bg); }
.callout.ok   { border-color: #4f8a3d; background: var(--color-ok-bg); }
.callout .label {
  display: inline-block; font-size: calc(12px * var(--fs, 1)); font-weight: 700; color: var(--color-accent);
  letter-spacing: 1px; margin-right: 8px;
}
.callout.warn .label { color: #0b6b7d; }
.callout.ok   .label { color: #3d6c2e; }
.callout p:first-child { margin-top: 0; }
.callout p:last-child { margin-bottom: 0; }

/* ---------- 正文里的外部链接（.ext） ----------
   讲义正文指向站外资源（如 Gaussian 官网）的链接。用 class 显式标注，
   避免误伤 .dlbar a / .doclink a 这些「放映器控件」的既有样式。
   默认下划线便于投影时辨认，悬停加深；字号继承父级、随 --fs 缩放。 */
.slide a.ext {
  color: #0b6b7d; text-decoration: underline; font-weight: 600;
  text-underline-offset: 2px; text-decoration-thickness: 1px;
  overflow-wrap: anywhere;
}
.slide a.ext:hover { color: #06303a; text-decoration-thickness: 2px; }

/* ---------- 表格 ---------- */
table.tbl {
  width: 100%; border-collapse: collapse; margin: 14px 0; font-size: calc(15px * var(--fs, 1));
  background: #fff; border-radius: 6px; overflow: hidden; box-shadow: var(--shadow-sm);
}
table.tbl th, table.tbl td { padding: 8px 12px; border-bottom: 1px solid var(--color-border); text-align: left; vertical-align: top; }
table.tbl th { background: var(--color-hero); color: var(--color-hero-text); font-weight: 600; font-size: calc(14px * var(--fs, 1)); }
table.tbl tr:nth-child(even) td { background: #f6fcfd; }
table.tbl td.num, table.tbl th.num { text-align: center; font-family: var(--font-mono); }

/* ---------- 网格卡片 ---------- */
.grid-2, .grid-3 { display: grid; gap: 14px; margin: 14px 0; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .grid-2, .grid-3 { grid-template-columns: 1fr; } }
.card {
  background: var(--color-card); border: 1px solid var(--color-border);
  border-radius: 8px; padding: 16px 18px; box-shadow: var(--shadow-sm);
}
.card .title { font-size: calc(15px * var(--fs, 1)); font-weight: 700; color: var(--color-accent); margin-bottom: 6px; }
.card .body { font-size: calc(15.5px * var(--fs, 1)); line-height: 1.8; color: var(--color-text-soft); }

/* ---------- 封面 / 章节页 ---------- */
.cover {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; height: 100%; min-height: 380px;
  background: linear-gradient(135deg, #06303a 0%, #0b4552 100%);
  color: var(--color-hero-text); border-radius: var(--radius); padding: 40px;
}
.cover .ch-num { font-size: calc(15px * var(--fs, 1)); color: var(--color-accent); letter-spacing: 5px; margin-bottom: 14px; }
.cover h1 { font-size: calc(46px * var(--fs, 1)); margin: 0 0 16px; color: var(--color-hero-text); border: none; padding: 0; }
.cover .subtitle { font-size: calc(17px * var(--fs, 1)); color: #a9c6ce; margin-bottom: 26px; letter-spacing: 2px; }
.cover .meta { font-size: calc(13px * var(--fs, 1)); color: #7fa3ad; font-family: var(--font-mono); }
.cover img { max-height: 34vh; border-radius: 8px; margin-bottom: 20px; box-shadow: 0 8px 26px rgba(0,0,0,.5); }

.section-page {
  display: flex; flex-direction: column; justify-content: center; height: 100%; min-height: 300px;
  background: linear-gradient(120deg, #ecf7f9 0%, #d7eef3 100%);
  border-left: 10px solid var(--color-accent); border-radius: var(--radius); padding: 30px 48px;
}
.section-page .no { font-family: var(--font-mono); font-size: calc(80px * var(--fs, 1)); font-weight: 700; color: rgba(122,79,193,.28); line-height: 1; }
.section-page h1 { font-size: calc(40px * var(--fs, 1)); margin: 6px 0 10px; border: none; padding: 0; }
.section-page .sub { font-size: calc(17px * var(--fs, 1)); color: #0b6b7d; }

/* ---------- 图片 ---------- */
.figs { display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; align-items: flex-start; margin: 16px 0; }
.figs figure { margin: 0; flex: 0 1 auto; max-width: 100%; text-align: center; }
.figs img {
  max-height: 46vh; max-width: 100%; border-radius: 6px;
  border: 1px solid var(--color-border); background: #fff; box-shadow: var(--shadow-sm);
}
.figs.wide img { max-height: 40vh; }
/* 多图页：单张再收一档，避免 3~6 张叠起来后溢出（配合 data 里的 IMGCLS） */
.figs.mid img { max-height: 30vh; }
/* 「图 + 表 + 提示条」同屏的紧凑页（第 3 讲 P12 的 Jablonski 图）：
   1920×1080 放映时照 .figs.mid 给足 30vh；矮屏（笔记本 768~800px 高）时
   自动收一档，否则这一页会超出 .stage 的可见区而被裁掉底部。
   注意：必须写成 .figs.mid-sm 这种两段选择器，否则会被下面的
   全局加密规则 .figs img { max-height:30vh } 压掉。 */
.figs.mid-sm img { max-height: 30vh; }
@media (max-height: 800px) { .figs.mid-sm img { max-height: 20vh; } }
.figs.tight { margin: 10px 0; }
.figs.tight img { max-height: 19vh; }
.figs.tight figcaption { font-size: calc(12px * var(--fs, 1)); margin-top: 4px; }
.figs figcaption { font-size: calc(13px * var(--fs, 1)); color: var(--color-muted); margin-top: 6px; line-height: 1.6; }

/* 一宽一窄两张图并排（「读图」页专用）：
   默认的 .figs 是 flex-wrap:wrap，宽图会独占一行、窄图被挤到下一行，
   于是白白多出近两行的高度——窄视口下这一页就会溢出。
   这里改成按 66:34 等比缩、且不换行，两张图永远在同一行里。 */
.figs.pair { flex-wrap: nowrap; align-items: flex-start; }
.figs.pair figure { min-width: 0; }
.figs.pair figure:first-child { flex: 1 1 66%; }
.figs.pair figure:last-child  { flex: 1 1 34%; }
.figs.pair img { max-height: 26vh; }
.figs.pair figcaption { margin-top: 4px; }

/* ---------- 两栏 ---------- */
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; }
@media (max-width: 900px) { .two-col { grid-template-columns: 1fr; } }

/* ---------- 测验题 ---------- */
.quiz { background: #f7fcfd; border: 1px solid var(--color-border); border-left: 5px solid #1b93a8; border-radius: 6px; padding: 16px 20px; margin: 14px 0; }
.quiz .qt { font-size: calc(12px * var(--fs, 1)); font-weight: 700; color: #0b6b7d; letter-spacing: 1px; margin-bottom: 8px; display: block; }
.quiz .qq { font-size: calc(17px * var(--fs, 1)); line-height: 1.85; margin: .2rem 0 .5rem; }
.quiz .opts { list-style: none; padding: 0; margin: 10px 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 18px; }
.quiz .opts li { font-size: calc(15.5px * var(--fs, 1)); color: var(--color-text-soft); padding-left: 26px; position: relative; }
.quiz .opts li::before {
  content: attr(data-k); position: absolute; left: 0; top: 0;
  width: 19px; height: 19px; line-height: 19px; text-align: center; border-radius: 50%;
  background: #d7eef3; color: #0b6b7d; font-size: calc(12px * var(--fs, 1)); font-weight: 700; font-family: var(--font-mono);
}
@media (max-width: 900px) { .quiz .opts { grid-template-columns: 1fr; } }
.quiz .ans { margin-top: 10px; font-size: calc(15px * var(--fs, 1)); color: #3d6c2e; background: var(--color-ok-bg); border-radius: 4px; padding: 6px 12px; display: inline-block; }

/* ---------- 数学公式 ---------- */
mjx-container { font-size: 112% !important; }
.slide .formula {
  background: #fff; border: 1px dashed var(--color-border); border-radius: 6px;
  padding: 12px 18px; margin: 12px 0; text-align: center; overflow-x: auto;
}
.slide mjx-container[display="true"] { margin: 4px 0 !important; }

/* ---------- 关键术语 ---------- */
.term {
  display: inline-block; background: var(--color-accent-soft); color: #0b6b7d;
  padding: 1px 7px; border-radius: 4px; font-weight: 600; font-size: calc(15.5px * var(--fs, 1)); margin: 0 2px;
}
.kbd {
  font-family: var(--font-mono); font-size: calc(12.5px * var(--fs, 1)); background: #eaf6f9;
  border: 1px solid var(--color-border); border-bottom-width: 2px;
  border-radius: 4px; padding: 1px 6px; color: #1d5b68;
}

/* ---------- 底部导航 ---------- */
.toolbar {
  position: fixed; bottom: 0; left: 0; right: 0; height: 54px;
  background: var(--color-hero); color: var(--color-hero-text);
  display: flex; align-items: center; padding: 0 18px; gap: 10px; z-index: 100;
  box-shadow: 0 -2px 6px rgba(0, 0, 0, .1);
}
.toolbar .btn {
  background: transparent; color: var(--color-hero-text); border: 1px solid #1d5b68;
  padding: 6px 13px; border-radius: 4px; cursor: pointer; font-size: 13px;
  font-family: inherit; transition: all .15s; white-space: nowrap;
}
.toolbar .btn:hover { background: var(--color-accent); border-color: var(--color-accent); }
.toolbar .btn:disabled { opacity: .35; cursor: not-allowed; }
.toolbar .btn:disabled:hover { background: transparent; border-color: #1d5b68; }
.toolbar .progress { flex: 1; min-width: 60px; height: 6px; background: #123c46; border-radius: 3px; overflow: hidden; position: relative; }
.toolbar .progress-bar {
  position: absolute; inset: 0 auto 0 0; width: 0;
  background: linear-gradient(90deg, var(--color-accent), #6fd0e0); transition: width .3s;
}
.toolbar .counter { font-family: var(--font-mono); font-size: 13px; color: #a9c6ce; min-width: 78px; text-align: center; white-space: nowrap; }
/* 字号缩放读数：与「1 / 44」页码并排，不属于讲义内容，字号固定 */
.toolbar .fs-val { font-family: var(--font-mono); font-size: 12px; color: #8aa9b1; min-width: 42px; text-align: center; white-space: nowrap; }
/* 字号增减按钮：用强调色描边与普通按钮拉开差距，投影时一眼能找到。
   读者常找不到这两个按钮，所以给它们单独一个可见的配色，而不是和
   「上一页 / 下一页」长得一模一样。禁用态由上面的
   `.toolbar .btn:disabled:hover` 覆盖（特异性更高），无需另写。 */
.toolbar .btn.fs-btn {
  padding: 6px 11px; font-family: var(--font-mono); font-weight: 700;
  border-color: var(--color-accent); color: #7fd7e6;
}
.toolbar .btn.fs-btn:hover { background: var(--color-accent); color: var(--color-hero); }
.toolbar .accent-btn { background: var(--color-accent); border-color: var(--color-accent); font-weight: 600; }
.toolbar .accent-btn:hover { background: #22a8be; }

/* ---------- 缩略图概览 ---------- */
.overview-mask {
  position: fixed; inset: 0; background: rgba(0, 0, 0, .88); z-index: 200;
  display: none; overflow-y: auto; padding: 36px;
}
.overview-mask.show { display: block; }
.overview-mask h2 { color: var(--color-hero-text); font-size: 20px; margin: 0 0 20px; text-align: center; letter-spacing: 2px; }
.overview-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 14px; max-width: 1400px; margin: 0 auto; }
.thumb {
  background: #fff; border-radius: 6px; padding: 12px 14px; cursor: pointer;
  border: 2px solid transparent; transition: all .15s; font-size: 12.5px; line-height: 1.5;
  color: var(--color-text); min-height: 86px;
}
.thumb:hover { border-color: var(--color-accent); transform: translateY(-2px); }
.thumb .num { color: var(--color-accent); font-weight: 700; font-family: var(--font-mono); font-size: 11px; display: block; margin-bottom: 4px; }
.thumb.current { border-color: var(--color-accent); background: #e8f5f9; }
.overview-mask .hint { color: #8aa9b1; font-size: 12.5px; text-align: center; margin-top: 22px; font-family: var(--font-mono); }

/* ---------- 提示小字 / 打印 ---------- */
.hint { font-size: calc(12.5px * var(--fs, 1)); color: var(--color-muted); margin-top: 14px; text-align: center; font-family: var(--font-mono); }
.slide::-webkit-scrollbar { width: 8px; }
.slide::-webkit-scrollbar-track { background: transparent; }
.slide::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: 4px; }
.slide::-webkit-scrollbar-thumb:hover { background: var(--color-muted); }

/* ========================================================================
   计算物理导论：排版加密
   ------------------------------------------------------------------------
   本讲内容密度较高（含代码块、对照表格、下载信息），
   在 1920×1080 放映下需要收窄竖直方向的留白，保证每页不出现滚动条。
   这里的取值均以「整页零溢出」为目标调过。
   ======================================================================== */

.slide { padding: 26px 52px 28px; }

.slide-head { padding-bottom: 4px; margin-bottom: 9px; }

.slide h1 { margin: 0 0 10px; font-size: calc(27px * var(--fs, 1)); line-height: 1.26; padding-left: 13px; }
.slide h2 { margin: 11px 0 6px;  font-size: calc(19px * var(--fs, 1)); padding-bottom: 3px; }
.slide h3 { margin: 12px 0 6px;  font-size: calc(17px * var(--fs, 1)); }

.slide p, .slide li { font-size: calc(15.5px * var(--fs, 1)); line-height: 1.65; margin: .36em 0; }
.slide ul, .slide ol { margin: 4px 0 8px; }
.slide li { margin-bottom: 3px; }

.slide .formula { padding: 6px 12px; margin: 6px 0; }

.callout { padding: 8px 13px; margin: 8px 0; font-size: calc(15px * var(--fs, 1)); line-height: 1.62; }

table.tbl { margin: 8px 0; font-size: calc(14px * var(--fs, 1)); }
table.tbl th, table.tbl td { padding: 4.5px 9px; }
table.tbl th { font-size: calc(13.5px * var(--fs, 1)); }

.figs { margin: 8px 0; }
.figs img { max-height: 30vh; }
.figs figcaption { font-size: calc(13px * var(--fs, 1)); margin-top: 6px; }

.grid-2, .grid-3 { gap: 12px; }
.card { padding: 12px 15px; }
.card .title { font-size: calc(16px * var(--fs, 1)); margin-bottom: 6px; }
.card .body { font-size: calc(15px * var(--fs, 1)); line-height: 1.65; }

.quiz { padding: 10px 14px; margin: 8px 0; }
.quiz .qq { font-size: calc(16px * var(--fs, 1)); margin: 6px 0; }
.quiz .opts li { padding: 5px 10px; font-size: calc(15px * var(--fs, 1)); }

/* 图内的 SVG 用 max-height 约束（本讲图表统一给宽高比约 1.7:1） */
.figs svg { max-height: 31vh; height: auto; }

/* 内容最密集的少数几页（如图 + 双卡 + 两处 callout 同屏）：
   用 .figs.tight 把图再收一档，避免出现纵向滚动条。 */
.figs.tight { margin: 6px 0; }
.figs.tight svg { max-height: 25vh; }
.figs.tight figcaption { font-size: calc(12.5px * var(--fs, 1)); margin-top: 4px; }

/* ---------- 推导步骤链（steps） ----------
   比 callout 更紧凑：左侧一条竖线串起编号，适合一页放 3~5 步推导。
   相比同内容用多个 callout，纵向可省 30%~40%。 */
.steps { list-style: none; margin: 7px 0 9px; padding: 0 0 0 4px; }
.steps > li {
  position: relative; padding: 0 0 7px 30px; margin: 0;
  border-left: 2px solid var(--color-border); font-size: calc(15px * var(--fs, 1));
}
.steps > li:last-child { border-left-color: transparent; padding-bottom: 0; }
.steps .sn {
  position: absolute; left: -11px; top: 1px; width: 20px; height: 20px;
  border-radius: 50%; background: var(--color-accent); color: #fff;
  font-size: calc(11.5px * var(--fs, 1)); font-weight: 700; line-height: 20px; text-align: center;
  font-family: var(--font-mono, Consolas, monospace);
}
.steps .st { display: block; font-weight: 700; color: #0b6b7d; font-size: calc(15px * var(--fs, 1)); line-height: 1.4; }
.steps .sb { display: block; line-height: 1.6; }
.steps .sb .formula { margin: 4px 0; padding: 5px 10px; }

/* ---------- 跳转阅读资料按钮（doclink） ---------- */
.doclink {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 9px 0 4px; padding: 7px 13px; border-radius: 8px;
  background: #ecf7f9; border: 1px dashed #8fcbd9;
}
.doclink a {
  color: var(--color-accent); font-weight: 700; font-size: calc(15px * var(--fs, 1));
  text-decoration: none; border-bottom: 1px solid var(--color-accent);
  white-space: nowrap;
}
.doclink a:hover { color: #0e4d5c; }
.doclink .dl-note { font-size: calc(13.5px * var(--fs, 1)); color: #55717a; }

/* ---------- 「思考」紧凑块（think） ----------
   把「提问 + 公式 + 结论」压成一屏能放下的横排结构：
   第一行左标题右公式（对齐基线），第二行为结论条。
   相比「h2 + formula + callout」三件套，纵向可省 35%~45%。 */
.think {
  margin: 8px 0 0; padding: 6px 12px 7px;
  border-radius: 8px; background: #f3fafc;
  border: 1px solid #cee7ed; border-left: 5px solid var(--color-accent);
}
.think .tk-head {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.think .tk-title {
  flex: 0 0 auto; font-size: calc(15px * var(--fs, 1)); font-weight: 700; color: #0b6b7d;
  letter-spacing: .02em;
}
.think .tk-title::before {
  content: "?"; display: inline-block; width: 16px; height: 16px; margin-right: 6px;
  border-radius: 50%; background: var(--color-accent); color: #fff;
  font-size: calc(11.5px * var(--fs, 1)); font-weight: 700; line-height: 16px; text-align: center;
  vertical-align: 1px;
}
.think .tk-eq { flex: 1 1 auto; min-width: 0; overflow-x: auto; }
/* 注意：必须带 .slide 前缀，否则会被 .slide.tight .formula 的
   padding 覆盖（特异性相同、后者在文件中更靠后），导致公式被撑大。 */
.slide .think .tk-eq .formula { margin: 0; padding: 0 4px; background: transparent; box-shadow: none; }
.think .tk-body {
  margin-top: 3px; padding-top: 4px; border-top: 1px dashed #bfe0e7;
  font-size: calc(14px * var(--fs, 1)); line-height: 1.5; color: #223f48;
}
.think .tk-body b { color: #0e4d5c; }
.think .tk-body .tk-arrow { color: var(--color-accent); font-weight: 700; }
/* 行内公式不要在中文排版里被断行、也不要把行高撑开 */
.think .tk-body mjx-container,
.think .tk-title mjx-container { white-space: nowrap; vertical-align: baseline; }
.think mjx-container:not([display="true"]) { line-height: 0; }

/* ---------- 页面级加密（.slide.tight）----------
   当某页内容确实比常规页面多（例如末尾追加了一个「思考」块），
   用这个类把该页的段落/公式/callout 间距各收一档，
   避免逐块去挤压内容本身的可读性。 */
.slide.tight { padding-top: 20px; padding-bottom: 20px; }
.slide.tight h1 { margin-bottom: 7px; }
.slide.tight h2 { margin: 8px 0 4px; }
.slide.tight p { margin: .26em 0; }
/* 只收「正文无序列表」，不碰 .steps > li（它的留白靠 padding 而非 margin） */
.slide.tight ul > li { margin-bottom: 1px; }
.slide.tight .formula { padding: 5px 11px; margin: 4px 0; }
.slide.tight .callout { padding: 7px 12px; margin: 6px 0; }
.slide.tight .think { margin-top: 6px; padding: 5px 11px 6px; }
.slide.tight .think .tk-body { margin-top: 3px; padding-top: 4px; font-size: calc(13.5px * var(--fs, 1)); line-height: 1.48; }
.slide.tight .grid-2, .slide.tight .grid-3 { gap: 10px; }
.slide.tight .card { padding: 9px 12px; }
.slide.tight .card .body { line-height: 1.56; }
.slide.tight .doclink { margin: 6px 0 2px; padding: 6px 12px; }
/* 宽表格（如三方案对照表）在 tight 页上再收一档行列间距，
   这比压缩文字更不影响可读性，通常能省 30~50px。 */
.slide.tight table.tbl { margin: 5px 0; font-size: calc(13.5px * var(--fs, 1)); }
.slide.tight table.tbl th, .slide.tight table.tbl td { padding: 3px 8px; }
.slide.tight table.tbl th { font-size: calc(13px * var(--fs, 1)); }

/* ---------- 代码块（LAMMPS 输入脚本 / 命令行）----------
   本课程大量出现命令与输入脚本，需要等宽、可横向滚动、
   并与正文有明确视觉分层。 */
.slide code {
  font-family: var(--font-mono); font-size: calc(13.5px * var(--fs, 1));
  background: #eaf6f9; color: #1d4a55;
  border-radius: 4px; padding: 1px 5px;
}
.slide pre {
  font-family: var(--font-mono); font-size: calc(13.5px * var(--fs, 1)); line-height: 1.62;
  background: #f4fbfc; border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-accent);
  border-radius: 6px; padding: 10px 14px; margin: 9px 0;
  overflow-x: auto; white-space: pre; color: #06303a;
}
.slide pre code { background: transparent; padding: 0; font-size: calc(13.5px * var(--fs, 1)); color: inherit; }
/* 长代码块（Gaussian 输入、命令行）是单页里最占高度的一块。
   紧凑页上先收 line-height 再收字号，比直接压缩正文更不影响可读性。 */
.slide.tight pre { font-size: calc(12.5px * var(--fs, 1)); line-height: 1.45; padding: 7px 11px; margin: 6px 0; }
.slide.tight pre code { font-size: calc(12.5px * var(--fs, 1)); }
.slide pre .cm { color: #6f8f99; }                     /* 注释行 */
.slide pre .kw { color: #0b6b7d; font-weight: 700; }    /* 命令名 */

/* 单行 URL / 命令条：深紫底、浅紫字，用于「下载地址」这类需要一眼看到的字符串 */
.urlline {
  font-family: var(--font-mono); font-size: calc(14px * var(--fs, 1)); line-height: 1.7;
  background: #06303a; color: #e2f3f7;
  border-radius: 6px; padding: 8px 14px; margin: 9px 0;
  overflow-x: auto; white-space: nowrap;
}
.urlline a { color: #b6e0e9; text-decoration: none; border-bottom: 1px dashed #1b93a8; }
.urlline .lbk { color: #7fa3ad; margin-right: 8px; }

/* 代码 + 说明并排 */
.code2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; margin: 8px 0; }
@media (max-width: 900px) { .code2 { grid-template-columns: 1fr; } }
.code2 pre { margin: 0; }

/* 两个公式并排：用于「微分方程 ↔ 它的差分近似」这类左右对照，
   比上下堆叠省一整个公式块的高度（长公式页的收档手段）。 */
.fml2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; margin: 7px 0; }
@media (max-width: 900px) { .fml2 { grid-template-columns: 1fr; } }
.fml2 .fml2-lb { font-size: calc(12.5px * var(--fs, 1)); line-height: 1.35; color: #4a6b76; margin: 0 0 2px; }
.slide .fml2 .formula, .slide.tight .fml2 .formula { margin: 0; }
/* grid 子项默认 min-width:auto，会被长公式撑开导致整页横向滚动；
   置零后 formula 自带的 overflow-x:auto 才能生效。同样适用于 .code2。 */
.fml2 > div, .code2 > div, .mrow > div { min-width: 0; }

/* tight 页上的代码块再收一档 */
.slide.tight pre { font-size: calc(12.8px * var(--fs, 1)); line-height: 1.58; padding: 8px 12px; margin: 6px 0; }
.slide.tight pre code { font-size: calc(12.8px * var(--fs, 1)); }
.slide.tight .urlline { font-size: calc(13.5px * var(--fs, 1)); padding: 6px 12px; margin: 6px 0; }

/* ---------- 案例下载条（讲义 → 案例库）----------
   讲义里出现的脚本都在 examples/ 下按编号备好，这一条给出直达链接，
   使放映模式下也能直接把文件取走。 */
.dlbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin: 9px 0 0; padding: 7px 14px;
  font-size: calc(14px * var(--fs, 1)); line-height: 1.6; color: #245460;
  background: #eff7f9; border: 1px solid var(--color-border); border-radius: 8px;
}
.dlbar .lbk2 { font-weight: 700; color: #0e4d5c; letter-spacing: .04em; }
.dlbar a {
  color: #0e4d5c; font-weight: 600; text-decoration: none;
  background: #fff; border: 1px solid #cfe9ee; border-radius: 20px;
  padding: 1px 12px; font-size: calc(13.5px * var(--fs, 1));
  transition: background .16s, color .16s, border-color .16s;
}
.dlbar a:hover { background: #0e4d5c; color: #fff; border-color: #0e4d5c; }
.slide.tight .dlbar { font-size: calc(13px * var(--fs, 1)); padding: 5px 12px; margin: 6px 0 0; gap: 7px; }
.slide.tight .dlbar a { font-size: calc(13px * var(--fs, 1)); padding: 1px 11px; }

/* ---------- GUI 菜单截图：左图右表 ----------
   三张截图的原始尺寸约 925x494，有效信息是左侧展开的下拉菜单面板
   （File 233x275、Run 513x273、View 506x197 像素），其余是编辑器正文。
   这里把图片等比缩到 80%（菜单文字 14px→11.2px，投影仍清晰）后放进固定
   尺寸容器，容器只露出菜单那一块；若按整图缩放则文字会缩到 7px 以下。
   列宽刻意压窄：余下的宽度留给右侧表格，表格越宽「作用」列折行越少。 */
.mrow {
  display: grid; grid-template-columns: 435px 1fr; gap: 22px;
  align-items: start; margin: 8px 0 6px;
}
.mrow.narrow { grid-template-columns: 310px 1fr; }
@media (max-width: 900px) { .mrow, .mrow.narrow { grid-template-columns: 1fr; } }
.mcgui {
  box-sizing: border-box; width: 100%; overflow: hidden; background: #fff;
  border: 1px solid var(--color-border); border-radius: 6px;
  box-shadow: var(--shadow-sm);
}
.mcgui img { display: block; width: 740px; max-width: none; height: auto; }
.mcgui.mc-file { height: 230px; }
.mcgui.mc-run  { height: 228px; }
.mcgui.mc-view { height: 168px; }
.mrow .mccap {
  font-size: calc(12px * var(--fs, 1)); color: var(--color-muted); text-align: center;
  margin: 6px 0 0; line-height: 1.5;
}

/* 菜单速查表：前两列按内容收紧，余量全部留给「作用」列 */
table.tbl.menu th:nth-child(1), table.tbl.menu td:nth-child(1) { width: 1%; white-space: nowrap; }
table.tbl.menu th:nth-child(2), table.tbl.menu td:nth-child(2) { width: 1%; white-space: nowrap; }
table.tbl.menu code { font-size: calc(12.5px * var(--fs, 1)); }