/* ==========================================================================
   content.css — 文章内容格式相关样式
   1) 格式徽章（MD / HTML / PDF）
   2) PDF 内嵌阅读器
   3) Markdown 渲染结果的少量补充样式
   4) 文章正文对齐「原笔记」（VideoNote 导出的 HTML 自带的那套三色体系）
   5) 代码块语法高亮（Pygments / codehilite）
   6) 课程笔记类标注（引述 / 时间码）
   7) 窄屏适配

   ⚠️ 本文件必须排在 postnews.article.css 之后（补丁表，只覆盖不改主题原文件）。
      顺序由 tools/build.py::pn_head() 保证，别在这里补 <link>。
   ========================================================================== */

/* ---------- 1. 格式徽章 ---------- */
.fmt-badge {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .04em;
  line-height: 1.6;
  vertical-align: middle;
  white-space: nowrap;
}

/* ---------- 2. PDF 内嵌阅读器 ---------- */
.pdf-embed {
  border: 1px solid #e5e7eb;
  border-radius: 0.75rem;
  overflow: hidden;
  background: #f8f9fa;
  margin: 0 0 1rem;
}
.pdf-embed-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: #fff;
  border-bottom: 1px solid #e5e7eb;
  font-size: 12px;
}
.pdf-embed-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #374151;
  font-weight: 600;
}
.pdf-embed-size { color: #9ca3af; flex-shrink: 0; }
.pdf-embed-dl {
  flex-shrink: 0;
  padding: 4px 12px;
  background: #3b82f6;
  color: #fff !important;
  border-radius: 6px;
  text-decoration: none !important;
  font-weight: 500;
  transition: background .15s;
}
.pdf-embed-dl:hover { background: #2563eb; }
.pdf-embed iframe {
  display: block;
  width: 100%;
  height: 880px;
  border: 0;
  background: #525659;
}
.pdf-tip {
  font-size: 12px;
  color: #9ca3af;
  text-align: center;
}

/* ---------- 3. Markdown 补充样式 ---------- */
/* 目录（markdown toc 扩展生成） */
#article-body .toc {
  background: #f8f9fa;
  border: 1px solid #e5e7eb;
  border-radius: 0.5rem;
  padding: 14px 20px;
  margin: 0 0 1.5em;
  font-size: 0.9rem;
}
#article-body .toc > ul { margin: 0; padding-left: 1.1rem; }
#article-body .toc ul ul { padding-left: 1.1rem; }
#article-body .toc li { margin: 3px 0; }
#article-body .toc a { color: #3b82f6; text-decoration: none; }
#article-body .toc a:hover { text-decoration: underline; }

/* 表格：窄屏可横向滚动 */
#article-body table { display: block; overflow-x: auto; }
@media (min-width: 769px) { #article-body table { display: table; } }

/* 行内代码与代码块 —— 取值照搬原笔记的 <style>：
     code { background:#F5F4FA; border:1px solid #ECEBF3; border-radius:5px;
            padding:1px 6px; font-size:12.5px; font-family:Consolas,monospace }
     pre  { background:#241F38; border-radius:12px; padding:14px 16px; margin:10px 0 }
     pre code { background:transparent; border:none; color:#E5E2F5; padding:0 }
   ⚠️ 原笔记的 code **不另设字色**（继承所在元素，所以在 <strong> 里就是红色）——
      这里用 inherit 保留这个行为，别再写死粉色。 */
#article-body code {
  background: #F5F4FA;
  border: 1px solid #ECEBF3;
  border-radius: 5px;
  padding: 1px 6px;
  font-size: 12.5px;
  font-family: Consolas, "Liberation Mono", Menlo, monospace;
  color: inherit;
  /* ⚠️ 必须能断行：正文里存在超长且无空格的 token（如浮点精度演示的
     0.33333333333333331482961625624739099293947219848633…、长 JS 表达式），
     行内元素默认断不开 → 会把整个文档顶宽，窄屏出现横向滚动条。
     用 anywhere 而非 break-word：前者会一并缩小 min-content 宽度，才能真正止住溢出。 */
  overflow-wrap: anywhere;
}
#article-body pre {
  background: #241F38;
  border: 0;
  border-radius: 12px;
  padding: 14px 16px;
  margin: 10px 0;
  overflow-x: auto;
  font-size: 12.5px;
  line-height: 1.7;
  color: #E5E2F5;
  font-family: Consolas, "Liberation Mono", Menlo, monospace;
  -webkit-overflow-scrolling: touch;
}
#article-body pre code {
  background: none;
  border: 0;
  color: inherit;
  padding: 0;
  font-size: inherit;
  font-family: inherit;
  /* 代码块保持原样换行（pre 本身 white-space:pre），长行靠横向滚动看 */
  overflow-wrap: normal;
}
/* 深色块里的横向滚动条也跟着变暗，免得一条亮白条突兀地横在代码下方 */
#article-body pre::-webkit-scrollbar { height: 8px; }
#article-body pre::-webkit-scrollbar-track { background: #2E2846; border-radius: 0 0 12px 12px; }
#article-body pre::-webkit-scrollbar-thumb { background: #4A4268; border-radius: 4px; }
#article-body pre::-webkit-scrollbar-thumb:hover { background: #5E5478; }

/* 分隔线 */
#article-body hr {
  border: 0;
  border-top: 1px solid #ECEBF3;
  margin: 18px 0;
}

/* 正文里的图片说明 —— ⚠️ 只认**紧跟图片**的 <em>。
   这里原本还有一条 `#article-body p > em:only-child`（把「整段只有一个 em」也当图注），
   2026-10-12 导入 SICP 批次时发现那是**误伤**：VideoNote 笔记里 `<p><em>理解：…</em></p>`
   是正文批注，不是图注（全站 278 处，开头词分布 = 理解 157 / 思考 76 / 推导 17 / 拓展 20…），
   而真正的 `<img>+<em>` 图注全站 **0 处**。原笔记的 <style> 里也**没有**任何图注规则
   （只有 `em { color:#2563EB; font-style:italic }`），所以这条会把批注渲染成灰色居中
   小字、和原笔记明显走样。删掉它之后走下面第 4 节的 `#article-body em`（蓝色斜体）。 */
#article-body img + em {
  display: block;
  text-align: center;
  font-size: 0.8125rem;
  color: #9ca3af;
  margin-top: -1em;
}

/* ---------- 4. 文章正文对齐原笔记（VideoNote 三色体系）----------
   VideoNote 导出的 HTML 在 <head> 里自带一套 <style>：
     :root { --ink:#1B1530; --b:#2563EB; --p:#7C3AED; --p-soft:#F3EEFF;
             --line:#ECEBF3; --gray-soft:#F5F4FA }
     body 14px / line-height 1.85 / color #1B1530
     p    首行缩进 2em
     h1,h2,h3  #1B1530（20 / 17 / 15px）
     strong #DC2626 ｜ em #2563EB ｜ li::marker #2563EB 800
     blockquote  紫左边框 #7C3AED + 淡紫底 #F3EEFF
     table th/td 边框 #D8D6E4 ｜ th 底 #F5F4FA
     hr   #ECEBF3
   ⚠️ 导入技能**刻意只取 <body>、丢弃 <head> 里的 <style>**，于是全站文章
      一直沿用站点自己的石板灰 + 品牌蓝配色，和原笔记「颜色样式都变了」。
      本节把上面这套取值原样搬回来，只作用于 #article-body（站点头部 / 侧栏 /
      卡片不受影响）。改这里的值 = 改全站文章观感，动之前先想清楚。 */
#article-body {
  color: #1B1530;
  font-size: 14px;
  line-height: 1.85;
}
#article-body h1,
#article-body h2,
#article-body h3 {
  color: #1B1530;
  line-height: 1.4;
  margin: 22px 0 10px;
}
#article-body h1 { font-size: 20px; }
#article-body h2 { font-size: 17px; }
#article-body h3 { font-size: 15px; }

#article-body p {
  margin: 9px 0;
  text-indent: 2em;          /* 原笔记的中文首行缩进 */
  font-size: 14px;
  line-height: 1.85;
  color: #1B1530;
}
/* 图片段落 / 列表内的段落不缩进（同原笔记的 p:has(> img:first-child)、li p） */
#article-body p:has(> img:first-child),
#article-body li p { text-indent: 0; }
#article-body h1, #article-body h2, #article-body h3 { text-indent: 0; }

#article-body ul,
#article-body ol {
  margin: 9px 0 9px 22px;
  padding-left: 0;
  /* ⚠️ 必须显式写 color / line-height：postnews.common.css 里有
     `.article-body ul, .article-body ol { color:#374151; line-height:1.8 }`，
     它直接命中 ul/ol（不是继承），优先级 (0,1,1) 高于「从 #article-body 继承」，
     不覆盖的话列表文字会一直是石板灰 #374151、行距也不是原笔记的 1.85。 */
  color: #1B1530;
  line-height: 1.85;
}
#article-body ul { list-style: disc; }
#article-body ul ul { list-style: circle; }
#article-body ul ul ul { list-style: square; }
#article-body ol { list-style: decimal; }
#article-body ol ol { list-style: lower-alpha; }
#article-body li { margin: 4px 0; }
#article-body li::marker { color: #2563EB; font-weight: 800; }

#article-body strong { color: #DC2626; font-weight: 700; }
#article-body em { color: #2563EB; font-style: italic; }

#article-body a { color: #2563EB; text-decoration: none; }
#article-body a:hover { text-decoration: underline; }

#article-body blockquote {
  border-left: 3px solid #7C3AED;
  padding: 4px 14px;
  color: #5B5870;
  background: #F3EEFF;
  border-radius: 0 8px 8px 0;
  margin: 10px 0;
  /* ⚠️ 原笔记的引用不是斜体；postnews.common.css 的 .article-body blockquote
     带 font-style:italic，这里必须显式压回去。 */
  font-style: normal;
}
#article-body blockquote p { text-indent: 0; color: inherit; }

#article-body table { border-collapse: collapse; margin: 10px 0; width: 100%; }
#article-body th,
#article-body td {
  border: 1px solid #D8D6E4;
  padding: 7px 12px;
  font-size: 13px;
  text-align: left;
}
#article-body th { background: #F5F4FA; font-weight: 600; }

/* ---------- 5. 代码块语法高亮（Pygments / codehilite）----------
   markdown 的 codehilite 扩展会输出
     <div class="codehilite"><pre><span></span><code><span class="kn">…</span></code></pre></div>
   ⚠️ 主题里从来没给这些 Pygments token 类上过色 —— 光有标记等于单色灰文本。
   原笔记本身**不做语法高亮**（所有 token 都是统一的 #E5E2F5），
   这里按用户要求保留高亮，色板在「原笔记三色体系」基础上按深紫底 #241F38 提亮：
     紫 #7C3AED → 关键字   ｜ 蓝 #2563EB → 函数 / 内置 / 类名
     橙 #D97706 → 数字     ｜ 红 #DC2626 → 报错
     --ink3 #9A97AC → 注释 ｜ 另加薄荷绿 → 字符串（与紫互补，避免全屏同色）
   ⚠️ 本段必须留在 content.css（排在主题 CSS 之后），否则会被 postnews.article.css 盖掉。 */
#article-body .codehilite { margin: 0 0 1em; }

/* 注释 */
#article-body .codehilite .c,
#article-body .codehilite .ch,
#article-body .codehilite .cm,
#article-body .codehilite .cp,
#article-body .codehilite .cpf,
#article-body .codehilite .c1,
#article-body .codehilite .cs { color: #8B86A8; font-style: italic; }

/* 关键字 / 控制流（含 Python 的 from-import、def、return 等） */
#article-body .codehilite .k,
#article-body .codehilite .kc,
#article-body .codehilite .kd,
#article-body .codehilite .kn,
#article-body .codehilite .kp,
#article-body .codehilite .kr,
#article-body .codehilite .kt,
#article-body .codehilite .ow { color: #B39DFF; }

/* 字符串 / 正则 */
#article-body .codehilite .s,
#article-body .codehilite .sa,
#article-body .codehilite .sb,
#article-body .codehilite .sc,
#article-body .codehilite .dl,
#article-body .codehilite .sd,
#article-body .codehilite .s1,
#article-body .codehilite .s2,
#article-body .codehilite .se,
#article-body .codehilite .sh,
#article-body .codehilite .si,
#article-body .codehilite .sr,
#article-body .codehilite .ss,
#article-body .codehilite .sx { color: #8FD3A8; }

/* 数字 */
#article-body .codehilite .m,
#article-body .codehilite .mb,
#article-body .codehilite .mf,
#article-body .codehilite .mh,
#article-body .codehilite .mi,
#article-body .codehilite .il,
#article-body .codehilite .no { color: #F2B880; }

/* 运算符 / 标点 */
#article-body .codehilite .o,
#article-body .codehilite .p { color: #A9A3C4; }

/* 内置函数 / 函数名 / 类名 / 命名空间（Flask、print、len…） */
#article-body .codehilite .nb,
#article-body .codehilite .bp,
#article-body .codehilite .nf,
#article-body .codehilite .nc,
#article-body .codehilite .nn,
#article-body .codehilite .ne { color: #8AB4F8; }

/* 装饰器（@app.route）与 HTML 标签 / 属性名 */
#article-body .codehilite .nd,
#article-body .codehilite .nt { color: #F0A0C8; }
#article-body .codehilite .na,
#article-body .codehilite .nl { color: #8AB4F8; }

/* 变量 / 名字：跟随原笔记本色 */
#article-body .codehilite .nv,
#article-body .codehilite .vc,
#article-body .codehilite .vg,
#article-body .codehilite .vi,
#article-body .codehilite .vm,
#article-body .codehilite .n,
#article-body .codehilite .nx,
#article-body .codehilite .ni { color: #E5E2F5; }

/* 增删行 / 报错 */
#article-body .codehilite .gi { color: #8FD3A8; }
#article-body .codehilite .gd,
#article-body .codehilite .gr,
#article-body .codehilite .gt,
#article-body .codehilite .err { color: #F08A8A; }
#article-body .codehilite .gh { color: #8AB4F8; font-weight: 700; }
#article-body .codehilite .gu { color: #F0A0C8; font-weight: 700; }
#article-body .codehilite .ge { font-style: italic; }
#article-body .codehilite .gs { font-weight: 700; }
#article-body .codehilite .go,
#article-body .codehilite .gp { color: #8B86A8; }

/* ---------- 6. 课程笔记类标注（引述 / 时间码）----------
   取值同原笔记：.md-sec #D97706 700 ｜ .md-quote #2563EB */
#article-body .md-quote { color: #2563EB; }
#article-body .md-sec {
  color: #D97706;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* ---------- 7. 窄屏适配 ---------- */
@media (max-width: 768px) {
  .pdf-embed iframe { height: 520px; }
}
@media (max-width: 640px) {
  .pdf-embed-bar { flex-wrap: wrap; }
  .pdf-embed-name { flex: 1 1 100%; }
  .pdf-embed iframe { height: 440px; }
}