/* ============================================================
   Code blocks: 首页卡片玻璃风 + Fira Code + Shiki 明暗自适应
   (custom inject, 由 hexo-shiki-plugin-butterfly 提供语法配色)
   ------------------------------------------------------------
   明暗主题:
   - Shiki 采用 css-variables 主题, 输出 var(--shiki-token-*) / 
     var(--shiki-color-*) 变量, 而非写死色值。
   - 本文件在 :root(浅色) 与 html[data-theme='dark'] 下分别定义
     GitHub Light / GitHub Dark 官方色值, 实现「明暗自适应」:
       * 浅色 = GitHub Light 白卡
       * 深色 = GitHub Dark 黑卡  (用户要求: 黑色模式代码栏应为黑底)
   - 覆盖 <pre> 上的 background-color: var(--shiki-color-background),
     改为透明, 让 figure 的卡片底透出。
   保留项:
   1) 代码字体: 自托管 Fira Code (Regular 主用 / Bold 备).
   2) 面板: v16 起统一为「真·磨砂玻璃」—— 只有一层中性白膜(rgba(255,255,255,.05),
      无任何色相) + backdrop-filter: blur(18px) 实时模糊背后内容, 深浅色同款材质.
   3) 语言标识: 左上角胶囊徽章, cs/csharp/c# 归一显示 "C#" (JS 注入).
   4) 工具条: 融入卡片, 复制/折叠按钮保留 Shiki 插件(beautify)实现.
   ============================================================ */

/* ============================================================
   Shiki 语义色变量 — 浅色(GitHub Light) / 深色(GitHub Dark)
   色值取自官方 github-light.json / github-dark.json
   同时重定义插件的 --hl-* (来自 one-dark-pro 注入), 跟随明暗,
   这样 gutter/滚动条/工具条背景统一, 不再被写死的深色干扰。
   ============================================================ */
/* 浅色集: 用 :root, html:not([data-theme='dark']) 提高特异性,
   胜过插件 themes.js 运行时注入的 :root{--hl-*...}(one-dark-pro),
   否则 gutter/工具条/滚动条会被 #282c34 等深色覆盖。 */
:root,
html:not([data-theme='dark']) {
  /* Shiki token 色 (浅色 = GitHub Light) */
  --shiki-color-background: #ffffff;
  --shiki-color-text: #24292e;
  --shiki-token-constant: #005cc5;
  --shiki-token-string: #032f62;
  --shiki-token-comment: #6a737d;
  --shiki-token-keyword: #d73a49;
  --shiki-token-parameter: #24292e;
  --shiki-token-function: #6f42c1;
  --shiki-token-string-expression: #032f62;
  --shiki-token-punctuation: #24292e;
  --shiki-token-link: #032f62;
  /* 插件 --hl-* (浅色) */
  --hl-color: #24292e;
  --hl-bg: rgba(255, 255, 255, .74);
  --hltools-bg: rgba(255, 255, 255, .56);
  --hltools-color: #57606a;
  --hlnumber-bg: rgba(120, 155, 210, .10);
  --hlnumber-color: #6a7686;
  --hlscrollbar-bg: rgba(120, 155, 210, .25);
  --hlexpand-bg: linear-gradient(180deg, rgba(255,255,255,.1), rgba(255,255,255,.9));
}

/* 深色 = GitHub Dark 黑卡 */
html[data-theme='dark'] {
  --shiki-color-background: #24292e;
  --shiki-color-text: #e1e4e8;
  --shiki-token-constant: #79b8ff;
  --shiki-token-string: #9ecbff;
  --shiki-token-comment: #6a737d;
  --shiki-token-keyword: #f97583;
  --shiki-token-parameter: #e1e4e8;
  --shiki-token-function: #b392f0;
  --shiki-token-string-expression: #9ecbff;
  --shiki-token-punctuation: #e1e4e8;
  --shiki-token-link: #9ecbff;
  /* 插件 --hl-* (深色) */
  --hl-color: #e1e4e8;
  --hl-bg: rgba(36, 41, 46, .94);
  --hltools-bg: rgba(53, 60, 68, .80);
  --hltools-color: #adbac7;
  --hlnumber-bg: rgba(255, 255, 255, .04);
  --hlnumber-color: #5b6472;
  --hlscrollbar-bg: rgba(255, 255, 255, .14);
  --hlexpand-bg: linear-gradient(180deg, rgba(36,41,46,.1), rgba(36,41,46,.9));
}

/* ---------- Fira Code 字体注册 (OFL-1.1) ---------- */
@font-face {
  font-family: 'Fira Code';
  src: url('/custom/assets/fonts/fira-code/FiraCode-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Fira Code';
  src: url('/custom/assets/fonts/fira-code/FiraCode-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* 代码块内容统一 Fira Code Regular(覆盖主题/插件默认等宽字体) */
figure.shiki .shiki-tools,
figure.shiki .codeblock pre,
figure.shiki .codeblock code {
  font-family: 'Fira Code', ui-monospace, SFMono-Regular, 'Cascadia Code',
    Consolas, 'Courier New', monospace !important;
  font-weight: 400;
}

/* ---------- 覆盖 Shiki <pre>/<code> 的 solid 背景 ---------- */
figure.shiki .code pre,
figure.shiki .code pre.shiki,
figure.shiki .code pre code {
  background: none !important;
}

/* ---------- 面板: 真·磨砂玻璃（中性白膜 + 顶部高光，不染色） ---------- */
figure.shiki {
  margin: 0 0 24px !important;
  position: relative;
  overflow: hidden;
  border-radius: 10px !important;
  /* v17: 与卡片同一套玻璃材质（令牌在 sci-fi.css）——白膜 + 顶部白色高光。
     这里不开 backdrop-filter：一篇长文可能有十几个代码块，每个都是一层
     实时模糊合成层，滚动很贵，而且代码块背后就是文章面板（纯色），
     模糊前后看不出差别。少一层合成层也顺便避开 Chromium 偶发的模糊失效。 */
  background-image: var(--sf-glass-sheen);
  background-color: rgba(255, 255, 255, .05) !important;
  color: var(--shiki-color-text);
  /* 中性描边 + 柔和外阴影（不再发蓝） */
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, .08),
    inset 0 1px 0 rgba(255, 255, 255, .14),
    0 12px 28px -18px rgba(0, 0, 0, .55) !important;
}

/* dark: 同一层中性白膜（深色下不再叠黑色蒙层，让它真的透） */
html[data-theme='dark'] figure.shiki {
  background-image: var(--sf-glass-sheen);
  background-color: rgba(255, 255, 255, .05) !important;
  color: var(--shiki-color-text);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, .08),
    inset 0 1px 0 rgba(255, 255, 255, .12),
    0 16px 34px -20px rgba(0, 0, 0, .60) !important;
}

figure.shiki ::selection {
  background: rgba(110, 160, 255, .32);
}

html[data-theme='dark'] figure.shiki ::selection {
  background: rgba(130, 175, 255, .30);
}

/* ---------- 工具条(融入卡片) ---------- */
figure.shiki .shiki-tools {
  position: relative;
  min-height: 34px;
  height: 34px;
  padding: 0 10px 0 10px !important;
  /* light 工具条=与卡片同款通透玻璃(略深一档区分于代码区) */
  background: linear-gradient(180deg, rgba(255, 255, 255, .34), rgba(255, 255, 255, .16)) !important;
  color: #57606a;
  border-bottom: 1px solid rgba(120, 150, 200, .18);
}

html[data-theme='dark'] figure.shiki .shiki-tools {
  background: linear-gradient(180deg, rgba(40, 46, 66, .40), rgba(24, 30, 46, .30)) !important;
  color: #adbac7;
  border-bottom: 1px solid rgba(255, 255, 255, .06);
}

/* 遮蔽 Shiki 插件的 Mac 三色圆点(macStyle 未启用) */
figure.shiki .shiki-tools:after {
  display: none !important;
}

/* ---------- 语言标识: 左上角胶囊徽章(统一显示 C#) ---------- */
figure.shiki .shiki-tools .code-lang {
  order: -2;
  flex: 0 1 auto;
  position: static !important;   /* 覆盖插件绝对定位 left:75px */
  left: auto !important;
  margin: 3px 0 3px 6px;
  padding: 1px 10px 2px;
  border-radius: 999px;
  background: rgba(5, 80, 174, .10);
  text-transform: none;          /* 不再全大写 */
  font-size: 12px !important;
  font-weight: 400 !important;
  line-height: 1.6;
  letter-spacing: .03em;
  color: #0969da;
  user-select: none;
  -webkit-user-select: none;
}

figure.shiki .shiki-tools .code-lang:empty {
  display: none;
}

html[data-theme='dark'] figure.shiki .shiki-tools .code-lang {
  background: rgba(121, 192, 255, .16);
  color: #79c0ff;
}

/* 语言徽章左侧贴边 */
figure.shiki .shiki-tools .code-lang {
  margin-right: auto;
}

/* 折叠/复制图标 */
figure.shiki .shiki-tools .expand,
figure.shiki .shiki-tools .copy-button {
  width: 26px;
  height: 26px;
  margin: 2px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  font-size: 13px;
  transition: background .2s, color .2s;
}

figure.shiki .shiki-tools .expand:hover,
figure.shiki .shiki-tools .copy-button:hover {
  background: rgba(110, 155, 255, .16);
  color: #0969da;
}

html[data-theme='dark'] figure.shiki .shiki-tools .expand:hover,
html[data-theme='dark'] figure.shiki .shiki-tools .copy-button:hover {
  background: rgba(130, 170, 255, .14);
  color: #79c0ff;
}

/* ---------- 行号区(区分于卡片底) ---------- */
/* v14 对齐修复: 插件 shiki-codeblock.css 用 !important 把 .gutter pre
   padding 压成 10px + 无 min-width, 数字右对齐被挤到代码块左缘(偏左)。
   这里用更高特异 + !important 明确 gutter 内边距与最小宽度:
   - padding 左右各 12px/14px, 数字不贴边;
   - min-width 保证两位数行号有空间, 数字 text-align:right 与代码列对齐。 */
#post .post-content figure.shiki .gutter pre {
  background: rgba(120, 155, 210, .10) !important;
  color: #6a7686 !important;
  padding: 8px 14px 8px 12px !important;
  min-width: 34px !important;
  text-align: right !important;
  user-select: none !important;
  box-sizing: border-box;
}

html[data-theme='dark'] figure.shiki .gutter pre,
html[data-theme='dark'] #post .post-content figure.shiki .gutter pre {
  background: rgba(255, 255, 255, .03) !important;
  color: #5b6472 !important;
}

figure.shiki .code pre {
  padding: 8px 18px !important;
}

/* 行 hover 反馈 */
figure.shiki .codeblock div:hover .code pre {
  background-color: rgba(110, 155, 255, .06) !important;
}

html[data-theme='dark'] figure.shiki .codeblock div:hover .code pre {
  background-color: rgba(130, 170, 255, .04) !important;
}

/* ============================================================
   裸代码块 / 行内代码 —— 与黑白模式卡片同款磨砂玻璃 (v13)
   ------------------------------------------------------------
   问题: 部分文章里的代码没写语言标识, 不会走 Shiki 高亮, 输出为
   裸 <pre><code> / 行内 <code>, 落在主题默认的 .container code
   背景上 —— dark 模式被强设 #2c2c2c / pre>code lighten(#121212,2)
   深黑块, 造成截图里"代码后黑色奇怪背景"。

   解决: 让所有代码(无论是否高亮成块)都用卡片同款磨砂玻璃:
   - 成块 裸 pre>code → 卡片同款玻璃卡(圆角 + 浅白/深黑玻璃 + blur)
   - 行内 code      → 淡玻璃胶囊底, 去主题深黑底
   ============================================================ */

/* ---------- 成块裸代码: 卡片同款磨砂玻璃卡 ---------- */
/* 只作用于文章正文里【没有走 Shiki 高亮】的整块 <pre><code>
   (那些没写语言标识、输出为裸 <pre><code> 的代码段)。
   关键: 高亮块的 code 在 <pre class="shiki ..."> 内, 裸块的 code
   在无 class 的 <pre> 内 —— 用 pre:not(.shiki) 精准区分,
   绝不误伤已高亮的 figure.shiki 代码块。 */
#post .post-content pre:not(.shiki) > code {
  /* 消除主题/插件写死的深黑背景(需 !important 压过 darkmode .container code) */
  background: none !important;
  color: var(--shiki-color-text);
  font-family: 'Fira Code', ui-monospace, SFMono-Regular, 'Cascadia Code',
    Consolas, 'Courier New', monospace !important;
  font-weight: 400;
  font-size: .88em;
  line-height: 1.7;
  display: block;
  padding: 14px 18px;
  border-radius: 10px;
  position: relative;
  /* 中性白膜 + 顶部高光：与 figure.shiki / 卡片同一材质，不带色相；
     同样不开 backdrop-filter（见上方说明） */
  background-image: var(--sf-glass-sheen);
  background-color: rgba(255, 255, 255, .05) !important;
  border: 0 !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .12),
    0 12px 28px -18px rgba(0, 0, 0, .55) !important;
}

/* dark: 同一层中性白膜 */
html[data-theme='dark'] #post .post-content pre:not(.shiki) > code {
  background-image: var(--sf-glass-sheen);
  background-color: rgba(255, 255, 255, .05) !important;
  color: var(--shiki-color-text);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .10),
    0 16px 34px -20px rgba(0, 0, 0, .60) !important;
}

/* 裸 pre 本身去掉主题默认的深黑底/滚动条底色, 交给 code 卡片 */
#post .post-content pre:not(.shiki) {
  background: none !important;
  border: 0 !important;
  margin: 0 0 24px !important;
  padding: 0 !important;
  overflow: hidden;
  border-radius: 10px;
}

/* ---------- 行内代码: 淡玻璃胶囊底 ---------- */
/* 只作用于正文里【直接父级非 pre】的「行内」<code>(小代码片段),
   去主题深黑底。用父子选择器 :not(pre) > code 精准命中——
   高亮块 code 直接父级是 pre.shiki、裸块 code 直接父级是 pre,
   都会被排除; 只有 p/span 里的行内 code 命中。
   注意: 故意【不加 backdrop-filter】—— 实测 Chromium 对【行内元素】
   的 backdrop-filter 会把同一行(甚至相邻行)的正文文本一并模糊采样,
   造成"正文被打码"的假象(块级 figure.shiki / pre:not(.shiki) 均无此问题,
   只有行内 box 中招)。行内码用纯胶囊底即可, 磨砂感由块级承载。 */
#post .post-content :not(pre) > code {
  color: var(--shiki-color-text);
  /* 中性白膜胶囊：不含色相，只比周围"亮一点" */
  background: rgba(255, 255, 255, .07) !important;
  border-radius: 4px;
  padding: 2px 6px;
  font-size: .90em;
  font-family: 'Fira Code', ui-monospace, SFMono-Regular, 'Cascadia Code',
    Consolas, 'Courier New', monospace !important;
}

html[data-theme='dark'] #post .post-content :not(pre) > code {
  background: rgba(255, 255, 255, .07) !important;
  color: var(--shiki-color-text);
}

/* 快速滚动降级: 已去 backdrop-filter, 代码块为静态预渲染, 无需降级 */

/* 移动端: 圆角略收 */
@media (max-width: 768px) {
  figure.shiki {
    border-radius: 8px !important;
  }
}

/* ============================================================
   v15: 代码完整显示 + Fira Code Regular 全覆盖
   ------------------------------------------------------------
   1) 字体：站点 custom-font.css 用 `span { font-family: PingFang !important }`
      把每个 token 的 <span class="line"> 也盖成了苹方（实测 .line 的
      computed font-family = PingFangMedium）。这里用更高特异度 + !important
      把代码区钉回 Fira Code Regular（只作用于 .codeblock 内，不影响工具条图标）。
   2) 完整显示：长行自动换行（pre-wrap + anywhere），不再横向滚动/裁切；
      同时 _config.yml 的 highlight_height_limit 已置 0（不限高、不折叠）。
   ============================================================ */
#post .post-content figure.shiki .codeblock pre,
#post .post-content figure.shiki .codeblock code,
#post .post-content figure.shiki .codeblock .line,
#post .post-content figure.shiki .codeblock .line *,
#article-container figure.shiki .codeblock pre,
#article-container figure.shiki .codeblock code,
#article-container figure.shiki .codeblock .line,
#article-container figure.shiki .codeblock .line * {
  font-family: 'Fira Code', ui-monospace, SFMono-Regular, 'Cascadia Code',
    Consolas, 'Courier New', monospace !important;
  font-weight: 400 !important;
  font-variant-ligatures: none;
}

#post .post-content figure.shiki .codeblock,
#post .post-content figure.shiki .codeblock pre,
#post .post-content figure.shiki .codeblock code,
#post .post-content figure.shiki .codeblock .line,
#article-container figure.shiki .codeblock,
#article-container figure.shiki .codeblock pre,
#article-container figure.shiki .codeblock code,
#article-container figure.shiki .codeblock .line {
  white-space: pre-wrap !important;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
  overflow: visible !important;
  max-height: none !important;
}

/* 代码列允许收缩，换行才会真正生效 */
#post .post-content figure.shiki .codeblock .code,
#article-container figure.shiki .codeblock .code {
  min-width: 0 !important;
  flex: 1 1 auto !important;
}

/* 换行后由 code-wrap-align.js 重建的等高行号：数字顶部对齐首行 */
figure.shiki .gutter pre .line-num {
  display: block;
  line-height: 1.6;
  white-space: nowrap;
  /* 行号块内绝不出现滚动条：
     shiki-codeblock.css 的 `figure.shiki .codeblock pre * { overflow: auto }`
     会命中行号 span，一旦内容比块高 1px 就画出 15px 宽的迷你纵向滚动条
     （表现为每行右侧两个小三角）。这里用更高特异度 + !important 压掉。 */
  overflow: hidden !important;
}