/* ==========================================================================
   博客列表版式（blog-03）
   --------------------------------------------------------------------------
   只按需加载：inc/enqueue.php 里 blog 版式才会引这个文件。
   对应模板：home.php / archive.php / search.php。

   结构是两栏：主列（文章卡片）+ 右侧栏（广告位、分类）。
   .aib-layout 那个 grid 在 style.css 的共用层里，这里只管两栏里面装什么。

   ── 两条贯穿全文件的约束 ──────────────────────────────────────────────

   一、**元信息级的次要文字（--ink-3）在这一版里可以压在页面底上。**
   ——这条是**撤销**一条老规矩，不是新增一条，读到这行别按老规矩写。

   上一版这里写着"页面底是浅灰 #e9ecee，--ink-3 压在上面不合格，
   所以带 --ink-3 的东西必须落在白面里面"。那条规矩守不住：
   站头副标题、面包屑、页脚导航、侧栏分类计数**全都**在页面底上，
   而且由 header.php / footer.php / 侧栏渲染，改版式模板根本管不到。
   一条靠"所有人都记得"维持的规则，迟早会漏。

   所以改成把值本身调深：.layout-blog 给自己的 --ink-3 是 #5e6a78，
   实测白面 5.51、页面底 4.65、次级面 5.03，三个底都过 4.5。
   推导和上一版漏在哪里写在 style.css 的 .layout-blog 令牌那段，
   数字由 check-contrast.php 第 1 节逐格复算，不抄在这里
   （抄过一次，就是上面那句 4.26 —— 值改深之后它变成了假话）。

   二、**强调色当文字用、或者当实底压字，一律取 --accent-btn，不取 --accent。**
   --accent 是为了"看得见"选的，不是为"读得清"选的：
   这一版的 #c94b06 在白面（--surface）上 4.67 是够的，但字符串要用到的底
   不止白面——页面底是浅灰 #e9ecee（3.94），标签底是 #fdeee4（4.12）。
   --accent-btn（#a83c04）这三个底上都过（6.34 / 5.34 / 5.59），
   所以文字和实底都归它。--accent 留给描边、浅底和图形，那些按 3:1 判。

   四件套定义在 style.css 的 .layout-blog 里，值和 schemes.css「橙」那一档
   逐字相同——两处必须一起改，check-contrast.php 会分别验它们。
   ========================================================================== */

/* ==========================================================================
   1. 主列
   ========================================================================== */

/* 整个两栏区的上下留白。
   用 padding-top / padding-bottom 这两个**长写属性**，不能用 padding 简写：
   这个元素同时带着 .aib-shell，而 .aib-shell 的左右内边距是 padding 简写写的。
   简写会一次性清掉四个方向，这里再写一次简写就等于把 .aib-shell 的
   左右留白抹成 0——而 blog.css 在 style.css 之后加载，会赢。 */
.aib-layout {
  padding-top: var(--sp-6);
  padding-bottom: var(--sp-9);
}

.blog-main { min-width: 0; }

.blog-head {
  padding: var(--sp-6) 0 var(--sp-5);
}

.blog-head-title {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -.01em;
  line-height: 1.35;
  color: var(--ink);
}

.blog-head-desc {
  margin-top: var(--sp-3);
  max-width: 46em;
  font-size: 14.5px;
  line-height: 1.75;
  /* 用 --ink-2 而不是 --ink-3，但不是因为 --ink-3 压不住这个底
     （见文件头"一、"：那个值已经调深到能压页面底了）。
     是因为这一段是**描述文字**，本来就该比元信息重一档。 */
  color: var(--ink-2);
}

/* --- 卡片列表 ----------------------------------------------------------- */

.blog-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.blog-card {
  overflow: hidden;      /* 缩略图贴到圆角上时不要溢出 */
  transition: border-color .16s ease, box-shadow .16s ease;
}
.blog-card:hover {
  border-color: var(--line-2);
  box-shadow: var(--shadow-1);
}

/* 缩略图。比例必须和 add_image_size('aish-card', 480, 300, true) 一致，
   否则图片加载完成时会撑一下卡片（CLS）。 */
.blog-card-thumb {
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--surface-2);
}
.blog-card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .3s ease;
}
.blog-card:hover .blog-card-thumb img { transform: scale(1.02); }

.blog-card-body {
  padding: var(--sp-5);
}

/*
 * 分类徽标改成**实底**，而不用 .aib-badge 默认的「强调色字 + 浅强调底」。
 *
 * 底用 --accent-btn，和全站其它实底（主按钮、搜索按钮、当前页码）同一个
 * 令牌——不需要再单挑一档。橙档白字压 --accent-btn 是 6.34:1，
 * --accent-btn 当字压 --accent-soft 是 5.59:1，两个位置本来就都过，
 * 早先那种"当底得比当字深半档"的凑法现在不需要了。
 *
 * 不做 hover 变色：分类徽标本来就是"标签"不是"按钮"，
 * 不需要 hover 反馈来提示可点；变色只会平白多出一个要验的状态。
 */
.blog-cat {
  margin-bottom: var(--sp-3);
  background: var(--accent-btn);
  color: var(--on-accent);
}

/* 但是——**必须**显式把 hover 钉住，这不是"加个效果"，是"别被改坏"。
   全局那条 a:hover 的 color 和这里的 background 现在是**同一个令牌**
   （--accent-btn），不管的话鼠标一移上去就是同色压同色，
   整个标签上的字直接消失。而且 .blog-cat 是 (0,1,0)，
   全局 a:hover 是 (0,1,1)——权重上也压不过。
   这是"全局元素选择器 + 组件类"混用时的通病：组件类写得再对，
   也压不过一条针对元素本身的 hover。 */
a.blog-cat:hover {
  background: var(--accent-btn);
  color: var(--on-accent);
}

.blog-card-title {
  font-size: 19px;
  font-weight: 700;
  line-height: 1.45;
  color: var(--ink);
}
.blog-card-title a { color: inherit; }
/* 悬停色用 --accent-btn，和全站所有"文字变强调色"的 hover 同一个令牌
   （style.css 的全局 a:hover、.aib-list-title a:hover …）。
   这里原来是 --accent-dk：它是**更深**的一档，压在白卡片上当然也过，
   但两个后果不好——一是同一件事在站内有两套写法，二是
   --accent-dk 参与判定只用在一个位置（压自家浅底），
   压白面这一格 check-contrast.php 根本不验。
   换成 --accent-btn 之后就落进那张被逐格复算的表里了。 */
.blog-card-title a:hover { color: var(--accent-btn); }

.blog-card-excerpt {
  margin-top: var(--sp-3);
  font-size: 14.5px;
  line-height: 1.8;
  color: var(--ink-2);
}
.blog-card-excerpt > * + * { margin-top: var(--sp-2); }
/* 摘要是从正文截的，里面可能带上正文的标题或超大图片。
   不在这里收一道，卡片会被一篇排版夸张的文章撑破。 */
.blog-card-excerpt h1,
.blog-card-excerpt h2,
.blog-card-excerpt h3 { font-size: 15px; font-weight: 600; }
.blog-card-excerpt img { display: none; }

.blog-card-meta {
  margin-top: var(--sp-4);
  font-size: 13px;
  /* 卡片底色来自 .aib-card 的 --surface（这一版是白），--ink-3 压上去 5.51:1。
     同一档墨压在别处更紧（页面底 4.65、次级面 5.03），所以这一版里真正
     贴着门槛走的是**页面底**那一格，不是这里。这两行都会被
     check-contrast.php 第 1 节按「blog 版式 × ...」重算，不用手记。 */
  color: var(--ink-3);
}
.blog-card-meta > * + * { margin-left: var(--sp-3); }

/* --- 窄屏：卡片改成横排会挤，图直接不要了 ------------------------------- */

@media (max-width: 640px) {
  .blog-head { padding: var(--sp-5) 0 var(--sp-4); }
  .blog-head-title { font-size: 21px; }
  .blog-card-body { padding: var(--sp-4); }
  .blog-card-title { font-size: 17px; }
}

/* ==========================================================================
   2. 侧栏
   ========================================================================== */

/* .aib-side 的纵向堆叠、以及面板（.aib-panel）和分类列表的样式
   都在 style.css 的共用层里——文章页用的是同一个侧栏，
   那些规则不能只活在这一版的样式表里。

   这里只改**这一版的观感**，不动结构。

   两条关于位置的事实，改结构前先看这两条：
   1. 侧栏在 DOM 里排在主列**之后**，是网格把它放到右边的。
      用键盘 Tab 走一遍页面时，顺序是"所有文章 → 侧栏链接"，
      和视觉顺序不一致。这是有意的：主列是内容，侧栏是附属，
      读屏和爬虫该先拿到内容。
   2. 窄屏（≤900px）网格塌成一列，侧栏掉到页面最底下，
      那时候它顶部的广告位就不在首屏了。这是移动端的固有限制，
      不是 bug——手机上首屏本来就该留给内容和搜索框。 */

/* 这一版的页面底是浅灰，白面板自己就分得开，不必再画一圈线。
   用 border-color 而不是 border: 0——后者会少掉 2px 高度，
   侧栏里两个面板之间的间距会和别处对不上。 */
.layout-blog .aib-panel {
  border-color: transparent;
}

/* 侧栏里的广告位**一条尺寸都不覆写**。
   栏宽 280–320px，减掉面板内边距还剩 240px 左右，
   40px 图标 + 一行标题 + 两行描述放得下，没有"改成小一号"的必要。
   这种覆写最坑的地方在于：写的时候看着合理，等栏宽或字号变了，
   它就成了一条没人记得去改的硬编码，而且它藏在版式文件里、
   和共享层的那份规则隔着几百行。

   有一个要看真东西才知道的点：海报形态（.aib-ad--poster）用的是
   object-fit: cover，16:10 的框。上传的是竖版海报（比如 750×1000）时，
   上下会被裁掉，海报上的字可能被切。等后台真的投进来第一批海报时
   要实际看一眼——真被切了就改成 contain（会留灰边，但整张看得见），
   或者要求投放方按 16:10 出图。现在不预先猜。 */

/* ==========================================================================
   3. 搜索结果
   ========================================================================== */

/* 搜索页顶部那份搜索区（输入框 + 说明行）。

   为什么结果页上还要再放一个输入框：搜完发现方向不对是常态，
   用户十有八九要**改词**。不放的话他得滚回站头那个小输入框——
   而站头那个是紧凑版，在手机上滚回去之后它可能已经被浏览器
   地址栏的变化挤出视口了。

   这不是"多一个搜索框会让人不知道用哪个"的那个问题：
   搜索结果页上，用户已经不处在"我该从哪开始"的状态了。

   类名保留 .blog-types 是历史原因（这里原来放的是三个类型按钮，
   已删）。它在 _preview 的核验页里还被引用，改名要连核验页一起动，
   而收益只是名字好看一点。 */
.blog-types {
  padding: var(--sp-5);
  margin-bottom: var(--sp-4);
  background: var(--surface);
  border-radius: var(--radius);
}

/* 说明行下面那个广告位（见 search.php）。

   广告位在视觉上属于上面那张白卡的一部分（紧贴说明行），
   但它是独立的兄弟节点，不是那张卡的内容——放进卡片里的话，
   卡片的内边距会再套一圈，广告卡看起来是"卡里卡"。
   所以这里是"卡下面紧跟一条"，不是"卡里面加一条"。

   margin-top 给 0：上面 .blog-types 自己的 margin-bottom 就是这条间距
   （两个相邻外边距会取大的那个，写一个 --sp-4 在这里结果一样，
   写出来只是多一处要跟着改的数）。

   没配广告时里面那一格是空的，.aib-ad-cell:empty 会把它 display:none
   （那条在 style.css，因为首页和这里共用）。这一层本身高度就是 0，
   不需要再补一条 :empty 规则——容器里始终有那个格子节点，
   写 `:empty` 也永远匹配不上，是条死规则。 */
.blog-note-ad {
  margin-top: 0;
}

/* ==========================================================================
   3b. 搜索结果的分组
   --------------------------------------------------------------------------
   一次搜索出三组（内容 / 网盘 / 磁力），每组一个 <section>。
   每组都有自己的标题行和条数，所以组之间要能一眼切开——
   标题下面那条线就是干这个的，靠间距分不出"这是新的一组"
   还是"同上组的下一段"。
   ========================================================================== */

.blog-group {
  margin-top: var(--sp-8);

  /* 这一栏自己的颜色。
     兜底是墨色 / 分隔线色 —— 也就是这一版之前的样子，所以没挂
     --g-* 类的那一栏（内容栏、插件加进来的新类型）长得和以前一模一样。

     变量分开而不是一个 --g 管到底：标题是 19px 粗体（大字号，
     门槛 3.0），分隔线是 1px 图形（门槛也是 3.0），两者门槛虽然一样，
     兜底值却不同（--ink 和 --line），共用一个变量的话没挂色的那一栏
     会顶出一条 --ink 的深色分隔线，比现在重得多。

     --g-btn 是**实底**用的那一档，和 --g 分开是必须的，不是图省事：
     --g 是"文字压在页面底上"，--g-btn 是"白字压在这个色上"，两个方向
     的合格线不是一回事。最明显的例子是 accent 档——白字压 --accent
     (#de3f27) 只有 4.33，压在 --accent-btn (#bf3220) 才到 4.5。
     兜底给 --accent-btn，所以没挂色的那一栏（内容栏）按钮长得和
     这一版之前一模一样。 */
  --g: var(--ink);
  --g-line: var(--line);
  --g-btn: var(--accent-btn);
}

/* 每一栏的颜色档。键名和后端下拉框一一对应，见 AISH_Customize::group_tones()。
 *
 * 值是 var(--tone-*) 而**不是色值**，这一条是必须的：
 * 深色方案（body.aish-scheme-ink）里 --tone-blue 换成了 #7fb0ff，
 * 把 demo 里那个 #1f6fd0 抄到这里的话，深色底上这一栏的标题
 * 就没人核过对比度了——那正是 check-contrast.php 第 0c 节
 * 反复在防的那类错。
 *
 * 加一档要改三处：这里、customize.php 的 group_tones()、
 * check-contrast.php 第 0d 节的断言（名字从令牌数出来，不用改名单）。 */
.blog-group--g-accent { --g: var(--accent);      --g-line: var(--accent);      --g-btn: var(--accent-btn);      }
.blog-group--g-blue   { --g: var(--tone-blue);   --g-line: var(--tone-blue);   --g-btn: var(--tone-blue);       }
.blog-group--g-cyan   { --g: var(--tone-cyan);   --g-line: var(--tone-cyan);   --g-btn: var(--tone-cyan);       }
.blog-group--g-indigo { --g: var(--tone-indigo); --g-line: var(--tone-indigo); --g-btn: var(--tone-indigo);     }
.blog-group--g-violet { --g: var(--tone-violet); --g-line: var(--tone-violet); --g-btn: var(--tone-violet);     }
.blog-group--g-amber  { --g: var(--tone-amber);  --g-line: var(--tone-amber);  --g-btn: var(--tone-amber);      }
.blog-group--g-rose   { --g: var(--tone-rose);   --g-line: var(--tone-rose);   --g-btn: var(--tone-rose);       }
.blog-group--g-green  { --g: var(--tone-green);  --g-line: var(--tone-green);  --g-btn: var(--tone-green);      }
.blog-group--g-slate  { --g: var(--tone-slate);  --g-line: var(--tone-slate);  --g-btn: var(--tone-slate);      }

/* 第一组接在页面标题下面，间距要比组与组之间小——
   40px 会让它看起来像另一个独立的区块，而不是这一页的正文开头。 */
.blog-head + .blog-group {
  margin-top: var(--sp-6);
}

.blog-group-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  /* 行内间距小、行间距大：换行时（窄屏）标题和副标题要看起来是一对，
     而不是两行各自独立的文字。 */
  gap: var(--sp-1) var(--sp-3);
  padding-bottom: var(--sp-3);
  margin-bottom: var(--sp-5);
  border-bottom: 1px solid var(--g-line);
}

/* 标题用这一栏自己的色（--g）。
 *
 * 19px 粗体，按 WCAG 算大字号，门槛 3.0。全表最紧的一格是琥珀
 * 3.87（--tone-amber 压最暗的博客版式底），过得去——这一档的实测值
 * 在 check-contrast.php 第 1 节那张表里（tone-amber / bg）。
 *
 * ⚠ 条数（.blog-group-count，13.5px）**不**跟着上色，虽然看起来
 *   它是标题行的一部分。理由是对比度：13.5px 是正文级，门槛 4.5，
 *   而 --tone-blue 压页面底只有 4.17、琥珀只有 3.87——好几档都过不去。
 *   要它上色就得另设一套更深的值，那是「再开一个色板」，不是这一项的事。 */
.blog-group-title {
  font-size: 19px;
  font-weight: 700;
  color: var(--g);
}

/* 这一栏结果里那颗实底按钮（「打开」）取这一栏自己的颜色。
 *
 * 用 --g-btn 而不是 --g：--g-btn 是核过「白字压它」的那一档，
 * --g 不是（见 .blog-group 那段）。字色用 --on-accent，它是"压在实底上
 * 的字"——亮色方案 #fff、深色方案翻成 #14181d，所以同一个 var(--g-btn)
 * 在两个方案底下都有字色可配，不需要再开一套深色覆盖。
 *
 * 选择器写满三层（.blog-group .aib-list-actions .aib-btn--primary）是为了
 * 压过 style.css 里的 .aib-btn--primary:hover——下面那条 hover 规则
 * 刻意**不改底色**，但那条 :hover 规则带 transform 和 box-shadow，
 * 它得继续生效，所以这里只在底色/字色上覆盖。
 *
 * hover **不换色**，这是查过之后的取舍：tone-* 只有 --tone-X 和
 * --tone-X-soft 两档，没有更深的第三档，而 --tone-X 压 --tone-X-soft
 * 在 check-contrast 里是按 3.0（图形）核的——blue 实算 4.34，够不上
 * 13px 文字要的 4.5。与其编一个没人量过的深色，不如不加。
 * 反馈交给现有的 translateY(-1px) + 阴影，那是按钮本来就有的动作。 */
.blog-group .aib-list-actions .aib-btn--primary {
  background: var(--g-btn);
  border-color: var(--g-btn);
  color: var(--on-accent);
}
.blog-group .aib-list-actions .aib-btn--primary:hover {
  background: var(--g-btn);
  border-color: var(--g-btn);
  color: var(--on-accent);
}

/* 副标题是"这一类搜的是什么"，不是必须知道的，所以压小压灰。
   选 --ink-2 而不是 --ink-3 是个**版式取舍，不是对比度取舍**：
   这一块直接压在页面底上，两档都过（6.81 / 4.65）。
   至于为什么这里能直接压页面底、不像上一版那样必须先落进白面，
   见文件头"一、"。 */
.blog-group-hint {
  font-size: 13.5px;
  color: var(--ink-2);
}

/* 「这条是备用源给的」。
   刻意**不**复用 .blog-group-hint：那一句说的是"这一类搜的是什么"，
   属于类型本身，永远不变；这一句说的是"这一次的结果打哪儿来"，
   换个关键词就可能没有了。共用样式会让人以为它们是一回事。
   左边那条竖线把它和下面的列表绑在一起——它评的是列表，不是标题行。 */
.blog-group-note {
  margin: 0 0 var(--sp-4);
  padding-left: var(--sp-3);
  border-left: 2px solid var(--line-2);
  font-size: 13px;
  color: var(--ink-2);
}

/* 「AI 汇总」那一段。模板在 template-parts/search-summary.php。
   它落在「AI 搜索」那一栏的列表**上面**，说的是"这次搜到的是什么、
   先看哪几条"——读者要拿它决定往哪看，所以它得比列表显眼一档：
   白面 + 实线边框，和下面那些直接压在页面底上的卡片区分开。
   左边那条竖线是给精选条目的，和 .blog-group-note 那条竖线同一个
   意思（那条竖线评的是它右边那一条），但颜色用 --accent：
   那一条说的是"这次结果打哪儿来"，这一条说的是"我们替你看过了"。 */
.aib-summary {
  margin: 0 0 var(--sp-6);
  padding: var(--sp-5);
  background: var(--surface);
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
}

/* 「关于《某某》」——这一块自己的标题。
   比正文大一档、和正文同色（--ink）：它是这一块的名字，不是标签。
   和下面那个 .aib-summary-heading（「先看这几条」，13px / --ink-2）
   **故意不在一个量级**——那一个是块内部的隔断，这一个是块本身的名字，
   两个都用 13px 灰字的话，读的人会以为它们是并列的两行小标签。
   字号取 16.5px 而不是 18px：它上面还有一个页面级标题。 */
.aib-summary-title {
  margin: 0 0 var(--sp-2);
  font-size: 16.5px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--ink);
}

/* 15px 而不是 14.5px：这一段是正文级的东西（要读的），
   不是注解级的。颜色用 --ink 不是 --ink-2，同一个理由。 */
.aib-summary-lead {
  font-size: 15px;
  line-height: 1.75;
  color: var(--ink);
}

/* 「先看这几条」。
   比条数那一行（13.5px）再小半号、加字重——它是一个分隔标签，
   不是一句要说给人听的话。 */
.aib-summary-heading {
  margin: var(--sp-4) 0 0;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink-2);
}

.aib-summary-picks {
  margin: var(--sp-3) 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--sp-2);
}

.aib-summary-pick {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--sp-1) var(--sp-3);
  padding-left: var(--sp-3);
  border-left: 2px solid var(--accent);
}

/* 链接用 --ink 而不是 --accent-btn：这一段里"哪一条"比"能点"重要，
   满屏强调色的标题会让整块看起来像一排按钮。
   下划线表达可点性，悬停才换成强调色。 */
.aib-summary-link {
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--line-2);
}
.aib-summary-link:hover,
.aib-summary-link:focus-visible {
  color: var(--accent-btn);
  border-bottom-color: currentColor;
}

/* 「为什么推荐」。和 .blog-group-hint 同一档灰同一个理由：
   它是补充说明，主句是前面那个标题。 */
.aib-summary-why {
  font-size: 13.5px;
  color: var(--ink-2);
}

/* 「正在生成中」那种状态。
   虚线 + 透明底，和上面那个实心盒子**故意长得不一样**：
   实心是"这里有东西给你看"，虚线是"这里将来会有东西"——
   这个项目里虚线一直就是这个意思（见 .blog-empty--pending）。
   用户这几秒钟里要能一眼看出"还没好"，而不是"内容怎么是空的"。 */
.aib-summary--pending {
  background: transparent;
  border-style: dashed;
}

/* 「刷新一下就能看到」。
   比主句淡一档（--ink-3）：它是操作提示，不是内容。
   这一行只在 pending 的盒子里出现，那里没有别的东西要看，
   所以不需要它更显眼。 */
.aib-summary-note {
  margin-top: var(--sp-2);
  font-size: 13px;
  color: var(--ink-3);
}

/* 条数推到最右边：它的位置要稳定，不然三组的条数会随着
   副标题长短左右乱跳，扫视的时候对不齐。 */
.blog-group-count {
  margin-left: auto;
  font-size: 13.5px;
  color: var(--ink-2);
  /* 等宽数字：12 和 8 的宽度不一样的话，翻页时这一行会抖一下。 */
  font-variant-numeric: tabular-nums;
}

/* 「未接入」和真实条数用同一套位置，但更淡一点——
   它不是信息，是"这里还没有信息"。用 --ink-3 在这里是合适的：
   它跟着 .blog-group-count 的 13.5px，属于次要到可以再看一眼的层级，
   而且它旁边永远不会有另一组数字需要和它比较。 */
.blog-group-count--pending {
  color: var(--ink-3);
  font-variant-numeric: normal;
}

/* 还没接数据源时的空态。
   虚线框而不是实线：它要一眼看出"这里将来会有东西"，
   而不是"这里有个内容框但是空的"。 */
.blog-empty--pending {
  border: 1px dashed var(--line-2);
  background: transparent;
}

/* 「暂时搜不了」那个徽标。
   比「未接入」深一档（--ink-2，和真实条数同一档，blog 版式压页面底 6.81）：
   「未接入」是"这里还没有信息"，可以很淡；这一条是"现在有话说"，
   淡到看不见就等于用户在搜一个不会出结果的词而不知道为什么。
   数字不是等宽的——它后面不会跟着真实条数，没有对齐问题。 */
.blog-group-count--error {
  color: var(--ink-2);
  font-variant-numeric: normal;
}

/* 搜不成的空态用**实线**框，和「未接入」的虚线框区分开。
   虚线在那一处说的是"将来这里会有东西"；这一处不是将来，
   是"东西在，这会儿够不着"。两种框长得一样的话，
   用户没法从形状上分辨"等一会儿再来"和"以后再来"——
   而这正是这一态存在的全部意义。 */
.blog-empty--error {
  border: 1px solid var(--line-2);
}

/* 组内的卡片列表用共用的 .aib-list / .aib-card，这里不覆写任何东西：
   空规则比没有规则更容易让人以为"这里被人特意调过"。 */

@media (max-width: 640px) {
  /* 窄屏上条数换行后会孤零零占一行、又因为 margin-left:auto
     被推到右边。取消左推，让它跟在副标题后面。 */
  .blog-group-count { margin-left: 0; }
}

/* ==========================================================================
   4. 空状态
   ========================================================================== */

.blog-empty {
  padding: var(--sp-9) var(--sp-5);
  text-align: center;
  background: var(--surface);
  border-radius: var(--radius);
}
.blog-empty-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--ink);
}
.blog-empty-desc {
  margin-top: var(--sp-3);
  font-size: 14.5px;
  color: var(--ink-2);
}
.blog-empty .aib-btns {
  margin-top: var(--sp-6);
  justify-content: center;
}

/* ==========================================================================
   5. 这一版为什么要覆写强调色（以及这一节原来那段"待办"去哪了）
   --------------------------------------------------------------------------
   .layout-blog 覆写 --accent 成橙（#c94b06），理由和上面"一、二、"不是一回事：
   --ink-3 那条是**对比度**逼出来的，这条是**用户拍板的设计**——
   博客列表这一版就该是橙的。它和对比度已经没有任何关系了，
   四个值全过，别把它当成"为了过 AA 才改的权宜之计"顺手删掉。

   ⚠ 这一节原本写的是「同样的对比度问题在 :root（首页 / 文章页）上
     还没解决」，下面列了 4.33 / 4.68 一堆数。那一段现在**整个过期**了，
     而且它描述的问题已经不存在：

       修法不是把 :root 的 --accent 下调（那样首页的观感会变，
       是当时卡住不动的原因），是把 --accent 被派的两个差事拆开：
       --accent 继续当品牌色（描边、浅底、装饰，按 3:1 判，4.33 够用），
       凡是"要压字、或者自己就是字"的地方一律改用 --accent-btn（按 4.5 判）。
       见 style.css :root 的 --accent-btn 那段。

     所以首页和文章页也一起好了，不用再等谁拍板。

   两处数值都是机器算的，不要手抄到这里：
     · style.css 的 .layout-blog 令牌块 —— 这一版的四件套定义
     · _deliver/check-contrast.php 第 4 节 —— 每档强调色的实测表
       （schemes.css 顶部那张表就是从它抄过去的）
   ========================================================================== */