/* ═══════════════ 首页 #features 分组序号列表（features.css） ═══════════════
   只挂首页（三语 index.html 各一行 <link>）。这一层刻意**不是卡片**：
   一行 = 序号 + 图标片 + 标题/正文 + 标签，组与组之间一行小标题，
   行与行之间只有一条发丝线 —— 18 个方块堆在一起的观感就没了。

   两处刻意的做法，写在这儿免得以后被"顺手改掉"：
   1) 发丝线用 --line（现在是铝白体系里的极细边框，不是玻璃边），本文件只把它抄进
      --feat-rule 这个名字，好让这一层自己带主题；深浅两套都靠 token 走，
      不再往 style.css 塞规则（那个文件被 46 个页面用 ?v=8 引用，动它就得全站改版本号）。
   2) 强调色是冷蓝（数据那一支）：序号、图标、hover 后的图标片同一个色相，
      hover 落到安全橙上 —— 一屏一个主号召色，不出现第三支。

   内容不在这里改：#features 里那一整块是 tool/sync_site_content.py 的标记块
   （18 条文案在它的 CARDS 表里），下次同步会整块重写。
   ══════════════════════════════════════════════════════════════════ */

.feat-list {
  --feat-rule: var(--line);
  --feat-hover: var(--halo-cool);
  --feat-ico-bg: var(--halo-cool);
  --feat-ico-br: var(--line-cool);
}

/* ── 组标题：小字 + 一条拉到右边的发丝线（分组的唯一标记，靠线不靠留白） ── */
.feat-group {
  display: flex; align-items: center; gap: 16px;
  margin: 42px 0 2px;
  font-family: var(--font-mono);
  font-size: 12.5px; font-weight: 800; letter-spacing: .18em;
  color: var(--cyan);
}
.feat-group:first-child { margin-top: 4px; }
.feat-group::after { content: ""; flex: 1; height: 1px; background: var(--feat-rule); }

/* ── 一行 ── */
.feat {
  display: grid;
  grid-template-columns: 34px 46px minmax(0, 1fr) minmax(0, 280px);
  gap: 18px;
  align-items: start;
  padding: 24px 4px 24px 0;
  border-bottom: 1px solid var(--feat-rule);
  transition: background .3s var(--ease);
}
.feat:hover { background: linear-gradient(90deg, var(--feat-hover), transparent 62%); }

.feat-no {
  padding-top: 5px;
  font-family: var(--font-mono);
  font-size: 12.5px; font-weight: 800; letter-spacing: .04em;
  color: var(--cyan); opacity: .7;
  font-variant-numeric: tabular-nums;
}

.feat-ico {
  display: grid; place-items: center;
  width: 46px; height: 46px; border-radius: var(--radius);
  background: var(--feat-ico-bg);
  border: 1px solid var(--feat-ico-br);
  color: var(--cyan); font-size: 17px;
  /* opacity 的过渡放这儿（入场首态在 motion.css）：两边都写 transition 会互相盖掉 */
  transition: opacity .45s var(--ease), background .3s var(--ease),
              color .3s var(--ease), border-color .3s var(--ease);
}
.feat:hover .feat-ico {
  background: var(--grad); border-color: transparent; color: var(--on-accent);
}

.feat-main h3 { font-size: 17.5px; font-weight: 800; letter-spacing: -.01em; }
.feat-main p { margin-top: 7px; color: var(--text-dim); font-size: 14px; line-height: 1.7; }

.feat-tags {
  list-style: none; display: flex; flex-wrap: wrap; gap: 7px;
  justify-content: flex-end; padding-top: 3px;
}
.feat-tags li {
  padding: 3px 10px; border-radius: 999px;
  border: 1px solid var(--feat-rule);
  color: var(--text-faint); font-size: 11.5px; line-height: 1.5; white-space: nowrap;
}

/* ── 断点：先收掉标签那一列（挪到正文下面），再收窄序号与图标 ── */
@media (max-width: 1100px) {
  .feat { grid-template-columns: 34px 46px minmax(0, 1fr); }
  .feat-tags { grid-column: 3; justify-content: flex-start; padding-top: 12px; }
}
@media (max-width: 640px) {
  .feat { grid-template-columns: 26px 38px minmax(0, 1fr); gap: 12px; padding: 20px 0; }
  .feat-ico { width: 38px; height: 38px; border-radius: var(--radius-sm); font-size: 15px; }
  .feat-no { padding-top: 3px; font-size: 11.5px; }
  .feat-main h3 { font-size: 16.5px; }
  .feat-main p { font-size: 13.5px; }
  .feat-group { margin-top: 30px; font-size: 11.5px; letter-spacing: .14em; }
}

/* ── 同页那 6 步（快速上手）的「语义化重置」──
   那 6 步本来就**有序**（1→6），标成 <ol>/<li> 才对读屏有意义；浏览器给 ol 的
   默认序号与左缩进在这里擦掉，视觉上仍是原样：三列方块、序号由 .step-num 写死。
   只做「回到原样」，不加任何新样式 —— 所以放在首页自己的文件里：style.css 被
   46 个页面共用，动它就得全站改版本号。 */
ol.steps { list-style: none; padding: 0; }

/* ═══════════════ 首页 section 骨架：section-head + section-body ═══════════════
   三语首页的每个 <section class="section"> 都收成同一个形状：

       section.section  >  .section-head（可选）  +  .section-body

   .section-body 本身不带任何视觉 —— 它只是"内容那一半"的位置。以前内容直接挂在
   section 下面，一条 section 里有几个孩子全看写的时候手气（有的 1 个、有的 3 个，
   还有两层 .community-inner 的），谁也说不出"头"到哪儿为止。

   .section.narrow 是配套的那一条：把头和身各自居中到 1100px。原来 #community /
   #contributors 靠外面再包一层 .community-inner / .contributors-inner 来实现，
   包装层拆掉之后由这一条承担（值是照抄的 1100px）。
   ── */
.section.narrow > .section-head,
.section.narrow > .section-body { max-width: 1100px; margin-left: auto; margin-right: auto; }

/* ═══════════════ 更新日志条目修正：一行 = 圆点 + 一段正文 ═══════════════
   style.css 里 `.cl-item` 写的是 `display:flex; gap:10px`，本意是「圆点 + 正文」两栏。
   可 flex 容器会把**行内子元素各自变成一个 flex item**：条目正文里的 <b>、<code>
   被 blockify 之后，和夹在它们中间的那几段纯文本一起横排成一行，每一件都被压到
   自己的 min-content —— 于是正文一行只剩十来个字，整条读起来像竖排。
   （实测 1280px 视口：.cl-item 宽 666px，条内每行文字却只有 14~181px 宽。）

   这里把那一行改回块级两栏：圆点绝对定位贴左边（left:0；正文 padding-left 17px
   = 圆点 7px + 原来的 gap 10px），正文照常撑满整条。字号 / 颜色 / 间距 / 深浅两套
   皮肤一个都没动 —— 只是让 style.css 那条规则的**原意**真的成立。

   为什么写在这个文件：`.cl-item` 只有三语首页这一段有，而 style.css 被 47 个页面
   共用，动它就得全站抬版本号（features.css 也是同样的理由单开一个文件）。 */
.cl-item { display: block; position: relative; padding-left: 17px; }
.cl-item > .cl-dot { position: absolute; left: 0; top: 8px; margin-top: 0; }