/* =========================================================
   代码块：语言标签 + 复制按钮
   ========================================================= */

/*
 * docsify-copy-code 自带的那套样式是"直角 + 一整块纯色 + 默认透明，
 * 只在 :hover 时出现"，放在圆角代码块里很突兀。这里整体覆盖掉。
 *
 * 注意：插件运行时会把一段 <style> 动态追加到 <head> 末尾，
 * 位置排在本文件之后，所以只能靠提高选择器权重来覆盖，不能靠加载顺序。
 *
 * 代码块的内边距并不在 pre 上，而在内部的 code 上（padding-block: 1.5rem），
 * 顶部那条 24px 空白带放不下加大后的按钮，所以下面把它加高。
 */

:root {
  /* 复制 / 复制成功图标：用 mask 画，颜色跟随 currentColor */
  --xm-copy-icon: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20d='M16,1H4c-1.1,0-2,.9-2,2v14h2V3h12V1zm3,4H8c-1.1,0-2,.9-2,2v14c0,1.1,.9,2,2,2h11c1.1,0,2-.9,2-2V7c0-1.1-.9-2-2-2zm0,16H8V7h11v14z'/%3E%3C/svg%3E");
  --xm-done-icon: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20d='M9,16.17L4.83,12l-1.42,1.41L9,19L21,7l-1.41-1.41z'/%3E%3C/svg%3E");
}

/* ------------------ 顶部信息栏：加高留白 ------------------ */

/* 原来顶部只有 1.5rem(24px)，放不下加大后的按钮。
   要压过 core.min.css 里那条 padding-block: 1.5rem !important，
   所以这里也带 !important，并用 body 把权重再抬一级。 */
body .markdown-section pre[data-lang] > code {
  /* 顶部 = 信息栏高度 + 呼吸空间，其余三边同一个值。
     原来顶部是固定的 2.3rem(36.8px)，而信息栏本身就占 36px，
     留给首行代码的只剩 0.8px —— 正文像贴在分隔线上，底部却空着 1.15rem。
     现在改成"信息栏 + 1rem"，上下视觉间距才一致。 */
  padding: calc(var(--xm-code-bar-h) + var(--xm-code-pad-y))
    var(--xm-code-pad-x) var(--xm-code-pad-y) !important;
  color: inherit;
}

/* ------------------ 语言标签挪到左上角 ------------------ */

/* 原样式在右上角（top: .5rem; right: .5rem），和复制按钮完全重叠，
   按钮一出现就把语言名盖掉。挪到左上角，两者各占一侧。
   多写一个 body 是把权重抬到 (0,3,2)，稳压 core.min.css 里那条
   :is(.markdown-section output, pre[data-lang]):after 的 (0,2,2)，
   这样即使以后调整本文件的加载顺序也不会失效。 */
body .markdown-section pre[data-lang]::after {
  /* 在信息栏里垂直居中：栏高 36px、字号 12px → (36-12)/2 = 12px */
  top: calc((var(--xm-code-bar-h) - 12px) / 2);
  left: 10px;
  right: auto;
  /* 语言名改成等宽字体 + GitHub 的弱化灰，
     core 默认的 opacity: .5 叠在浅灰底上太淡，这里恢复不透明 */
  color: var(--xm-code-label);
  font-family: var(--font-family-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.02em;
  opacity: 1;
}

/* ------------------ 复制按钮 ------------------ */

.markdown-section pre .docsify-copy-code-button {
  /* 在信息栏里垂直居中：按钮高约 24.5px（12.5px 字 + 5px 内边距 + 1px 边框），
     栏高 36px → (36-24.5)/2 = 5.75px */
  top: calc((var(--xm-code-bar-h) - 24.5px) / 2);
  right: 10px;
  display: inline-flex;
  align-items: center;
  padding: 5px 10px;
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-family);
  font-size: 12.5px;
  line-height: 1;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
  /* 自带的是 opacity: 0，只有 :hover 才现形 —— 触屏永远 hover 不到，
     按钮等于不存在。默认常驻可见，鼠标设备再由下面的媒体查询改成"靠近才显示"。 */
  opacity: 1;
  transition: opacity 0.15s ease, transform 0.15s ease, color 0.15s,
              background-color 0.15s, border-color 0.15s;
}

/* 图标 + 文字 */
.markdown-section pre .docsify-copy-code-button .label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.markdown-section pre .docsify-copy-code-button .label::before {
  content: "";
  flex: none;
  width: 14px;
  height: 14px;
  background-color: currentColor;
  -webkit-mask-image: var(--xm-copy-icon);
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-image: var(--xm-copy-icon);
  mask-position: center;
  mask-size: contain;
  mask-repeat: no-repeat;
}

/* 复制成功后图标换成对勾 */
.markdown-section pre .docsify-copy-code-button.success .label::before {
  -webkit-mask-image: var(--xm-done-icon);
  mask-image: var(--xm-done-icon);
}

.markdown-section pre .docsify-copy-code-button:hover {
  border-color: var(--theme-color);
  background: var(--theme-color);
  color: #ffffff;
}

/* 复制成功时按钮本身也变色，反馈比只在旁边冒个提示更明显 */
.markdown-section pre .docsify-copy-code-button.success {
  border-color: var(--theme-color);
  background: var(--theme-color);
  color: #ffffff;
}

/* ------------------ 鼠标设备：靠近才显示 ------------------ */

/* 只对真有指针的设备生效（hover: hover + pointer: fine）。
   触屏设备不命中这一段，按钮保持常驻可见，否则手机上根本点不到。
   另外 :focus-visible 也要现形，键盘 Tab 过来时才看得见。 */
@media (hover: hover) and (pointer: fine) {
  .markdown-section pre .docsify-copy-code-button {
    opacity: 0;
    transform: translateY(-4px);
  }

  .markdown-section pre:hover .docsify-copy-code-button,
  .markdown-section pre .docsify-copy-code-button:focus-visible,
  .markdown-section pre .docsify-copy-code-button.success,
  .markdown-section pre .docsify-copy-code-button.error {
    opacity: 1;
    transform: translateY(0);
  }
}

/* =========================================================
   代码高亮配色与字体：向 GitHub / Gitee / CSDN 的观感靠拢
   纯本地实现 —— 只用系统自带等宽字体 + CSS，不引入任何在线资源
   ---------------------------------------------------------
   docsify 的 token 配色并不写死在 .token.* 规则里，而是全部读
   --codeblock-* 这批变量（core.min.css 里的 .token 规则，
   由 vue.min.css 赋浅色、core-dark.min.css 赋深色）。
   所以这里只重定义变量，就能一次性改掉所有语言的配色，
   不需要逐个选择器去覆盖。
   ========================================================= */

:root {
  /* 等宽字体栈：全部是系统自带字体，不下载任何 webfont。
     从"现代系统等宽"排到"经典等宽"，Windows / macOS / Linux 都能命中 */
  --font-family-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
    "Cascadia Mono", "Segoe UI Mono", "Liberation Mono", "DejaVu Sans Mono",
    "Courier New", monospace;

  /* 代码块外壳：GitHub 的 canvas-subtle 底色 + 细边框 */
  --codeblock-bg: #f6f8fa;
  --xm-code-border: #d0d7de;
  --xm-code-header-bg: rgba(27, 31, 36, 0.045);
  --xm-code-label: #57606a;
  --xm-code-radius: 8px;
  --xm-code-pad-x: 1.15rem;   /* 左右内边距 */
  --xm-code-pad-y: 1rem;      /* 正文到上/下边缘的呼吸空间 */
  --xm-code-bar-h: 36px;      /* 顶部信息栏高度 */
  --xm-code-line-height: 1.6;

  /* token 配色：GitHub Primer（浅色）
     这一份变量同时也是"代码正文色"，core 里 pre[data-lang] 的 color 读它 */
  --codeblock-color: #1f2328;
  --codeblock-comment: #6e7781;      /* 注释 */
  --codeblock-keyword: #cf222e;      /* 关键字：if / then / fi、属性名 */
  --codeblock-selector: #0a3069;     /* 字符串、内置命令 */
  --codeblock-operator: #0550ae;     /* 运算符、链接 */
  --codeblock-tag: #0550ae;          /* 数字、属性、标签 */
  --codeblock-function: #8250df;     /* 函数名 */
  --codeblock-variable: #953800;     /* 变量、常量 */
  --codeblock-property: #0550ae;
  --codeblock-important: #cf222e;
  --codeblock-punctuation: #1f2328;
}

/* 深色模式：GitHub Primer（深色）。
   core-dark.min.css 也是在同一层（:root）给这些变量赋值的，本文件加载更晚，
   同权重下后者胜出；但每个变量必须重新给一遍，
   漏掉的那个会继续沿用 core-dark 的紫色系配色，配色会花。 */
@media (prefers-color-scheme: dark) {
  :root {
    --codeblock-bg: #161b22;
    --xm-code-border: #30363d;
    --xm-code-header-bg: rgba(255, 255, 255, 0.04);
    --xm-code-label: #8b949e;
    --codeblock-color: #e6edf3;
    --codeblock-comment: #8b949e;
    --codeblock-keyword: #ff7b72;
    --codeblock-selector: #a5d6ff;
    --codeblock-operator: #79c0ff;
    --codeblock-tag: #79c0ff;
    --codeblock-function: #d2a8ff;
    --codeblock-variable: #ffa657;
    --codeblock-property: #79c0ff;
    --codeblock-important: #ff7b72;
    --codeblock-punctuation: #e6edf3;
  }
}

/* ------------------ 代码块外壳 ------------------ */

/* core 里 pre[data-lang] 的权重是 (0,1,1)，这里用 body 抬到 (0,2,2)。
   其中两条 !important 是为了压过 core 自带的 !important
   （core 在 pre[data-lang] 上写了 padding:0!important / border-radius!important
   / line-height:inherit!important）。 */
body .markdown-section pre[data-lang] {
  background: var(--codeblock-bg);
  border: 1px solid var(--xm-code-border);
  border-radius: var(--xm-code-radius) !important;
  color: var(--codeblock-color);
  line-height: var(--xm-code-line-height) !important;
}

/* ------------------ 顶部信息栏 ------------------ */

/* 左边语言名、右边复制按钮，中间一条细分隔线
   —— 就是 Gitee / CSDN 那种"带标题栏的代码块"。

   core 给 pre 设的是 padding:0，而内部 code 已经预留了 2.3rem(36.8px) 顶部空白，
   所以这条 36px 的信息栏只是"叠"在既有空白上，不会造成任何位移或跳动。 */
body .markdown-section pre[data-lang]::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: var(--xm-code-bar-h);
  border-bottom: 1px solid var(--xm-code-border);
  border-radius: var(--xm-code-radius) var(--xm-code-radius) 0 0;
  background: var(--xm-code-header-bg);
  /* 纯装饰层：绝不能挡住右上角复制按钮的点击 */
  pointer-events: none;
}