/* ============================================================
   文章页增强：目录（TOC）缩进层级 + 数学公式排版微调 + Markdown 细节
   基础 sticky / 激活态 / 左侧竖线指示器 / 表格·代码横向滚动 已在 layout CSS 中定义，
   此处补充：公式块触屏滑动、删除线/分割线/高亮、暗色适配与移动端微调。
   ============================================================ */

/* ---------- 文章详情页 .article-title 强制 block ----------
   kaze 在 @media (width>=480px) 里设了 .article-title{display:-webkit-box;...}，
   而这条规则对所有 ≥480px 都生效（包含桌面端），导致文章标题 shrink-to-fit，
   连带让 AI summary widget 等后续内容也异常窄列。
   ★修复★：全局（不限 @media）强制 .article-title 为 block，解除 line-clamp。
   用 .post-body 前缀提高特异性，确保在任何优先级冲突下都能覆盖 kaze 的规则。 */
.post-body .article-title {
  display: block !important;
  -webkit-line-clamp: unset !important;
  line-clamp: unset !important;
  -webkit-box-orient: unset !important;
  overflow: visible !important;
}

/* ---------- 文章页正文宽度 ----------
   主题 layout 在桌面端把 .post-shell 设为三列网格 240px 1fr 60px，
   并把 .post-detail 居中、整体限制在 --max-width（1200/1320/1480px），
   导致正文列在宽屏上仅约 715~836px、两侧大片留白，观感很窄。
   这里提高文章列整体可用宽度上限、收窄目录列与右侧留白，让正文列明显变宽。
   ★关键★：.post-body { max-width: 100% !important } 放在 BASE（所有宽度）生效——
   kaze 在 @media (width>=768px) and (width<=1023px) 平板区间设了
   .post-body { max-width: 720px }，如果只在桌面覆盖，平板区间就会被 kaze 限制成 720px。 */

/* 平板 + 桌面通用：正文列填满网格剩余空间，kaze 的 max-width:720px/860px 都失效。
   ★grid-column:2!important 至关重要★：
   当文章无标题(=无目录)时 post-toc.js 会 hide TOC rail(display:none)，
   CSS Grid 自动布局会把 post-body 推到第 1 列(210px)，导致正文极窄(≈手机宽度)。
   显式锁在第 2 列避免此问题。 */
.post-body {
  max-width: 100% !important;
  grid-column: 2 !important;
}

@media (min-width: 1024px) {
  .post-detail,
  .post-shell {
    max-width: min(1480px, 100%) !important;
  }
  .post-shell {
    display: grid !important;
    grid-template-columns: 210px minmax(0, 1fr) 56px !important;
    gap: 24px !important;
  }
}
@media (max-width: 768px) {
  .post-body {
    max-width: 100% !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  .post-shell {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}

/* ---------- 目录层级缩进 ---------- */
/* h3 缩进一级（layout CSS 已有，这里显式声明以保证优先级） */
.post-toc .toc-h3 {
  padding-left: 14px;
}

/* h4 缩进两级 */
.post-toc .toc-h4 {
  padding-left: 28px;
  font-size: 12.5px;
  opacity: 0.92;
}

/* 激活项的左侧竖线指示器（layout CSS 已定义 .active 颜色与 border-left，
   这里确保过渡更顺滑） */
.post-toc a {
  border-left: 2px solid transparent;
  padding-left: 8px;
  transition: color 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
}

.post-toc a.active {
  color: var(--cp-primary, #c9a15a);
  font-weight: 600;
  border-left-color: var(--cp-primary, #c9a15a);
}

/* ---------- 数学公式渲染（MathJax SVG） ---------- */
/* 行内 / 块级公式基础字号与暗色适配 */
.article-content mjx-container {
  font-size: 1.05em;
}
html.dark .article-content mjx-container {
  color: var(--cp-title, #f5f2eb);
}

/* 行内公式：不强制断行；超宽时在自身容器内横向滚动，不撑破页面。
   （桌面/平板也兜底，不只移动端。） */
.article-content mjx-container:not([display="true"]) {
  white-space: nowrap;
  max-width: 100%;
  min-width: 0;                 /* 覆盖 MathJax 可能注入的 min-width，确保 max-width 生效 */
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}

/* 块级公式：块级显示、居中、上下间距合理。
   超宽 → 容器内横向滚动（仅横向，禁用纵向滚动以保持阅读连贯性）。
   min-width:0 覆盖 MathJax 可能的 min-width，否则 max-width:100% 被压过、整页横向溢出。 */
.article-content mjx-container[display="true"] {
  display: block;
  margin: 1.4em 0;
  max-width: 100%;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  padding: 4px 2px 6px;
}
/* 公式实际 SVG：长公式不换行、不被 max-width 钳制，由外层滚动容器承载。
   注意：layout CSS 有 `.article-content * { max-width:100% !important }`，
   会钳制 SVG 宽度导致长公式无法触发外层滚动，这里用 !important 放行。 */
.article-content mjx-container > svg {
  max-width: none !important;
}

/* 长/高公式滚动时给一点视觉提示（细滚动条） */
.article-content mjx-container::-webkit-scrollbar {
  height: 5px;
  width: 5px;
}
.article-content mjx-container::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--cp-primary, #c9a15a) 45%, transparent);
  border-radius: 4px;
}
.article-content mjx-container::-webkit-scrollbar-track {
  background: transparent;
}

/* 公式编号（右侧 (1)(2)…）与交叉引用链接（\ref / \eqref 渲染为锚点） */
.article-content mjx-container mjx-eqn {
  color: var(--cp-body, #6b7280);
}
.article-content a.mjx-ref {
  color: var(--cp-primary, #c9a15a);
  text-decoration: none;
  border-bottom: 1px dotted color-mix(in srgb, var(--cp-primary, #c9a15a) 50%, transparent);
}
.article-content a.mjx-ref:hover {
  border-bottom-style: solid;
}

/* ---------- 图片宽度兜底（防止 HTML width 属性撑破容器 + 恢复编辑器设的图片大小） ----------
   两个问题一并修复：
   ① Halo 编辑器偶尔把原始像素宽度（如 width="2908px"）写进 HTML width 属性，
      figure 的 display:flex + min-width:auto 让 figure 被图片固有宽度撑大，
      max-width:100% 的 100% 相对于被撑大的 figure 而非容器，图片不受限。
   ② kaze 有 .article-content figure img { width:100% }（无 !important），
      覆盖了 HTML width="50%" 属性，导致编辑器设的图片大小完全失效。
   ★修复★：
   - figure 加 min-width:0 !important 覆盖 flex 默认 min-width:auto，
     允许 figure 收缩到父容器宽度（不再被图片固有宽度撑大）。
   - figure img 设 width:auto !important 覆盖 kaze 的 width:100%，
     让 HTML width 属性（50% / 2908px 等）恢复生效。
   - img max-width:100% !important 确保不管 HTML width 设了什么，
     图片渲染宽度都不超 figure（= 不超容器）。 */
.article-content figure {
  min-width: 0 !important;         /* 覆盖 flex 默认 min-width:auto，防止被图片撑大 */
  max-width: 100%;
  overflow: hidden;
}
.article-content figure img {
  width: auto !important;           /* 覆盖 kaze 的 width:100%，让 HTML width 属性生效 */
  max-width: 100% !important;       /* 确保不超容器 */
  height: auto !important;
}
.article-content img {
  max-width: 100% !important;
  height: auto !important;
}

/* ---------- 表格 / 代码块（响应式横向滚动，避免溢出截断） ---------- */
/* 宽表格在窄屏内可横向滑动而非被裁切；桌面端若宽度足够则不出现滚动条 */
.article-content table {
  display: block;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  border-collapse: collapse;
  margin: 1.6em 0;
}

/* 表格边框与单元格（兼容主题暗色变量，缺失时回退） */
.article-content th,
.article-content td {
  border: 1px solid var(--cp-border-dark, #d8d2c4);
  padding: 8px 12px;
  line-height: 1.6;
  vertical-align: middle;
}
.article-content th {
  background: color-mix(in srgb, var(--cp-primary, #c9a15a) 14%, transparent);
  font-weight: 600;
  color: var(--cp-title, #2b2b2b);
}
.article-content tbody tr:nth-child(even) {
  background: color-mix(in srgb, var(--cp-primary, #c9a15a) 5%, transparent);
}
.article-content pre {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}

/* ---------- Markdown 细节元素（Typora 观感） ---------- */
/* 删除线 */
.article-content del,
.article-content s {
  color: var(--cp-body, #6b7280);
  text-decoration: line-through;
}

/* 分割线：居中、克制的短横线，区别于正文段落 */
.article-content hr {
  border: none;
  height: 1px;
  margin: 2.4em auto;
  width: 60%;
  max-width: 240px;
  background: linear-gradient(
    to right,
    transparent,
    var(--cp-border-dark, #d8d2c4),
    transparent
  );
}

/* 高亮 ==text== → <mark> */
.article-content mark {
  background: color-mix(in srgb, var(--cp-primary, #c9a15a) 28%, transparent);
  color: inherit;
  padding: 0.1em 0.3em;
  border-radius: 3px;
}

/* 加粗 / 斜体：确保与主题一致（浏览器默认即 bold / italic，这里显式声明避免被重置） */
.article-content strong,
.article-content b {
  font-weight: 700;
}
.article-content em,
.article-content i {
  font-style: italic;
}

/* ---------- 列表（嵌套缩进 + 项目符号/编号） ---------- */
.article-content ul,
.article-content ol {
  margin: 0.9em 0;
  padding-left: 1.8em;
  line-height: 1.7;
}
.article-content li {
  margin: 0.35em 0;
  padding-left: 0.2em;
}
/* 嵌套列表：缩小外边距，保持清晰层级而不喧宾夺主 */
.article-content li > ul,
.article-content li > ol {
  margin: 0.35em 0;
}
.article-content ul { list-style: disc; }
.article-content ul ul { list-style: circle; }
.article-content ul ul ul { list-style: square; }
.article-content ol { list-style: decimal; }
.article-content ol ol { list-style: lower-alpha; }
.article-content ol ol ol { list-style: lower-roman; }

/* 下划线 ++text++ → <u> */
.article-content u {
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ---------- 移动端微调 ---------- */
/* MathJax width="full" 公式（全局，桌面 + 移动端都生效）：
   MathJax 会给这种公式设内联 style="min-width:XXex" + SVG width="100%"，
   导致公式被压成 100% 容器宽度而不出现滚动条（用户视觉上看到"无法完整显示"）。
   用 !important 强制 min-width:0、SVG width:auto，让公式以自然宽度渲染 → 超出容器 → 横向滚动条出现。 */
.article-content mjx-container[width="full"] {
  min-width: 0 !important;
}
.article-content mjx-container[width="full"] > svg {
  width: auto !important;
}

@media (max-width: 768px) {
  .article-content mjx-container {
    font-size: 1em;
  }
  .article-content mjx-container[display="true"] {
    padding: 2px 0 5px;
  }
  /* 移动端公式字号略缩，减少横向滑动幅度，但仍保留滑动而非截断 */
  .article-content mjx-container[display="true"] > svg {
    font-size: 0.92em;
  }
  /* 行内公式：基础规则已统一兜底 max-width:100% + overflow-x:auto，此处无需重复。
     移动端额外保证：未渲染的 .language-math 占位也各自滚动，不撑破页面。 */
  .article-content .language-math {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* ---------- 目录项悬停高亮（更明显，便于悬停定位） ----------
   布局基础样式里 .post-toc a:hover 只把颜色从灰改成近黑，在浅色背景下几乎看不出变化，
   用户反馈“无法悬停”。这里改为：金色文字 + 左侧竖线变金 + 淡金底色，悬停反馈清晰。 */
.post-toc a {
  cursor: pointer;
}
.post-toc a:hover {
  color: var(--cp-primary, #c9a15a) !important;
  border-left-color: var(--cp-primary, #c9a15a) !important;
  background: color-mix(in srgb, var(--cp-primary, #c9a15a) 9%, transparent);
}
.post-toc a.active:hover {
  color: var(--cp-primary, #c9a15a) !important;
}

/* ---------- 分享弹窗（微信二维码扫码分享，本地生成，无第三方插件） ---------- */
.share-modal {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: none;
  align-items: center;
  justify-content: center;
}
.share-modal.is-open {
  display: flex;
}
.share-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(17, 24, 39, 0.55);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}
.share-modal-box {
  position: relative;
  z-index: 1;
  width: min(360px, 92vw);
  background: var(--color-bg, #fff);
  border: 1px solid var(--color-border, #e5e0d4);
  border-radius: 16px;
  padding: 28px 24px 22px;
  text-align: center;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
  animation: sharePop 0.2s ease;
}
@keyframes sharePop {
  from { transform: translateY(8px) scale(0.98); opacity: 0; }
  to { transform: none; opacity: 1; }
}
.share-modal-close {
  position: absolute;
  top: 10px;
  right: 12px;
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 22px;
  line-height: 1;
  color: var(--color-body, #6b7280);
  padding: 4px;
}
.share-modal-close:hover {
  color: var(--color-title, #111827);
}
.share-modal-title {
  margin: 0 0 4px;
  font-size: 18px;
  font-weight: 700;
  color: var(--color-title, #111827);
}
.share-modal-sub {
  margin: 0 0 16px;
  font-size: 12.5px;
  color: var(--color-body, #6b7280);
}
.share-qr-wrap {
  display: flex;
  justify-content: center;
  padding: 10px;
  background: #fff;
  border: 1px solid var(--color-border, #e5e0d4);
  border-radius: 12px;
}
.share-qr {
  width: 180px;
  height: 180px;
}
.share-qr svg {
  width: 100%;
  height: 100%;
  display: block;
}
.share-url-row {
  display: flex;
  gap: 8px;
  margin: 16px 0 12px;
}
.share-url-input {
  flex: 1;
  min-width: 0;
  font-size: 12px;
  padding: 8px 10px;
  border: 1px solid var(--color-border-dark, #d8d2c4);
  border-radius: 8px;
  background: var(--color-white, #fff);
  color: var(--color-body, #6b7280);
}
.share-copy-btn {
  flex-shrink: 0;
  border: none;
  cursor: pointer;
  background: var(--color-primary, #c9a15a);
  color: #fff;
  border-radius: 8px;
  padding: 0 16px;
  font-size: 13px;
  font-weight: 600;
  transition: opacity 0.2s ease;
}
.share-copy-btn:hover {
  opacity: 0.9;
}
.share-platforms {
  display: flex;
  justify-content: center;
  gap: 14px;
}
.share-platform {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  text-decoration: none;
  color: var(--color-body, #374151);
  padding: 8px 16px;
  border: 1px solid var(--color-border, #e5e0d4);
  border-radius: 999px;
  transition: all 0.2s ease;
}
.share-platform:hover {
  border-color: var(--color-primary, #c9a15a);
  color: var(--color-primary, #c9a15a);
}

/* ---------- 行内代码 / 代码块（语法高亮，highlight.js 自托管） ---------- */
.article-content code {
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.86em;
  background: color-mix(in srgb, var(--cp-primary, #c9a15a) 13%, #f3efe6);
  color: #9a5b07;
  padding: 0.12em 0.4em;
  border-radius: 5px;
  word-break: break-word;
}
.article-content pre {
  margin: 1.6em 0;
  border-radius: 12px;
  border: 1px solid var(--color-border, #e5e0d4);
  background: #f6f4ef;
  overflow: hidden; /* 内层 code 负责横向滚动，避免双重滚动条 */
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
.article-content pre code,
.article-content pre code.hljs {
  display: block;
  padding: 16px 18px;
  background: transparent;
  color: #24292e;
  font-size: 0.84em;
  line-height: 1.7;
  border-radius: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  white-space: pre;
}
/* highlight.js GitHub 风格 token 颜色（浅色） */
.hljs-comment,
.hljs-quote { color: #6a737d; font-style: italic; }
.hljs-keyword,
.hljs-selector-tag,
.hljs-literal,
.hljs-type,
.hljs-doctag { color: #d73a49; }
.hljs-string,
.hljs-meta .hljs-string,
.hljs-regexp,
.hljs-addition { color: #032f62; }
.hljs-number,
.hljs-symbol,
.hljs-bullet,
.hljs-link { color: #005cc5; }
.hljs-title,
.hljs-section,
.hljs-name,
.hljs-selector-id,
.hljs-selector-class { color: #6f42c1; }
.hljs-attr,
.hljs-attribute,
.hljs-variable,
.hljs-template-variable,
.hljs-property { color: #005cc5; }
.hljs-built_in,
.hljs-builtin-name { color: #e36209; }
.hljs-meta { color: #6a737d; }
.hljs-emphasis { font-style: italic; }
.hljs-strong { font-weight: 700; }
.hljs-deletion { color: #b31d28; }
/* highlight.js token 颜色（暗色适配） */
html.dark .article-content pre {
  background: #1b1d22;
  border-color: #2c2f36;
}
html.dark .article-content pre code,
html.dark .article-content pre code.hljs { color: #c9d1d9; }
html.dark .hljs-comment,
html.dark .hljs-quote { color: #8b949e; }
html.dark .hljs-keyword,
html.dark .hljs-selector-tag,
html.dark .hljs-literal,
html.dark .hljs-type,
html.dark .hljs-doctag { color: #ff7b72; }
html.dark .hljs-string,
html.dark .hljs-meta .hljs-string,
html.dark .hljs-regexp,
html.dark .hljs-addition { color: #a5d6ff; }
html.dark .hljs-number,
html.dark .hljs-symbol,
html.dark .hljs-bullet,
html.dark .hljs-link { color: #79c0ff; }
html.dark .hljs-title,
html.dark .hljs-section,
html.dark .hljs-name,
html.dark .hljs-selector-id,
html.dark .hljs-selector-class { color: #d2a8ff; }
html.dark .hljs-attr,
html.dark .hljs-attribute,
html.dark .hljs-variable,
html.dark .hljs-template-variable,
html.dark .hljs-property { color: #79c0ff; }
html.dark .hljs-built_in,
html.dark .hljs-builtin-name { color: #ffa657; }
html.dark .hljs-meta { color: #8b949e; }
html.dark .hljs-deletion { color: #ffa198; }

/* ---------- 引用块（> 文本 或 <blockquote>） ---------- */
.article-content blockquote {
  margin: 1.6em 0;
  padding: 0.6em 1.2em;
  border-left: 4px solid var(--cp-primary, #c9a15a);
  background: color-mix(in srgb, var(--cp-primary, #c9a15a) 7%, transparent);
  border-radius: 0 10px 10px 0;
  color: var(--cp-body, #4b5563);
}
.article-content blockquote > :first-child { margin-top: 0; }
.article-content blockquote > :last-child { margin-bottom: 0; }
.article-content blockquote p { margin: 0.45em 0; }
html.dark .article-content blockquote { color: #c9cdd4; }

/* ---------- 下划线 / 上标 / 下标 ---------- */
.article-content u {
  text-decoration: underline;
  text-underline-offset: 2px;
}
.article-content sup,
.article-content sub {
  font-size: 0.72em;
  line-height: 0;
}

/* ---------- 目录吸顶固定（长文章滚动时始终可见） ----------
   策略：
   - 平板/移动端（<1024px）：position: sticky —— 单列布局下 .post-shell 就是整列，
     sticky 在 .post-shell 范围内天然有效，且不脱离 DOM 流（不覆盖正文）。
   - 桌面端（≥1024px）：position: fixed —— sticky 在桌面端有固有限制——
     当用户滚到 .post-shell 外部的兄弟元素（评论区/相关文章/上下篇）时，
     sticky 自动脱离，TOC 跟着滚走。改用 fixed 彻底摆脱祖先块限制。
     left 用 (100vw-1480)/2 与 .post-detail 居中容器左缘对齐，
     宽视口（>1480px）保持与正文容器左缘齐平；加不透明背景避免透出正文。
   CSS 顺序：base sticky 在前 → 移动端 override → 桌面端 fixed override（最后）。 */

/* 默认（base）：sticky —— 适用于<1024px */
.post-toc-rail {
  position: sticky !important;
  top: 92px;
  align-self: start;
  max-height: calc(100vh - 116px);
  overflow-y: auto;
  overscroll-behavior: contain;
  z-index: 10;
}

/* 移动端微调：更紧凑的高度、避开更小的导航栏 */
@media (max-width: 768px) {
  .post-toc-rail {
    top: 60px;                     /* 避开移动端导航 */
    max-height: 40vh;
    z-index: 50;
    -webkit-overflow-scrolling: touch;
  }
}

/* 桌面端（≥1024px）：sticky 贴顶 + 全页可见（补 kaze 漏掉的 html/body）
   ★根因★：kaze 的 Patch v1.5.1 只清了 .site-main/.post-detail/.post-shell/.post-body
   的 overflow-x:hidden，但 html 和 body 这两个根元素仍设 overflow-x:hidden，
   它们成了 sticky 的 containing block（=body 高度 = .post-shell 结束就脱）。
   ★修复★：在我的 CSS 里补上 html/body 的 overflow-x:visible!important，
   让 sticky 的 containing block 升级为视口本身，全页有效。
   ★贴顶★：top:0 + padding-top:100px 让 TOC 贴顶显示，padding 让出 header 高度，
   解决"目录与顶部间隙持续不变"的视觉问题。 */
@media (min-width: 1024px) {
  /* 清除 html/body 的 overflow-x:hidden —— 补 kaze 漏掉的两个根元素，
     使 sticky 的 containing block = 视口（全页有效），而非 body（.post-shell 结束就脱）。
     横向溢出由 .article-content 自带的 overflow-x:hidden 兜底，不影响。 */
  html, body {
    overflow-x: visible !important;
  }
  .post-toc-rail {
    position: sticky !important;
    top: 0 !important;
    align-self: start;
    height: calc(100vh - 16px);
    padding-top: 100px;
    padding-right: 16px;
    padding-left: 16px;
    padding-bottom: 16px;
    overflow-y: auto;
    overscroll-behavior: contain;
    z-index: 5;
    background: var(--cp-bg, #faf8f3);
    border-right: 1px solid var(--cp-border, #e5e7eb);
  }
}