3.2.22 评论区：引导线跟着右移到正文左边缘，锚点高亮改回黄色

用户对 3.2.21 的反馈：
「回复的内容和上面评论的正文是对齐了，但是回复内容左侧有一条蓝色的线
  还是没有对齐。那条蓝色的线也要向右移，让那条线和上面评论的内容正文对齐。
  如果是为了突出显示打开文章时的锚点，那还是用黄色吧。」

1. 引导线右移
   原来线写在容器的 border-left 上。边框只能贴在盒子外沿，也就是父评论的
   最左边（父头像那一列），而子回复整块已经右移到父正文的位置了，中间
   空出 55px，线与内容脱节。

   现在改成绝对定位的 ::before，位置由缩进算出：
       left: calc(var(--yq-indent) - var(--yq-guide-w))
   线的右边缘正好压住正文左边缘。断点里改缩进，线自动跟着走，
   不需要另写一遍。三档屏幕实测误差 0px。

   取右边缘对齐而不是左边缘，是因为线宽 2px：若左边缘对齐，线会压住
   子头像左侧（头像有一圈 1px 描边，压上去发脏）。

2. 缩进值 53 → 55（连带 44→46、40→42）
   旧值扣掉了 2px，因为那时线是 border，而 padding 从边框内侧算起。
   线不再占布局后，那 2px 不该再扣，否则子回复整体左移 2px。
   缩进回到最朴素的形式：头像宽 + 列间距。以后改这一个数，
   线和内容一起动，不会再出现「只对一半」。

3. 锚点高亮改回暖黄 #fffbe8
   3.2.21 改成浅蓝的理由是「全站只有待审核用暖色」。但用户指出它
   是用于突出显示锚点，该用黄色。这个判断是对的：锚点高亮需要在一整片
   蓝白里「跳出来」，浅蓝与引导线、按钮描边同色系，反而被当成背景噪音。

   与「刚提交」的分工因此清楚：
     :target → 暖黄（一次性，指路）
     is-new  → 浅蓝（即时反馈，我刚发的）
   同页出现也能分辨。

深层（第三个 children 容器起）仍然不画线，改用 content: none 关掉，
而不是以前的 border-left-color: transparent —— 伪元素没有"透明的线"
这种语义，直接不生成更干净。

只改样式表与版本号，评论的取数、分页、回复、加载更多逻辑未动。

assets/css/comments.css

@@ -81,13 +81,24 @@
   --yq-radius-lg: 6px;
 
   /* 子回复的缩进量（见第 5 节的推导）。
-   * 公式：头像宽 + 列间距 − 引导线宽(2px)
-   * 桌面 42+13−2 = 53 / ≤768 36+10−2 = 44 / ≤400 32+10−2 = 40。
+   * 公式：头像宽 + 列间距
+   * 桌面 42+13 = 55 / ≤768 36+10 = 46 / ≤400 32+10 = 42。
+   *
+   * ⚠️ 3.2.22 起**不再减引导线宽**。上一版引导线是容器的 border-left，
+   * 而 padding-left 从边框内侧算起，所以那个 2px 必须扣掉；
+   * 现在引导线改成绝对定位的伪元素、完全不占布局，扣掉反而会让
+   * 子回复整体左移 2px。缩进从此就是纯粹的「父正文左边缘距父 li 多远」。
+   *
    * 存在变量里是因为它必须和头像宽度、列间距**同时**在断点里改，
    * 分散写三处迟早漏一处（上一版就是这么漏掉 img 宽度的）。 */
-  --yq-indent: 53px;
+  --yq-indent: 55px;
   --yq-indent-deep: 30px;
 
+  /* 引导线的宽度。单独抽出来是给两处用：伪元素的 width，
+   * 以及"线要贴在正文左边缘的左侧"这个位移量（见第 5 节）。
+   * 改成 2px 以外还要同时看 --yq-indent 的定义，别只改一处。 */
+  --yq-guide-w: 2px;
+
   /* 统一动效曲线：进出都用同一条，避免"有的滑有的弹" */
   --yq-ease: cubic-bezier(0.4, 0, 0.2, 1);
 }
@@ -512,35 +523,60 @@
 
 /* 层级用三重冗余表达，任何一重失效另外两重仍在：
  *   ① 缩进（padding-left）
- *   ② 引导线（border-left）
+ *   ② 引导线（::before 绝对定位的竖线）
  *   ③ 头像尺寸（42 → 34）
  *
  * ── 缩进值是怎么算出来的（别随手改）────────────────────────────
- * 目标：**子回复那一块的正文左边缘，正好落在父评论正文的左边缘上**。
+ * 目标：**子回复那一块的左边缘，正好落在父评论正文的左边缘上**。
  *
  * 父评论一行是 `[头像 42][列间距 13][正文…]`，所以父正文左边缘
  * 距父 li 左边缘 42 + 13 = 55px。`ol.yang-children` 是父 li 的
- * 直接子元素、从父 li 左边缘起算，但它自己带 2px 的 border-left，
- * 而 padding-left 是从边框**内侧**算起的，所以
+ * 直接子元素、从父 li 左边缘起算，所以
  *
- *     padding-left = 头像宽 + 列间距 − 边框宽
- *                  = 42 + 13 − 2 = 53px
+ *     padding-left = 头像宽 + 列间距 = 42 + 13 = 55px
  *
- * 就精确对齐了，不是"接近"。`_geo_indent.js` 卡的就是「子正文左边缘
- * 减父正文左边缘 == 0」。768 / 400 两个断点头像与列间距都变小，
- * 这个值必须跟着换（44 / 40），否则窄屏上子回复会突出去。
+ * 就精确对齐了，不是"接近"。768 / 400 两个断点头像与列间距都变小，
+ * 这个值必须跟着换（46 / 42），否则窄屏上子回复会突出去。
  *
- * ⚠️ 缩进只能用 padding-left，**不能用 margin-left**：
+ * ── 引导线为什么改成伪元素（3.2.22）──────────────────────────
+ * 原来它写在容器的 border-left 上，于是只能贴在**父 li 的左边缘** ——
+ * 也就是父头像那一列。但子回复整块已经右移到父正文的位置了，
+ * 线却还留在最左边，中间空出 55px，看起来像"线和内容脱节了"。
+ *
+ * 用户明确要求：**线也要跟着右移，和上面评论的正文对齐**。
+ * border 做不到（它只能贴在盒子的外沿），所以改用绝对定位的伪元素，
+ * 位置由 --yq-indent 决定 —— 断点里改缩进，线会自动跟着走，不会脱节。
+ *
+ * 线的定位取 `left: calc(indent - 线宽)`，让线的**右边缘**与正文左边缘
+ * 重合，于是线完全落在头像左侧、不压头像（头像有一圈 1px 描边，压上去会脏）。
+ * 视觉上就是"一条竖线紧贴正文左边缘"，这也正是用户要的对齐。
+ *
+ * ⚠️ 缩进仍然只能用 padding-left，**不能用 margin-left**：
  * `_diag318_children_geo.js` 判据 A 要求 `ol.yang-children` 的
  * 左偏移（相对父 li）≤4px、判据 B 要求宽度 ≥ 父宽 90%。
  * margin-left 会同时破坏这两条，padding-left 不会。
+ * （伪元素是绝对定位、不参与布局，所以加它不影响这两条判据。）
  *
  * 引导线用主题主色的浅色版 #cfe6fb（和「写下你的评论」按钮的描边
  * 同一个色）—— 原来是灰蓝 #dbe6f2，用户要求改成主题自带的浅蓝。 */
 .yang-children {
+  position: relative;
   margin-top: 4px;
-  padding-left: var(--yq-indent, 53px);
-  border-left: 2px solid var(--yq-guide, #cfe6fb);
+  padding-left: var(--yq-indent, 55px);
+}
+
+/* 竖线本体。不占布局，所以不会像 border 那样把内容再推 2px。
+ * top/bottom 撑满整块，等价于原来 border-left 的长度。
+ * pointer-events: none —— 它压在 padding 区域上，别让它拦住点击。 */
+.yang-children::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: calc(var(--yq-indent, 55px) - var(--yq-guide-w, 2px));
+  width: var(--yq-guide-w, 2px);
+  background-color: var(--yq-guide, #cfe6fb);
+  pointer-events: none;
 }
 
 .yang-children > .yang-comment {
@@ -573,17 +609,28 @@
 
 /* 第三层起改用更小的缩进（--yq-indent-deep），并去掉引导线。
  *
- * 为什么必须减小：padding-left 是**逐层累加**的。第一层 53px 对齐好看，
- * 但到第三层就是 53×3 = 159px —— 390px 屏上正文只剩 100 多像素，
- * 长文会被切成竖条。所以从第三层起换成 30px，三层累计 53+53+30 = 136px，
+ * 为什么必须减小：padding-left 是**逐层累加**的。第一层 55px 对齐好看，
+ * 但到第三层就是 55×3 = 165px —— 390px 屏上正文只剩 100 多像素，
+ * 长文会被切成竖条。所以从第三层起换成 30px，三层累计 55+55+30 = 140px，
  * 仍然呈现递进，但不再失控。
  *
  * 引导线也去掉：三条竖线平行叠在一起会变成"表格"观感，反而更难读。
- * ⚠️ 这里**必须显式设 padding-left**，不能只是清掉 border-left ——
- * 否则它会继承上一层的 53px，与"减小"的意图正好相反。 */
+ * 3.2.22 起线是伪元素，所以这里要 **content: none** 把它整个关掉，
+ * 而不是像以前那样改 border-left-color —— 伪元素没有"透明色"的需求，
+ * 直接不生成更干净（也不会残留一个不可见的绝对定位盒）。
+ *
+ * ⚠️ 这里**必须显式设 padding-left**，不能只关掉线 ——
+ * 否则它会继承上一层的 55px，与"减小"的意图正好相反。
+ *
+ * 注：去掉 border 后，这里的 30px 变成"纯粹的偏移量"。
+ * 上一版因为 border 占 2px，实际偏移是 32px；差这 2px 对第三层
+ * 的观感没有影响，且方向是略微更宽松，不去追平。 */
 .yang-children .yang-children .yang-children {
   padding-left: var(--yq-indent-deep, 30px);
-  border-left-color: transparent;
+}
+
+.yang-children .yang-children .yang-children::before {
+  content: none;
 }
 
 /* 新提交的评论：淡入 + 短暂底色，让用户看到自己刚发的那条 */
@@ -599,8 +646,9 @@
 }
 
 /* 刚提交的那条：淡入 + 短暂底色。
- * 底色用主题浅蓝而不是暖黄 —— 全站只有「待审核」是暖色，
- * 这里再用黄会和状态色混淆。 */
+ * 底色用主题浅蓝 —— 它表达的是"这条刚发出去"的即时反馈，
+ * 和主色系统一致，也和下面锚点高亮（暖黄）**区分开**：
+ * 一个是"刚发生"，一个是"你要找的就是这条"，不该长得一样。 */
 .yang-comment.is-new {
   animation: yang-comment-in 0.28s var(--yq-ease);
   border-radius: var(--yq-radius-lg, 6px);
@@ -610,23 +658,27 @@
 /* 从通知/后台带 #comment-123 跳过来时，高亮那一条。
  *
  * ── 这就是「有些回复下面有黄色背景、有些没有」的原因 ──────────
- * 原来的底色是暖黄 #fffbe8。它只在**链接里带了该条评论的锚点**时出现
+ * 底色是暖黄 #fffbe8。它只在**链接里带了该条评论的锚点**时出现
  * （:target 伪类），所以：
  *   · 从评论通知邮件点进来 → URL 末尾有 #comment-1234 → 那一条是黄的；
  *   · 自己正常打开文章 → 没有任何锚点 → 一条都不黄。
  * 于是同一个页面上"有的黄有的不黄"，看起来像随机。
  *
- * 加上 `is-new`（刚发的新评论）原本也是暖黄，两个黄色叠在一起，
- * 更难判断哪条是"被高亮的"、哪条是"刚发的"。
+ * ── 3.2.21 曾改成浅蓝，3.2.22 按用户要求改回黄色 ───────────────
+ * 3.2.21 的考虑是"全站只有待审核用暖色，这里再用黄会混淆"。
+ * 但用户明确指出：**这就是为了突出显示锚点，还是用黄色**。
+ * 这个判断是对的 —— 锚点高亮是一次性的、需要"跳出来"的提示，
+ * 浅蓝和引导线、按钮描边同色系，反而被当成背景噪音忽略掉；
+ * 暖黄在一个全蓝的页面里立刻能看见。
  *
- * 现在统一成主题浅蓝，和引导线、按钮描边同一色系：
- *   · :target  → #eaf6ff（和主色按钮的浅底同色）
- *   · is-new   → 同上
- * 一眼能看出"这是被指到的那条"，但不再是突兀的黄色块。 */
+ * 与 is-new 的分工因此变得清楚：
+ *   · :target → 暖黄（一次性，指路）
+ *   · is-new  → 浅蓝（即时反馈，我刚发的）
+ * 两者不再撞色，同页出现也能分辨。 */
 .yang-comment:target .yang-comment-content {
   border-radius: var(--yq-radius, 4px);
-  background-color: var(--yq-primary-soft, #eaf6ff);
-  box-shadow: 0 0 0 8px var(--yq-primary-soft, #eaf6ff);
+  background-color: #fffbe8;
+  box-shadow: 0 0 0 8px #fffbe8;
 }
 
 /*--------------------------------------------------------------
@@ -1047,11 +1099,12 @@
   }
 
   /* 缩进量必须和下面的头像宽度、列间距同步改：
-   * 头像 36 + 列间距 10 − 引导线 2 = 44；深层同上 36+10−2=44，
-   * 但深层要更省空间，取 26。写在这里（.comments 上）是因为变量
-   * 定义在 .comments 作用域，媒体查询里重新赋值就能让所有后代取到新值。 */
+   * 头像 36 + 列间距 10 = 46（3.2.22 起不再扣引导线宽，理由见变量定义处）；
+   * 深层要更省空间，取 26。写在这里（.comments 上）是因为变量
+   * 定义在 .comments 作用域，媒体查询里重新赋值就能让所有后代取到新值 ——
+   * 引导线的位置是 `calc(indent - 线宽)`，所以它自动跟着走，不用另写一遍。 */
   .comments {
-    --yq-indent: 44px;
+    --yq-indent: 46px;
     --yq-indent-deep: 26px;
   }
 
@@ -1139,9 +1192,9 @@
 }
 
 @media screen and (max-width: 400px) {
-  /* 同样要同步缩进：头像 32 + 列间距 10 − 引导线 2 = 40；深层取 22。 */
+  /* 同样要同步缩进：头像 32 + 列间距 10 = 42；深层取 22。 */
   .comments {
-    --yq-indent: 40px;
+    --yq-indent: 42px;
     --yq-indent-deep: 22px;
   }