/* 指南页（P0-3）
   复用首页内容带的卡片体系（.kbdoc / .kbdoc-sec），只补三件首页不需要的东西：
   ① 更窄的可读行宽（文章页不是仪表盘，一行太长会读不下去）；
   ② 面包屑与标题层级；
   ③ 开测入口与「下一篇」导航。
   ⚠️ 这里不定义颜色常量：全部走 style.css 的 CSS 变量，暗色模式自动跟随。
   ⚠️ 不引入任何脚本：指南页是纯静态内容页，统计也只有 shared 的 analytics.js 一行。 */

.guide-page {
  /* ⚠️ 这里**不再**单独定义 --card-w。
     本次修「首页 ↔ 指南页切换时内容区横跳」：指南页原来写死
     min(920px, 100vw - 32px)，首页是 JS 按键盘白卡实测（1440 下 1304px），
     两套宽度 → 切页时整列横移近 400px。现在两页都只用 style.css 的
     --page-max / --page-pad（同一来源），宽度逐像素一致。
     顶栏也走同一组变量，宽度自然对齐。 */
}

/* 指南页顶栏品牌名：首页顶栏 h1 是 11px 等宽小字（工具页的仪表风格），
   内容页需要可点击的站名，单独给一个正文级字号。 */
.brand-name {
  margin: 0;
  font-size: var(--fs-sm);
  font-weight: var(--fw-med);
  color: var(--text);
  text-decoration: none;
  white-space: nowrap;
}

.guide-wrap {
  /* 与首页 .layout 的列宽同一公式：容器宽减两侧留白，上限 --page-max */
  width: min(var(--page-max), calc(100% - var(--page-pad) * 2));
  margin: 0 auto;
  padding: var(--sp-6) 0 0;
}

.guide-crumb {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: .08em;
  color: var(--text-tertiary);
}
.guide-crumb a { color: var(--text-secondary); }
.guide-crumb span[aria-hidden="true"] { color: var(--border-strong); }

.guide-wrap > h1 {
  margin: var(--sp-3) 0 var(--sp-3);
  font-size: clamp(26px, 4.4vw, 36px);
  line-height: 1.25;
  letter-spacing: -.02em;
  color: var(--text);
}

.guide-lead {
  margin: 0;
  max-width: var(--doc-measure);
  font-size: var(--fs-md);
  line-height: var(--lh-loose);
  color: var(--text-secondary);
}

.guide-wrap .kbdoc {
  width: 100%;
  margin-top: var(--sp-4);
}

.guide-wrap .kbdoc ul,
.guide-wrap .kbdoc ol {
  margin: 0 0 var(--sp-3);
  padding-left: 1.3em;
  max-width: var(--doc-measure);
  font-size: var(--fs-base);
  line-height: var(--lh-loose);
  color: var(--text-secondary);
}
.guide-wrap .kbdoc li { margin-bottom: 6px; }
.guide-wrap .kbdoc li:last-child { margin-bottom: 0; }

/* 卡片列表：指南页复用首页 .plain-list（无项目符号 + 网格间距）。
   上面两条是「文章型」列表规则，会盖掉 .plain-list 的 padding:0 与行高；
   这里用更高特指度还原，卡片内才不会多一圈左缩进。 */
.guide-wrap .kbdoc .plain-list {
  margin: 0;
  padding: 0;
  font-size: inherit;
  line-height: inherit;
}
.guide-wrap .kbdoc .plain-list li { margin-bottom: 0; }
.guide-wrap .kbdoc strong { color: var(--text); font-weight: var(--fw-semi); }

/* 开测入口：每页只有一个，样式沿用主按钮（.btn.on 的墨底反白） */
.guide-cta {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-3);
  margin-top: var(--sp-4);
}
.guide-cta .btn {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--ink-text);
}
.guide-cta .btn:hover { background: var(--ink); border-color: var(--ink); }
.guide-cta span { font-size: var(--fs-sm); color: var(--text-tertiary); }

/* 篇末导航：上一篇 / 下一篇 / 回工具，保持一条线，不抢 CTA */
.guide-next {
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--sp-3);
  padding: var(--sp-4) 0 var(--sp-6);
  font-size: var(--fs-sm);
  color: var(--text-secondary);
}

@media (max-width: 720px) {
  .guide-wrap { padding-top: var(--sp-5); }
  .guide-wrap > h1 { margin-top: var(--sp-2); }
  .guide-next { flex-direction: column; }
}