/* ===========================================================================
   自定义样式 —— 覆盖 DocFX modern 模板
   由 docfx.json 的 build.template 数组引入（"template" 指向本目录）
   基础模板样式在 public/docfx.min.css，本文件在其之后加载，用于增量覆盖。
   =========================================================================== */

:root {
  /* 主题图标：复制自 BasicTheme 的 wwwroot/svg（menu-group.svg / menu-leaf.svg）。
     它们是**多色渐变**图标，必须用 background-image 才能保留颜色；
     若用 mask，CSS 只取 alpha，渐变会全部丢掉变成单色块。 */
  --menu-group-icon: url("menu-group.svg");
  /* 叶子图标：当前未使用。左侧导航的文档已改为编号，顶部导航的文档项也不显示图标。
     需要恢复时，在对应的 ::before 里引用本变量即可。 */
  --menu-leaf-icon: url("menu-leaf.svg");

  /* 左侧导航栏宽度（模板默认由 flex 比例算出来，约 236px，长标题会频繁折行） */
  --toc-width: 320px;

  /* 左侧导航「标记列」：文件夹图标与文档编号共用同一列宽与同一右边距，
     这样图标、编号、后面的文字在视觉上都是对齐的。 */
  --toc-marker-width: 1.4em;
  --toc-marker-gap: 3px;

  /* 编号与标题之间的实际间距。从标记列宽度里「借」出来，
     保证 宽度 + 边距 的合计不变（否则标题起点会和文件夹图标行错开）。 */
  --toc-num-gap: 5px;

  /* 编号列宽度 = 标记列 - 借给间距的那部分。编号与 home 图标共用它。 */
  --toc-num-width: calc(var(--toc-marker-width) + var(--toc-marker-gap) - var(--toc-num-gap));
}

/* ---------------------------------------------------------------------------
   左侧导航：分组节点（含子文档的目录）与普通文档链接区分
   DocFX 会给这类节点的 <li> 加上 expander / expanded 类，
   模板自带展开箭头，这里再补一个文件夹图标 + 加粗。
   --------------------------------------------------------------------------- */
/* 分组节点：文件夹图标，占用整个标记列并居中 */
.toc li.expander > a::before {
  content: "";
  display: inline-block;
  width: var(--toc-marker-width);
  height: 1em;
  margin-right: var(--toc-marker-gap);
  flex-shrink: 0;
  vertical-align: -2px;
  background: transparent var(--menu-group-icon) center / contain no-repeat;
}

/* ---------------------------------------------------------------------------
   去掉分组节点的「展开/折叠箭头」
   模板把箭头画在 .expand-stub 的 ::before 上：bootstrap-icons 字形 + **position: absolute**。
   绝对定位盒子的静态位置，是按 li 的 padding / text-indent 推算出来的 ——
   我们为了折行悬挂缩进恰好改了这两个值，箭头就摆歪了（跟文件夹图标叠在一起）。
   直接不显示。展开/折叠是挂在分组节点的 <a> 上的（实测 a.click() 能正常展开收起），
   不依赖这个箭头。
   --------------------------------------------------------------------------- */
.toc li.expander > .expand-stub {
  display: none;
}

/* 叶子节点的自动编号（编号由 public/main.js 注入，见该文件顶部的 NUMBERING 开关）
   宽度 + 右边距的合计与文件夹图标列严格相等，否则标题起点会差几个像素。

   ⚠️ `text-indent: 0` 不能省！text-indent 是**可继承**属性，下面给 li 加的折行悬挂缩进
      （-22.6px）会一路继承进 .toc-num —— 它是个 inline-block，内部自成行盒，
      于是数字被从自己的列里又往左推 7px+，看上去就是「编号离标题隔老远」。
      实测：数字字形左边缘比所属列左边缘还多出 7.3px（溢出到列外）。

   对齐方式：右对齐。这样 1./2. 与 10./11. 的右边缘对齐，与标题的间距恒定；
   用 center 的话，位数不同时会白白多出一截空白（这就是最初看上去很宽的原因之一）。 */
.toc .toc-num,
.toc .toc-home-icon {
  display: inline-block;
  width: var(--toc-num-width);
  margin-right: var(--toc-num-gap);
  text-indent: 0;
}

.toc .toc-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  opacity: 0.55;
}

/* 分区首页的 home 图标（main.js 的 markSectionHome 注入）。
   用模板自带的 bootstrap-icons 字体 —— 与上一页/下一页的箭头是同一套图标，
   不用另做 SVG。图标居中排在编号列里，右边距与编号一致。 */
.toc .toc-home-icon {
  text-align: center;
  color: #1677ff;
}

/* 图标字形的垂直对齐：与文件夹图标的 -2px 对齐，避免看着比同行文字偏低 */
.toc .toc-home-icon .bi::before {
  vertical-align: -2px;
}

/* 字形与配色：要与分组的文件夹图标（menu-group.svg）**重量一致**。
   ⚠️ 必须用**实心**款 bi-house-door-fill（main.js 里写死）。
      bi-house / bi-house-door 是线性描边款，放在实心文件夹旁边明显「淡、薄」，风格不统一。
   ⚠️ 颜色用与文件夹**完全相同**的蓝色渐变（menu-group.svg 就是 #1677ff → #69b1ff），
      靠 background-clip: text 把渐变裁进字形里；不支持时自动回退成上面的纯色 #1677ff。
   ⚠️ 选择器写两处：字形是 ::before 的内容（标准用法是挂在 ::before 上），
      但实测挂在父级 <i> 上也能裁到字形 —— 两个都写上，避开浏览器差异。 */
@supports ((background-clip: text) or (-webkit-background-clip: text)) {
  .toc .toc-home-icon .bi,
  .toc .toc-home-icon .bi::before {
    background-image: linear-gradient(135deg, #1677ff, #69b1ff);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}

.toc li.expander > a {
  font-weight: 600;
}

/* ---------------------------------------------------------------------------
   顶部导航栏：只有目录项加文件夹图标，文档项不加（与左侧导航不同）
   nav-folder 类由 public/main.js 依据 toc.json 中的 tocHref 判断后添加。

   ⚠️ 这里**故意不用**左侧导航那个多色文件夹（--menu-group-icon）：
      顶栏是全局导航，彩色图标在上面太抢眼，会和正文抢注意力。
      改用 bootstrap-icons 的**纯灰**文件夹（bi-folder2，码位 \f3d9）——
      单色、低调，并且与左侧导航的多色图标明显区分开。
      （左侧导航保持多色，因为它承担「分组 vs 文档」的信息区分。）
   --------------------------------------------------------------------------- */
.navbar a.nav-link.nav-folder::before {
  content: "\f3d9";              /* bootstrap-icons: bi-folder2 */
  font-family: bootstrap-icons;
  margin-right: 5px;
  vertical-align: -0.125em;      /* 与 bootstrap-icons 自身的基线修正一致（16px 下约 -2px） */
  font-size: 1em;
  color: #8c8c8c;                /* 纯灰：比导航文字（rgba(0,0,0,.65)）弱一档 */
}

/* 暗色主题下同一个灰会显得发闷，提亮一档 */
[data-bs-theme="dark"] .navbar a.nav-link.nav-folder::before {
  color: #9e9e9e;
}

/* ---------------------------------------------------------------------------
   左侧导航宽度
   模板是用 flex 比例分配宽度的（.toc-offcanvas 的 flex-grow 0.35、.content 1），
   算出来只有 236px 左右，文档标题一长就折成好几行，所以改成固定宽度。
   < 768px 时模板把它变成抽屉式 offcanvas，所以只在 md 以上覆盖。

   ⚠️ 这里的选择器必须和模板内部用的**完全一致**才压得住：
       body:not([data-search])[data-layout=""] > main > .toc-offcanvas
   写成 `.toc-offcanvas` 特异性不够（模板那个是 3 类 + 2 元素），改了半天不生效。
   --------------------------------------------------------------------------- */
@media (min-width: 768px) {
  body:not([data-search])[data-layout=""] > main > .toc-offcanvas,
  body:not([data-search])[data-layout="conceptual"] > main > .toc-offcanvas {
    flex: 0 0 var(--toc-width);
    max-width: var(--toc-width);
  }
}

/* ---------------------------------------------------------------------------
   长标题：允许在任意位置折行
   侧栏宽度有限，标题里常出现长英文单词 / 类名 / 中文长句，
   不允许任意折行的话会把侧栏撑破或溢出。
   --------------------------------------------------------------------------- */
.toc a {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* ---------------------------------------------------------------------------
   长标题折行后的「悬挂缩进」
   目标：折行后第二行不要顶到标记列下面，而是与第一行的**文字**起点对齐。
   实测（320px 宽、14px 字号）：标记列宽 = --toc-marker-width(1.4em=19.6px) +
   --toc-marker-gap(3px) = 22.6px，第一行文字起点 48.2px，正好 = 25.6 + 22.6。

   做法：给 li 加 padding-left(标记列宽)，再用 text-indent 把**第一行**拉回去。
   两者相抵 → 第一行文字位置一点没变；只有折行得到的后续行吃了这份 padding，
   落在 48.2px，与第一行文字对齐。

   ⚠️ 为什么改 li 而不是 <a>：
      <a> 是 inline，而 inline 盒子跨行断开时 padding-left 只作用于第一片，
      折行得到的后续行拿不到缩进，所以必须挂到 li（block 容器）上。
      ⚠️ 更不能把 <a> 改成 display:block —— 展开箭头是 <a> 的**兄弟**节点
      <span class="expand-stub">（in-flow inline，宽度 0），改成 block 会把箭头
      挤到标题上面单独占一行，导航整体错位。

   ⚠️ 为什么还要把子级 <ul> 拉回来 -22.6px：
      子级 <ul> 的静态位置 = 父 li 的**内容**边缘。父 li 的 padding 加了 22.6px 后，
      整棵子树会跟着右移 22.6px。用负 margin 抵消，嵌套缩进才与改前完全一致。

   ⚠️ text-indent 是**可继承**属性：li 上的 -22.6px 会继承给内部所有元素。
      对空的 inline-block（文件夹图标的 ::before）没影响，但会让带文字的
      .toc-num 内部行盒也左移 —— 必须在那条规则里显式 text-indent: 0 挡回去。
   --------------------------------------------------------------------------- */
:root {
  /* 模板给每一级 li 的基础缩进：实测 computed padding-left = 13.6px = 0.85rem */
  --toc-level-indent: 0.85rem;
  --toc-marker-total: calc(var(--toc-marker-width) + var(--toc-marker-gap));
}

.toc li {
  padding-left: calc(var(--toc-level-indent) + var(--toc-marker-total));
  text-indent: calc(-1 * var(--toc-marker-total));
}

.toc li > ul {
  margin-left: calc(-1 * var(--toc-marker-total));
}

/* ---------------------------------------------------------------------------
   顶部导航栏：品牌图标与站点名之间留出间距
   模板默认只靠 HTML 里的空白字符分隔（约 4px），实际看起来是贴在一起的。
   --------------------------------------------------------------------------- */
.navbar-brand #logo {
  margin-right: 10px;
}

/* ---------------------------------------------------------------------------
   底部「上一篇 / 下一篇」：只显示标签，不显示文章标题
   原因：标题一长就折行；而右半栏是右对齐的，折行后第二行会向左缩进，很难看。
   做法：把 <a> 绝对定位铺满整个半栏，这样标签区域也能点击；
        再用 font-size: 0 让标题文字不占空间（文字仍在 DOM 里，无障碍读屏不受影响）。

   ⚠️ 标签 <span> 与 <a> 是**兄弟节点**（不是父子），所以不能直接 display:none 掉 <a>，
      否则整块就没有可点击的链接了。
   --------------------------------------------------------------------------- */
.next-article .prev,
.next-article .next {
  position: relative;
}

.next-article .prev > a,
.next-article .next > a {
  position: absolute;
  inset: 0;
  overflow: hidden;
  font-size: 0;
  color: transparent;
}

/* 箭头与文字垂直居中
   bootstrap-icons 默认给 ::before 加了 vertical-align: -.125em（整体下移），
   配中文文本时箭头看起来偏低；改成 flex 居中并取消那个下移。
   注意：flex 布局会忽略只有空白的文本节点，所以原来图标与文字之间的空格没了，要用 gap 补回来。 */
.next-article .prev span,
.next-article .next span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.next-article .prev span i::before,
.next-article .next span i::before {
  vertical-align: 0;
}

/* 光学对齐（不是盒子对齐）
   canvas 实测：把箭头字形与「上一篇」放在同一条基线上绘制后统计墨迹行 ——
     箭头墨迹 行 47..58、中心 52.5；中文墨迹 行 49..60、中心 54.5
   两者墨迹高度都是 12px，但箭头中心比文字**高 2px**，所以往下推 2px = 0.143em（@14px 字号）。
   ⚠️ 靠 flex 的 align-items: center 只能对齐盒子，盒子里字形的实际位置并不居中。 */
.next-article .prev span i,
.next-article .next span i {
  transform: translateY(0.143em);
}

/* ---------------------------------------------------------------------------
   左侧导航的「筛选标题」输入框：去掉聚焦时的蓝色光晕
   Bootstrap 默认给 :focus 加 `box-shadow: 0 0 0 .25rem rgba(13,110,253,.25)`（4px 蓝色光晕），
   在侧栏这种窄容器里特别突兀。这里改成只变边框色 —— 仍然能看出焦点在哪，但没有光晕。

   ⚠️ 不建议把聚焦样式整个去掉（连边框变色也不要），否则键盘用户按 Tab 会完全失去位置提示。
   --------------------------------------------------------------------------- */
.toc input:focus,
.toc input:focus-visible {
  box-shadow: none;
  outline: none;
  border-color: #1677ff;
}

/* ---------------------------------------------------------------------------
   分区首页（build/gen-toc.ps1 -SectionIndex 生成）的多级编号
   Markdown 里每一级都写成 "1."，实际编号样式由这里按**嵌套深度**决定：
     一级 一、二、三        （中文数字）
     二级 1. 2. 3.          （阿拉伯数字）
     三级 (1) (2) (3)
     四级 ① ② ③

   ⚠️ 为什么不用更简单的 ::marker：
      ::marker 的**右边缘**被固定在 li 的内容边缘，标记是往「左」长出去的 ——
      标记有多宽，就往左伸出多少。于是下一级的缩进量被迫等于上一级标记的宽度，
      结果「二级编号」落在「一级标题」左边一点点（实测差 11px），
      看着像想对齐、却没对齐。而且 ::marker 不支持 padding / margin / width，
      没办法把标记摆到想要的位置上。

   ✅ 所以改成「固定宽度的编号列 + 悬挂缩进」：
        li { padding-left: 列宽; text-indent: -列宽 }  → 标记从 li 左边缘开始
        li::before { width: 列宽 }                    → 占满整列，正文从列尾开始
        子级 <ol> 的静态位置 = 父 li 的内容边缘 = **父级的正文起点**
      ⇒ 每一级的编号，正好与**上一级的标题文字**左边缘对齐 ✅
      ⇒ 因为列宽固定，即使序号涨到两位数，正文起点也不会左右跳。

   ⚠️ 必须用 .section-index 限定作用域 —— 不加限定的话，全站所有有序列表
      （包括作者在各篇文档正文里自己写的 1. 2. 3.）都会被改成这个样式。
   ⚠️ text-indent 是**可继承**属性：li 上的负值会继承进 ::before，
      必须在 ::before 里显式写 text-indent: 0 挡回去，否则编号被推出列外。
   --------------------------------------------------------------------------- */
.section-index ol {
  list-style: none;      /* 关掉浏览器自带标记，改由 ::before 自己画 */
  margin: 0;
  padding-left: 0;       /* 缩进全部交给 li 的 padding-left，才能按层精确控制 */
  counter-reset: si;     /* 每层序号各自从 1 开始 */
}

.section-index li {
  padding-left: var(--si-col);
  text-indent: calc(-1 * var(--si-col));
  counter-increment: si;
}

.section-index li::before {
  display: inline-block;
  width: var(--si-col);          /* 占满整列 ⇒ 正文从列尾开始，各级天然对齐 */
  text-indent: 0;                /* ⚠️ 挡掉从 li 继承下来的负 text-indent */
  text-align: left;              /* 编号一律从列首开始 */
  font-variant-numeric: tabular-nums;
}

/* 编号列宽度 = 该层标记的实际宽度 + 约 10px 视觉间距。
   取值的依据是实测的「标记墨迹右端留白」，让各级「编号 → 正文」的间距一致。 */
.section-index > ol > li        { --si-col: 2em; }    /* 一、 宽 32px，顿号自带约 10px 留白 */
.section-index ol ol > li       { --si-col: 1.5em; }  /* 1.   宽 13px + 11px 间距 = 24px */
.section-index ol ol ol > li    { --si-col: 1.9em; }  /* (1)  宽 20px + 11px 间距 = 30.4px */
.section-index ol ol ol ol > li { --si-col: 1.65em; } /* ①    宽 16px + 10px 间距 = 26.4px */

.section-index > ol > li::before        { content: counter(si, cjk-ideographic) "、"; }
.section-index ol ol > li::before       { content: counter(si) "."; }
.section-index ol ol ol > li::before    { content: "(" counter(si) ")"; }
.section-index ol ol ol ol > li::before { content: counter(si, circled-decimal); }

/* ---------------------------------------------------------------------------
   分区首页（-SectionIndex 生成的目录索引）里的链接：不显示下划线
   Bootstrap 5.3 起给所有 <a> 默认加了 text-decoration: underline（无障碍考虑），
   但这个页面本身就是一份「目录清单」，一屏几十条链接全带下划线很花。
   默认去掉，**悬停 / 键盘聚焦时再出现** —— 既有反馈又不脏。
   ⚠️ 只作用在 .section-index 里；正文其它页面的链接仍保留下划线（那是 Bootstrap 的默认，
      也是无障碍推荐做法，不建议全站去掉）。
   --------------------------------------------------------------------------- */
.section-index a {
  text-decoration: none;
}

.section-index a:hover,
.section-index a:focus-visible {
  text-decoration: underline;
}