/*
  md3-article.css -- 103 篇文章正文的深度视觉统一(第二轮,在 md3-shell.css 的
  常驻导航之上)。只统一"壳"和排版尺度,不碰任何文章自己的强调色变量
  (--xxx-c / --xxx-c-soft / --accent-left / --mem-c 等内容语义色全部保留,
  这是"不同类别用不同颜色"的要求)。

  === 为什么这里几乎每条规则都要 !important ===
  103 篇文章的主 <style> 块实际写在 <body> 内部,不在 <head> 里,文档顺序
  永远排在这个文件的 <link> 后面 -- 同 specificity 时层叠顺序天然会让
  它们自己的规则赢,不加 !important 这整份文件基本不会生效(排查过程
  见 md3-shell.css 里 body{margin-left} 那条规则的注释)。所以这里但凡是
  要覆盖文章自己已经声明过的属性,一律上 !important;真正新增、文章里
  不会有同名规则的部分(理论上没有,这份文件目前没有这种规则)才不需要。

  === h1/h2 为什么能放心全局覆盖 ===
  排查过 103 篇文章的 CSS 源码后确认:凡是用来展示卡片内小号大写标签
  (比如可视化面板里的 "STEP" 这种)的 h2,规则永远写成 `.some-panel h2{...}`
  这种带上级容器的复合选择器,从来没有单独写一条裸的 `h2{...}`。真正
  用裸选择器 `h2{...}` 的 75 篇,清一色是文档正文的小节标题,只是历史上
  字号写法不统一(1.4rem/1.5rem/22px 混着来)。所以这里放心用裸 h1/h2
  选择器统一字号 -- 复合选择器的具体度天然更高,不会被这条覆盖影响,
  可视化面板里的小标签完全不受影响。h3/p/li 目前在语料里几乎不存在裸
  选择器用法(全部走复合选择器),所以这份文件不去碰它们。
*/

/* ================= 1. 中性色 token 统一(全站通用) =================
   103 篇文章历史上出现过好几套中性变量命名(--paper / --panel / --surface-2 /
   --ink-dim / --ink-soft / --ink-faint ...),这里把它们全部指向同一套 MD3
   中性值,不去动任何看起来像"强调色"的变量名。 */
:root{
  --bg:#F6F5F3 !important; --surface:#F6F5F3 !important;
  --paper:#FFFFFF !important; --panel:#FFFFFF !important; --panel-2:#FFFFFF !important;
  --surface-2:#FFFFFF !important; --surface-3:#FBFAF8 !important;
  --ink:#201C1A !important;
  --ink-dim:#6B645F !important; --ink-soft:#6B645F !important; --ink-faint:#8F887F !important;
  --line:#E4E0DB !important; --line-soft:#EDEAE5 !important; --line-strong:#C9C3BB !important;
  --code-bg:#1C2230 !important; --code-ink:#E7EAF0 !important;
  --shadow: 0 1px 2px rgba(30,25,20,.05), 0 8px 24px -12px rgba(30,25,20,.14) !important;
  --radius:12px !important;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#17140F !important; --surface:#17140F !important;
    --paper:#231F1A !important; --panel:#231F1A !important; --panel-2:#231F1A !important;
    --surface-2:#231F1A !important; --surface-3:#2B261F !important;
    --ink:#F0EBE4 !important;
    --ink-dim:#A79E93 !important; --ink-soft:#A79E93 !important; --ink-faint:#82786D !important;
    --line:#3A342C !important; --line-soft:#332E27 !important; --line-strong:#4A4238 !important;
    --code-bg:#1C2230 !important; --code-ink:#E7EAF0 !important;
    --shadow: 0 1px 2px rgba(0,0,0,.3), 0 8px 24px -12px rgba(0,0,0,.5) !important;
  }
}
:root[data-theme="dark"]{
  --bg:#17140F !important; --surface:#17140F !important;
  --paper:#231F1A !important; --panel:#231F1A !important; --panel-2:#231F1A !important;
  --surface-2:#231F1A !important; --surface-3:#2B261F !important;
  --ink:#F0EBE4 !important;
  --ink-dim:#A79E93 !important; --ink-soft:#A79E93 !important; --ink-faint:#82786D !important;
  --line:#3A342C !important; --line-soft:#332E27 !important; --line-strong:#4A4238 !important;
  --code-bg:#1C2230 !important; --code-ink:#E7EAF0 !important;
  --shadow: 0 1px 2px rgba(0,0,0,.3), 0 8px 24px -12px rgba(0,0,0,.5) !important;
}

/* ================= 2. 布局容器(全站通用) ================= */
/* padding-bottom 原来普遍是 56~100px -- 那是 .wrap 曾经是页面最后一个
   元素时留的收尾呼吸感,后来 insert_donate_widget.py 把打赏组件插到了
   .wrap 外面、footer 前面,这段留白就变成了"下一篇"卡片和打赏按钮之间
   的一段死区,一起收紧。 */
.wrap{ max-width:1080px !important; padding-bottom:32px !important; }
/* .hero 区域的标题/导语并不是排在 .wrap 里,是排在它自己单独的
   .hero-inner 容器里,历史上两个容器的 max-width 经常对不上(比如
   .wrap 920px 但 .hero-inner 还是 880px),标题该在一行放得下却因为
   .hero-inner 更窄而提前换行。统一成跟 .wrap 一样宽。

   光改宽度还不够:.wrap 是"先在 body 整个宽度里居中,再加自己 24px
   padding";.hero 却是反过来的"先加 24px padding,再让 .hero-inner 在
   缩小后的空间里居中"。两种算法即使 max-width 数值相同,算出来的左边
   也永远差 24px(跟视口宽度无关,是这两种写法的数学结构决定的)。把
   .hero 自己的左右 padding 清零,让 .hero-inner 接管 padding,用跟
   .wrap 完全一样的"先居中、再 padding"顺序,两边就能真正对齐,不只是
   数值凑巧一样。 */
.hero-inner{ max-width:1080px !important; padding:0 24px !important; }
.section-inner{ max-width:1080px !important; }
.hero{ padding:72px 0 40px !important; }
.hero-fact{ margin-top:28px !important; }
/* 67 篇文章的导语段(hero 区域紧跟 h1 的那段介绍文字)自己另外写了
   max-width:680~700px,比 .hero-inner 整整窄了近 400px -- 单独控制
   一小段导语的行长本来是常见的编辑排版手法,但跟这个站现在"能用多宽就
   用多宽"的方向不一致,读起来右边空一大截像没排满。直接跟 .hero-inner
   一样宽。 */
.hero p{ max-width:none !important; }
/* .wrap 自己已经有左右 24px 的边距,75 篇文章里的 <section> 又各自重复
   声明了一遍横向 padding(常见是 44px 24px),两层padding 叠加,section
   内容就会比 hero 多缩进一截,读起来像"缩进了两次"。section 自己的
   垂直 padding(上下留白的节奏)保留,只清零左右,对齐到 .wrap 唯一的
   那一层边距上。 */
section{ padding-left:0 !important; padding-right:0 !important; }

/* ================= 3. 标题字号(全站通用,原因见文件头注释) ================= */
/* 原文件里 75 篇的 h1 都带 text-wrap:balance -- 浏览器会为了让两行字数
   均匀,主动选一个比"能塞多少塞多少"更早的断行点。容器变宽(见上面
   .wrap/.hero-inner 那两条注释)之后,同样的"均匀"算法在更宽的列宽下,
   对不少标题算出来的断点会让第一行留出明显一截空白,看着像断错地方了。
   改回正常的贪婪换行(能塞满就塞满),不再刻意找均匀点。 */
h1{ font-size:2.2rem !important; line-height:1.28 !important; font-weight:700 !important; letter-spacing:-.01em !important; text-wrap:wrap !important; }
h2{ font-size:1.5rem !important; line-height:1.35 !important; font-weight:700 !important; letter-spacing:-.01em !important; }

/* ================= 4. 代码/实验证据块(全站通用,容器本身,不碰内部高亮色) ================= */
.term{ border-radius:var(--radius) !important; padding:18px 20px !important; font-size:.82rem !important; line-height:1.75 !important; }
.src{ border-radius:var(--radius) !important; padding:18px 20px !important; font-size:.85rem !important; line-height:1.7 !important; }
pre{ border-radius:var(--radius) !important; }

/* ================= 5. 交互演示按钮(全站通用) ================= */
.btn{
  border-radius:20px !important; padding:8px 16px !important; font-size:.85rem !important;
  transition:background-color .15s ease, border-color .15s ease, transform .1s ease !important;
}
.btn:active{ transform:scale(.97) !important; }

/* ================= 6. 页脚区:翻页链接 + 打赏 + footer(全站通用) ================= */
.prev-post{ font-size:.88rem !important; margin-bottom:24px !important; }
.next-post{
  border-radius:16px !important; padding:24px 28px !important;
  transition:transform .15s ease, box-shadow .15s ease !important;
}
.next-post:hover{ transform:translateY(-2px) !important; box-shadow:0 10px 24px -10px rgba(0,0,0,.35) !important; }

/* margin-top 特意留 0:.wrap 自己已经带了 56~100px 的 padding-bottom,
   打赏组件又不在 .wrap 里面(在它外面,紧接着),两个加在一起会在"下一篇"
   卡片和打赏按钮之间空出一大截死区(实测反馈过,原来是 48px 顶部间距)。 */
.bgy-donate{ max-width:1080px !important; margin:0 auto 24px !important; padding:0 24px !important; }
.bgy-donate a{
  border-radius:24px !important; padding:10px 18px !important; font-size:.85rem !important;
  transition:transform .15s ease !important;
}
.bgy-donate a:hover{ transform:translateY(-1px) !important; }

footer{ padding:56px 24px 72px !important; font-size:.85rem !important; line-height:1.6 !important; }

.eyebrow{ font-size:.8rem !important; letter-spacing:.08em !important; font-weight:600 !important; }