/* 知识库正文「重点标记」样式层
   ------------------------------------------------------------------
   目标：让导入文章的正文视觉与 saduck.top（VitePress）基本一致。
   依据：原站 style.0iyCl_Js.css 的真实规则 + 登录态下实测的计算样式，不是猜的。
   加载顺序：styles.css → sidebar-refinement.css → 本文件 → ui.css
   （ui.css 仍是最后的可读性/三端适配覆盖层；本文件只管标记类视觉，
     不新增 px 字号、不改字号体系，字号一律用 em/rem 以便「字号开关」缩放。）
   作用域：.knowledge-reader .prose，即知识库阅读页正文。
   ------------------------------------------------------------------

   覆盖的标记类型（按语料出现频次排序）：
     font[color]              ~7200 处  字色强调（原站主强调色 #fc5531）
     custom-block              ~2159 处  提示框（info / details / tip / warning / danger）
     code                       ~1941 处  行内胶囊（比如 / 例如）
     mark                        ~536 处  底纹强调
     u                           ~227 处  下划线强调
     .marker-text-highlight      ~231 处  绿色荧光笔（原站用 <sapn> 承载，已在前端规范为 <span>）
     .marker-text                 ~29 处  黄色下划线笔
*/

/* ============ 1. 色板：浅色主题 ============ */
.knowledge-reader .prose {
  /* 荧光笔（绿）：沿用原站 #82ffad 的两个叠加渐变，拆成变量以便深色主题降饱和 */
  --em-mark-edge: rgba(130, 255, 173, 0);
  --em-mark-solid: #82ffad;
  --em-mark-half: rgba(130, 255, 173, 0.5);
  --em-mark-faint: rgba(130, 255, 173, 0.1);
  --em-mark-strong: rgba(130, 255, 173, 0.7);
  --em-mark-bottom: rgba(130, 255, 173, 0.3);
  /* 下划线笔（黄）：原站 #ffe40066 */
  --em-line-yellow: rgba(255, 228, 0, 0.4);
  /* 行内胶囊：原站 --vp-code-bg / --vp-code-color */
  --em-chip-bg: rgba(142, 150, 170, 0.14);
  --em-chip-ink: #5e3af2;
  /* 底纹（mark） */
  --em-mark-bg: rgba(255, 235, 130, 0.55);
  /* 字色强调：贴近原站取值，个别偏亮色做了轻微压暗以保证白底对比度 */
  --em-ink-brand: #fc5531;
  --em-ink-danger: #e5484d;
  --em-ink-blue: #2f7fe0;
  --em-ink-amber: #d9820a;
  --em-ink-green: #1f9d55;
  --em-ink-purple: #7a4ddb;
  /* 提示框 */
  --em-block-bg: rgba(142, 150, 170, 0.14);
  --em-block-tip-bg: rgba(100, 108, 255, 0.14);
  --em-block-tip-line: #299764;
  --em-block-warn-bg: #fff8e6;
  --em-block-warn-line: #d97706;
  --em-block-danger-bg: rgba(244, 63, 94, 0.1);
  --em-block-danger-line: #f43f5e;
  --em-block-title: var(--text);
}

/* ============ 2. 色板：深色主题 ============ */
/* 荧光笔：实测原站深色主题仍沿用同一个亮绿渐变（不降饱和），故不做覆盖，
   仅对代码胶囊与字色做深色适配（取值同样来自原站深色主题实测）。 */
html[data-theme="dark"] .knowledge-reader .prose {
  --em-chip-bg: rgba(101, 117, 133, 0.16);
  --em-chip-ink: #9b85f5;
  --em-mark-bg: rgba(255, 226, 96, 0.22);
  --em-ink-brand: #ff8f70;
  --em-ink-danger: #ff7b80;
  --em-ink-blue: #6fb0ff;
  --em-ink-amber: #f0b45a;
  --em-ink-green: #4ecb8a;
  --em-ink-purple: #b39cff;
  --em-block-bg: rgba(142, 150, 170, 0.16);
  --em-block-tip-bg: rgba(100, 108, 255, 0.18);
  --em-block-tip-line: #3dbb84;
  --em-block-warn-bg: rgba(217, 119, 6, 0.16);
  --em-block-warn-line: #e09a3a;
  --em-block-danger-bg: rgba(244, 63, 94, 0.16);
  --em-block-danger-line: #ff6b81;
}

/* ============ 3. 绿色荧光笔（原站 .marker-text-highlight） ============ */
/* 原站用 <sapn class="marker-text-highlight">（拼写错的未知标签），
   类选择器与标签无关，这里同时兼容历史数据里的 sapn。 */
.knowledge-reader .prose .marker-text-highlight {
  border-radius: 0.3125rem;
  padding: 0 0.1em;
  color: inherit;
  background: transparent;
  background-image:
    linear-gradient(104deg,
      var(--em-mark-edge) 0.9%,
      var(--em-mark-solid) 2.4%,
      var(--em-mark-half) 5.8%,
      var(--em-mark-faint) 93%,
      var(--em-mark-strong) 96%,
      var(--em-mark-edge) 98%),
    linear-gradient(183deg,
      var(--em-mark-edge),
      var(--em-mark-bottom) 7.9%,
      var(--em-mark-edge) 15%);
  /* 跨行时按行断笔，避免长句高亮糊成一整块 */
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* ============ 4. 黄色下划线笔（原站 .marker-text） ============ */
.knowledge-reader .prose .marker-text {
  text-decoration: underline;
  text-decoration-thickness: 0.5625rem;
  text-decoration-color: var(--em-line-yellow);
  text-underline-offset: -0.25rem;
  -webkit-text-decoration-skip-ink: none;
  text-decoration-skip-ink: none;
}

/* ============ 5. 行内胶囊：比如 / 例如（原站 .vp-doc :not(pre)>code） ============ */
.knowledge-reader .prose code {
  font-family: inherit;
  font-size: 0.875em;
  padding: 0.1875rem 0.375rem;
  border: 0;
  border-radius: 0.25rem;
  background: var(--em-chip-bg);
  color: var(--em-chip-ink);
  white-space: normal;
}
/* 提示框里的胶囊用原站同款浅色（原站 .custom-block.tip code 等） */
.knowledge-reader .prose pre code {
  padding: 0;
  background: transparent;
  color: inherit;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* ============ 6. 原生标记标签 mark / u ============ */
.knowledge-reader .prose mark {
  padding: 0 0.1em;
  border-radius: 0.1875rem;
  background: var(--em-mark-bg);
  color: inherit;
}
.knowledge-reader .prose u {
  text-decoration-line: underline;
  text-decoration-thickness: 0.0938rem;
  text-underline-offset: 0.1875rem;
  text-decoration-color: var(--em-ink-brand);
}

/* ============ 7. 字色强调（原站用 <font color>，共十余种色值） ============ */
/* 浏览器对 <font color> 的原生渲染是「表现性提示」，优先级最低，
   任何作者样式都能覆盖它——所以这里显式映射到主题色板，顺便保证深色主题可读。 */
.knowledge-reader .prose font[color="#fc5531" i],
.knowledge-reader .prose font[color="#fb6c00" i] { color: var(--em-ink-brand); }
.knowledge-reader .prose font[color="red" i],
.knowledge-reader .prose font[color="#f20c00" i],
.knowledge-reader .prose font[color="#db5a6b" i] { color: var(--em-ink-danger); }
.knowledge-reader .prose font[color="#409eff" i],
.knowledge-reader .prose font[color="#2982d4" i],
.knowledge-reader .prose font[color="#0269c8" i],
.knowledge-reader .prose font[color="#177cb0" i],
.knowledge-reader .prose font[color="#4c8dae" i] { color: var(--em-ink-blue); }
.knowledge-reader .prose font[color="#e6a23c" i],
.knowledge-reader .prose font[color="#d2691e" i],
.knowledge-reader .prose font[color="#ffa400" i],
.knowledge-reader .prose font[color="#fff143" i] { color: var(--em-ink-amber); }
.knowledge-reader .prose font[color="#67c23a" i],
.knowledge-reader .prose font[color="green" i],
.knowledge-reader .prose font[color="#0aa344" i],
.knowledge-reader .prose font[color="#33cc00" i] { color: var(--em-ink-green); }
.knowledge-reader .prose font[color="#6600cc" i],
.knowledge-reader .prose font[color="#cf4789" i] { color: var(--em-ink-purple); }

/* ============ 8. 提示框（原站 .custom-block 族） ============ */
.knowledge-reader .prose .custom-block {
  margin: 1rem 0;
  padding: 1rem 1rem 0.5rem;
  border: 1px solid transparent;
  border-radius: 0.5rem;
  background: var(--em-block-bg);
  color: var(--text-2);
}
.knowledge-reader .prose .custom-block > p { margin: 0 0 0.5rem; }
/* 原站 info 与 details 同色（#8e96aa24），tip / warning / danger 各自带色边 */
.knowledge-reader .prose .custom-block.info,
.knowledge-reader .prose .custom-block.details {
  background: var(--em-block-bg);
  border-color: var(--line);
}
.knowledge-reader .prose .custom-block.tip {
  background: var(--em-block-tip-bg);
  border-color: var(--em-block-tip-line);
}
.knowledge-reader .prose .custom-block.warning {
  background: var(--em-block-warn-bg);
  border-color: var(--em-block-warn-line);
}
.knowledge-reader .prose .custom-block.danger {
  background: var(--em-block-danger-bg);
  border-color: var(--em-block-danger-line);
}
.knowledge-reader .prose .custom-block > .custom-block-title {
  color: var(--em-block-title);
  font-weight: 600;
}
.knowledge-reader .prose .custom-block > .custom-block-title strong { font-weight: 600; }
/* 折叠解析块（原站 details custom-block，语料里 ~1100 处） */
.knowledge-reader .prose .custom-block.details > summary {
  margin: 0 0 0.5rem;
  font-weight: 700;
  color: var(--text);
  cursor: pointer;
  user-select: none;
}
.knowledge-reader .prose .custom-block.details > summary::marker { color: var(--primary); }
.knowledge-reader .prose .custom-block.details > summary:hover { color: var(--primary); }
.knowledge-reader .prose .custom-block.details[open] > summary { margin-bottom: 0.625rem; }

/* ============ 9. 引用块与图片（原站 .vp-doc blockquote / img） ============ */
.knowledge-reader .prose blockquote {
  margin: 1rem 0;
  padding: 0 0 0 1rem;
  border-left: 2px solid var(--line-strong);
  color: var(--text-2);
}
.knowledge-reader .prose blockquote > p { margin: 0.5rem 0; }
.knowledge-reader .prose img { max-width: 100%; height: auto; border-radius: 0.5rem; }

/* ============ 10. 小屏：胶囊换行与高亮不出血 ============ */
@media (max-width: 680px) {
  .knowledge-reader .prose .marker-text-highlight { padding: 0 0.06em; }
  .knowledge-reader .prose .custom-block { padding: 0.875rem 0.875rem 0.375rem; }
}