/* 渲染出来的 markdown 长什么样。
 *
 * 颜色全部取自 kg3d.css 的 token，不写死任何色值 —— 卡片在浅色和深色下
 * 都要读得下去，写死的话总有一套主题是坏的。代码高亮也是这个道理：
 * 那套配色不是从某个现成主题抄的，是按图谱自己那十二个分组色挑的，
 * 所以代码块和球面上的节点是同一个色系。
 *
 * 只作用于 .doc 里面 —— 这站上还有别的 pre/code（引擎自己的 payload 块），
 * 别把它们的样式一起改了。
 */

.doc {
  --md-kw:  #B13650;   /* 关键字、运算符 */
  --md-str: #3B7637;   /* 字符串 */
  --md-num: #BC5F19;   /* 数字、常量 */
  --md-fn:  #2A5CBE;   /* 函数名、属性名 */
  --md-ty:  #6553CC;   /* 类型、类名 */
  --md-var: #0F7186;   /* 变量、参数、标签 */
  --md-del: #7C8598;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .doc{
    --md-kw:  #EE7189;
    --md-str: #79BC64;
    --md-num: #E79552;
    --md-fn:  #6E9DF2;
    --md-ty:  #9E90FB;
    --md-var: #4CBCDA;
    --md-del: #6C7688;
  }
}
:root[data-theme="dark"] .doc{
  --md-kw:  #EE7189;
  --md-str: #79BC64;
  --md-num: #E79552;
  --md-fn:  #6E9DF2;
  --md-ty:  #9E90FB;
  --md-var: #4CBCDA;
  --md-del: #6C7688;
}

/* ── 正文 ────────────────────────────────────────────────────────── */

.doc > *:first-child { margin-top: 0 }
.doc > *:last-child  { margin-bottom: 0 }

.doc p { margin: 0 0 13px; color: var(--ink); }
/* 中文正文行高比英文要松一点，13.4px 是这套界面里正文的字号 */
.doc p, .doc li { line-height: 1.78; font-size: 13.4px; }

.doc h1, .doc h2, .doc h3, .doc h4, .doc h5, .doc h6 {
  font-family: "Archivo","IBM Plex Sans","PingFang SC","Microsoft YaHei",sans-serif;
  font-weight: 700; letter-spacing: -.012em; line-height: 1.35;
  margin: 26px 0 9px; scroll-margin-top: 12px;
}
.doc h1 { font-size: 19px }
.doc h2 { font-size: 15.5px }
.doc h3 { font-size: 14px }
.doc h4, .doc h5, .doc h6 { font-size: 13.2px; color: var(--ink-2) }

/* H2 上面加一条细线：md 文档里 h2 是真正的小节（原理 / 实战要点 / Payload），
   线把它们和上一节分开，光靠间距在长文档里分不清。 */
.doc h2 {
  padding-top: 18px;
  border-top: 1px solid var(--line-soft);
}
.doc h2:first-child, .doc h1 + h2 { border-top: 0; padding-top: 0 }

/* 标题旁边那枚小竖条，颜色跟着当前节点的主题色走（引擎在卡片上注了 --accent） */
.doc h2::before {
  content: ""; display: inline-block; vertical-align: -1px;
  width: 3px; height: 13px; margin-right: 8px; border-radius: 2px;
  background: var(--accent, var(--ink-3)); opacity: .85;
}

.doc strong { font-weight: 650; color: var(--ink) }
.doc em { font-style: italic; color: var(--ink-2) }
.doc del { color: var(--md-del) }
.doc sup, .doc sub { font-size: .76em; line-height: 0 }

.doc a {
  color: var(--md-fn); text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--md-fn) 34%, transparent);
  transition: border-color .16s, color .16s;
}
.doc a:hover { border-bottom-color: var(--md-fn) }

/* 文章里的目录跳转：滚到那个标题之后闪一下，标出落点。
   doc.js 的 jumpInDoc() 负责滚和挂这个类。
   底色用主题色兑淡，别用固定色 —— 卡片是按节点主题色变的。 */
.doc h1.anchor-hit, .doc h2.anchor-hit, .doc h3.anchor-hit,
.doc h4.anchor-hit, .doc h5.anchor-hit, .doc h6.anchor-hit {
  animation: anchorHit 1.5s ease-out;
}
@keyframes anchorHit {
  0%   { background: color-mix(in srgb, var(--accent, var(--md-fn)) 22%, transparent) }
  100% { background: transparent }
}
@media (prefers-reduced-motion: reduce) {
  .doc h1.anchor-hit, .doc h2.anchor-hit, .doc h3.anchor-hit,
  .doc h4.anchor-hit, .doc h5.anchor-hit, .doc h6.anchor-hit { animation: none }
}

.doc hr {
  border: 0; height: 1px; background: var(--line-soft);
  margin: 22px 0;
}

/* 列表。marker 用主题色，中文列表读起来分得清层级 */
.doc ul, .doc ol { margin: 0 0 13px; padding-left: 22px }
.doc li { margin: 3px 0 }
.doc li::marker { color: var(--ink-3) }
.doc li > ul, .doc li > ol { margin: 3px 0 0 }
.doc ul.task { list-style: none; padding-left: 3px }
.doc ul.task li { display: flex; gap: 7px; align-items: baseline }
.doc ul.task input { margin: 0; accent-color: var(--md-fn) }

.doc blockquote {
  margin: 0 0 13px; padding: 2px 0 2px 13px;
  border-left: 3px solid var(--line);
  color: var(--ink-2);
}
.doc blockquote p:last-child { margin-bottom: 0 }

/* ── 行内代码 ────────────────────────────────────────────────────── */

.doc code {
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .875em;
  background: var(--code-bg);
  border: 1px solid var(--line-soft);
  border-radius: 5px;
  padding: .1em .38em;
  /* 中文正文里夹一个长命令，不给断行机会就会把整段顶宽 */
  overflow-wrap: anywhere;
}

/* ── 代码块 ──────────────────────────────────────────────────────── */

/* 这一段是整份样式里最要紧的。
   博客里那些命令动不动一百多字符一行，而卡片宽度是有限的 —— 摊开不换行
   会把卡片撑到出现横向滚动条（很难看，也不符合「正文不该横向滚」）。
   所以 pre 自己滚，且只在真的超宽时滚。 */
.doc pre {
  margin: 0 0 14px;
  background: var(--code-bg);
  border: 1px solid var(--line-soft);
  border-radius: 9px;
  padding: 12px 14px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  /* 滚动条在浅色下别太抢眼 */
  scrollbar-width: thin;
}
.doc pre code {
  background: none; border: 0; padding: 0; border-radius: 0;
  font-size: 12.4px; line-height: 1.62;
  /* 代码块不换行 —— 换行会破坏缩进，命令也就没法复制了。
     横向滚动交给上面那个 pre。 */
  white-space: pre;
  overflow-wrap: normal;
}
/* 带行号的块（渲染器给每行套了 span），用等宽对齐 */
.doc pre code .ln { color: var(--ink-3); user-select: none }

/* 代码块的横向滚动条：WebKit 下给它一个低对比度的样式 */
.doc pre::-webkit-scrollbar { height: 9px }
.doc pre::-webkit-scrollbar-track { background: transparent }
.doc pre::-webkit-scrollbar-thumb {
  background: var(--line); border-radius: 5px;
  border: 2px solid var(--code-bg);
}
.doc pre::-webkit-scrollbar-thumb:hover { background: var(--ink-3) }

/* 代码块右上角标一下语言。用 data-lang，由 doc.js 在渲染后挂上。 */
.doc pre[data-lang] { position: relative; padding-top: 30px }
.doc pre[data-lang]::before {
  content: attr(data-lang);
  position: absolute; top: 7px; left: 13px;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 10.5px; letter-spacing: .07em; text-transform: uppercase;
  color: var(--ink-3); user-select: none;
}

/* 代码块右上角的复制按钮。默认半透明，鼠标进到这一块才实起来 ——
   常驻显示的话，一页十来个代码块会到处是小方块，很吵。 */
.doc pre .copybtn {
  position: absolute; top: 6px; right: 8px;
  font-family: "IBM Plex Sans","PingFang SC",sans-serif;
  font-size: 11px; line-height: 1;
  padding: 5px 9px; border-radius: 6px; cursor: pointer;
  background: var(--surface); color: var(--ink-3);
  border: 1px solid var(--line);
  opacity: 0; transition: opacity .18s, color .18s, border-color .18s;
}
.doc pre:hover .copybtn, .doc pre:focus-within .copybtn { opacity: 1 }
.doc pre .copybtn:hover { color: var(--ink); border-color: var(--ink-3) }
.doc pre .copybtn.ok { color: var(--md-str); border-color: var(--md-str); opacity: 1 }
/* 触屏没有 hover，按钮就得一直看得见 */
@media (hover: none){
  .doc pre .copybtn { opacity: 1 }
}

/* ── 表格 ────────────────────────────────────────────────────────── */

/* 表格本身可能比卡片宽，所以外面套一个滚动容器（doc.js 会套）。
   不套的话宽表格会把整个卡片顶出横向滚动条。 */
.doc .tablewrap {
  margin: 0 0 14px; overflow-x: auto; overscroll-behavior-x: contain;
  border: 1px solid var(--line-soft); border-radius: 9px;
  scrollbar-width: thin;
}
.doc .tablewrap::-webkit-scrollbar { height: 9px }
.doc .tablewrap::-webkit-scrollbar-thumb { background: var(--line); border-radius: 5px }

.doc table {
  border-collapse: collapse; width: 100%;
  font-size: 12.8px; line-height: 1.6;
}
.doc th, .doc td {
  padding: 7px 11px; text-align: left; vertical-align: top;
  border-bottom: 1px solid var(--line-soft);
  white-space: nowrap;                 /* 单元格不折行，靠外面的容器滚 */
}
.doc th {
  background: var(--surface-2);
  font-weight: 600; color: var(--ink);
  position: sticky; top: 0;             /* 表长了之后表头跟着走 */
  white-space: nowrap;
}
.doc tr:last-child td { border-bottom: 0 }
.doc tbody tr:hover td { background: color-mix(in srgb, var(--surface-2) 55%, transparent) }
/* 第一列通常是名字/键，给它一点宽度上的优先级 */
.doc td:first-child { color: var(--ink-2) }
/* 单元格里数字列对齐 */
.doc td.num, .doc th.num { font-variant-numeric: tabular-nums; text-align: right }

/* ── 图片 ────────────────────────────────────────────────────────── */

.doc img {
  max-width: 100%; height: auto; display: block;
  margin: 4px auto 14px;
  border: 1px solid var(--line-soft); border-radius: 9px;
  background: var(--surface-2);
  /* 图没加载出来时别让布局跳 */
  min-height: 24px;
}

/* ── 提示块 ──────────────────────────────────────────────────────── */
/* 文档里写 > **注意** 这种引用块时，让它看起来像一条提示而不是引文。
   不引入自定义语法 —— 只认 markdown 本来就有东西，别的地方复制来的 md
   才能原样渲染。 */

.doc .docwait, .doc .docerr {
  display: flex; align-items: center; gap: 9px;
  padding: 15px 2px; color: var(--ink-3); font-size: 12.8px;
}
.doc .docwait::before {
  content: ""; width: 13px; height: 13px; border-radius: 50%;
  border: 2px solid var(--line); border-top-color: var(--ink-3);
  animation: docspin .7s linear infinite;
  flex: none;
}
@keyframes docspin { to { transform: rotate(360deg) } }
@media (prefers-reduced-motion: reduce){
  .doc .docwait::before { animation-duration: 2.4s }
}
.doc .docerr { color: var(--warn) }

/* 首页/目录类文档里的列表，条目多的时候给它一点行距节奏 */
.doc .doclist { margin: 0 0 13px; padding: 0; list-style: none }
.doc .doclist li {
  padding: 9px 0; border-bottom: 1px solid var(--line-soft);
}
.doc .doclist li:last-child { border-bottom: 0 }
.doc .doclist .d { color: var(--ink-3); font-size: 12.4px }

/* ══ 代码高亮 ═══════════════════════════════════════════════════════
   按图谱那十二个分组色挑的一套，浅色深色各一份。
   和现成主题的区别：没有一个是纯红/纯绿的高饱和色 —— 那在这套界面上
   会显得像是从别处粘过来的。 */

.hljs-comment, .hljs-quote           { color: var(--md-del); font-style: italic }
.hljs-keyword, .hljs-selector-tag,
.hljs-literal, .hljs-doctag,
.hljs-name, .hljs-operator           { color: var(--md-kw) }
.hljs-string, .hljs-regexp,
.hljs-addition, .hljs-meta .hljs-string { color: var(--md-str) }
.hljs-number, .hljs-symbol,
.hljs-bullet, .hljs-link             { color: var(--md-num) }
.hljs-title, .hljs-title.function_,
.hljs-section, .hljs-selector-id,
.hljs-selector-class                 { color: var(--md-fn); font-weight: 600 }
.hljs-type, .hljs-class .hljs-title,
.hljs-title.class_, .hljs-built_in   { color: var(--md-ty) }
.hljs-attr, .hljs-attribute,
.hljs-variable, .hljs-template-variable,
.hljs-params, .hljs-property,
.hljs-selector-attr, .hljs-selector-pseudo { color: var(--md-var) }
.hljs-meta                           { color: var(--ink-3) }
.hljs-deletion                      { color: var(--md-kw) }
.hljs-emphasis                       { font-style: italic }
.hljs-strong                         { font-weight: 650 }
.hljs-tag                            { color: var(--ink-3) }
.hljs-tag .hljs-name                 { color: var(--md-kw) }
.hljs-tag .hljs-attr                 { color: var(--md-var) }