/* ==========================================================================
   monish · 7/11 · post.css
   文章页：目录 / .monish-prose 全量正文排版 / 代码高亮与复制按钮
   / 版权 / 上下篇 / 评论容器
   v2：正文 --font-body、标题 --font-display、所有小标签与代码 --font-mono。
   代码块那套（code-toolbar / code-language / 行号槽 / --hl-* 令牌 / br 兜底）
   按 v1.4 定稿保留，只换 v2 令牌与圆角。
   ========================================================================== */

/* ----------------------------------------------------------------- 目录 */
.post-toc {
  margin-bottom: var(--space-6);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-md);
  background: var(--surface-3);
}

.post-toc-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  color: var(--text);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  text-align: start;
  cursor: pointer;
}

/* 展开/收起的小三角：跟着 aria-expanded 旋转 */
.post-toc-toggle::after {
  content: "\25BE";
  margin-inline-start: auto;
  font-size: .8em;
  color: var(--text-muted);
  transition: transform var(--speed) var(--ease-out-expo);
}

.post-toc-toggle[aria-expanded="false"]::after {
  transform: rotate(-90deg);
}

/* 展开/收起的动画：
   grid-template-rows 在 1fr ↔ 0fr 之间过渡，能动画到「内容的真实高度」，
   比 max-height 写死一个魔数更稳（目录长短差异很大）。
   .post-toc-nav 作为 grid item 必须 min-height:0 + overflow:hidden，
   否则 0fr 那一行会被内容顶开、根本收不起来。 */
.post-toc-body {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows var(--speed) var(--ease-out-expo);
}

.post-toc.is-collapsed .post-toc-body {
  grid-template-rows: 0fr;
}

.post-toc-nav {
  display: block;
  min-height: 0;
  overflow: hidden;
  margin-top: var(--space-3);
  /* 目录本身也做一个轻微的下降落定，让展开不只是「高度变高」 */
  opacity: 1;
  transform: none;
  transition:
    opacity var(--speed-fast) var(--ease-out-expo),
    transform var(--speed) var(--ease-out-expo);
}

.post-toc.is-collapsed .post-toc-nav {
  margin-top: 0;
  opacity: 0;
  transform: translateY(-6px);
}

/* 展开且目录很长时，内部自己滚（超过 45vh 就封顶），不把正文顶到很远。
   只在展开态给 overflow:auto —— 收起过程中必须保持 hidden 才能裁剪。 */
.post-toc:not(.is-collapsed) .post-toc-nav {
  max-height: 45vh;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}

/* 目录条目：展开时逐条淡入（延迟只写在展开态，收起时立即开始） */
.post-toc.is-collapsed .toc a {
  transition-delay: 0ms;
}

.post-toc:not(.is-collapsed) .toc li {
  animation: monish-toc-item 260ms var(--ease-out-expo) both;
}

.post-toc:not(.is-collapsed) .toc li:nth-child(1) { animation-delay: 40ms; }
.post-toc:not(.is-collapsed) .toc li:nth-child(2) { animation-delay: 60ms; }
.post-toc:not(.is-collapsed) .toc li:nth-child(3) { animation-delay: 80ms; }
.post-toc:not(.is-collapsed) .toc li:nth-child(4) { animation-delay: 100ms; }
.post-toc:not(.is-collapsed) .toc li:nth-child(5) { animation-delay: 120ms; }
.post-toc:not(.is-collapsed) .toc li:nth-child(n+6) { animation-delay: 140ms; }

@keyframes monish-toc-item {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

/* 动画关闭 / 降级时：目录直接到终态，不要有高度过渡 */
html[data-animation="false"] .post-toc-body,
html[data-animation="false"] .post-toc-nav {
  transition: none;
}

html[data-animation="false"] .post-toc:not(.is-collapsed) .toc li {
  animation: none;
}

@media (prefers-reduced-motion: reduce) {
  .post-toc-body,
  .post-toc-nav {
    transition-duration: .01ms;
  }

  .post-toc:not(.is-collapsed) .toc li {
    animation: none;
  }
}

.post-toc .toc,
.monish-prose .toc {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: .9375rem;
  line-height: 1.75;
}

.toc ol {
  margin: 0;
  padding-inline-start: var(--space-4);
  list-style: none;
}

.toc li {
  margin: 0;
}

.toc a {
  display: block;
  padding: .22em 0 .22em .7em;
  border-inline-start: 2px solid transparent;
  color: var(--text-muted);
  transition: color var(--speed-fast) var(--ease), border-color var(--speed-fast) var(--ease);
}

.toc a:hover {
  color: var(--accent-strong);
  border-inline-start-color: var(--accent);
  text-decoration: none;
}

.toc a.is-active {
  color: var(--accent-strong);
  border-inline-start-color: var(--accent);
  font-weight: 500;
}

/* =========================================================== 正文排版 ==== */
.monish-prose {
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  overflow-wrap: break-word;
}

.monish-prose > :first-child {
  margin-top: 0;
}

.monish-prose > :last-child {
  margin-bottom: 0;
}

/* 标题：超粗无衬线（--font-display） */
.monish-prose h2,
.monish-prose h3,
.monish-prose h4,
.monish-prose h5,
.monish-prose h6 {
  margin: var(--space-7) 0 var(--space-4);
  color: var(--text);
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.01em;
  text-wrap: pretty;
}

.monish-prose h2 {
  font-size: clamp(1.5rem, 3vw, 2rem);
}

.monish-prose h3 {
  font-size: 1.3rem;
}

.monish-prose h4 {
  font-size: 1.1rem;
}

.monish-prose h5,
.monish-prose h6 {
  font-size: 1rem;
}

/* 段落 / 链接（正文里的链接是绿色点缀） */
.monish-prose p {
  margin: 0 0 var(--space-5);
}

/* 正文链接：下划线常驻（可读性），hover 时颜色加深 + 下划线「加粗浮起」。
   用 text-decoration-* 过渡而不是重画一条 ::after，是因为正文里链接会换行，
   多重背景/伪元素方案在断行处会断掉。 */
.monish-prose a {
  color: var(--accent-strong);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--accent) 50%, transparent);
  text-decoration-thickness: 1px;
  text-underline-offset: .22em;
  transition:
    color var(--speed-fast) var(--ease-out-expo),
    text-decoration-color var(--speed-fast) var(--ease-out-expo),
    text-decoration-thickness var(--speed-fast) var(--ease-out-expo);
}

.monish-prose a:hover {
  color: var(--accent-strong);
  text-decoration-color: var(--accent);
  text-decoration-thickness: 2px;
}

/* 正文里指向外站的链接：hover 时右上角的小箭头轻微外移（motion-web 的
   「可发现性」原则 —— 交互元素要在被点之前就告诉人能点） */
.monish-prose a[target="_blank"]::after {
  content: "↗";
  display: inline-block;
  margin-inline-start: .12em;
  font-size: .82em;
  transition: transform var(--speed-fast) var(--ease-out-expo);
}

.monish-prose a[target="_blank"]:hover::after {
  transform: translate(2px, -2px);
}

.monish-prose em,
.monish-prose i {
  font-style: italic;
}

.monish-prose strong,
.monish-prose b {
  font-weight: 600;
  color: var(--text);
}

.monish-prose del {
  color: var(--text-muted);
}

/* 列表 */
.monish-prose ul,
.monish-prose ol {
  margin: 0 0 var(--space-5);
  padding-inline-start: 1.4em;
}

.monish-prose ul {
  list-style: disc;
}

.monish-prose ol {
  list-style: decimal;
}

.monish-prose ul ul {
  list-style: circle;
}

.monish-prose li {
  margin: .3em 0;
}

.monish-prose li > ul,
.monish-prose li > ol {
  margin-top: .3em;
  margin-bottom: 0;
}

.monish-prose li::marker {
  color: var(--accent-strong);
}

.monish-prose li > p {
  margin-bottom: var(--space-3);
}

/* 引用 */
.monish-prose blockquote {
  margin: 0 0 var(--space-5);
  padding: var(--space-4) var(--space-5);
  border-inline-start: 2px solid var(--accent);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  background: var(--surface-3);
  color: var(--text);
}

.monish-prose blockquote > :last-child {
  margin-bottom: 0;
}

.monish-prose blockquote cite {
  display: block;
  margin-top: var(--space-2);
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  font-style: normal;
}

/* 行内代码 */
.monish-prose code {
  padding: .1em .38em;
  border-radius: 4px;
  background: var(--surface-3);
  color: var(--text);
  font-family: var(--font-mono);
  font-size: .88em;
  word-break: break-word;
}

/* 代码块（裸 <pre>，没有 <code> —— 必须显式声明等宽，契约 §5.3） */
.monish-prose pre {
  position: relative;
  margin: 0 0 var(--space-5);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-lg);
  background: var(--surface-3);
  color: var(--text);
  font-family: var(--font-mono);
  font-size: .875rem;
  line-height: 1.75;
  /* 长代码块自己横向滚动，不撑破页面 */
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.monish-prose pre code {
  display: block;
  padding: 0;
  border-radius: 0;
  background: none;
  color: inherit;
  font-size: inherit;
  white-space: pre;
  word-break: normal;
}

/* Hexo figure.highlight —— 紧凑块：细行号槽 + 语言标签 + 令牌着色 */
.monish-prose .highlight,
.highlight {
  position: relative;
  margin: 0 0 var(--space-5);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface-3);
  /* 只负责裁圆角；横向滚动交给内部的 .code-scroll */
  overflow: hidden;
}

/* 横向滚动容器：套在 <table> 外面（由 scripts/helpers.js 构建期注入）。
   为什么不直接让 pre 滚：table 是 width:100% 的 auto 布局，长行会把**表格本身**
   撑得比容器宽，于是 .highlight 的 overflow:hidden 直接把它裁掉、一个滚动条都不出现。
   套一层容器让表格自由变宽、由这层滚，同时行号槽还能 sticky 在最左。
   工具条留在容器外，所以横滚时语言标签和复制按钮不会跟着跑掉。 */
.code-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  /* html 上那条浅色 scrollbar-color 在这里太淡（--line 压 --surface-3 几乎看不见），
     单独加深，让人一眼看出「这里能左右滑」。 */
  scrollbar-color: var(--text-faint) transparent;
}

/* WebKit：给横向滚动条一个可见的胶囊滑块 */
.code-scroll::-webkit-scrollbar {
  height: 10px;
}

.code-scroll::-webkit-scrollbar-track {
  background: transparent;
}

.code-scroll::-webkit-scrollbar-thumb {
  border: 3px solid transparent;
  border-radius: var(--radius-pill);
  background: var(--line);
  background-clip: padding-box;
}

.code-scroll::-webkit-scrollbar-thumb:hover {
  background: var(--text-faint);
  background-clip: padding-box;
}

/* figure.highlight 里的 pre 不再自己滚（外层 .code-scroll 负责），
   否则会出现两条横向滚动条。这里要压过上面的 .monish-prose pre。 */
.monish-prose .highlight pre,
.highlight pre {
  margin: 0;
  border: 0;
  border-radius: 0;
  background: none;
  font-family: var(--font-mono);
  font-size: .875rem;
  line-height: 1.7;
  overflow: visible;
}

/* Hexo 高亮产物每行后跟一个 <br>，最后一个会造成尾部空行 —— 去掉
   （hljs 模式下 <br> 在 <pre><code> 里，所以两种结构都要覆盖） */
.highlight pre > br:last-child,
.highlight pre > code > br:last-child,
.highlight pre > code > span.line:last-child + br:last-child {
  display: none;
}

/* 代码块工具条：语言名 + 复制按钮同处右上角，绝对定位不占正文高度。
   由 after_post_render filter 注入（见 scripts/helpers.js），复制按钮由 JS 追加。 */
.code-toolbar {
  position: absolute;
  top: 0;
  inset-inline-end: 0;
  z-index: 2;
  display: flex;
  align-items: stretch;
}

.code-language {
  padding: 3px var(--space-3);
  border-inline-start: 1px solid var(--border);
  border-block-end: 1px solid var(--border);
  border-end-start-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text-faint);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  line-height: 1.4;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
}

/* 工具条里的复制按钮：常显、与语言标签同排，不再绝对定位 */
.code-toolbar .code-copy {
  position: static;
  inset: auto;
  opacity: 1;
  padding: 3px var(--space-3);
  border: 0;
  border-inline-start: 1px solid var(--border);
  border-block-end: 1px solid var(--border);
  border-radius: 0;
  background: var(--surface);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  line-height: 1.4;
  letter-spacing: var(--ls-label);
}

.code-toolbar .code-copy:hover,
.code-toolbar .code-copy.is-copied {
  background: var(--accent-soft);
  color: var(--accent-strong);
}

/* 首行代码让开工具条高度。
   工具条是 absolute 贴在卡片右上角的，不占流内高度，所以代码首行（以及行号槽
   首行）必须自己往下让出一行的高度，否则语言标签和复制按钮会压在第一行代码上。

   ⚠️ 选择器必须穿过 `.code-scroll`：v2.1.0 给 `<table>` 套了横向滚动容器之后，
   原来的 `.code-toolbar + table`（相邻兄弟）就再也匹配不上，这条让位规则曾
   整个失效 —— 表现就是「第一行代码和语言标签重叠」。
   行号槽和代码列要**同时**让位，否则行号和代码行会错开。

   单位必须用 rem 而不是 em：`.code-language` 的字号是 --fs-label(12px)、
   代码是 .875rem(14px)，用 em 会让两列各自算出 18px / 21px，
   于是**每一行行号都比代码行高 2px**（曾实测 diff 恒为 -2）。 */
.highlight > .code-toolbar + .code-scroll td.code pre,
.highlight > .code-toolbar + .code-scroll td.gutter pre {
  padding-block-start: calc(var(--space-2) + 1.5rem);
}

.highlight figcaption,
.highlight .caption {
  padding: var(--space-2) var(--space-4);
  border-bottom: 1px solid var(--border);
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
}

/* 表格：高亮块内部的 table/td 必须完全去边框去内边距。
   注意 `.monish-prose td`（本文件后面的表格规则）与 `.highlight td` 同优先级，
   靠源码顺序会赢；所以这里用 `.monish-prose .highlight …` 提高优先级。 */
.monish-prose .highlight table,
.highlight table {
  width: 100%;
  margin: 0;
  border: 0;
  border-collapse: collapse;
  font-size: inherit;
  line-height: inherit;
}

.monish-prose .highlight td,
.highlight td {
  padding: 0;
  border: 0;
  vertical-align: top;
}

/* 代码正文 */
.highlight td.code {
  width: 100%;
}

.highlight td.code pre {
  padding: var(--space-3) var(--space-4);
}

/* 行号槽：贴紧、只留必要宽度，不再是一条宽白带。
   横向滚动时它 sticky 在最左，代码从底下滑过（所以要给不透明底色）。 */
.highlight td.gutter {
  width: 1%;
  white-space: nowrap;
  position: sticky;
  inset-inline-start: 0;
  z-index: 2;
  background: var(--surface-3);
}

.highlight td.gutter pre {
  padding: var(--space-3) var(--space-2) var(--space-3) var(--space-3);
  border-inline-end: 1px solid var(--border);
  color: var(--text-faint);
  font-family: var(--font-mono);
  font-size: .75rem;
  /* 行号与代码行严格对齐：显式声明，避免等宽字体里的自定义行高漂移 */
  line-height: 1.98;
  text-align: end;
  /* 行号用等宽数字，多位数不会左右跳 */
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  user-select: none;
  opacity: .7;
}

/* ---------------------------------------------------- 语法高亮令牌（浅色） */
.highlight {
  --hl-keyword: #6E57A8;
  --hl-string: #4C7A5C;
  --hl-comment: #8A938C;
  --hl-number: #A9703F;
  --hl-title: #2C6A70;
  --hl-name: #2F5F9E;
  --hl-attr: #8A5A2B;
  --hl-type: #2C6A70;
  --hl-builtin: #6E57A8;
  --hl-deletion: #A64B4B;
  --hl-addition: #3F7A4F;
}

/* 深色令牌（含无 JS 的自动兜底） */
html[data-theme="dark"] .highlight {
  --hl-keyword: #C4A7F5;
  --hl-string: #9FCFA9;
  --hl-comment: #8B958C;
  --hl-number: #E3B27C;
  --hl-title: #86C9CF;
  --hl-name: #9CC2F0;
  --hl-attr: #D9B07E;
  --hl-type: #86C9CF;
  --hl-builtin: #C4A7F5;
  --hl-deletion: #E39A9A;
  --hl-addition: #9FCFA9;
}

@media (prefers-color-scheme: dark) {
  html:not([data-theme]) .highlight {
    --hl-keyword: #C4A7F5;
    --hl-string: #9FCFA9;
    --hl-comment: #8B958C;
    --hl-number: #E3B27C;
    --hl-title: #86C9CF;
    --hl-name: #9CC2F0;
    --hl-attr: #D9B07E;
    --hl-type: #86C9CF;
    --hl-builtin: #C4A7F5;
    --hl-deletion: #E39A9A;
    --hl-addition: #9FCFA9;
  }
}

.highlight .comment,
.highlight .quote,
.highlight .hljs-comment,
.highlight .hljs-quote {
  color: var(--hl-comment);
  font-style: italic;
}

.highlight .keyword,
.highlight .selector-tag,
.highlight .literal,
.highlight .doctag,
.highlight .meta,
.highlight .hljs-keyword,
.highlight .hljs-selector-tag,
.highlight .hljs-literal,
.highlight .hljs-doctag,
.highlight .hljs-meta {
  color: var(--hl-keyword);
  font-weight: 600;
}

/* built_in（print / str / console 之类）用类型色，不要和关键字一样重 */
.highlight .built_in,
.highlight .hljs-built_in {
  color: var(--hl-type);
}

/* 标点保持弱化，避免整块代码花掉 */
.highlight .punctuation,
.highlight .hljs-punctuation {
  color: var(--text-muted);
}

.highlight .string,
.highlight .regexp,
.highlight .addition,
.highlight .subst,
.highlight .hljs-string,
.highlight .hljs-regexp,
.highlight .hljs-addition,
.highlight .hljs-subst,
.highlight .hljs-char.escape_ {
  color: var(--hl-string);
}

.highlight .number,
.highlight .symbol,
.highlight .bullet,
.highlight .hljs-number,
.highlight .hljs-symbol,
.highlight .hljs-bullet {
  color: var(--hl-number);
}

.highlight .title,
.highlight .section,
.highlight .function,
.highlight .hljs-title,
.highlight .hljs-section,
.highlight .hljs-function .hljs-title {
  color: var(--hl-title);
}

.highlight .name,
.highlight .selector-id,
.highlight .selector-class,
.highlight .hljs-name,
.highlight .hljs-selector-id,
.highlight .hljs-selector-class,
.highlight .hljs-selector-pseudo {
  color: var(--hl-name);
}

.highlight .attr,
.highlight .attribute,
.highlight .variable,
.highlight .template-variable,
.highlight .tag,
.highlight .params,
.highlight .hljs-attr,
.highlight .hljs-attribute,
.highlight .hljs-variable,
.highlight .hljs-template-variable,
.highlight .hljs-tag,
.highlight .hljs-params,
.highlight .hljs-property {
  color: var(--hl-attr);
}

.highlight .type,
.highlight .class,
.highlight .hljs-type,
.highlight .hljs-class .hljs-title,
.highlight .hljs-selector-attr,
.highlight .hljs-selector-tag {
  color: var(--hl-type);
}

.highlight .deletion,
.highlight .hljs-deletion {
  color: var(--hl-deletion);
  text-decoration: line-through;
}

.highlight .addition,
.highlight .hljs-addition {
  color: var(--hl-addition);
}

.highlight .emphasis {
  font-style: italic;
}

.highlight .strong {
  font-weight: 600;
}

/* 代码复制按钮（由 JS 插入，见契约 §7.6；无工具条时退回 .highlight / pre 右上角） */
.code-copy {
  position: absolute;
  top: var(--space-2);
  inset-inline-end: var(--space-2);
  z-index: 2;
  padding: .3em .8em;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  line-height: 1.7;
  opacity: 0;
  transition: opacity var(--speed-fast) var(--ease), color var(--speed-fast) var(--ease);
}

.monish-prose pre:hover .code-copy,
.highlight:hover .code-copy,
.code-copy:focus-visible {
  opacity: 1;
}

/* 复制成功的确认反馈：用 linear() 手写的弹簧曲线做一次轻微过冲-落定。
   这是「小元件拿弹簧手感」的用法 —— 不必为了一个按钮引动画库。 */
.code-copy.is-copied {
  animation: monish-confirm var(--speed) var(--ease-spring) both;
}

@keyframes monish-confirm {
  0% {
    transform: scale(1);
  }

  45% {
    transform: scale(1.08);
  }

  100% {
    transform: scale(1);
  }
}

.code-copy:hover {
  color: var(--accent-strong);
}

/* 复制成功反馈（JS 加 1.6s 的 .is-copied）：浅绿底 + 强调色文字，
   并强制常显，指针移开也能看到结果 */
.code-copy.is-copied {
  opacity: 1;
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent-strong);
}

/* 表格 */
.monish-prose table {
  width: 100%;
  margin: 0 0 var(--space-5);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: .9375rem;
  line-height: 1.7;
}

.monish-prose th,
.monish-prose td {
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border);
  text-align: start;
  vertical-align: top;
}

.monish-prose thead th {
  background: var(--surface-3);
  color: var(--text);
  font-weight: 600;
  white-space: nowrap;
}

.monish-prose tbody tr:nth-child(even) {
  background: color-mix(in srgb, var(--surface-3) 60%, transparent);
}

.monish-prose table caption {
  margin-bottom: var(--space-2);
  color: var(--text-muted);
  font-size: .875rem;
}

/* 图片 / 图注 */
.monish-prose img {
  max-width: 100%;
  height: auto;
  margin-inline: auto;
  border-radius: var(--radius-md);
}

.monish-prose figure {
  margin: 0 0 var(--space-5);
}

.monish-prose figcaption {
  margin-top: var(--space-2);
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-align: center;
}

.monish-prose iframe,
.monish-prose video {
  max-width: 100%;
}

/* 分隔线 */
.monish-prose hr {
  width: 56px;
  margin: var(--space-7) auto;
  border: 0;
  border-top: 2px solid var(--line);
}

/* ----------------------------------------------------------------- 页脚 */
.post-copyright {
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-md);
  background: var(--surface-3);
  color: var(--text-muted);
  font-size: .9375rem;
  line-height: 1.8;
}

.post-copyright a {
  color: var(--text);
  border-bottom: 1px solid var(--line);
}

.post-copyright a:hover {
  color: var(--accent-strong);
  border-bottom-color: var(--accent);
}

.post-nav {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
  margin-top: var(--space-6);
}

.post-nav-item {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-md);
  background: var(--surface-3);
  transition: background-color var(--speed-fast) var(--ease), box-shadow var(--speed-fast) var(--ease);
}

.post-nav-item:hover {
  background: var(--accent-soft);
  text-decoration: none;
}

.post-nav-next {
  text-align: end;
}

/* 只有「下一篇」时（最新一篇没有上一篇），它要占右列而不是缩在左边 */
.post-nav-next:first-child {
  grid-column: 2;
}

/* 只有「上一篇」时占左列（默认行为，显式写出便于阅读） */
.post-nav-prev:last-child {
  grid-column: 1;
}

.post-nav-label {
  color: var(--text-faint);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}

.post-nav-title {
  color: var(--text);
  font-weight: 500;
  line-height: 1.6;
}

.post-nav-item:hover .post-nav-title {
  color: var(--accent-strong);
}

.comments {
  margin-top: var(--space-7);
}

.comments:empty {
  margin-top: 0;
}

/* 评论区标题：和正文其它小标签同一套等宽大写 */
.comments-title {
  margin-block-end: var(--space-4);
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}

/* 挂载点：iframe 出现后 .comments-body 加 .is-loaded，骨架淡出、内容淡入。
   这样网络慢的时候评论区是一块安静的骨架，而不是突然撑开的空白。 */
.comments-body {
  position: relative;
}

.comments-mount {
  opacity: 0;
  transform: translateY(6px);
  transition:
    opacity var(--speed-medium) var(--ease-out-expo),
    transform var(--speed-medium) var(--ease-out-expo);
}

.comments-body.is-loaded .comments-mount {
  opacity: 1;
  transform: none;
}

/* 加载骨架：三条灰条，加载完直接移出布局 */
.comments-skeleton {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding-block: var(--space-2);
  transition: opacity var(--speed-fast) var(--ease);
}

.comments-body.is-loaded .comments-skeleton {
  display: none;
}

.comments-skeleton-bar {
  height: 14px;
  border-radius: var(--radius-pill);
  background: var(--surface-3);
  /* 缓慢呼吸，表示「在加载」而不是「加载完了但没内容」 */
  animation: monish-skeleton 1.8s var(--ease-in-out-quart) infinite;
}

.comments-skeleton-bar:nth-child(2) {
  width: 88%;
  animation-delay: 120ms;
}

.comments-skeleton-bar--short {
  width: 56%;
  animation-delay: 240ms;
}

@keyframes monish-skeleton {
  0%, 100% { opacity: .45; }
  50% { opacity: 1; }
}

/* iframe 别把卡片撑破：giscus/utterances 自己会算高度，这里只兜底宽度 */
.comments-mount iframe {
  width: 100%;
  border: 0;
  color-scheme: normal;
}

html[data-animation="false"] .comments-mount,
html[data-animation="false"] .comments-skeleton-bar {
  transition: none;
  animation: none;
}

@media (prefers-reduced-motion: reduce) {
  .comments-skeleton-bar {
    animation: none;
    opacity: .7;
  }

  .comments-mount {
    transition-duration: .01ms;
  }
}

/* ==========================================================================
   v2.3 · 富文本补全：<mark> / 内联语义标签 / details / 定义列表 /
   GitHub 警示块 / 脚注
   --------------------------------------------------------------------------
   这一块覆盖 `test02.md` 那类「常用 Markdown + HTML 全效果」文章。
   markdown 侧不支持的语法（脚注 / [!NOTE] / ==高亮==）由
   scripts/markdown-extras.js 在构建期转成 HTML，这里只负责样式。
   ========================================================================== */

/* ---------------------------------------------------------------- 高亮 */
/* 取主题强调色的淡底 + 深字。字色是 accent-strong 再往 --text 压一档：
   直接用 #5F8A6C 压在 #EAF1EB 上只有 ≈3.3:1，达不到 AA 小字 4.5:1。 */
.monish-prose mark {
  padding: .08em .28em;
  border-radius: 4px;
  background: var(--accent-soft);
  color: color-mix(in srgb, var(--accent-strong) 80%, var(--text));
  /* 高亮块不打断行内节奏 */
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* ------------------------------------------------------------ 内联标签 */
/* 键盘键：像个实体键帽 */
.monish-prose kbd {
  display: inline-block;
  padding: .12em .42em;
  border: 1px solid var(--border);
  border-bottom-width: 2px;
  border-radius: 5px;
  background: var(--surface-3);
  color: var(--text);
  font-family: var(--font-mono);
  font-size: .82em;
  line-height: 1.4;
  white-space: nowrap;
}

/* 缩写：虚线下划线 + 自定义浮层
   ------------------------------------------------------------------------
   不用浏览器原生的 title tooltip —— 它要悬停 1~2 秒才出、样式由系统决定、
   而且虚线一旦用了 --line(#DCDCD8) 在白卡上几乎看不见，看起来就跟普通文字一样。
   改成纯 CSS 浮层：内容来自 data-tip（构建期由 markdown-extras.js 把 title
   搬到 data-tip，并保留 aria-label 供读屏），零 JS、无延迟、样式跟主题一致。 */
.monish-prose abbr[data-tip] {
  position: relative;
  border-bottom: 1px dashed var(--text-faint);
  text-decoration: none;
  cursor: help;
}

.monish-prose abbr[data-tip]::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 9px);
  left: 50%;
  z-index: 20;
  width: max-content;
  max-width: min(260px, 68vw);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  box-shadow: var(--shadow-pill);
  color: var(--text);
  font-family: var(--font-body);
  font-size: .875rem;
  font-weight: 400;
  line-height: 1.6;
  text-align: start;
  white-space: normal;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 4px);
  transition:
    opacity var(--speed-fast) var(--ease-out-expo),
    transform var(--speed) var(--ease-out-expo),
    visibility var(--speed-fast) linear;
}

/* 小三角 */
.monish-prose abbr[data-tip]::before {
  content: "";
  position: absolute;
  bottom: calc(100% + 5px);
  left: 50%;
  z-index: 21;
  width: 8px;
  height: 8px;
  margin-left: -4px;
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  transform: rotate(45deg) scale(0);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--speed-fast) var(--ease-out-expo), visibility var(--speed-fast) linear;
}

.monish-prose abbr[data-tip]:hover::after,
.monish-prose abbr[data-tip]:hover::before,
.monish-prose abbr[data-tip]:focus::after,
.monish-prose abbr[data-tip]:focus::before {
  opacity: 1;
  visibility: visible;
}

.monish-prose abbr[data-tip]:hover::after,
.monish-prose abbr[data-tip]:focus::after {
  transform: translate(-50%, 0);
}

.monish-prose abbr[data-tip]:hover::before,
.monish-prose abbr[data-tip]:focus::before {
  transform: rotate(45deg) scale(1);
}

html[data-animation="false"] .monish-prose abbr[data-tip]::after,
html[data-animation="false"] .monish-prose abbr[data-tip]::before {
  transition: none;
}

@media (prefers-reduced-motion: reduce) {
  .monish-prose abbr[data-tip]::after,
  .monish-prose abbr[data-tip]::before {
    transition-duration: .01ms;
  }
}

/* 变量（数学/代码里的 x）与样本输出 */
.monish-prose var {
  font-family: var(--font-mono);
  font-style: italic;
  color: var(--text);
}

.monish-prose samp {
  font-family: var(--font-mono);
  font-size: .9em;
  color: var(--text-muted);
}

/* 短引用 / 作品名 / 定义术语 */
.monish-prose q {
  quotes: "\201C" "\201D" "\2018" "\2019";
  color: var(--text);
}

.monish-prose q::before { content: open-quote; }
.monish-prose q::after { content: close-quote; }

.monish-prose cite {
  font-style: italic;
  color: var(--text-muted);
}

.monish-prose dfn {
  font-style: normal;
  font-weight: 600;
  border-bottom: 1px dotted var(--line);
}

/* 地址块：靠左、不斜、行高收紧 */
.monish-prose address {
  display: block;
  margin: 0 0 var(--space-4);
  padding-inline-start: var(--space-4);
  border-inline-start: 2px solid var(--line);
  color: var(--text-muted);
  font-style: normal;
  line-height: 1.7;
}

.monish-prose small {
  font-size: .85em;
  color: var(--text-muted);
}

/* 插入 / 删除（HTML 语义版） */
.monish-prose ins {
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 1px;
  text-underline-offset: .2em;
}

/* 下划线：细一点、离字远一点，别和链接下划线抢 */
.monish-prose u {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .22em;
  text-decoration-color: color-mix(in srgb, var(--text) 45%, transparent);
}

/* 上下标：字号别缩太狠，行高归零避免把行撑开 */
.monish-prose sup,
.monish-prose sub {
  font-size: .72em;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

.monish-prose sup { top: -.5em; }
.monish-prose sub { bottom: -.28em; }

.monish-prose time {
  font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------- 定义列表 dl */
.monish-prose dl {
  margin: 0 0 var(--space-5);
}

.monish-prose dt {
  margin-top: var(--space-3);
  color: var(--text);
  font-weight: 600;
}

.monish-prose dt:first-child {
  margin-top: 0;
}

.monish-prose dd {
  margin: var(--space-1) 0 0;
  padding-inline-start: var(--space-4);
  border-inline-start: 2px solid var(--line);
  color: var(--text-muted);
  line-height: 1.75;
}

/* ------------------------------------------------- details / summary */
.monish-prose details {
  margin: 0 0 var(--space-5);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-3);
  overflow: hidden;
}

/* 三角改成绝对定位钉在左边：这样 summary 的文字起点只由 padding 决定，
   展开后的正文也能算出同一个缩进量（见下面的 :not(summary)）。
   之前三角是 flex 子项，宽度不定，正文没法对齐到文字。 */
.monish-prose summary {
  position: relative;
  display: block;
  padding: var(--space-3) var(--space-4) var(--space-3) calc(var(--space-4) + 1.15em);
  color: var(--text);
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}

.monish-prose summary::-webkit-details-marker {
  display: none;
}

.monish-prose summary::before {
  content: "\25B8";
  position: absolute;
  top: 50%;
  left: var(--space-4);
  margin-top: -.55em;
  color: var(--text-faint);
  font-size: .9em;
  line-height: 1.1;
  transition: transform var(--speed-fast) var(--ease-out-expo);
}

.monish-prose details[open] summary::before {
  transform: rotate(90deg);
}

/* 展开后的内容与 summary 的**文字**左对齐（而不是与 summary 盒子对齐）：
   左边距 = summary 的 padding-left，也就是让开三角之后的位置。
   注意 marked 不会给 <details> 里的裸文本包 <p>，那一步在
   scripts/markdown-extras.js 的 normalizeDetails() 里做 —— 没有它这条规则
   选不到文本节点，文字会贴到卡片左边缘。 */
.monish-prose details > :not(summary) {
  margin-inline: calc(var(--space-4) + 1.15em) var(--space-4);
}

.monish-prose details > :last-child {
  margin-bottom: var(--space-3);
}

/* ------------------------------------------------ 任务列表 checkbox */
/* 有 checkbox 的 ul 不要项目符号（否则「• ☐ 项」） */
.monish-prose ul:has(> li > input[type="checkbox"]) {
  list-style: none;
  padding-inline-start: 0;
}

.monish-prose li > input[type="checkbox"] {
  width: 1em;
  height: 1em;
  margin-inline-end: .5em;
  vertical-align: -.12em;
  accent-color: var(--accent);
  cursor: default;
}

.monish-prose li:has(> input[type="checkbox"]:checked) {
  color: var(--text-muted);
}

/* ================================================================ 警示块
   scripts/markdown-extras.js 把 `> [!NOTE]` 改写成的结构：
   <div class="md-alert md-alert--note">
     <p class="md-alert-title"><span class="md-alert-icon fa …"></span>Label</p>
     <div class="md-alert-body">…</div>
   </div>

   配色策略：保留五种语义色（一眼能区分类型），但压饱和 ——
   底座/文字都由 --alert-hue 和 --surface / --text 混出来，
   所以深浅色模式自动适配，不用写两套。 */
.md-alert {
  --alert-hue: #5B7FA6;
  margin: 0 0 var(--space-5);
  padding: var(--space-4) var(--space-5);
  border-inline-start: 3px solid var(--alert-hue);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  background: color-mix(in srgb, var(--alert-hue) 9%, var(--surface));
  color: var(--text);
}

.md-alert--note { --alert-hue: #5B7FA6; }      /* 蓝 */
.md-alert--tip { --alert-hue: #5E8C6E; }       /* 绿 */
.md-alert--important { --alert-hue: #7A6BA3; } /* 紫 */
.md-alert--warning { --alert-hue: #A8863F; }   /* 琥珀 */
.md-alert--caution { --alert-hue: #A85B5B; }   /* 红 */

/* 标题字号取正文 h3 那一档（1.3rem）。原来用 --fs-label（12px）做「小标签」，
   在这个尺寸的块里显得像个脚注，用户反馈「至少要 h3/h2 那么大」。
   图标用 em 跟着标题走，不用单独调。 */
.md-alert-title {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: 0 0 var(--space-3);
  color: color-mix(in srgb, var(--alert-hue) 82%, var(--text));
  font-family: var(--font-body);
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1.3;
  /* 标题级字号下再全大写会显得很吵；中文本来也不受影响 */
  letter-spacing: -.01em;
}

.md-alert-icon {
  font-size: 1em;
  line-height: 1;
  /* 图标视觉重心比文字略高，往下压一点点更齐 */
  transform: translateY(.04em);
}

.md-alert-body > :first-child {
  margin-top: 0;
}

.md-alert-body > :last-child {
  margin-bottom: 0;
}

/* 警示块里的嵌套引用不要再叠一层绿边框 */
.md-alert-body blockquote {
  border-inline-start-color: color-mix(in srgb, var(--alert-hue) 40%, transparent);
  background: color-mix(in srgb, var(--alert-hue) 5%, var(--surface));
}

/* ================================================================= 脚注 */
/* 引用角标：行内小药丸 */
.monish-prose .fn-ref {
  position: relative;
  font-size: inherit;
  line-height: 0;
  vertical-align: baseline;
  top: -.05em;
}

.monish-prose .fn-ref-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.5em;
  height: 1.5em;
  padding: 0 .38em;
  border-radius: var(--radius-pill);
  background: var(--accent-soft);
  color: color-mix(in srgb, var(--accent-strong) 85%, var(--text));
  font-family: var(--font-mono);
  font-size: .68em;
  font-weight: 600;
  line-height: 1;
  vertical-align: super;
  text-decoration: none;
  transition: background-color var(--speed-fast) var(--ease), color var(--speed-fast) var(--ease);
}

.monish-prose .fn-ref:hover .fn-ref-link,
.monish-prose .fn-ref:focus-within .fn-ref-link {
  background: var(--accent);
  color: var(--surface);
}

/* 悬浮展开的脚注内容 */
.monish-prose .fn-pop {
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  z-index: 20;
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  width: max-content;
  max-width: min(320px, 72vw);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  box-shadow: var(--shadow-pill);
  color: var(--text);
  font-family: var(--font-body);
  font-size: .875rem;
  font-weight: 400;
  line-height: 1.6;
  text-align: start;
  white-space: normal;
  /* 收起态：不可见、不吃事件 */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate(-50%, 4px);
  transition:
    opacity var(--speed-fast) var(--ease-out-expo),
    transform var(--speed) var(--ease-out-expo),
    visibility var(--speed-fast) linear;
}

/* 小三角 */
.monish-prose .fn-pop::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  width: 8px;
  height: 8px;
  margin-left: -4px;
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  transform: translateY(-50%) rotate(45deg);
}

.monish-prose .fn-ref:hover .fn-pop,
.monish-prose .fn-ref:focus-within .fn-pop {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}

/* 靠边时由 JS 加这两个类，改成左/右对齐，避免浮层被裁掉 */
.monish-prose .fn-ref.is-flip-start .fn-pop {
  left: 0;
  transform: translate(0, 4px);
}

.monish-prose .fn-ref.is-flip-start:hover .fn-pop,
.monish-prose .fn-ref.is-flip-start:focus-within .fn-pop {
  transform: translate(0, 0);
}

.monish-prose .fn-ref.is-flip-start .fn-pop::after {
  left: 1.1em;
}

.monish-prose .fn-ref.is-flip-end .fn-pop {
  left: auto;
  right: 0;
  transform: translate(0, 4px);
}

.monish-prose .fn-ref.is-flip-end:hover .fn-pop,
.monish-prose .fn-ref.is-flip-end:focus-within .fn-pop {
  transform: translate(0, 0);
}

.monish-prose .fn-ref.is-flip-end .fn-pop::after {
  left: auto;
  right: 1.1em;
  margin-left: 0;
}

.monish-prose .fn-pop-num {
  flex: 0 0 auto;
  color: color-mix(in srgb, var(--accent-strong) 85%, var(--text));
  font-family: var(--font-mono);
  font-size: .8em;
  font-weight: 600;
  line-height: inherit;
}

.monish-prose .fn-pop-text {
  min-width: 0;
}

/* 文末的脚注列表 */
.monish-prose .footnotes {
  margin-top: var(--space-7);
  padding-top: var(--space-5);
  border-top: 1px solid var(--border);
}

.monish-prose .footnotes-title {
  margin: 0 0 var(--space-3);
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}

.monish-prose .footnotes-list {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: footnote;
  font-size: .9375rem;
  line-height: 1.75;
}

.monish-prose .footnote-item {
  position: relative;
  display: flex;
  /* 用基线对齐，数字和正文的第一行基线会自然对齐；
     之前给两边各写死一个 line-height（1.95 / 1.9），字号不同就会差 1~2px。 */
  align-items: baseline;
  gap: var(--space-2);
  padding: var(--space-2) 0;
  color: var(--text-muted);
  /* 被锚点跳到时闪一下，方便定位 */
  scroll-margin-top: calc(var(--nav-height) + var(--space-6));
}

.monish-prose .footnote-item:target {
  color: var(--text);
}

.monish-prose .footnote-num {
  flex: 0 0 auto;
  color: color-mix(in srgb, var(--accent-strong) 85%, var(--text));
  font-family: var(--font-mono);
  font-size: .8em;
  font-weight: 600;
  line-height: inherit;
}

.monish-prose .footnote-text {
  min-width: 0;
}

.monish-prose .footnote-backref {
  flex: 0 0 auto;
  color: var(--text-faint);
  text-decoration: none;
  line-height: inherit;
}

.monish-prose .footnote-backref:hover {
  color: var(--accent-strong);
}

/* 动画关闭 / 降低动效时，浮层直接切换 */
html[data-animation="false"] .monish-prose .fn-pop {
  transition: none;
}

@media (prefers-reduced-motion: reduce) {
  .monish-prose .fn-pop {
    transition-duration: .01ms;
  }

  .monish-prose summary::before {
    transition: none;
  }
}