/* ---------------------------------------------------------------------------
   本站的视觉微调。字体定义在 fonts.css，这里只放间距、排版一类的覆盖。

   这些都是对 Material 默认值的覆盖，不是新增功能。想调整时直接改下面的
   数字即可，改完存盘预览站会自动刷新。
   --------------------------------------------------------------------------- */

/* ---------------------------------------------------------------------------
   加大章节之间的留白

   Material 的默认值（h2 上边距 1.6em、hr 上下各 1.5em）在长教程里偏紧，
   章节之间容易糊成一片，学生滚动时不好判断「这是一个新的部分」。

   注意 CSS 的 margin 折叠规则：相邻元素的上下 margin 不会相加，而是取
   较大者。所以分隔线的下边距和标题的上边距叠加后取较大者，而不是相加。

   调数值前先看这个换算表（浏览器默认 16px 字号时）：

       .md-typeset 基准字号 = 0.8rem   = 12.8px
       h2 的字号 = 1.5625em = 20px  → h2 上的 1em ≈ 20px
       h3 的字号 = 1.25em   = 16px  → h3 上的 1em ≈ 16px
       hr 继承基准字号      = 12.8px → hr 上的 1em ≈ 12.8px

   em 是相对「元素自己的字号」算的，所以同样是 1em，写在 h2 上和写在 hr
   上差了将近一倍 —— 这是最容易估错的地方。
   --------------------------------------------------------------------------- */

.md-typeset h2 {
  margin-top: 3.5em; /* ≈ 70px */
  /* 横线到下方正文的距离。Material 默认是 .64em（≈ 12.8px），对带横线的
     标题来说偏紧，横线会贴着下一段文字。这里放到 1em（≈ 20px）。 */
  margin-bottom: 1em;
  padding-top: 0.2em;
  /* 标题下方的横线。用 border-bottom 而不是给文字加 text-decoration:
     前者横跨整个内容宽度，起的是分割作用；后者只贴着文字走，没法承担
     章节分隔的职责。 */
  padding-bottom: 0.4em; /* 文字与横线之间留一点空隙 */
  border-bottom: 0.05rem solid var(--md-default-fg-color--lighter);
}

/* 注：Material 自己的 hr 用的是 --md-default-fg-color--lightest，比这里更淡。
   那条线在暗色主题下几乎看不见，而这里要的是能读出层级的结构线，
   所以用亮一档的 --lighter。嫌重就换成 --lightest。 */

.md-typeset h3 {
  margin-top: 2.8em; /* ≈ 45px */
}

.md-typeset h4 {
  margin-top: 2em; /* ≈ 32px */
}

/* ---------------------------------------------------------------------------
   所有标题统一加粗

   Material 默认的字重方案是「字号越大越细」：h1 / h2 都是 300，h3 是 400，
   h4 以下才用 700。这套在英文排版里显得轻盈，但对中文有个副作用 ——

   Roboto 不含汉字，中文由系统字体渲染，而多数中文字体没有 Light 字重，
   浏览器只能拿常规体顶上。于是同一行标题里，英文部分是细体、中文部分是
   常规体，粗细对不上。统一成 700 之后两边都是明确的一档。

   覆盖 h1~h3 即可，h4~h6 在 Material 里本来就已经是 700。
   层级改由字号区分：h1 = 2em、h2 = 1.5625em、h3 = 1.25em。

   注：Roboto 只加载了 300 / 400 / 700 三档，没有 500 / 600，所以「半粗」
   实际会回落到 700。
   --------------------------------------------------------------------------- */

.md-typeset h1,
.md-typeset h2,
.md-typeset h3 {
  font-weight: 700;
}

/* ---------------------------------------------------------------------------
   正文行高与段落间距

   Material 默认的段落间距是 1em。中文没有西文的词间空格，行与行更容易
   糊在一起，把行高稍微拉开一点可读性会好很多。
   --------------------------------------------------------------------------- */

.md-typeset {
  line-height: 1.75;
}

.md-typeset p {
  margin: 1.2em 0;
}

/* 列表项之间也稍微拉开，避免密集的条目连成一片 */
.md-typeset li {
  margin-bottom: 0.35em;
}

/* ---------------------------------------------------------------------------
   右侧目录（TOC）加宽、字号收小

   Material 默认给侧边栏 12.1rem 宽、导航字号 .7rem。中文标题本来就长，
   加上章节编号（「4.2 配置网络代理（可选）」）后经常折成两行，目录看起来
   很碎。加宽 + 收小字号两边一起使劲，容量约提升 24%。

   注意两个选择器都是左右共用的，必须限定到右侧：
     .md-sidebar            → 左右侧边栏都是这个类
     .md-sidebar--secondary → 只有右侧目录
     .md-nav                → 左右导航都是这个类
     .md-nav--primary       → 左侧站点导航
     .md-nav--secondary     → 右侧目录

   字号那条要连嵌套的 .md-nav 一起写：Material 给每个 .md-nav 都单独设了
   .7rem，只改最外层的话，子条目会因为自己的 .md-nav 规则而保持原大小。
   --------------------------------------------------------------------------- */

.md-sidebar--secondary {
  width: 15rem; /* 12.1rem → 加宽约 24% */
}

.md-nav--secondary,
.md-nav--secondary .md-nav {
  font-size: 0.65rem; /* .7rem → 收小约 7% */
}

/* ---------------------------------------------------------------------------
   侧边栏滚动条：取消悬停时的高亮

   Material 给滚动条设了三段状态，常态是淡色，但鼠标移上去（以及键盘聚焦）
   会换成 --md-accent-fg-color —— 在本站是 indigo，一个饱和的靛蓝，在暗色
   背景上非常刺眼。这里把所有状态都钉回常态的淡色，等于取消悬停反馈。

   两套写法都要覆盖，因为它们是不同的标准：
     scrollbar-color       Firefox
     ::-webkit-scrollbar   Chrome / Edge / Safari
   --------------------------------------------------------------------------- */

.md-sidebar__scrollwrap,
.md-sidebar__scrollwrap:focus-within,
.md-sidebar__scrollwrap:hover {
  scrollbar-color: var(--md-default-fg-color--lighter) #0000;
}

.md-sidebar__scrollwrap::-webkit-scrollbar-thumb,
.md-sidebar__scrollwrap:focus-within::-webkit-scrollbar-thumb,
.md-sidebar__scrollwrap:hover::-webkit-scrollbar-thumb,
.md-sidebar__scrollwrap:focus-within::-webkit-scrollbar-thumb:hover,
.md-sidebar__scrollwrap:hover::-webkit-scrollbar-thumb:hover {
  background-color: var(--md-default-fg-color--lighter);
}

/* ---------------------------------------------------------------------------
   大标题下方的小字（负责助教 / 实验课时间）

   用法：每项用一个 <span> 包起来，整行放在 <p class="doc-meta"> 里：

       <p class="doc-meta"><span>负责助教：<strong>曹奕伦</strong></span><span>实验课时间：<strong>2026-9-16</strong></span></p>

   之所以用 flex 而不是在 Markdown 里打空格：空格的宽度看不见也数不清，
   改起来全靠猜。flex 的 gap 是一个明确的数字，想调多宽就改一个值。

   样式做成「小一号 + 淡一档」，让它读起来像标题的附注而不是正文。

   margin-top 是负值：Material 给 h1 设了 1.25em 的下边距（约 32px），
   不减掉的话小字会离标题很远，看起来像独立的一段。
   --------------------------------------------------------------------------- */

.md-typeset .doc-meta {
  display: flex;
  flex-wrap: wrap; /* 窄屏放不下时自动换行，不会挤成一团 */
  gap: 0.3rem 1.8rem; /* 行间距 0.3rem，两项之间 1.8rem ← 只改这个数字 */
  font-size: 0.72rem; /* 正文是 0.8rem，收小一档 */
  color: var(--md-default-fg-color--light);
  margin-top: -1em;
  /* 下边距特意留小：紧跟其后的是「最后更新」提示（见下方 .doc-updated），
     两行小字属于同一组元信息，应该贴近。两者之间的空隙由这条 margin 决定，
     与正文的距离则由 .doc-updated 的下边距负责。 */
  margin-bottom: 0.4em;
}

/* ---------------------------------------------------------------------------
   页顶的「最后更新」提示

   日期由 hooks/revision_notice.py 插到标题下方（排在 .doc-meta 之后），
   这里只管样式。文案在 hook 文件里改。
   --------------------------------------------------------------------------- */

.md-typeset .doc-updated {
  font-size: 0.72rem; /* 与 .doc-meta 同字号，视觉上归为一组 */
  color: var(--md-default-fg-color--light);
  margin-top: 0; /* 与 .doc-meta 的下边距折叠，取较大者 */
  margin-bottom: 2em; /* 与正文拉开距离 */
}

/* 隐藏页脚原本的「最后更新」——已经移到页顶，不隐藏会显示两次。
   Material 只用到这个 aside 的日期部分（没配 repo_url，不含源码链接），
   整块隐藏没有副作用。 */
.md-source-file {
  display: none;
}

/* ---------------------------------------------------------------------------
   首页底部的源码仓库卡片

   为什么不用 shields.io / github-readme-stats 那类徽章：
   本站启用了 privacy 插件，构建时会把外链图片抓成本地副本 —— 徽章会被冻结
   成构建那一刻的样子，star 数变成一张静态图，还不如不放；更麻烦的是构建跑在
   --strict 下，这类第三方服务一旦抽风就会让构建失败、把整个部署卡住。
   所以这里纯 CSS 画一张，不依赖任何外部服务。

   卡片也特意不显示 star / fork 数：那要么再引入一个外部接口（同样的问题），
   要么构建时去问 GitHub API（每次 push 都多一个能搞挂部署的环节）。
   --------------------------------------------------------------------------- */

.md-typeset .repo-card {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  margin-top: 1.5em;
  padding: 1.1rem 1.3rem;
  /* 左边一道主色竖条当地标。用 border-left 而不是另外塞一个 div，
     省一层结构，也保证它一定顺着卡片圆角走。 */
  border: 0.05rem solid var(--md-default-fg-color--lightest);
  border-left: 0.2rem solid var(--md-primary-fg-color);
  border-radius: 0.3rem;
  background-color: var(--md-code-bg-color);
}

/* flex: none 是关键：仓库名比较长，默认的 flex-shrink 会把图标压扁 */
.md-typeset .repo-card__logo {
  flex: none;
  width: 1.5rem;
  height: 1.5rem;
  margin-top: 0.15rem; /* 跟右侧第一行文字的视觉中心对齐 */
  fill: var(--md-default-fg-color--light);
}

.md-typeset .repo-card__name {
  font-family: var(--md-code-font-family);
  font-weight: 700;
}

.md-typeset .repo-card__desc {
  margin: 0.35em 0 0; /* 段落默认上下都有 margin，这里只要一点上间距 */
  font-size: 0.85em;
  color: var(--md-default-fg-color--light);
}