/* =============================================================================
 * custom.css —— 站点统一美化样式
 * -----------------------------------------------------------------------------
 * 作用范围：
 *   1) Markdown 表格（.table-wrap table）          —— 表格美化
 *   2) 代码块 / 行内代码 / 引用块                   —— 统一格式细节
 *
 * 设计原则：
 *   - 复用 Butterfly 主题 CSS 变量（--card-bg / --light-grey / --default-bg-color 等），
 *     自动跟随「亮色 / 暗色 / 阅读模式」切换，无需重复维护两套配色。
 *   - 所有颜色均基于主题变量派生，避免硬编码，保证全站风格统一。
 * ========================================================================== */

/* =============================================================================
 * 零点五、设计 Token（Design Tokens）
 * -----------------------------------------------------------------------------
 * 集中定义全站点半径 / 阴影 / 断点变量，供各页面样式（album / travel / notes 等）
 * 引用，避免重复硬编码、便于统一调整。仅替换数值等价处，不改变外观。
 * ========================================================================== */
:root {
  --radius-card: 12px;
  /* 2026-10-03：--shadow-card 别名已删除——其唯一使用者 notes.css 已改为直引
     var(--card-box-shadow)，别名纯绕一层间接。（阴影派生自主题变量的决策见
     2026-09-17 记录，未变。 */
  /* 断点 token：仅作**文档/备忘**用，记录本站三档宽度约定（与 Butterfly 主题一致）。
     ⚠ 严禁在 @media 条件里引用：CSS 规范不允许 `max-width: var(--bp-md)`，
     浏览器会整条丢弃该规则（2026-10-03 修复：travel / keepfit / mountain / notes
     四个页面的窄屏规则曾因此全部失效，手机上旅行照片还是三列、过小）。
     媒体查询请一律写死下列字面值：768px（--bp-md）、480px（--bp-sm）。 */
  --bp-sm: 480px;
  --bp-md: 768px;
  --bp-lg: 992px;

/* travel 页目录（TOC）隐藏自动编号（2026-10-04）：
   主题 toc.number 会给目录加「4.」「4.1.」这类前缀，对旅行页是纯噪音——
   一级本就是年份、二级改为「月份 名称」。用 body:has(#travel-page-marker)
   把规则限定在 travel 页（页面正文放了隐藏标记元素）；其他页面编号不受影响。
   ⚠ 不能把这条规则写进 travel/index.html 的 <style>：实测 Hexo 渲染 .html 页面
   时正文里的 <style> 块会被丢弃（<script> 可存活），故必须放在本文件。 */
body:has(#travel-page-marker) .toc .toc-number {
  display: none;
}

/* ── 十四、图表悬浮说明气泡（keepfit / mountain 手绘 SVG 共用）──
   单实例浮层：数据点带 data-tip，图表容器 mousemove 委托显示（见 charts-axis.js）。
   fixed 定位跟随鼠标；pointer-events:none 使浮层永不挡住鼠标。 */
.mc-tooltip {
  position: fixed;
  z-index: 1001;
  display: none;
  max-width: 260px;
  padding: 0.35rem 0.6rem;
  border: 1px solid var(--tab-border-color);
  border-radius: var(--radius-sm);
  background: var(--card-bg);
  color: var(--font-color);
  font-size: var(--fs-meta);
  box-shadow: var(--card-box-shadow);
  pointer-events: none;
  white-space: nowrap;
}
/* 数据点的透明命中区：r=4 的点难点准，叠 r=10 的透明圆承接悬浮 */
.keepfit-page .mc-hit,
.mountain-page .mc-hit {
  fill: transparent;
  pointer-events: all;
}
  /* 主题色（--default-bg-color）之上的前景文字色。表头渐变、徽章等
     以主题色为底的容器都应引用它，而不是直接写 #fff。
     2026-09-17：改用主题 --white（亮色 #fff / 暗色 rgba(255,255,255,.9)），随明暗自动切换。 */
  --on-accent: var(--white, #fff);

  /* ── 字号阶梯（Font Scale，2026-09-12 定稿）─────────────────────────
     唯一基准 = --global-font-size（14px），一律 calc 绝对换算，
     不用 em —— em 会随嵌套容器累乘（旧 #nav 1.3em × .site-page .78em = 14.2px 即此坑）。
     取值依据：Material 3 字阶（Headline 32/28/24、Title 22/16/14、Body 16/14/12、Label 14/12/11）
              + Ant Design 主字号 14 / 辅助 12（正文行高 22）
              + Apple HIG（Title1 28、Title2 22、Footnote 13、Caption 12/11）。
     倍率 = 目标 px ÷ 14；改 --global-font-size 即整站等比缩放。 */
  --fs-page: calc(var(--global-font-size) * 32 / 14); /* T1 32px 页面主标题 */
  --fs-section: calc(var(--global-font-size) * 22 / 14); /* T2 22px 区块标题 */
  --fs-card: calc(var(--global-font-size) * 16 / 14); /* T3 16px 卡片/条目标题 */
  --fs-body: var(--global-font-size); /* T4 14px 正文 / 按钮 / 导航 */
  --fs-meta: calc(var(--global-font-size) * 12 / 14); /* T5 12px 辅助 / 元信息 */
  --fs-badge: var(--fs-meta); /* T6 12px 微标签 / 角标（与 meta 同号；2026-09-13 就近取大合并） */
  --fs-num: calc(var(--global-font-size) * 32 / 14); /* D1 32px 数据强调（统计大数字） */

  /* ── 圆角阶梯（2026-10-03 全站归档）─────────────────────────────
     xs 按实际使用值 4px 定义（报告建议 6px，实际无 6px 使用）；50%/0 不入阶梯。 */
  --radius-lg: 12px;   /* 卡片主容器（与 --radius-card 同值，二者并存，card 优先语义） */
  --radius-md: 10px;   /* 图片框 / 网格单元 */
  --radius-sm: 8px;    /* 代码块 / 引用块 / 副标题 */
  --radius-xs: 4px;    /* 小元素 */
  --radius-pill: 999px; /* 胶囊（进度条 / 徽章 / 按钮） */

  /* ── 过渡阶梯（2026-10-03 全站归档；缓动全站均为 ease，令牌直接携带）── */
  --transition-fast: 0.15s ease; /* 悬停色变 / 小元素 */
  --transition-base: 0.22s ease; /* 卡片浮起 / 常规过渡 */
  --transition-slow: 0.35s ease; /* 图片缩放 / 进度填充 */

  /* ── opacity 三档（2026-10-03 就近收敛：原 0.45-0.9 共 9 种归入 3 档）── */
  --opacity-tertiary: 0.6;   /* 辅助 / 提示（吸 0.65/0.45） */
  --opacity-secondary: 0.75; /* 次要文字（吸 0.7/0.8） */
  --opacity-faint: 0.85;     /* 弱化正文（吸 0.9/0.82） */

  /* ── 行高四档（2026-10-03 就近归档；文章正文 2 在主题 var.styl，不入本体系）── */
  --lh-tight: 1.1;   /* 数据大数字 / 紧凑标注（吸 1.3/1） */
  --lh-base: 1.6;    /* 表格 / 代码（吸 1.4/1.5） */
  --lh-loose: 1.8;   /* 卡片正文（吸 1.75/1.9） */
  --lh-readable: 2;  /* 长文阅读（备用，暂无使用） */

  /* ── 间距阶梯（2026-10-03 全站归档；rem/em 与 >36px 布局级尺寸不入阶梯）── */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
}

/* =============================================================================
 * 零、防白屏闪烁（darkmode FOUC 兜底）
 * -----------------------------------------------------------------------------
 * 主题生成的 <html> 写死 data-theme="light"，暗色偏好由 JS 在 body 绘制后才切换，
 * 造成「白底 → 暗色」的突兀闪烁。head 已注入脚本在首屏绘制前设好 data-theme，
 * 此处再给 html 根元素铺上主题底色，确保第一帧绘制即非白色（暗色下为 #0d0d0d）。
 * ========================================================================== */
html {
  background-color: var(--global-bg);
}

/* =============================================================================
 * 一、表格美化（.table-wrap 包裹的 Markdown 表格）
 * ========================================================================== */

/* 1.1 外层容器：圆角 + 阴影 + 横向滚动（长表格在移动端可滑动） */
.table-wrap {
  margin: 0 0 1.2rem;
  overflow-x: auto; /* 内容过宽时横向滚动，而不是撑破布局 */
  border: 1px solid var(--light-grey); /* 细边框，与全站分割线一致 */
  border-radius: var(--radius-md); /* 圆角，呼应卡片观感 */
  background: var(--card-bg);
  box-shadow: var(--card-box-shadow); /* 复用主题卡片阴影 */
  scrollbar-width: thin; /* Firefox 细滚动条 */
}
/* 1.1.1 自定义横向滚动条（WebKit 内核） */
.table-wrap::-webkit-scrollbar {
  height: 8px;
}
.table-wrap::-webkit-scrollbar-thumb {
  background: var(--light-grey);
  border-radius: var(--radius-xs);
}

/* 1.2 表格本体 */
.table-wrap table {
  width: 100%;
  border-collapse: collapse; /* 合并边框，避免双边线 */
  font-size: var(--fs-body);
  line-height: var(--lh-base); /* 原 1.6 */
  color: var(--font-color);
  background: var(--card-bg);
  border: none; /* 边框交给外层 .table-wrap，避免重复 */
}

/* 1.3 表头：淡主色底 + 深字，粘性定位（滚动时长表头常驻）
   2026-10-03 反向统一：原「渐变主题色 + 白字」改为与 mountain 数据表头同款
   （用户选定 mountain 观感为全站表头基准）。淡底 color-mix 引用站点令牌，
   暗色模式自动适配；sticky 滚动场景下不透明淡底不会遮挡数据行。 */
.table-wrap thead th {
  padding: var(--space-sm) var(--space-md);
  font-weight: 700;
  text-align: left;
  white-space: nowrap;
  letter-spacing: 0.02em;
  color: var(--font-color);
  border-bottom: 2px solid var(--tab-border-color);
  background: color-mix(in srgb, var(--default-bg-color) 12%, var(--card-bg));
}

/* 1.4 单元格基础样式 */
.table-wrap th,
.table-wrap td {
  padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--light-grey);
  vertical-align: middle;
}

/* 1.3b 文章内 Markdown 表头：与上/与 mountain 同款淡底深字
   2026-10-03 补——文章正文表格是裸 <table>（无 .table-wrap 包裹），表头原本走主题默认
   的灰蓝半透明底（rgba(153,169,191,.1)），与 mountain/.table-wrap 两个体系都不一致；
   此处按用户决策统一为 mountain 观感。color-mix 引用令牌，暗色模式自动适配。 */
#article-container table thead {
  background: color-mix(in srgb, var(--default-bg-color) 12%, var(--card-bg));
}
#article-container table thead th {
  color: var(--font-color);
  font-weight: 700;
}

/* 1.5 斑马纹（偶数行淡色底），提升可读性 */
.table-wrap tbody tr:nth-child(even) {
  background: color-mix(in srgb, var(--card-bg) 82%, var(--light-grey) 18%);
}

/* 1.6 行悬停高亮（主题色淡染），引导视线 */
.table-wrap tbody tr {
  transition: background var(--transition-base);
}
.table-wrap tbody tr:hover {
  background: color-mix(in srgb, var(--default-bg-color) 12%, var(--card-bg));
}

/* 1.7 首列强调，常用于「指标 / 名称」列 */
.table-wrap tbody td:first-child {
  font-weight: 600;
}

/* 1.8 移动端适配：缩小内边距与字号，避免拥挤 */
@media (max-width: 768px) {
  .table-wrap thead th,
  .table-wrap th,
  .table-wrap td {
    padding: var(--space-sm) var(--space-sm);
  }
  .table-wrap table {
    font-size: var(--fs-meta);
  }
}

/* =============================================================================
 * 二、代码块 / 行内代码 / 引用块 —— 统一格式细节
 * ========================================================================== */

/* 2.1 代码块容器：统一圆角与溢出裁剪 */
figure.highlight,
pre {
  border-radius: var(--radius-sm);
  overflow: auto;
}

/* 2.2 行内代码：淡色底 + 圆角，与正文区分 */
p code,
li code,
td code,
a code {
  padding: 0.15em 0.4em;
  border-radius: var(--radius-xs);
  /* 原 0.9em（12.6px）→ T5（12px）：等宽字体与正文同号会显得偏大，
     比正文小一档是通用做法（GitHub 85%、Ant 辅助 12），顺手并入阶梯。 */
  font-size: var(--fs-meta);
  color: var(--default-bg-color);
  background: color-mix(in srgb, var(--default-bg-color) 12%, var(--card-bg));
}

/* 2.3 引用块：左侧主题色竖线 + 淡背景，强化引用语义 */
blockquote {
  border-left: 4px solid var(--default-bg-color);
  background: color-mix(in srgb, var(--default-bg-color) 6%, var(--card-bg));
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

/* =============================================================================
 * 四、分类页罗列区美化
 * -----------------------------------------------------------------------------
 * 说明：分类页原生的 .category-list 是「分类名 + (数量)」的无序列表，
 *       不是标准 <table>，这里用纯 CSS 把它排版成「干净的表格 / 卡片」观感，
 *       与全站风格统一，且完全不改动 pug 结构，便于后续维护。
 *       所有颜色仍基于主题变量派生，自动适配亮/暗/阅读模式。
 * ========================================================================== */

/* 4.1 分类列表整体：视作一张卡片（圆角 + 阴影），宽度与 about 页 .about-card 一致（占满内容栏，不限宽、不水平居中） */
.category-lists {
  margin: 1.2rem 0; /* 与 .about-card 对齐：去除 720px 限宽与水平居中 */
  padding: var(--space-md) var(--space-lg);
  background: var(--card-bg);
  border: 1px solid var(--light-grey);
  border-radius: var(--radius-lg);
  box-shadow: var(--card-box-shadow);
}

/* 4.2 列表基础：去掉圆点与默认缩进 */
.category-lists .category-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
/* 子分类（嵌套 ul）缩进，保持层级关系 */
.category-lists .category-list ul {
  list-style: none;
  margin: 0;
  padding-left: var(--space-lg);
}

/* 4.3 每一项 = 一行「表格」：左分类名 / 右数量
 *     position:relative + padding-left 保留给主题 .list-beauty li::before 蓝色圆圈图标，
 *     避免 flex 覆盖后图标跑偏到文字上方。 */
.category-lists .category-list-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  position: relative; /* ::before 绝对定位图标依赖此定位上下文 */
  padding: 10px 6px 10px 1.5em; /* 左侧留出图标空间（覆盖主题默认 1.4em） */
  border-bottom: 1px solid var(--light-grey); /* 行分隔线 → 形成表格观感 */
  transition: background var(--transition-base);
}
/* 末行去掉分隔线，避免与卡片底边重叠 */
.category-lists .category-list > .category-list-item:last-child {
  border-bottom: none;
}

/* 4.4 斑马纹：偶数行淡底，与 Markdown 表格一致 */
.category-lists .category-list > .category-list-item:nth-child(even) {
  background: color-mix(in srgb, var(--card-bg) 82%, var(--light-grey) 18%);
}

/* 4.5 行悬停高亮（主题色淡染），引导视线 */
.category-lists .category-list-item:hover {
  background: color-mix(in srgb, var(--default-bg-color) 10%, var(--card-bg));
}

/* 4.6 分类名称链接 */
.category-lists .category-list-link {
  color: var(--font-color);
  font-weight: 600;
  text-decoration: none;
  transition: color var(--transition-base);
}
.category-lists .category-list-link:hover {
  color: var(--default-bg-color);
}

/* 4.7 数量徽标：胶囊形 + 主题色淡染，推到右侧、字号与分类名一致 */
/* 2026-10-03 特异性由 (0,2,0) 补齐到与主题 categories.styl 相同的 (0,3,0)，
   custom.css 后加载即胜出，原 margin-left 的 !important 移除。
   ⚠ 顺带修复：此前 color / content:none 也被主题 (0,3,0) 压掉——徽标文字色与
   "(n)" 括号实际一直渲染的是主题旧样式，本改动使其按本节设计生效。 */
.category-lists .category-list .category-list-count {
  margin-left: auto; /* 推到行尾（右侧），与分类名左对齐形成两端分布 */
  flex: none; /* 不被压缩 */
  padding: var(--space-xs) var(--space-sm); /* 紧凑包裹数字 */
  text-align: center;
  font-size: 1em; /* 与分类名同字号（主题未对该元素设置 font-size，无需 !important） */
  font-weight: 600;
  color: var(--default-bg-color);
  background: color-mix(in srgb, var(--default-bg-color) 14%, var(--card-bg));
  border: 1px solid color-mix(in srgb, var(--default-bg-color) 35%, transparent);
  border-radius: var(--radius-pill); /* 胶囊形 */
}
.category-lists .category-list .category-list-count::before,
.category-lists .category-list .category-list-count::after {
  content: none; /* 覆盖主题默认的 "("、")" */
}

/* 4.8 移动端适配 */
/* 注：原「4.8 标签页标签云」整段已删除——标签功能已彻底移除（见 #66），
   产物中 .tag-cloud-list 零渲染，属死代码。 */
@media (max-width: 768px) {
  .category-lists {
    padding: var(--space-md);
  }
  .category-lists .category-list-item {
    padding: var(--space-sm) var(--space-xs);
  }
}

/* =============================================================================
 * 第五节：「此去经年」归档页（/notes/）样式说明
 *   该页的卡片 / 年份折叠 / 图片网格 / Fancybox 灯箱样式已集中到
 *   source/notes/assets/css/notes.css（复用 Butterfly 主题变量，自动适配亮/暗），
 *   由 scripts/notes-archive.js 把 source/notes/content/YYYY.md 渲染为卡片。
 *   下方仅保留容器级的布局兜底（与其它特殊页 .travel-page 等保持一致）。
 * ========================================================================== */

/* 5.0 「此去经年」跟随全站统一宽度（hide-aside 下由 .layout 约束 ≈970px），
 *     移除早期「max-width:1200px」的独立限宽，避免比其它页宽。 */
/* （规则已删除：不再单独限宽 notes 的 #content-inner） */

/* 5.1 内容列：作为 .layout 的 flex 子项占满主栏（与标准页「到此一游」同构）。
 *      ⚠ min-width:0 是关键 —— 否则卡片内容的 min-content 会把主栏撑开，
 *         使 flex 无法收缩，进而与右侧栏重叠（之前「主栏与右栏重合」的根因）。
 *      background / border-radius / box-shadow 显式复刻主题给
 *      .layout>div:first-child 的「白色卡片」外观——之前误设 transparent 把卡抹掉，
 *      导致主栏像“悬浮/居中”、顶端与右侧目录卡不对齐、像被侧栏遮住。
 *      还原卡片后：主栏 = 左 74% 白卡，副栏 = 右 26% 目录卡，与到此一游一致。
 *      box-sizing:border-box 确保 50px/40px 内边距算进 74% 宽度内，避免撑破重叠。 */
/* 5.1 此去经年正文容器（默认 page 渲染）
 *  与 .keepfit-page / .mountain-page / .travel-page 保持一致：仅做宽度控制，不再做"卡片化"外观，
 *  使 notes（此去经年）容器在 hide-aside 全站统一布局下与其它特殊页样式一致。 */
#notes.notes-page {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

/* 5.2 移动端 / 窄屏：右侧栏折叠为抽屉，主栏占满宽度（主题负责收起 aside）；
   #notes.notes-page 在 ≤900px 强制满宽的覆盖块已删（侧栏收起后主栏本就占满，冗余）。 */

/* =============================================================================
 * 六、十年之约 模块（模仿 yishu.pro 结构，主题化跟随亮/暗/阅读模式）
 * -----------------------------------------------------------------------------
 * 结构对应 yishu.pro：卡片(图标卡头 + 正文) → 三列行[开始日期|进度条|目标日期]
 *   → 三栏数据[已完成|进度|剩余时间] → 横向里程碑时间轴(启程/现在/…/目标) → 引言。
 * 设计取舍：
 *   - 组件自带卡片外观（--card-bg + 边框 + 阴影），与主题正文卡同款变量，保持统一；
 *   - 所有颜色基于主题 CSS 变量派生，自动适配亮/暗/阅读模式；
 *   - 进度条填充宽度（<i> 的 width）、里程碑“现在”节点由 about/index.md 内联 style 控制。
 * ========================================================================== */

/* 6.1 卡片容器：与全站卡片同款观感 */
.ten-year {
  margin: 1.2rem 0;
  padding: var(--space-lg) var(--space-lg);
  background: var(--card-bg);
  border: 1px solid var(--light-grey);
  border-radius: var(--radius-lg);
  box-shadow: var(--card-box-shadow);
}

/* 6.2 模块头：标题 + 副标题（无图标） */
.ten-year__head {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
}
.ten-year__head h2 {
  margin: 0;
  font-size: var(--fs-card);
}
.ten-year__head span {
  margin-left: var(--space-xs);
  font-size: var(--fs-body);
  color: var(--font-color);
  opacity: var(--opacity-secondary);
}

/* 6.3 第一行：三列 [开始日期 | 进度条 | 目标日期] */
.ten-year__row {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin-bottom: var(--space-md);
}
.ten-year__date {
  flex: none;
  min-width: 92px;
  text-align: center;
}
.ten-year__date span {
  display: block;
  font-size: var(--fs-body);
  color: var(--font-color);
  opacity: var(--opacity-secondary);
}
.ten-year__date strong {
  font-size: var(--fs-body);
  color: var(--default-bg-color);
}

/* 6.4 中间列：仅进度条 */
.ten-year__progress {
  flex: 1 1 auto;
  min-width: 0;
}
.ten-year__bar {
  height: 10px;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--default-bg-color) 12%, var(--card-bg));
  overflow: hidden;
}
.ten-year__bar i {
  display: block;
  height: 100%;
  border-radius: var(--radius-pill);
  background: var(--default-bg-color);
  transition: width var(--transition-slow); /* 改值时平滑过渡 */
}

/* 6.3b 窄屏（≤540px）：原「日期 | 进度条 | 日期」三列在 360px 下会挤爆 ——
   两个日期各 min-width 92px 吃掉 184px + 36px 间距，进度条只剩约 80px，几乎看不出比例。
   改为：两个日期并排占第一行，进度条整条独占第二行（order 把它排到日期之后）。
   断点写死 px，不用 var()（@media 条件里 var() 会被浏览器整条丢弃）。 */
@media (max-width: 540px) {
  .ten-year__row {
    flex-wrap: wrap;
    gap: var(--space-sm) var(--space-md);
  }
  .ten-year__date {
    flex: 1 1 40%;
    min-width: 0;
  }
  .ten-year__progress {
    flex: 1 1 100%;
    order: 1; /* 排在两个日期之后 → 独占第二行 */
  }
}

/* 6.5 数据行：三栏 */
.ten-year__stat {
  display: flex;
  gap: var(--space-md);
  margin-bottom: var(--space-sm);
}
.ten-year__stat-item {
  flex: 1 1 0;
  padding: var(--space-sm) var(--space-sm);
  text-align: center;
  background: color-mix(in srgb, var(--card-bg) 82%, var(--light-grey) 18%);
  border: 1px solid var(--light-grey);
  border-radius: var(--radius-sm);
}
.ten-year__stat-item span {
  display: block;
  font-size: var(--fs-body);
  color: var(--font-color);
  opacity: var(--opacity-secondary);
}
.ten-year__stat-item strong {
  font-size: var(--fs-body);
  color: var(--default-bg-color);
}

/* 6.6 里程碑时间轴：横向圆点 + 贯穿连线 */
.ten-year__milestone {
  position: relative;
  display: flex;
  justify-content: space-between;
  margin: var(--space-md) 0 var(--space-md);
  padding: 0 4%;
}
.ten-year__milestone::before {
  /* 贯穿连线：从首节点圆心连到尾节点圆心
     节点固定宽 48px，圆点 12px 居中 → 圆心距节点左缘 24px；
     容器左内边距 4% → 连线端点 = 4% + 24px。 */
  content: "";
  position: absolute;
  top: 5px;
  left: calc(4% + 24px);
  right: calc(4% + 24px);
  height: 2px;
  background: var(--light-grey);
}
.ten-year__ms-item {
  position: relative; /* 圆点点位于连线之上 */
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
  width: 48px; /* 固定宽度：圆点居中，圆心稳定，连线端点可精确对齐 */
  font-size: var(--fs-body); /* 统一为标准正文 */
  color: var(--font-color);
}
/* 圆点：还原到 categories 统一“之前”的版本 —— 12px 直径、2px 描边（主题灰）。 */
.ten-year__ms-item .dot {
  width: 12px; /* 还原“之前”圆点尺寸 */
  height: 12px;
  border-radius: 50%;
  background: var(--card-bg);
  border: 2px solid var(--light-grey); /* 2px 描边，还原“之前” */
  box-sizing: border-box;
}
.ten-year__ms-item.is-done .dot {
  /* 已抵达节点：主题色实心 */
  background: var(--default-bg-color);
  border-color: var(--default-bg-color);
}
.ten-year__ms-item.is-ellipsis .dot {
  /* 省略节点：与其他圆点同尺寸，仅虚线空心 */
  width: 12px;
  height: 12px;
  background: transparent;
  border-style: dashed;
}

/* 6.7 结尾引言 */
.ten-year__quote {
  margin: 0;
  text-align: center;
  font-style: italic;
  font-size: var(--fs-body);
  color: var(--font-color);
}

/* =============================================================================
 * 七、技能专长 分组进度条（主题化，跟随亮/暗/阅读模式）
 * -----------------------------------------------------------------------------
 * 模仿 id.laoguantx.top 的「技能专长」形式：子分类（###）+ 技能名 + 进度条。
 * 颜色全部走主题变量（--default-bg-color / --light-grey / --card-bg / --font-color），
 * 自动适配亮色 / 暗色 / 阅读模式，与全站卡片、十年之约进度条观感统一。
 * ========================================================================== */

/* 7.1 每组技能列表：纵向排列，行间距统一 */
/* 7.1 双列容器：左列(学科能力/计算机能力) + 右列(兴趣爱好)
   两列等高(align-items:stretch)，左列用 space-between 把上组顶到头、下组沉到底，
   实现左列上下端分别与右列上下端平齐 */
.skill-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-xl);
  margin: var(--space-sm) 0 var(--space-md);
  align-items: stretch;
}

/* 单列（flex 纵向）；左列两端对齐，右列从头排列 */
.skill-col {
  display: flex;
  flex-direction: column;
  min-width: 0; /* 防止长技能名撑破列宽 */
}
.skill-col--left {
  justify-content: space-between;
}
.skill-col--right {
  justify-content: flex-start;
}

/* 7.2 单个分组：标题 + 列表 */
.skill-group {
  min-width: 0;
}
.skill-group h3 {
  margin: 0 0 var(--space-sm);
  font-size: var(--fs-card);
  font-weight: 600;
  color: var(--font-color);
}

/* 7.3 列表：行纵向排列 */
.skill-list {
  display: grid;
  gap: var(--space-sm);
}

/* 7.4 单行：左技能名（固定宽）+ 右进度条，间距适中 */
.skill-row {
  display: grid;
  grid-template-columns: 84px 1fr;
  align-items: center;
  gap: var(--space-md);
}
.skill-row__name {
  font-size: var(--fs-body);
  color: var(--font-color);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 7.5 进度条轨道：浅主题色底 */
.skill-row__bar {
  height: 8px;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--light-grey) 55%, var(--card-bg));
  overflow: hidden;
}

/* 7.6 已填充段：主题色，宽度由内联 style 控制 */
.skill-row__bar > i {
  display: block;
  height: 100%;
  border-radius: var(--radius-pill);
  background: var(--default-bg-color);
  transition: width var(--transition-slow);
}

/* 7.7 窄屏：单列堆叠，左列恢复从头排列 */
@media (max-width: 540px) {
  .skill-grid {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }
  .skill-col--left {
    justify-content: flex-start;
  }
  .skill-row {
    grid-template-columns: 76px 1fr;
    gap: var(--space-sm);
  }
}

/* =============================================================================
 * 八、about 页 h2 内容卡片（与十年之约 .ten-year 同款观感）
 * -----------------------------------------------------------------------------
 * 给「关于 SCY / 技能专长 / 建站历程 / 关于读者」四个章节内容加卡片框。
 * 视觉对齐 .ten-year：--card-bg 背景 + 1px 边框 + 圆角 12px + 阴影。
 * h2 标题留在卡片外（与十年之约一致），卡片只框标题下的内容。
 * ========================================================================== */
.about-card {
  margin: 1.2rem 0;
  padding: var(--space-md) var(--space-lg);
  background: var(--card-bg);
  border: 1px solid var(--light-grey);
  border-radius: var(--radius-lg);
  box-shadow: var(--card-box-shadow);
}
/* 防御性：若某章节内部已含 .ten-year 卡片（如十年之约），外层透明化避免双重边框 */
.about-card:has(.ten-year) {
  margin: 1.2rem 0;
  padding: 0;
  background: none;
  border: none;
  box-shadow: none;
}

/* =============================================================================
 * 十、个人介绍卡片（card-info）去链接化
 * 文章数/分类改为纯文本（不再跳转），标签项已从模板移除。
 * .site-data-item 替代原 <a>，保持 table-cell 布局观感。
 * ========================================================================== */
.site-data .site-data-item {
  display: table-cell;
  transition: opacity var(--transition-slow);
}
.site-data .site-data-item:hover {
  opacity: var(--opacity-secondary);
}

/* =============================================================================
 * 第八节：页脚半透明（Butterfly 5 兼容）
 * Butterfly 5 已移除 footer_bg 配置键，页脚回退为默认实色（蓝）。
 * 此处令 #footer 背景透明，露出站点壁纸；配合 _config.butterfly.yml 的
 * mask.footer:true 半透遮罩，还原升级前「半透明底栏」效果。
 * ========================================================================== */
/* Butterfly 5 已移除 footer_bg 配置键，页脚回退为默认实色（蓝）。
 * 改为深色半透明背景，露出站点壁纸，还原升级前的「暗调毛玻璃底栏」效果。
 * 亮/暗模式均用深色基底 + 不同不透明度。 */
#footer {
  background: rgba(0, 0, 0, 0.35);
  font-size: var(--fs-body);
}

[data-theme="dark"] #footer,
.theme-dark #footer {
  background: rgba(0, 0, 0, 0.55);
}

#footer .copyright,
#footer .framework-info,
#footer .footer_custom_text {
  font-size: var(--fs-body);
}

/* 分类列表：圆圈图标 + 文字 + 计数，整体靠左不居中 */
/* ::before 保持绝对定位在左侧，li 用 flex 左对齐子元素 */
/* 注：原 !important 已移除——#footer 与主题同特异性(1,0,0)且 custom.css 后加载；
   .category-lists... 选择器(0,3,0)高于主题 categories.styl 的(0,2,2)，故 !important 冗余。 */
.category-lists .category-list > .category-list-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  padding-left: 1.6em; /* 给绝对定位的圆圈留空间 */
}
.category-lists .category-list > .category-list-item::before {
  position: absolute;
  left: 0.4em;
  top: 50%;
  transform: translateY(-50%);
}
/* 链接和计数：不撑满、左对齐 */
.category-lists .category-list > .category-list-item > a {
  display: inline-block;
  width: auto;
  flex: none;
  text-align: left;
}

/* =============================================================================
 * 九、（已退役）番剧页变量同步
 * -----------------------------------------------------------------------------
 * 原先这里用 html[data-theme=light/dark] 逐条覆盖 --bangumi-*，让番剧页跟随网站明暗
 * （插件原本只在暗色侧有 [data-theme=dark]，亮色侧依赖 prefers-color-scheme，
 *   于是「网站手动选亮色 + 系统为暗色」时会跑偏）。
 * 现插件已本地化到 plugins/hexo-bilibili-bangumi，其 index.css 中的 --bangumi-*
 * 直接 alias 到站点 token（--font-color / --card-bg / --default-bg-color /
 * --light-grey / --on-accent），明暗自动跟随站点，也不再需要 color-scheme 声明
 * —— 本段整段移除。
 * ========================================================================== */

/* =============================================================================
 * 十、防 CLS：给封面容器固定宽高比（性能优化指南 #4）
 * -----------------------------------------------------------------------------
 * 封面 <img> 之前无 width/height，图片加载后会把下方文字"挤下去"造成布局抖动。
 * 固定 3:2 比例 + object-fit:cover，图片加载前后占位一致，CLS 接近 0。
 * ========================================================================== */
.post-cover,
.recent-post-info .cover,
.article-cover {
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

/* =============================================================================
 * 十一、灯箱（Fancybox 5）布局修复
 * -----------------------------------------------------------------------------
 * 问题现象（已验证）：
 *   灯箱打开后图片偏左上角、右侧透出博客背景壁纸、下方大片空白。
 *
 * 根因（双重）：
 *   A) critters 关键CSS内联工具将 fancybox.css（31.94KB）只内联了 ~5%（1.76KB），
 *      原 <link> 被标记为 media="print" 不再生效 → 95% 布局/组件样式丢失。
 *   B) 为修复 light 模式白屏注入的 body{background:transparent!important} 破坏了
 *      Fancybox 的定位包含链（container 用 absolute/inset:0 依赖 body 实体尺寸）。
 *
 * 修复策略：
 *   ① head.pug 给 fancybox.css 加 data-no-inline 阻止 critters 内联（保留完整异步加载）
 *   ② 本文件提供完整布局链兜底（即使部分内联也能正确显示）
 *
 * 2026-10-03 降级：data-no-inline 已根治 critters 内联，且实测 fancybox.css 完整、
 *   先于本文件加载（fancybox 自带 !important 仅在 fullscreen/scrollbar 等无关属性），
 *   同特异性下后加载即胜出 → 本节全部去掉 !important，靠加载顺序取胜。
 *   ⚠ 兜底能力说明：若 critters 事故复发且内联 <style> 晚于本文件，本节普通规则
 *   会被其平特异性覆盖——届时需恢复 !important。浏览器回归实测见 2026-10-03 记录。
 * ========================================================================== */

/* ── 11.1 容器：fixed 全屏定位（脱离 body 透明背景影响） ── */
.fancybox__container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 99999;
  /* 继承原设计的 flex 列布局 */
  display: flex;
  flex-direction: column;
}

/* ── 11.2 遮罩层：铺满容器 ── */
.fancybox__backdrop {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
}

/* ── 11.3 轮播容器：占满剩余空间 ── */
.fancybox__carousel {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
  position: relative;
  overflow: hidden;
}

/* ── 11.4 视口：占满轮播容器（grid 布局） ── */
.fancybox__viewport {
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
  position: relative;
  display: grid;
}

/* ── 11.5 幻灯片：grid 单元格 + flex 居中内容 ── */
.fancybox__slide {
  grid-area: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  overflow: hidden;
}
/* flex 居中辅助：::before/::after 撑开上下空间 */
.fancybox__slide::before,
.fancybox__slide::after {
  content: "";
  display: block;
  flex: 1 1 auto;
  min-height: 0;
}

/* ── 11.6 内容区：图片/iframe/HTML 自适应不溢出 ── */
.fancybox__content {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 90vw;
  max-height: 85vh;
}
.fancybox__content img,
.fancybox__content video,
.fancybox__content iframe {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* ── 11.7 安全网：灯箱打开时禁止页面滚动 ──
   （真正的锁滚由 fancybox 自己的 html.with-fancybox body.hide-scrollbar{overflow:hidden!important}
     保证；本条降级后仅作无 hide-scrollbar 场景的普通兜底） */
html.with-fancybox,
html.with-fancybox body {
  overflow: hidden;
}

/* ── 12. 番剧页(bangumis) 网格视图（anilist 风格）──
   说明：样式放在 custom.css（主题编译为外部文件，不受 critters 关键 CSS 内联删除影响），
   不再通过构建脚本注入。交互 JS 见 source/js/bangumi-view.js（经 _config.yml inject 引入）。 */

/* tab 过滤：插件 initPagination 给 #bangumi-itemN 加 .bangumi-hide/.bangumi-show。
   2026-10-03：.bangumi-hide 的隐藏（含 !important，用于压 ID 特异性的 grid 显示规则）
   已由本地化插件 index.css 负责（templates/index.css L362），此处删除重复副本。 */
.bangumi-tabs{display:flex;gap: var(--space-sm);align-items:center;flex-wrap:wrap;margin-bottom:14px}
.bangumi-show{display:block}
.bangumi-view-grid .bangumi-show{display:grid}
.bangumi-tab.bangumi-active{color:var(--bangumi-accent-strong);background:var(--bangumi-bg);box-shadow:0 6px 16px var(--bangumi-shadow)}

/* 分页栏：居中、不被网格拆成 item */
.bangumi-pagination{display:flex;justify-content:center;gap: var(--space-sm);flex-wrap:wrap;margin-top: var(--space-md);width:100%;}
.bangumi-view-grid .bangumi-pagination{grid-column:1/-1;margin-top: var(--space-sm);}
/* 内边距 6px→10px：原按钮高约 32px，手机上翻页容易点空；加大到约 40px（触控下限） */
.bangumi-pagination .bangumi-button,.bangumi-pagination .bangumi-pagenum{display:inline-flex;align-items:center;justify-content:center;padding: var(--space-sm) var(--space-md);border:1px solid var(--bangumi-border);border-radius:6px;background:var(--bangumi-bg);color:var(--bangumi-text);font-size: var(--fs-body);cursor:pointer;text-decoration:none;transition:all var(--transition-base);}
.bangumi-pagination .bangumi-button:hover{background:var(--bangumi-accent-soft);color:var(--bangumi-accent-strong);}
.bangumi-pagination .bangumi-pagenum{cursor:default;background:var(--bangumi-accent);color:var(--bangumi-on-accent);border-color:var(--bangumi-accent);}

/* 网格视图：封面网格 + 卡片内边距留白（本站已移除列表视图，网格为唯一视图，见 bangumi-view.js） */
/* 2026-10-03 收编清理：.bangumi-item / .bangumi-picture(/img) 的卡片形态样式在插件本地化
   （2026-09-15）时已收进 plugins/hexo-bilibili-bangumi/lib/templates/index.css（其中
   img 的 !important 用于压插件自身的内联宽高，属三层规则第①类），此处旧副本值完全相同、
   纯属冗余，删除。本文件只保留插件明确留给 custom.css 的多列网格列数与 info 区布局微调。 */
.bangumi-view-grid #bangumi-item1.bangumi-show,.bangumi-view-grid #bangumi-item2.bangumi-show,.bangumi-view-grid #bangumi-item3.bangumi-show{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap: var(--space-md);}
.bangumi-view-grid .bangumi-info{min-height:0;padding: var(--space-sm) var(--space-xs) 0;text-align:center;}
/* font-size 已随标题 12px 一并回烤到插件 index.css（此处若保留 var(--fs-body) 会以更高特异性盖回 14px）。
   这里只留网格视图专属的排版：单行省略号 + 居中。 */
.bangumi-view-grid .bangumi-title{margin-bottom:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:center;}
/* 列表视图标题 / 元信息的字号与颜色：已回烤到插件 index.css
   （标题取 T5 --fs-meta 12px；元信息同为 T5 --fs-meta —— 12px，网格下已隐藏；
   颜色统一走 var(--bangumi-text)）。原先需用 body 前缀把特异性提到 (0,1,1) 才能压过
   「在 </head> 前内联注入」的插件样式，本地化后由插件源头决定，本段退役。 */
.bangumi-view-grid .bangumi-meta,.bangumi-view-grid .bangumi-summary,.bangumi-view-grid .bangumi-comments{display:none;}

/* =============================================================================
 * 十三、页面副标题框（.page-subtitle）
 * -----------------------------------------------------------------------------
 * 仿照「第三次元」番剧页的 .bangumi-quote 引用块：左侧主色竖线 + 圆角 + 渐变背景
 * + 左上角大引号装饰。做成全站通用类，供各独立页（到此一游 / 修身养性 / 十万大山 /
 * 此去经年 / 关于 等）在正文顶部放一句可自定义的「副标题」。
 * 全部复用 Butterfly 主题变量（--default-bg-color / --card-bg / --light-grey /
 * --font-color），自动适配亮色 / 暗色 / 阅读模式。
 * 用法：在页面正文最前插入
 *   <blockquote class="page-subtitle"><p>自定义的一句话</p></blockquote>
 * ========================================================================== */
.page-subtitle {
  position: relative;
  overflow: hidden;
  margin: var(--space-md) 0;
  padding: var(--space-md) var(--space-md) var(--space-md) 48px;
  border: 1px solid var(--light-grey);
  border-left: 4px solid var(--default-bg-color);
  border-radius: var(--radius-sm);
  color: var(--font-color);
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--default-bg-color) 10%, var(--card-bg)),
    var(--card-bg)
  );
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.08); /* 与 .bangumi-quote（第三次元）同量级 */
}
/* 大引号：尺寸 / 位置 / 透明度全部对齐插件的 .bangumi-quote::before
   （40px / top 8px / left 15px / opacity .6），使六个页面的副标题框看起来是同一个组件。
   2.5 × T3(16px) = 40px，保留随全局字号缩放的能力。 */
.page-subtitle::before {
  content: "“";
  position: absolute;
  top: 8px;
  left: 15px;
  color: var(--default-bg-color);
  font-size: calc(var(--fs-card) * 2.5);
  font-weight: 700;
  line-height: var(--lh-tight); /* 原 1 */
  opacity: var(--opacity-tertiary);
}
/* 窄屏：左内边距 48px（给大引号留位）在 360px 下吃掉约 15% 宽度，正文只剩 260px。
   收到 22px，并把引号缩小、压低透明度——它只是装饰，不值得占掉正文宽度。 */
@media (max-width: 480px) {
  .page-subtitle {
    padding: var(--space-md) var(--space-md) var(--space-md) var(--space-lg);
  }
  .page-subtitle::before {
    left: 8px;
    font-size: calc(var(--fs-card) * 1.8);
    opacity: var(--opacity-tertiary);
  }
}

.page-subtitle > p {
  position: relative;
  margin: 0;
  color: inherit;
  /* 全站副标题统一写 <p>（2026-10-05：原部分页写 <h2>，h2 会被统计进目录 TOC，
     改为文本后不再进目录；字号沿用原 h2 覆盖值 T3 16px，外观不变）。 */
  font-size: var(--fs-card);
  font-weight: 600;
  line-height: var(--lh-loose); /* 原 1.8 */
}

/* 追番页「第三次元」副标题框（.bangumi-quote）：外观已回烤到插件 index.css，
 * 与 .page-subtitle 完全同一套（浅底深字渐变 + 主色左边框 + 大引号 + 空 <p> 清零 + h2 同号）。
 * 原先需用 #article-container 提特异性才能压过「在 </head> 前内联注入」的插件样式，
 * 插件本地化后由插件源头直接给出，本段退役。 */

/* 去掉主题默认给标题添加的 FA 链接图标（content:'\f0c1'，绝对定位 left:0 的红色 fa-link）：
 * 副标题框与 notes（此去经年）的 h2/h3/h4 标题有各自的装饰（大引号 / 折叠三角 / 左竖条），
 * 无需 fa-link 图标；且该图标 absolute 定位在文字起点，与 padding 覆盖后的文字重合
 * （主题 h2:hover{ padding-left:30px } 会在聚焦时把文字右移，造成「未聚焦重合、聚焦分开」）。
 * 折叠三角 .year-toggle::before 由更高特异性规则提供，不受影响。 */
/* .bangumi-quote 的两条已回烤到插件 index.css，此处只保留 .page-subtitle 的 */
.page-subtitle > h2::before {
  content: none;
}

/* ── 暗色模式主色微调（2026-09-18）────────────────────────────────────────
   亮色模式主色 #2F6E63 在暗底 #121212 上对比度只有 3.15，作为文字/图标会偏暗。
   暗色下换成浅一档的 #40786B：白字对比 5.10（仍达 AA），且在暗底上更清楚（3.67）。
   放在这里是因为 custom.css 在主题 index.css 之后加载，可稳定覆盖。 */
[data-theme="dark"] {
  --default-bg-color: #40786b;
}

/* ── 首屏横幅上的导航文字可读性（2026-10-03，同日修正作用域）──────────────
   主题给「透明导航态」（压在顶部壁纸上）的菜单链接只用 var(--light-grey)
   （亮色 #EEE）且无阴影 —— 换上亮色壁纸（如樱花）后白字几乎不可读。
   ⚠ 作用域修正（2026-10-03 二次修正）：全站页面头部都带 .fixed 类（full_page /
   post-bg / not-home-page），旧写法 :not(.fixed) 导致本规则从未命中过任何页面。
   透明态判据是「头部尚未获得 .nav-fixed 类」——⚠ 注意 .nav-fixed 加在
   **#page-header** 上而非 #nav 上（编译产物 #page-header.nav-fixed #nav 可证），
   第一次修正误写到 #nav 上，导致滚动后白色半透明底上仍叠暗晕（用户反馈「显脏」）。
   现写 #page-header:not(.nav-fixed)，滚动后主题的深字 + text-shadow:none 接管。
   阴影同时加强为三层：紧贴描边 + 中距投影 + 远距暗晕，高密度亮色壁纸上也可读。 */
#page-header:not(.nav-fixed) #nav a,
#page-header:not(.nav-fixed) #nav span.site-page,
#page-header:not(.nav-fixed) #nav #blog-info {
  text-shadow:
    0 1px 2px rgba(0, 0, 0, 0.75),
    0 1px 8px rgba(0, 0, 0, 0.45),
    0 0 14px rgba(0, 0, 0, 0.35);
}

/* ── 头图上的页面标题（about 等非首页的 #site-title）：加字重 + 深色描边 ──
   主题只有 text-shadow: 2px 2px 4px rgba(0,0,0,.15)，白字压在花墙等 busy 背景上
   几乎融入背景。字重 600 + 三层阴影，与导航同源的暗晕语言。首页大标题同样受益。 */
#page-header #site-title {
  text-shadow:
    0 2px 4px rgba(0, 0, 0, 0.6),
    0 1px 14px rgba(0, 0, 0, 0.4);
}
#page-header #page-site-info #site-title {
  font-weight: 600;
}

/* ── 暗色模式壁纸遮罩减淡（2026-10-03）────────────────────────────────────
   主题 darkmode.styl 给全屏壁纸 #web_bg 叠 rgba(0,0,0,.7)，暗色下壁纸只剩三成
   亮度，用户反馈「太暗」。降到 .55（壁纸透出约 45%），仍保证暗色氛围与文字对比。
   想再亮/再暗只调这一个 alpha（范围 0 ~ .7）。 */
[data-theme="dark"] #web_bg:before {
  background-color: rgba(0, 0, 0, 0.55);
}

/* 首页「置顶」图钉：主题在 index.styl 里硬编码了橙红 #FF7242（100% 饱和），
   不读 theme_color 配置，只能在这里覆盖 —— 统一为主题主色青绿（随明暗模式自适应）。 */
#recent-posts .recent-post-item > .recent-post-info > .article-title .sticky {
  color: var(--default-bg-color);
}

/* ── 首页树状导航图（节点数据 scripts/site-tree.js / 模板 themes/butterfly/layout/index.pug）──
   分工：**DOM 只管排版**——节点排布（板块竖排、分类横排、清单父左子右）完全由 flex 决定；
        **连线全部交给 JS 现算**——source/js/site-tree-lines.js 生成一层 SVG 覆盖层，
        按节点 getBoundingClientRect() 的真实坐标画正交折线。
   不再用 ::before/::after 画线的原因：伪元素连线依赖写死的像素偏移（「卡片半高 18px」
        「卡片半宽 40px」、28/24/14px 各种间距），字号档位一变、换行一发生、跨过 768px
        断点就会与节点脱节；SVG 现算对这几种情况天然免疫。
   配色沿用 Butterfly 主题：主色 #49B1F5 / 青绿 #00c4b6 / 橙红 #FF7242；
   卡片圆角 10px、阴影复用 --card-box-shadow、连线色 var(--hr-before-color) 明暗自适应。 */
.site-tree {
  --tree-line: var(--hr-before-color, #bfe4fb);
  --c-cat: #4a9a8f;   /* 分类类节点：2026-10-03 三色降饱和，向全站鼠尾草绿系靠拢 */
  /* 文字专用深色变体（GLM 报告 §3.2#5）：--c-cat 作文字压在 14% 淡 tint 底上仅约 3.3:1，
     低于 WCAG AA 4.5:1；徽标数字与 hover 文字改用本值（对白 ≈5.5:1）。
     图形元素（连线、图标、边框）不受影响，继续用 --c-cat。 */
  --c-cat-ink: #2f6b60;
  --c-album: #6a93b8; /* 相册类节点：降饱和蓝（原 #49b1f5 主题默认蓝） */
  --c-page: #d08a5f;  /* 单页类节点：降饱和橙（原 #ff7242） */
  --h: 30px;          /* 横向连线长度（总干线/轨道 → 卡片；同时是子层 li 的左内边距） */
  --row-gap: 16px;    /* 同层节点纵向间距 */
  --bus-gap: 24px;    /* 水平干线到「横排子卡片」的垂直距离（连线层读此变量，勿在 JS 里写死） */
  --drop-gap: 24px;   /* 单页行干线到卡片的垂直距离（同上） */
  --tree-corner: 6px; /* 折线拐角圆角半径（同上） */
  max-width: 100%;
  margin: 0;
  padding: 8px .2em;
  font-size: var(--fs-body);
  min-height: 723px;   /* 桌面端（≥900px）高度由下方「主列 flex 填充」结构决定；此下限供 769–899px 等无侧栏并排的场景维持「展开/折叠两态高度一致」 */
  display: flex;       /* 让 min-height 撑出的余量上下均分，折叠态上下留白仍对称 */
  flex-direction: column;
  justify-content: center;
  position: relative;  /* 承载连线层 SVG（绝对定位覆盖整棵树） */
}
/* 首页主内容卡片：主题 .layout > div:first-child 默认 padding:50px 40px（为文章流分页器预留），
   底部留白会让白色卡片比侧栏「网站信息」卡片低 70px。首页只放树状图，去掉底部留白使底边对齐。 */
#recent-posts { padding-top: var(--space-lg); padding-bottom: var(--space-lg); }
/* 树卡「底边对齐侧栏末卡」的纯 CSS 机制（**不依赖任何脚本**，仅桌面端）：
   实测：MAIN.layout 是 row flex，但主题给 #recent-posts 写了 align-self:flex-start，
   主列默认不参与拉伸、高度只等于自身内容 —— 必须先改回 stretch 才能与侧栏等高。
   再把主列改为纵向 flex + 去掉底部内边距 → 树卡以 flex:1 填满列高。
   于是：树卡底边 === 主列盒底 === 侧栏盒底 === 末卡可见底边（配合下方「末卡 margin-bottom:0」）。
   （此前用 JS 量高度写 min-height 的做法已移除：脚本一旦未执行 / 被浏览器缓存 / 被拦，
     就退化成写死 723px，偏差随机漂移 —— 改为由结构决定，任何情况下都成立。）
   :has() 限定「主列里确实放着树卡」的页面，不影响文章流页面。 */
@media (min-width: 900px) {
  #recent-posts:has(> .site-tree) {
    display: flex;
    flex-direction: column;
    align-self: stretch;   /* 主题给 #recent-posts 写了 align-self:flex-start（不参与拉伸），必须改回 stretch 才能与侧栏等高 */
    padding-bottom: 0;
  }
  #recent-posts:has(> .site-tree) > .site-tree {
    flex: 1 1 auto;
    min-height: 0;   /* 桌面端高度由「填满列高」决定，不再需要写死下限（769–899px 仍用上面的 723px 下限） */
  }
}
/* 侧栏最后一张卡片清零底部外边距（仅桌面端）：
   主题 .card-widget{margin-bottom:20px} 是卡间距；但末卡片的下方已无兄弟卡片，
   而 .sticky_layout 是 position:sticky（自成 BFC），这 20px **不会**折叠到容器之外，
   而是留在容器边框盒内 → 容器「盒子底边」比卡片肉眼可见的底边（绿框底）低 20px。
   清零后容器底边 === 卡片可见底边，与上面的主列 flex 填充配合，树卡底边精确落在末卡可见底边。 */
@media (min-width: 900px) {
  #aside-content .sticky_layout > :last-child { margin-bottom: 0; }
}
/* details 作为透明容器，使 summary + ul 直接参与 li 的 flex 流 */
.site-tree details { display: contents; }
/* ⚠ 但 display:contents 会让浏览器原生的「details 闭合时隐藏内容」失效（没有盒子可隐藏），
   表现为：点标题只有三角在转、内容根本不收，且连线层按「已收起」不画线 → 看起来就是「错乱」。
   故必须显式补回隐藏规则。2026-10-03 去掉 !important：冲突规则
   `.site-tree .cat-branch > details > ul{display:flex}` 为 (0,2,1)，此处首选择器 (0,3,2)、
   兜底选择器 (0,2,2) 特异性均更高，普通声明即可取胜。 */
.site-tree li.cat-branch > details:not([open]) > ul,
.site-tree details:not([open]) > ul {
  display: none;
}

/* 每一层：子节点纵向堆叠（同层上下排列）；节点在左、子树在右 */
.site-tree ul {
  display: flex;
  flex-direction: column;
  gap: var(--row-gap);
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
}
/* 顶层各板块的纵向间距 */
.site-tree > ul { gap: 0; }
.site-tree > ul > li {
  padding-left: var(--h);   /* 卡片右移，给总干线留出横向分叉空间 */
  padding-top: calc(var(--row-gap) * .9);
  padding-bottom: calc(var(--row-gap) * .9);
}

/* ── 单页组（第三次元 ~ 关于）：卡片横排，连线由总干线底部绕上来接住 ── */
.site-tree > ul > li.h-branch { padding-left: 0; } /* 与总干线同一起点，卡片靠 .h-row 的 padding 右移 */
.site-tree .h-row {
  display: flex;
  flex-wrap: wrap;
  column-gap: 22px;
  row-gap: calc(var(--drop-gap) + 10px); /* 换行时行距必须大于干线间距，否则行下方的干线会压到下一行卡片 */
  margin-top: calc(var(--row-gap) * .5);
  padding-left: var(--h);                      /* 卡片右移到干线右侧 */
  padding-bottom: calc(var(--drop-gap) + 4px); /* 给卡片下方的水平干线留出空间 */
}

/* ── 分类组：分类节点居中，其下横向排开各分类（连线由 SVG 连线层画） ── */
.site-tree > ul > li.cat-branch {
  padding-left: 0;
  flex-direction: column;
  align-items: center;
}
/* 分类节点：底部留出干线空间（这段间距由连线层补竖线，树状连贯） */
.site-tree .cat-branch > details > summary { margin: 0 auto var(--space-xl); }
/* 各分类横向一行：嵌套 ul 改为水平排列（覆盖默认的「父在左、子在右」竖列树） */
.site-tree .cat-branch > details > ul {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  column-gap: 22px;
  row-gap: calc(var(--bus-gap) + 10px); /* 换行时行距大于干线间距，确保行上方的干线落在行间空隙里 */
  padding: var(--bus-gap) 0 0;          /* 顶部留出水平干线 + 垂线空间；左右归零使首末分类左右对称 */
}
.site-tree .cat-branch > details > ul > li { padding-left: 0; }
/* 节点单元：节点在左、子树在右，节点垂直居中于子树高度 */
.site-tree li {
  display: flex;
  align-items: center;
  position: relative;
  list-style: none;
}

/* ── 子层 li：左内边距把卡片推到「竖直轨道」右侧，轨道与短接线由连线层画 ── */
.site-tree li li { padding-left: var(--h); }

/* ── 连线层 SVG：绝对定位覆盖整棵树，坐标由 source/js/site-tree-lines.js 现算 ──
   线色/线宽走变量，明暗主题切换时随 CSS 变量自动变色（无需 JS 重绘）。
   pointer-events:none 让点击穿透到卡片；z-index:0 使线压在卡片之下。 */
.site-tree-lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;      /* 干线略超容器边界时也照常绘制 */
  pointer-events: none;
  z-index: 0;
  fill: none;
  stroke: var(--tree-line);
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
}
/* 卡片抬到连线之上；同时作为定位上下文（悬停位移不受影响） */
.site-tree details > summary,
.site-tree a { position: relative; z-index: 1; }

/* 节点卡片（summary 与 a 共用主题卡片观感） */
.site-tree details > summary,
.site-tree a {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  white-space: nowrap;
  padding: .5em .8em;
  background: var(--card-bg, #fff);
  border: 1px solid var(--light-grey, #eee);
  border-left: 4px solid var(--default-bg-color, #49b1f5);
  border-radius: var(--radius-md);
  box-shadow: var(--card-box-shadow, 0 3px 8px 6px rgba(7,17,27,.05));
  color: var(--font-color, #4c4948);
  text-decoration: none;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast),
              border-color var(--transition-fast), color var(--transition-fast), background var(--transition-fast);
}
.site-tree a > span:first-of-type,
.site-tree details > summary > span:first-of-type { font-weight: 500; }

/* 悬停：卡片抬升 + 阴影加深 + 左侧条变色 */
.site-tree details > summary:hover,
.site-tree a:hover {
  transform: translateY(-2px);
  box-shadow: var(--card-hover-box-shadow, 0 3px 8px 6px rgba(7,17,27,.09));
  border-left-color: var(--c-page);
  color: var(--default-bg-color, #49b1f5);
  text-decoration: none;
}

/* 类型配色（左侧条 + 悬停文字色） */
.site-tree .t-cat   { border-left-color: var(--c-cat); }
.site-tree .t-album { border-left-color: var(--c-album); }
.site-tree .t-root  { border-left-color: var(--default-bg-color, #49b1f5); }
.site-tree .t-page  { border-left-color: var(--c-page); }
.site-tree .t-cat:hover   { color: var(--c-cat);   border-left-color: var(--c-cat); }
.site-tree .t-album:hover { color: var(--c-album); border-left-color: var(--c-album); }
.site-tree .t-root:hover  { color: var(--default-bg-color, #49b1f5); }
.site-tree .t-page:hover  { color: var(--c-page);  border-left-color: var(--c-page); }

/* 图标：随类型着色 + 悬停微缩放
   选择器必须用 [class*="fa-"] 而非 i.fas —— Font Awesome 有多个风格前缀：
   fas/fa-solid（实心）、fab/fa-brands（品牌，如 QQ）、far/fa-regular（线框）、fa（旧版通用）。
   只写 i.fas 会让 fab 与 fa 前缀的图标漏掉着色、回退成正文灰色（QQ、heartbeat 曾踩此坑）。 */
.site-tree i[class*="fa-"] {
  width: 1.3em; text-align: center; flex: none;
  transition: color var(--transition-fast), transform var(--transition-fast);
}
.site-tree .t-cat   i[class*="fa-"] { color: var(--c-cat); }
.site-tree .t-album i[class*="fa-"] { color: var(--c-album); }
.site-tree .t-root  i[class*="fa-"] { color: var(--default-bg-color, #49b1f5); }
.site-tree .t-page  i[class*="fa-"] { color: var(--c-page); }
.site-tree details > summary:hover i[class*="fa-"],
.site-tree a:hover i[class*="fa-"] { transform: scale(1.14); }

/* 叶子计数徽标 */
.site-tree .leaf-count {
  margin-left: .35em;
  padding: 0 .45em;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--c-cat) 14%, var(--card-bg, #fff));
  color: var(--c-cat-ink); /* GLM §3.2#5：数字文字用深色变体（--c-cat 仅 3.3:1 不达 AA） */
  font-size: var(--fs-badge);
  font-weight: 600;
}

/* 暗色模式：背景更深，文字专用色反向提亮（对卡片底 ≈8:1） */
[data-theme="dark"] .site-tree {
  --c-cat-ink: #86c4b6;
}

/* 折叠三角（替换默认 disclosure，主题主色） */
.site-tree details > summary {
  cursor: pointer;
  list-style: none;
  font-weight: 600;
  color: var(--text-highlight-color, #1f2d3d);
}
.site-tree details > summary::-webkit-details-marker { display: none; }
.site-tree details > summary::before {
  content: "\25B8";
  display: inline-block;
  margin-left: -.1em;
  margin-right: .1em;
  color: var(--default-bg-color, #49b1f5);
  transition: transform var(--transition-fast);
}
.site-tree details[open] > summary::before { transform: rotate(90deg); }

/* ── 移动端适配：横向分叉树在小屏压缩，避免溢出容器 ──
   仅覆盖 ≤768px；桌面端沿用上方默认 --h:30px 等变量。
   压缩手段：缩短每层连线(--h)、缩小节点卡片内边距与字号、取消移动端无用的等高留白(min-height)。 */
@media (max-width: 768px) {
  .site-tree {
    --h: 12px;          /* 每层连线缩短，减少横向占用 */
    --row-gap: 10px;     /* 同层节点纵向间距收窄 */
    --bus-gap: 16px;     /* 干线间距同步收窄（连线层读变量，自动跟随） */
    --drop-gap: 18px;
    font-size: var(--fs-meta);
    min-height: 0;       /* 移动端无侧栏并排，不必维持等高留白 */
    padding: 6px .1em;
  }
  .site-tree details > summary,
  .site-tree a {
    /* 节点卡片缩小的同时保住可点面积：原 .4em 内边距 + 12px 字号 → 卡高仅约 28px，
       远低于 40px 触控下限，手机上很容易点错节点。改为 .7em（约 36px 高）。
       并放开 nowrap：长节点名允许折行，卡片反而更窄，避免把树撑宽触发整页横向滚动。 */
    padding: .7em .8em;
    gap: .35em;
    white-space: normal;
    max-width: 100%;
  }
  .site-tree li li { padding-left: var(--h); }
  .site-tree .h-row {
    column-gap: 14px;
    row-gap: calc(var(--drop-gap) + 8px);
    padding-left: var(--h);
  }
  .site-tree i[class*="fa-"] { width: 1.1em; }
}

/* 文章页顶图区域：保留 post-bg 布局（标题在 header 内），背景透明透出全站壁纸
   （特异性 (1,1,0) 高于主题 head.styl 的 #page-header (1,0,0)，且本文件后加载，
   2026-10-03 起无需 !important） */
#page-header.post-bg {
  background-color: transparent;
}

/* 文章末尾上下篇板块封面底色：2026-10-03 已收编进主题模板
   （themes/butterfly/layout/includes/pagination.pug 内联直接输出 var(--btn-bg)），
   本文件不再用 !important 压内联样式。 */

/* =============================================================================
 * 十四、emoji 统一（.github-emoji）
 * -----------------------------------------------------------------------------
 * 由 hexo-filter-github-emojis 在构建时把样式内联注入到 </head> 之前，
 * **晚于本文件**，所以普通选择器 (0,1,0) 覆盖不到 —— 这里用 #article-container /
 * #page / #aside-content / #footer 把特异性提到 (1,1,0) 取胜，不必写 !important。
 *  · 尺寸 1.2em：与 GitHub 观感一致，且相对父级等比缩放，跨页天然协调；
 *  · 去掉 min-height:1.2em：它会把行盒撑高，造成带 emoji 的行与纯文字行行距不均；
 *  · vertical-align 由 top 改 -0.15em：原写法顶部对齐，行高大时 emoji 视觉上浮。
 * ========================================================================== */
#article-container .github-emoji,
#page .github-emoji,
#aside-content .github-emoji,
#footer .github-emoji {
  min-height: 0;
  vertical-align: -0.15em;
}
/* 小字容器（徽章 / 角标，T6 11px）里的 emoji 跟着缩到 13px 会偏小，给一点下限 */
#article-container .leaf-count .github-emoji,
#page .badge .github-emoji,
#article-container .badge .github-emoji { font-size: 1.05em; }

/* =============================================================================
 * 十五、404 页布局（error_404）
 * -----------------------------------------------------------------------------
 * 2026-10-03 重构：主题原布局是「左图右文」分栏卡片（_page/404.styl 的
 * .error-content），现模板已改为「顶图横幅标题 + 居中 GIF + 副标题」
 * （见 themes/butterfly/layout/includes/page/404.pug），这里定义新结构的样式。
 *  · 标题「404」由主题 header 渲染在（透明的）顶图横幅上：generator 补了 title:'404'
 *    且不再设 top_img:false，走 #page-site-info h1#site-title，与其它页面同款大字，
 *    不在此重复定义；
 *  · GIF 宽度 min(400px, 78vw)：桌面不超过 400px、窄屏按视口收缩，等比不裁切；
 *  · 圆角 + 主题卡片阴影：与全站卡片观感统一，且随亮/暗模式自动切换；
 *  · 旧 .error-content 分栏样式因模板不再输出该结构而自然失效，无需覆盖。
 * ========================================================================== */
.type-404 .error404 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-sm) var(--space-lg) 48px;
  text-align: center;
}

/* 主题 .not-home-page 横幅固定 400px 高（标题 top:200px），是 404 内容被顶出
 * 一屏的主因；这里压缩到 200px 并让标题在横幅内垂直居中（标题行高约 46px，
 * (200-46)/2≈77，取 72 视觉居中）。仅在 .type-404 作用域内收窄，不影响其它页面。 */
.type-404 #page-header.not-home-page {
  height: 200px;
}

.type-404 #page-site-info {
  top: 72px;
}

/* 主题给 .nc 的 margin-top:5% 对 404 太松，压成固定值 */
.type-404 .nc {
  margin-top: var(--space-xl);
}

.type-404 .error404-gif img {
  display: block;
  width: min(360px, 72vw);
  height: auto;
  border-radius: var(--radius-card, 12px);
  box-shadow: var(--card-box-shadow, 0 4px 14px rgba(0, 0, 0, 0.08));
}

.type-404 .error404-sub {
  font-size: var(--fs-section, 1.5714em);
  color: var(--font-color);
  opacity: var(--opacity-secondary);
}

/* 窄屏：横幅 150px、GIF 300px，保证一屏放完 */
@media screen and (max-width: 768px) {
  .type-404 #page-header.not-home-page {
    height: 150px;
  }

  .type-404 #page-site-info {
    top: 50px;
  }

  .type-404 .error404-gif img {
    width: min(300px, 74vw);
  }
}