/* ============================================================
   概率论与数理统计 · HTML 课件设计系统
   13 讲共用。禁止在页面内写内联样式，一切视觉走本文件的类。
   组件清单见 spec §6.1 / §6.2。
   ============================================================ */

:root {
  /* —— 配色 —— */
  --c-ink:        #1a2332;   /* 正文 */
  --c-ink-soft:   #475569;   /* 次要文字 */
  --c-muted:      #64748b;   /* 说明、来源 */
  --c-paper:      #ffffff;
  --c-primary:    #0d4a8b;   /* 复旦蓝，标题与强调 */

  --c-block-fg:   #1e40af;   --c-block-bg:   #eff6ff;  --c-block-br:   #3b82f6;
  --c-insight-fg: #065f46;   --c-insight-bg: #ecfdf5;  --c-insight-br: #10b981;
  --c-alert-fg:   #9a3412;   --c-alert-bg:   #fff7ed;  --c-alert-br:   #f97316;
  --c-thm-fg:     #5b21b6;   --c-thm-bg:     #f5f3ff;  --c-thm-br:     #8b5cf6;
  --c-recap-fg:   #334155;   --c-recap-bg:   #f1f5f9;  --c-recap-br:   #94a3b8;

  /* —— 排版 —— */
  --c-font: "PingFang SC", "Microsoft YaHei", "Source Han Sans SC",
            "Noto Sans SC", "CourseFallbackSC", sans-serif;
  --c-lh: 1.6;               /* 中文正文行高 */
  --c-ls: 0.015em;           /* 中文字距 */
  --c-radius: 10px;
  --c-gap: 0.62em;
}

/* 离线包兜底字体子集（spec §4.3）。
   注意：本计划不生成这个文件 —— 字体子集要按全 13 讲的用字集合裁剪，
   只有第 1 讲时裁出来的会缺字，故留到第二份计划的最后一步。
   在此之前浏览器会对它报一次 404，因为 font-display:swap 且它排在字体栈末位，
   系统字体先命中，观感无任何影响。这个 404 是预期的。 */
@font-face {
  font-family: "CourseFallbackSC";
  src: url("../vendor/fonts/course-subset.woff2") format("woff2");
  font-display: swap;
}

/* ============================================================
   1. reveal 基础覆盖
   reveal 默认居中且全大写，对中文教学不合适，全部改掉。
   ============================================================ */

.reveal {
  font-family: var(--c-font);
  font-size: 26px;
  color: var(--c-ink);
  letter-spacing: var(--c-ls);
}

.reveal .slides { text-align: left; }

.reveal .slides section {
  height: 100%;
  padding: 0.3em 0.2em;
  box-sizing: border-box;
}

.reveal h1, .reveal h2, .reveal h3, .reveal h4 {
  font-family: var(--c-font);
  color: var(--c-primary);
  text-transform: none;      /* reveal 默认 uppercase，中文下必须关掉 */
  letter-spacing: var(--c-ls);
  line-height: 1.3;
  margin: 0 0 0.42em;
  text-shadow: none;
}

.reveal h1 { font-size: 1.9em; }
.reveal h2 { font-size: 1.3em; }    /* frametitle 用这一级 */
.reveal h3 { font-size: 1.15em; }

.reveal p, .reveal li { line-height: var(--c-lh); }
.reveal ul, .reveal ol { margin-left: 1.1em; }
.reveal ul ul, .reveal ol ol { font-size: 0.92em; margin-top: 0.22em; }
.reveal li { margin-bottom: 0.22em; }
.reveal strong { color: var(--c-primary); font-weight: 700; }

/* 中文字体没有真正的斜体字形，浏览器会做「合成倾斜」，在投影上观感很差。
   em 一律不倾斜，改用颜色 + 轻微字距来区分（引用题干、术语首次出现等场景）。
   规则不能限定在 .reveal 内 —— 教师笔记页不在 .reveal 里，也需要同样处理。 */
em {
  font-style: normal;
  color: var(--c-ink-soft);
  letter-spacing: 0.04em;
}

/* 西文书名、期刊名等确实需要斜体的场合，用 .latin-italic 显式声明 */
.latin-italic { font-style: italic; letter-spacing: normal; }
.reveal a { color: var(--c-block-fg); text-decoration: underline; }

/* 中文与行内公式的基线对齐 —— KaTeX 默认略微上浮 */
.reveal .katex { font-size: 1.02em; vertical-align: -0.06em; }
.reveal .katex-display { margin: 0.5em 0; }

/* 页码与页脚 */
.reveal .slide-number {
  font-size: 0.42em; color: var(--c-muted);
  background: transparent; right: 16px; bottom: 12px;
}

/* ============================================================
   2. 语义块（对应 Beamer 的 block / exampleblock / alertblock）
   ============================================================ */

.c-block, .c-insight, .c-alert, .c-theorem, .c-recap,
.c-hook, .c-roadmap, .c-checkpoint, .c-bridge, .c-summary {
  border-left: 5px solid;
  border-radius: var(--c-radius);
  padding: 0.5em 0.8em;
  margin: var(--c-gap) 0;
}

.c-block   { background: var(--c-block-bg);   border-color: var(--c-block-br);   }
.c-insight { background: var(--c-insight-bg); border-color: var(--c-insight-br); }
.c-alert   { background: var(--c-alert-bg);   border-color: var(--c-alert-br);   }
.c-theorem { background: var(--c-thm-bg);     border-color: var(--c-thm-br);     }
.c-recap   { background: var(--c-recap-bg);   border-color: var(--c-recap-br);   }

/* 每个块的小标题 */
.c-block   > .c-title { color: var(--c-block-fg);   }
.c-insight > .c-title { color: var(--c-insight-fg); }
.c-alert   > .c-title { color: var(--c-alert-fg);   }
.c-theorem > .c-title { color: var(--c-thm-fg);     }
.c-recap   > .c-title { color: var(--c-recap-fg);   }

.c-title {
  display: block;
  font-weight: 700;
  font-size: 0.92em;
  margin-bottom: 0.28em;
}

.c-block > *:last-child,
.c-insight > *:last-child,
.c-alert > *:last-child,
.c-theorem > *:last-child { margin-bottom: 0; }

/* 高密度页：把块间距、行距与公式间距再收一档。
   源讲义有些 frame 天生就装得多（定理 + 两道例题 + 一条提醒），
   拆成两页会打断讲课节奏，而逐页写内联 style 是被禁止的——
   所以给一个可以显式声明的密度档。加在 <section class="c-dense"> 上。
   ⚠️ 它只改间距、不改字号：字号一动，公式与正文的比例就乱了。 */
.c-dense .c-block, .c-dense .c-insight, .c-dense .c-alert,
.c-dense .c-theorem, .c-dense .c-recap, .c-dense .c-hook,
.c-dense .c-roadmap, .c-dense .c-checkpoint, .c-dense .c-bridge,
.c-dense .c-summary { padding: 0.38em 0.7em; margin: 0.4em 0; }
.c-dense p { margin: 0.35em 0; }
.c-dense li { margin-bottom: 0.1em; }
.c-dense .katex-display { margin: 0.32em 0; }
.c-dense .c-title { margin-bottom: 0.2em; }
.c-dense .c-table { margin: 0.35em 0; }
.c-dense .c-table th, .c-dense .c-table td { padding: 0.28em 0.5em; }

/* 定理块的「证明」折叠钮 */
.c-theorem details { margin-top: 0.5em; font-size: 0.9em; }
.c-theorem summary {
  cursor: pointer; color: var(--c-thm-fg);
  font-weight: 600; outline: none;
}
.c-theorem details[open] summary { margin-bottom: 0.4em; }

/* ============================================================
   3. 叙事骨架组件（spec §6.5）
   ============================================================ */

.c-hook     { background: #fffbeb; border-color: #f59e0b; }
.c-roadmap  { background: #f8fafc; border-color: var(--c-primary); }
.c-checkpoint { background: var(--c-insight-bg); border-color: var(--c-insight-br); }
.c-bridge   { background: #f8fafc; border-color: #cbd5e1; font-style: normal; }
.c-summary  { background: #f8fafc; border-color: var(--c-primary); }

/* c-hook 的三拍：场景 / 冲突 / 悬念 */
.c-beat { margin: 0.55em 0; }
.c-beat > .c-beat-label {
  display: inline-block;
  min-width: 3.4em;
  font-weight: 700;
  color: var(--c-alert-fg);
  margin-right: 0.5em;
}
.c-beat--suspense { font-size: 1.06em; font-weight: 600; color: var(--c-primary); }

/* c-roadmap 的里程碑 */
.c-milestones { list-style: none; margin-left: 0; counter-reset: ms; }
.c-milestones > li {
  counter-increment: ms;
  padding-left: 2em;
  position: relative;
}
.c-milestones > li::before {
  content: counter(ms);
  position: absolute; left: 0; top: 0.15em;
  width: 1.45em; height: 1.45em; line-height: 1.45em;
  text-align: center; border-radius: 50%;
  background: var(--c-primary); color: #fff;
  font-size: 0.72em; font-weight: 700;
}

/* ============================================================
   4. 版面组件
   ============================================================ */

.c-cols { display: flex; gap: 1.1em; align-items: flex-start; }
.c-cols > * { flex: 1 1 0; min-width: 0; }
.c-cols--wide-left  > *:first-child { flex: 2 1 0; }
.c-cols--wide-right > *:last-child  { flex: 2 1 0; }

.c-fig { margin: var(--c-gap) auto; text-align: center; }
.c-fig img {
  max-width: 100%; max-height: 62vh;
  border-radius: var(--c-radius);
  box-shadow: 0 2px 10px rgb(0 0 0 / 0.09);
}
.c-fig figcaption {
  font-size: 0.72em; color: var(--c-muted);
  margin-top: 0.45em; line-height: 1.5;
}

.c-table {
  border-collapse: collapse;
  width: 100%;
  font-size: 0.88em;
  margin: var(--c-gap) 0;
}
.c-table th, .c-table td {
  border: 1px solid #cbd5e1;
  padding: 0.4em 0.6em;
  text-align: left;
}
.c-table th { background: var(--c-block-bg); color: var(--c-block-fg); font-weight: 700; }
/* 表格里需要标红的格子（如两类错误表中「出错」的那两格）。
   不用内联 style，也不要为此新造一整个表格变体。 */
.c-table td.c-cell-bad { background: var(--c-alert-bg); color: var(--c-alert-fg); font-weight: 600; }

/* 来源标注 */
.c-source { font-size: 0.62em; color: var(--c-muted); margin-top: 0.7em; }
.c-source summary { cursor: pointer; }
.c-source a { color: var(--c-muted); }
.c-source--adapted { color: var(--c-alert-fg); font-weight: 600; }

/* ============================================================
   5. 交互嵌入
   ============================================================ */

/* 交互 demo 的嵌入：内部视口做宽 + 整体缩放
   ────────────────────────────────────────────────────────────────
   两个坑叠在一起，必须一起解：

   1) 高度不能用 vh。reveal 把 1280×720 的画布 transform 缩放到屏幕，而 vh 按
      真实视口解析，两者不在一个坐标系里——同一份 CSS 在不同分辨率的电脑上
      得到的实际高度完全不同，这就是「有的电脑显示不全」的来源。

   2) demo 用的是 Tailwind 响应式栅格（lg:grid-cols-2 之类），断点按 iframe
      自身的视口宽度算。半栏 iframe 只有 ~600px 宽，永远触发不了 lg 断点，
      于是画布与控制面板永远上下堆叠，内容高度 900–1600px，塞进 400 多 px
      的框里只能看见顶部一条。

   解法：把 iframe 元素做成 1150×800（超过 lg 断点 1024px，栅格转为左右布局），
   再整体 scale 到幻灯片放得下的尺寸。外层 .c-demo-wrap 负责裁切与定位。
   需要看细节时点「全屏」，那时取消缩放、恢复 100%。 */

.c-demo-wrap {
  position: relative;
  height: 449px;
  overflow: hidden;
  border: 1px solid #cbd5e1;
  border-radius: var(--c-radius);
  background: #f8fafc;
}

/* 内部视口 1080px：实测这是让 demo 栅格转为左右布局所需的最小宽度
   （1040px 时 venn 仍为 909px 高，1080px 降到 802px，再宽无收益）。
   宽度取最小值，缩放比就能取最大，按钮文字最清楚。 */
.c-demo-wrap .c-demo-frame {
  position: absolute; top: 0; left: 0;
  width: 1080px;
  height: 810px;
  border: 0;
  transform: scale(0.554);     /* 1080×0.554 ≈ 598px 正好一栏；810×0.554 ≈ 449px */
  transform-origin: top left;
}

/* 打印用静态占位（屏幕隐藏，打印显示）—— 与 print-deck.css 配合 */
.print-only { display: none; }
.c-demo-url {
  font-family: ui-monospace, "SF Mono", Consolas, monospace;
  font-size: 0.62em;
  color: var(--c-muted);
  word-break: break-all;
}

/* ============================================================
   6. 放映导航（返回首页 / 缩略图侧栏）
   仅屏幕放映时出现，打印版由 print-deck.css 隐藏。
   ============================================================ */

.c-navbar {
  position: fixed; top: 10px; left: 12px; z-index: 40;
  display: flex; gap: 6px;
  opacity: 0.25; transition: opacity .18s;
}
.c-navbar:hover { opacity: 1; }

.c-nav-btn {
  font-family: var(--c-font);
  font-size: 13px; line-height: 1;
  padding: 6px 10px;
  border: 1px solid #cbd5e1; border-radius: 7px;
  background: rgb(255 255 255 / .92); color: var(--c-ink-soft);
  text-decoration: none; cursor: pointer;
}
.c-nav-btn:hover { background: #fff; color: var(--c-primary); border-color: var(--c-primary); }

/* —— 左侧缩略图栏 —— */
.c-rail {
  position: fixed; top: 0; left: 0; bottom: 0; z-index: 39;
  width: 260px; padding: 44px 0 12px;
  background: rgb(248 250 252 / .97);
  border-right: 1px solid #cbd5e1;
  overflow-y: auto;
  transform: translateX(-100%);
  transition: transform .2s ease;
}
body.c-rail-open .c-rail { transform: none; }
body.c-rail-open .reveal { padding-left: 260px; box-sizing: border-box; }

.c-rail-title {
  font-family: var(--c-font); font-size: 12px; font-weight: 700;
  color: var(--c-muted); letter-spacing: .08em;
  padding: 0 14px 8px;
}
.c-rail-list { list-style: none; margin: 0; padding: 0; }

.c-rail-item {
  display: flex; gap: 8px; align-items: baseline;
  width: 100%; text-align: left;
  font-family: var(--c-font); font-size: 13px; line-height: 1.45;
  padding: 7px 14px;
  background: none; border: 0; border-left: 3px solid transparent;
  color: var(--c-ink-soft); cursor: pointer;
}
.c-rail-item:hover { background: #eef2f7; color: var(--c-ink); }
.c-rail-item.is-current {
  background: var(--c-block-bg);
  border-left-color: var(--c-primary);
  color: var(--c-primary); font-weight: 700;
}
.c-rail-no {
  flex: 0 0 1.8em; text-align: right;
  font-size: 11px; color: var(--c-muted);
}
.c-rail-item.is-current .c-rail-no { color: var(--c-primary); }
.c-rail-label { flex: 1 1 auto; }

/* —— 全屏按钮 —— */
.c-demo-full {
  position: absolute; top: 6px; right: 6px; z-index: 5;
  font-family: var(--c-font); font-size: 12px; line-height: 1;
  padding: 5px 9px;
  border: 1px solid #cbd5e1; border-radius: 6px;
  background: rgb(255 255 255 / .93); color: var(--c-ink-soft);
  cursor: pointer; opacity: .55; transition: opacity .15s;
}
.c-demo-wrap:hover .c-demo-full { opacity: 1; }
.c-demo-full:hover { color: var(--c-primary); border-color: var(--c-primary); }

/* 全屏态：盖住整个视口 */
.c-demo-wrap.is-full {
  position: fixed; inset: 0; z-index: 60;
  height: auto; overflow: visible;
  background: #fff; padding: 0; border: 0; border-radius: 0;
}
.c-demo-wrap.is-full .c-demo-frame {
  position: static;
  width: 100%; height: 100%;
  transform: none;            /* 全屏时取消缩放，恢复原始尺寸 */
  border: 0; border-radius: 0;
}
.c-demo-wrap.is-full .c-demo-full { opacity: 1; }