/* ═══════════════════════════════════════════════════════════════════════════
   基础层与组件层样式
   ═══════════════════════════════════════════════════════════════════════════
   视觉值**必须**来自 `tokens.css`；本文件不出现字面量颜色、圆角、字号。
   规则见 `frontend/design.md`。四条纪律：
     1. 分层靠亮度差 + 顶部内高光，不靠画满 1px 线
     2. 大面积填充一律中性；信号色只做状态和关键动作
     3. 等宽字体只给真实数据；标签用无衬线小字
     4. 数字一律 tabular + 右对齐
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. 基础 ─────────────────────────────────────────────────────────────── */

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.55;
  letter-spacing: -.006em;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
button { font-family: inherit; }
h1, h2, h3, p { margin: 0; }

/* 等宽 + tabular：只给真实数据 */
.n {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

/* 标签：大写小字，等宽以外的无衬线，字距放宽 */
.lbl {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .085em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.vline { width: 1px; height: 16px; background: var(--line-2); flex: none; }

/* 焦点环：全站统一，lime 3px 外环 */
:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--lime) 55%, transparent);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

/* 跳转到主内容（键盘用户）*/
.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--surf-3);
  color: var(--ink);
  padding: var(--sp-3) var(--sp-4);
  border-radius: 0 0 var(--r-md) 0;
}
.skip:focus { left: 0; }

/* 仅供读屏的可访问名称（视觉上不可见，但可被辅助技术读取） */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ── 2. 分段控件 / 快捷词 ────────────────────────────────────────────────── */

.seg {
  display: inline-flex;
  background: rgba(255, 255, 255, .05);
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 2px;
  gap: 2px;
}
.seg button {
  background: none;
  border: 0;
  color: var(--ink-3);
  font-size: 12px;
  font-weight: 500;
  padding: 4px 11px;
  border-radius: 5px;
  cursor: pointer;
  transition: color var(--t-fast), background var(--t-fast);
  white-space: nowrap;
}
.seg button:hover { color: var(--ink); }
.seg button[aria-pressed="true"] {
  background: rgba(255, 255, 255, .1);
  color: var(--ink);
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .4);
}

.ql { display: flex; gap: 13px; flex-wrap: wrap; }
.ql button {
  background: none;
  border: 0;
  padding: 0;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink-3);
  cursor: pointer;
  transition: color var(--t-fast);
}
.ql button:hover { color: var(--lime); }
.ql button[aria-pressed="true"] { color: var(--lime); }

/* ── 3. 按钮 ─────────────────────────────────────────────────────────────── */

/*
 * `.btn` 自带居中上下文，**不依赖元素类型**。
 *
 * 这套样式抄自原型，原型里它是 `<button class="btn">`——而 `<button>` 的标签文字
 * 由浏览器自动垂直居中，所以"没写居中"在那时看不出问题。页头的「投稿」在实现里
 * 是 `<a class="btn" href="/submit">`（这是对的：它是真实跳转，禁用 JS 也要可用），
 * `<a>` 没有那个自动居中行为，于是 20.9px 的文字行盒贴在 36px 药丸的**顶部**，
 * 与紧邻的「搜索」按钮明显错位（实测偏差 7.5px）。
 *
 * 修在这里而不是某个具体选择器上：只要 `.btn` 还隐含"你得是 `<button>`"这个前提，
 * 下一次谁把它用到链接上，同一个缺陷就会原样复现。
 */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  padding: 0 15px;
  border: 0;
  border-radius: var(--r-md);
  cursor: pointer;
  /* 文字恒为单行（nowrap），盒内几何不该随继承来的正文行高漂移 */
  line-height: 1;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: -.01em;
  white-space: nowrap;
  background: var(--fill-neutral);
  color: var(--on-lime);
  transition: background var(--t-fast), transform 120ms;
}
.btn:hover { background: var(--fill-neutral-hover); transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn.ghost {
  background: rgba(255, 255, 255, .05);
  color: var(--ink-2);
  border: 1px solid var(--line-2);
  font-weight: 500;
}
.btn.ghost:hover { background: rgba(255, 255, 255, .09); color: var(--ink); }

/* ── 4. 站点外壳：提示条 ─────────────────────────────────────────────────── */

.strip {
  display: flex;
  align-items: center;
  gap: 14px;
  height: 32px;
  padding: 0 var(--gut);
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-3);
  border-bottom: 1px solid var(--hair);
}
.strip .w { color: var(--warn-ink); }
.strip .r { margin-left: auto; display: flex; gap: 16px; white-space: nowrap; }
.strip .r b { color: var(--ink-2); font-weight: 400; }

/* ── 5. 站点外壳：页头 ───────────────────────────────────────────────────── */

.hd {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(10, 11, 13, .72);
  backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--line);
}
.hd-row {
  display: flex;
  align-items: center;
  gap: 20px;
  height: 58px;
  padding: 0 var(--gut);
}
.brand {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 14.5px;
  font-weight: 650;
  letter-spacing: -.02em;
  white-space: nowrap;
}
.brand .mk {
  width: 20px;
  height: 20px;
  border-radius: var(--r-sm);
  flex: none;
  background: linear-gradient(145deg, var(--lime-hi), var(--lime) 55%, var(--lime-lo));
  box-shadow: 0 0 0 1px rgba(198, 242, 78, .25), 0 3px 12px -2px rgba(198, 242, 78, .4);
}
.brand em {
  font-style: normal;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-3);
  font-weight: 400;
  letter-spacing: 0;
}

.nav { display: flex; gap: 2px; align-items: center; }
.nav a {
  position: relative;
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 13.5px;
  color: var(--ink-2);
  padding: 7px 12px;
  border-radius: var(--r-sm);
  transition: background var(--t-fast), color var(--t-fast);
  white-space: nowrap;
}
.nav a:hover { color: var(--ink); background: rgba(255, 255, 255, .05); }
.nav a[aria-current="page"] { color: var(--ink); background: rgba(255, 255, 255, .075); font-weight: 550; }
.nav a[aria-current="page"]::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--lime);
  box-shadow: 0 0 9px rgba(198, 242, 78, .85);
  flex: none;
}
.nav .ct { font-family: var(--mono); font-size: 10.5px; color: var(--ink-3); font-weight: 400; }

/* 搜索 */
.search {
  display: flex;
  align-items: center;
  gap: 9px;
  height: 38px;
  flex: 1 1 auto;
  min-width: 170px;
  max-width: 560px;
  margin-left: auto;
  background: rgba(255, 255, 255, .045);
  border: 1px solid var(--line-2);
  border-radius: var(--r-md);
  padding: 0 5px 0 12px;
  transition: background 180ms, border-color 180ms, box-shadow 180ms;
}
/* 搜索框是主要交互元素，焦点必须看得见。
   这里**不能**写 `outline: 0` —— 它的特异性（0-1-1）会压过全站的 `:focus-visible`（0-1-0），
   把 design.md §6 承诺的 lime 3px 外环吃掉。改成在容器上显式给同一枚外环。 */
.search:focus-within {
  background: rgba(255, 255, 255, .065);
  border-color: rgba(198, 242, 78, .5);
  outline: 3px solid color-mix(in srgb, var(--lime) 55%, transparent);
  outline-offset: 2px;
}
.search input:focus { outline: 0; }
.search .ic { color: var(--ink-3); flex: none; display: flex; }
.search input {
  flex: 1;
  min-width: 0;
  background: none;
  border: 0;
  /* 外环由 .search:focus-within 提供，见上方注释 */
  outline: 0;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 13.5px;
  letter-spacing: -.006em;
}
.search input::placeholder { color: var(--ink-3); }.search input::-webkit-search-cancel-button { display: none; }
.search kbd {
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--ink-3);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 2px 5px;
  white-space: nowrap;
  flex: none;
}
.search .go {
  height: 28px;
  padding: 0 13px;
  border: 0;
  border-radius: var(--r-sm);
  cursor: pointer;
  flex: none;
  background: var(--lime);
  color: var(--on-lime);
  font-size: 12.5px;
  font-weight: 650;
  letter-spacing: -.01em;
  transition: filter var(--t-fast), transform var(--t-fast);
}
.search .go:hover { filter: brightness(1.08); }
.search .go:active { transform: scale(.97); }

.hbtns { display: flex; gap: 15px; align-items: center; flex-shrink: 0; }
.sub-link {
  font-size: 13px;
  color: var(--ink-2);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  white-space: nowrap;
  transition: color var(--t-fast);
}
.sub-link:hover { color: var(--ink); }

/* 搜索细则行：聚焦或有输入时展开 220ms */
.sd {
  display: flex;
  align-items: center;
  gap: 11px;
  flex-wrap: wrap;
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  padding: 0 var(--gut);
  transition: max-height var(--t-rule) var(--ease), opacity 160ms, padding var(--t-rule) var(--ease);
}
.hd.eng .sd { max-height: 76px; opacity: 1; padding: 2px var(--gut) 13px; }
.sres {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink-3);
  white-space: nowrap;
}
.sres b { color: var(--lime); font-weight: 500; }

/* ── 6. 页面与页头区 ─────────────────────────────────────────────────────── */

.page { padding: 0 0 90px; }
.wrap { padding: 0 var(--gut); }

.hero { padding: 36px 0 26px; }
.hero .eb { display: flex; align-items: center; gap: 10px; margin-bottom: 13px; }
.hero .eb .dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--lime);
  box-shadow: 0 0 9px rgba(198, 242, 78, .8);
}
.hero h1 { font-size: 33px; font-weight: 620; letter-spacing: -.035em; line-height: 1.14; }
.hero h1 span { color: var(--ink-2); font-weight: 400; }
.hero .lead { margin-top: 14px; max-width: 720px; font-size: 14px; color: var(--ink-2); line-height: 1.65; }
.hero .lead b { color: var(--ink); font-weight: 600; }

/* 场景入口：降级为两条文案链接（不再是大卡片）*/
.scene-links { display: flex; gap: 22px; flex-wrap: wrap; margin-top: 20px; }
.scene-links a {
  font-size: 13.5px;
  color: var(--ink-2);
  border-bottom: 1px solid var(--line-2);
  padding-bottom: 2px;
  transition: color var(--t-fast), border-color var(--t-fast);
}
.scene-links a:hover { color: var(--lime); border-color: var(--lime); }

/* Verdict · 诚实结论区（全站唯一允许「像在说话」的区块）*/
.verdict {
  display: flex;
  gap: 15px;
  margin-top: 20px;
  max-width: 940px;
  background: linear-gradient(90deg, rgba(235, 184, 76, .07), rgba(235, 184, 76, .015) 62%, transparent);
  border: 1px solid rgba(235, 184, 76, .16);
  border-radius: var(--r-lg);
  padding: 16px 20px 16px 18px;
}
.verdict .vb { width: 2.5px; border-radius: 2px; background: var(--warn); flex: none; }
.verdict .vt {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .085em;
  text-transform: uppercase;
  color: var(--warn-ink);
  margin-bottom: 7px;
}
.verdict p { font-size: 13.5px; color: var(--ink-2); line-height: 1.72; }
.verdict p b { color: var(--ink); font-weight: 600; }

/* ── 7. 指标带 ───────────────────────────────────────────────────────────── */

.band {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  background: var(--surf);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  position: relative;
}
.band::before {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 1px;
  background: var(--card-sheen);
}
.cell { padding: 17px 19px 19px; border-right: 1px solid var(--hair); }
.cell:last-child { border-right: 0; }
.cell .v {
  display: flex;
  align-items: baseline;
  gap: 4px;
  font-family: var(--mono);
  font-size: 28px;
  font-weight: 500;
  letter-spacing: -.05em;
  line-height: 1;
  margin: 11px 0 0;
  font-variant-numeric: tabular-nums;
}
.cell .v .u { font-size: 11.5px; color: var(--ink-3); letter-spacing: 0; font-weight: 400; }
.cell.wide .v { font-size: 15px; letter-spacing: -.01em; padding-top: 8px; }
.cell .d {
  font-size: 11.5px;
  color: var(--ink-3);
  margin-top: 7px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cell.hi .v { color: var(--lime); }
/* 迷你趋势：纯装饰（数值由 .v 承载），对读屏隐藏 */
.cell .sp { display: flex; align-items: flex-end; gap: 2.5px; height: 17px; margin-top: 10px; }
.cell .sp i {
  width: 4px;
  border-radius: 1.5px 1.5px 0 0;
  background: var(--ink-4);
  display: block;
  min-height: 2px;
}
.cell .sp i.e { background: var(--lime); box-shadow: 0 0 8px rgba(198, 242, 78, .4); }
.band-note {
  margin-top: 11px;
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--warn-ink);
}

/**
 * 数据来源标识（`add-run-data-api`）。
 * 它必须**看得见**：一个渲染了数字、却把"这些是示例数据"藏进角落的页面，
 * 与一个编造数字的页面在读者眼里没有区别。所以给它描边加底色，
 * 让它读起来是一句声明，而不是一行脚注。
 */
.band-note.prov {
  display: inline-block;
  margin-top: 12px;
  padding: 7px 12px;
  border: 1px solid color-mix(in srgb, var(--warn-ink) 45%, transparent);
  border-radius: var(--r-sm);
  background: color-mix(in srgb, var(--warn-ink) 10%, transparent);
  color: var(--warn-ink);
  font-size: 12px;
  line-height: 1.6;
}
.band-note.prov b { font-weight: 600; }

/* ── 8. 主体网格与卡片 ───────────────────────────────────────────────────── */

.grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 372px;
  gap: 22px;
  margin-top: 22px;
  align-items: start;
}
.grid > * { min-width: 0; }

.card {
  background: var(--surf);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  position: relative;
  overflow: hidden;
  box-shadow: var(--card-shadow);
}
.card::before {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 1px;
  background: var(--card-sheen);
}
.ch {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--hair);
}
.ch h2 { font-size: 14.5px; font-weight: 620; letter-spacing: -.018em; }
.ch .m { margin-left: auto; font-size: 11.5px; color: var(--ink-3); font-family: var(--mono); }
.sh { display: flex; align-items: baseline; gap: 12px; padding: 30px 2px 13px; }
.sh h2 { font-size: 15px; font-weight: 620; letter-spacing: -.02em; }
.sh .m { margin-left: auto; font-size: 11.5px; color: var(--ink-3); font-family: var(--mono); }

.rail { display: flex; flex-direction: column; gap: 18px; }
.rail .card { box-shadow: var(--card-shadow-rail); }
.rail .ch { padding: 13px 17px; }
.rail .ch h2 { font-size: 13px; font-weight: 600; color: var(--ink-2); }
.rail .ch .m { font-size: 11px; }
.rail .bd { padding: 4px 17px 14px; }

/* 分布小行：名称 / 占比条 / 数值 */
.srow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 1fr 52px;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
}
.srow .lb { font-size: 12px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.srow .vl { font-family: var(--mono); font-size: 11px; color: var(--ink-3); text-align: right; font-variant-numeric: tabular-nums; }

/* 分布条：中性色——长度本身就是数据，不需要再染色 */
.bar {
  position: relative;
  height: 5px;
  border-radius: 3px;
  background: rgba(255, 255, 255, .07);
  overflow: hidden;
  flex: 1;
  min-width: 32px;
}
.bar i {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  border-radius: 3px;
  display: block;
  background: linear-gradient(90deg, rgba(255, 255, 255, .34), rgba(255, 255, 255, .6));
}
.bar.acc i { background: linear-gradient(90deg, rgba(198, 242, 78, .5), var(--lime)); }
.bar.warn i { background: linear-gradient(90deg, rgba(235, 184, 76, .5), var(--warn)); }
.bar.dev i { background: linear-gradient(90deg, rgba(255, 110, 92, .5), var(--bad)); }

/* ── 9. 证据分级 / 来源 / 新鲜度 / 样本量（新架构组件）──────────────────── */

/* EvidenceTag —— 新架构的视觉骨架，每一处数据都必须带 */
.ev {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10.5px;
  font-weight: 550;
  padding: 2px 8px;
  border-radius: 999px;
  white-space: nowrap;
  letter-spacing: .01em;
  font-variant-numeric: normal;
}
.ev::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: currentColor; flex: none; }
.ev.l0 { background: rgba(255, 255, 255, .055); color: var(--ev0-ink); }
.ev.l1 { background: rgba(70, 211, 154, .12); color: var(--ev1-ink); }
.ev.l2 { background: rgba(111, 168, 255, .13); color: var(--ev2-ink); }
/* L2 额外带左侧小竖线（docs/02 §4.2）*/
.ev.l2::after { content: ''; width: 2px; height: 9px; border-radius: 1px; background: currentColor; order: -1; }

/* SourceLink —— 自动汇聚的数据必须可溯源 */
.src {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--ink-3);
  transition: color var(--t-fast);
  cursor: pointer;
  vertical-align: middle;
}
.src:hover { color: var(--lime); }
.src svg { width: 9px; height: 9px; opacity: .8; flex: none; }

/* Freshness */
.fresh { font-family: var(--mono); font-size: 11.5px; color: var(--ink-3); }
.fresh b { color: var(--ink-2); font-weight: 400; }

/* SampleSize —— 没有 n 的数字是耍流氓 */
.ns { font-family: var(--mono); font-size: 10.5px; color: var(--ink-3); margin-left: 4px; font-weight: 400; }

/* ── 10. 数据行 ──────────────────────────────────────────────────────────── */

/*
 * 表格列宽的**唯一**真源。表头 `.hrow` 与数据行 `.drow`（含 `/data` 上可展开的
 * `<details>` 行，其网格在 `<summary>` 上，见 §18）都引用它。
 * 三处各写一遍列宽的话，迟早只有一处被改，而表头与数据列错位时
 * 用户会把某列的值读成另一列的。
 * ≤900px 的窄屏降级另见 §17。
 */
:root {
  --cols-data: minmax(0, 1.35fr) 84px 68px 60px 92px 104px 116px 68px;
  --cols-data-narrow: minmax(0, 1fr) 84px;
}

.hrow, .drow {
  display: grid;
  gap: 14px;
  align-items: center;
  grid-template-columns: var(--cols-data);
}
.hrow {
  padding: 11px 20px;
  background: rgba(255, 255, 255, .017);
  border-bottom: 1px solid var(--hair);
}
.hrow span {
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .075em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.hrow .rt, .drow .rt { text-align: right; }
.hrow .ct { text-align: center; }
.hrow span em {
  font-style: normal;
  color: var(--ink-3);
  font-size: 9.5px;
  margin-left: 4px;
  letter-spacing: .03em;
  text-transform: none;
}
/* 行是 <div role="row">，不是 <button>：行内含来源外链，按钮里嵌链接是非法内容模型，
   也会让点击链接同时触发展开。展开开关是行内独立的 .rtog 按钮。 */
.drow {
  padding: 14px 20px;
  border-bottom: 1px solid var(--hair);
  transition: background 130ms;
  position: relative;
}
.drow:last-child { border-bottom: 0; }
.drow:hover { background: rgba(255, 255, 255, .032); }
.drow:hover::after {
  content: '';
  position: absolute;
  left: 0; top: 9px; bottom: 9px;
  width: 2px;
  border-radius: 0 2px 2px 0;
  background: var(--lime);
  box-shadow: 0 0 10px rgba(198, 242, 78, .5);
}
/* 展开开关：只有模型名是可点的，来源链接保持独立可点 */
.drow .rtog {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.drow .rtog::after {
  content: '';
  flex: none;
  width: 6px;
  height: 6px;
  margin-left: 2px;
  border-right: 1.5px solid var(--ink-3);
  border-bottom: 1.5px solid var(--ink-3);
  transform: translateY(-2px) rotate(45deg);
  transition: transform var(--t-fast) var(--ease);
}
.drow .rtog[aria-expanded="true"]::after { transform: translateY(1px) rotate(-135deg); }
.drow .rtog:hover { color: var(--lime); }
.drow .mdl {
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: -.012em;
  display: flex;
  flex-direction: column;
  gap: 2.5px;
  min-width: 0;
}
.drow .mdl .t1 { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.drow .mdl .t2 {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  row-gap: 3px;
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--ink-3);
  font-weight: 400;
  letter-spacing: 0;
  min-width: 0;
}
.drow .mdl .t2 .src { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
/* 厂商色竖线在 10.5px 的次行里收一档，避免喧宾夺主 */
.drow .mdl .t2 .rigtag { font-size: 11px; }
.drow .mdl em { font-style: normal; font-family: var(--mono); font-size: 11px; color: var(--ink-3); font-weight: 400; }
/* 区间与样本量：比主数字小两档，不抢主数字的位置 */
.n .rg { font-size: 11px; color: var(--ink-3); margin-left: 5px; letter-spacing: 0; }
.drow .tps {
  font-family: var(--mono);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -.03em;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.drow .tps s { font-size: 10px; color: var(--ink-3); margin-left: 3px; text-decoration: none; }
.drow .sec, .drow .tt {
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--ink-3);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* RigTag：厂商色只在 2px 竖线上 */
.rigtag { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--ink-2); white-space: nowrap; }
.rigtag .bd { width: 2px; height: 15px; border-radius: 1px; background: var(--ink-3); flex: none; }
.rigtag.amd .bd { background: var(--amd); }
.rigtag.nv .bd { background: var(--nv); }
.rigtag.apple .bd { background: var(--apple); }

/* ReproChain：全站视觉指纹 */
.chain { display: flex; gap: 3px; align-items: center; }
.chain i { display: block; width: 14px; height: 6px; border-radius: 3px; background: var(--ok); opacity: .85; }
.chain i.diverge { background: var(--bad); opacity: 1; }
.chain i.pending { background: rgba(255, 255, 255, .09); opacity: 1; }
.chain i.now { box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .28); }
.chain-none { font-family: var(--mono); font-size: 11px; color: var(--warn-ink); }

/* StatusTag */
.tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  font-weight: 550;
  padding: 3.5px 9px;
  border-radius: 999px;
  white-space: nowrap;
  letter-spacing: -.005em;
}
.tag::before { content: ''; width: 4.5px; height: 4.5px; border-radius: 50%; background: currentColor; flex: none; }
.tag.ok { background: rgba(70, 211, 154, .12); color: var(--ok-ink); }
.tag.warn { background: rgba(235, 184, 76, .12); color: var(--warn-ink); }
.tag.dev { background: rgba(255, 110, 92, .12); color: var(--bad-ink); }
.tag.mute { background: rgba(255, 255, 255, .055); color: var(--ink-3); }
.tag.mute::before { display: none; }

/* 显存条：按占用率染色（唯一允许染色的 Bar）*/
.vbar { display: flex; align-items: center; gap: 8px; min-width: 0; }
.vbar .n { font-family: var(--mono); font-size: 11.5px; color: var(--ink-3); white-space: nowrap; }

/* ── 11. FilterBar ───────────────────────────────────────────────────────── */

.fbar {
  display: flex;
  align-items: center;
  gap: 11px;
  flex-wrap: wrap;
  padding: 11px 20px;
  border-bottom: 1px solid var(--line);
}
.fbar .seg button { font-size: 11.5px; padding: 4px 10px; }
.fbar .fres { margin-left: auto; font-family: var(--mono); font-size: 11.5px; color: var(--ink-3); }
.fbar .srcfilter { display: flex; gap: 13px; flex-wrap: wrap; align-items: center; }
.fres b { color: var(--ink-2); font-weight: 400; }

/* ── 12. 命令块 ──────────────────────────────────────────────────────────── */

.cmd {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--mono);
  font-size: 12px;
  background: rgba(255, 255, 255, .035);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 11px 13px;
  overflow-x: auto;
}
.cmd .p { color: var(--lime); }
.cmd b { font-weight: 400; white-space: nowrap; }
.cmd .cp {
  margin-left: auto;
  flex: none;
  background: rgba(255, 255, 255, .07);
  border: 1px solid var(--line);
  color: var(--ink-2);
  font-family: var(--sans);
  font-size: 11px;
  padding: 3px 9px;
  border-radius: 5px;
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast);
}
.cmd .cp:hover { background: rgba(255, 255, 255, .13); color: var(--ink); }

/* ── 13. 空状态：永远是一次邀请 ─────────────────────────────────────────── */

.empty {
  padding: 26px 20px;
  background: rgba(255, 255, 255, .02);
  border-bottom: 1px solid var(--hair);
}
.empty:last-child { border-bottom: 0; }
.empty .t { font-size: 13.5px; margin-bottom: 5px; }
.empty .t b { color: var(--lime); font-weight: 600; }
.empty .d { font-family: var(--mono); font-size: 11.5px; color: var(--ink-3); line-height: 1.6; }
.empty .act { margin-top: 13px; display: flex; gap: 10px; flex-wrap: wrap; }
.empty .act a, .empty .act button {
  font-size: 12.5px;
  color: var(--lime);
  background: none;
  border: 1px solid rgba(198, 242, 78, .3);
  border-radius: var(--r-sm);
  padding: 5px 11px;
  cursor: pointer;
  transition: background var(--t-fast);
}
.empty .act a:hover, .empty .act button:hover { background: rgba(198, 242, 78, .08); }

/* 骨架屏：等宽占位符，不用 spinner */
.skel { color: var(--ink-4); }

/* ── 14. 页脚 ────────────────────────────────────────────────────────────── */

.foot {
  display: flex;
  gap: 22px;
  align-items: center;
  flex-wrap: wrap;
  padding: 22px var(--gut) 0;
  margin-top: 36px;
  border-top: 1px solid var(--hair);
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-3);
}
.foot a:hover { color: var(--ink-2); }
.foot .r { margin-left: auto; display: flex; gap: 18px; }

/* ── 15. 设计系统验证页 ─────────────────────────────────────────────────── */

.ds-sec { margin-top: 34px; }
.ds-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 14px; }
.sw {
  background: var(--surf);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 13px 14px;
}
.sw .chip { height: 34px; border-radius: var(--r-sm); margin-bottom: 10px; border: 1px solid var(--line); }
.sw .nm { font-family: var(--mono); font-size: 11.5px; color: var(--ink-2); }
.sw .vl { font-family: var(--mono); font-size: 11px; color: var(--ink-3); }
.sw .use { font-size: 11px; color: var(--ink-3); margin-top: 5px; line-height: 1.5; }
.spec-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding: 13px 0; border-bottom: 1px solid var(--hair); }
.spec-row:last-child { border-bottom: 0; }
.spec-row > .cap { min-width: 150px; }

/* ── 16. 404 ─────────────────────────────────────────────────────────────── */

.nf { padding: 90px 0 0; max-width: 620px; }
.nf .eb { display: flex; align-items: center; gap: 10px; margin-bottom: 13px; }
.nf h1 { font-size: 33px; font-weight: 620; letter-spacing: -.035em; line-height: 1.14; }
.nf p { margin-top: 14px; font-size: 14px; color: var(--ink-2); line-height: 1.65; }

/* ── 18. 数据页 /data（add-data-page）────────────────────────────────────── */

/* 可展开的行：整行是原生 <details>，网格落在 <summary> 上。
   列宽复用 §10 的 `--cols-data`——两处各写一遍列宽，迟早只有一处被改。 */
.drow.rexp { display: block; padding: 0; }
.drow.rexp > summary {
  display: grid;
  gap: 14px;
  align-items: center;
  grid-template-columns: var(--cols-data);
  padding: 14px 20px;
  cursor: pointer;
  list-style: none;
}
/* 去掉浏览器默认的三角，换成与 .rtog 一致的箭头（视觉上与不可展开的行区分开） */
.drow.rexp > summary::-webkit-details-marker { display: none; }
.drow.rexp > summary::marker { content: ''; }
.drow.rexp .mdl .t1::before {
  content: '';
  width: 0; height: 0;
  border-left: 4px solid currentColor;
  border-top: 3.5px solid transparent;
  border-bottom: 3.5px solid transparent;
  flex: none;
  margin-right: 7px;
  opacity: .55;
  transition: transform 130ms;
}
.drow.rexp[open] .mdl .t1::before { transform: rotate(90deg); }
.drow.rexp > summary:hover { background: rgba(255, 255, 255, .032); }
.drow.rexp > summary:focus-visible { outline: 2px solid var(--lime); outline-offset: -2px; }

/* 展开体：4 栏，窄屏降为单栏 */
.rdetail { border-top: 1px solid var(--hair); background: rgba(255, 255, 255, .014); }
.rd-in {
  display: grid;
  gap: 22px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  padding: 15px 20px 18px;
}
.rd-h {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 9px;
}
.kv { display: flex; gap: 8px; font-size: 11.5px; line-height: 1.9; align-items: baseline; }
.kv .k { color: var(--ink-3); flex: none; min-width: 74px; }
.kv .v { color: var(--ink-2); font-family: var(--mono); word-break: break-all; min-width: 0; }
.kv .v a { color: var(--lime); }
.none { font-size: 11.5px; color: var(--ink-3); }
.cl { list-style: none; margin: 0; padding: 0; }
.cl li { font-size: 11.5px; line-height: 1.7; margin-bottom: 7px; color: var(--ink-2); }
.cl a { color: var(--ink); }
.cl a:hover { color: var(--lime); }

/* 筛选带 */
.fpanel { border-bottom: 1px solid var(--line); }
.frow {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  padding: 12px 20px;
}
.frow-seg { border-top: 1px solid var(--hair); padding-top: 11px; padding-bottom: 11px; }
.fsel { display: inline-flex; align-items: center; gap: 7px; }
.fsel .lb { font-size: 11px; color: var(--ink-3); flex: none; }
.fsel select {
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--ink-2);
  background: rgba(255, 255, 255, .05);
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 5px 8px;
  max-width: 190px;
}
.fsel select:focus-visible { outline: 2px solid var(--lime); outline-offset: 1px; }
.fapply {
  background: rgba(198, 242, 78, .1);
  border: 1px solid rgba(198, 242, 78, .32);
  color: var(--lime);
  font-family: var(--sans);
  font-size: 11.5px;
  font-weight: 550;
  padding: 6px 13px;
  border-radius: 7px;
  cursor: pointer;
}
.fapply:hover { background: rgba(198, 242, 78, .17); }
.freset { font-size: 11.5px; color: var(--ink-3); }
.freset:hover { color: var(--ink); }
.fres { margin-left: auto; font-family: var(--mono); font-size: 11.5px; color: var(--ink-3); }
.fres b { color: var(--ink-2); font-weight: 400; }

/* 证据 / 时间的链接段：与 .seg 按钮同形，但真的是链接（无 JS 可用） */
.seg a {
  font-family: var(--sans);
  font-size: 11.5px;
  color: var(--ink-3);
  padding: 4px 10px;
  border-radius: 5px;
  text-decoration: none;
}
.seg a:hover { color: var(--ink); }
.seg a[aria-current="true"] { background: rgba(255, 255, 255, .09); color: var(--ink); }

/* 结果摘要：三个数（匹配 / 页码 / 库总量）必须分得清 */
.rsum-l { margin: 0; font-family: var(--mono); font-size: 11.5px; color: var(--ink-3); }
.rsum-l b { color: var(--ink-2); font-weight: 400; }

/* 分页 */
.pager { display: flex; gap: 4px; flex-wrap: wrap; align-items: center; padding: 12px 20px 14px; }
.pager a, .pager .cur {
  font-family: var(--mono);
  font-size: 11.5px;
  padding: 4px 9px;
  border-radius: 6px;
  text-decoration: none;
  color: var(--ink-3);
}
.pager a:hover { background: rgba(255, 255, 255, .06); color: var(--ink); }
.pager .cur { background: rgba(198, 242, 78, .12); color: var(--lime); }
.pager .gap { color: var(--ink-4); padding: 0 2px; }

/* 导出条 */
.exbar {
  display: flex;
  align-items: center;
  gap: 11px;
  flex-wrap: wrap;
  padding: 11px 20px 13px;
  border-top: 1px solid var(--hair);
}
.exbar .lbl { font-size: 11px; color: var(--ink-3); }
.exbar .ex {
  font-family: var(--mono);
  font-size: 11.5px;
  padding: 4px 11px;
  border: 1px solid var(--line);
  border-radius: 7px;
  color: var(--ink-2);
  text-decoration: none;
}
.exbar .ex:hover { border-color: var(--lime); color: var(--lime); }
/* 上限说明用可读性达标的墨色（--ink-3 在深底上 5.40:1） */
.ex-note { font-size: 11.5px; color: var(--ink-3); margin-left: auto; }
.ex-note a { color: var(--lime); }

/* 「怎么读这张表」 */
.deflist { list-style: none; margin: 0; padding: 0; }
.deflist li {
  font-size: 12.5px;
  line-height: 1.85;
  color: var(--ink-2);
  padding: 11px 0;
  border-bottom: 1px solid var(--hair);
}
.deflist li:last-child { border-bottom: 0; }
.deflist b { color: var(--ink); font-weight: 600; }
.deflist code {
  font-family: var(--mono);
  font-size: 11.5px;
  background: rgba(255, 255, 255, .06);
  border-radius: 4px;
  padding: 1px 5px;
}
.deflist a { color: var(--lime); }

/* 证据级别图例（add-home-discovery · R-v0.3-CK-2）
 *
 * 徽章 + 该级别的含义：`dt` 是术语（既有 .ev 徽章），`dd` 是契约给出的解释。
 * 两列栅格让三级的徽章左边缘对齐——徽章宽度不同（`L1 已复现 11 次` 更长），
 * 用 flex 排会让解释文字参差不齐。
 *
 * 颜色只有 --ink-3（对 --surf 5.40:1，达 §9 的 4.5:1 门槛并留有余量）；
 * 徽章自己的颜色由 .ev.l0/.l1/.l2 的 --ev*-ink 给出，这里不重复指定。
 */
.evkey {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: baseline;
  gap: 9px 10px;
  margin: 0;
}
.evkey dt { display: flex; align-items: baseline; }
.evkey dd { margin: 0; font-size: 11.5px; line-height: 1.6; color: var(--ink-3); }

@media (max-width: 1180px) {
  .rd-in { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  /* 与 .drow 同一套窄屏降级：隐藏次要列，两行式（隐藏的列在展开体里一定看得到）*/
  .drow.rexp > summary { grid-template-columns: var(--cols-data-narrow); row-gap: 7px; }
  .drow.rexp > summary .sec, .drow.rexp > summary .tt { display: none; }
  .drow.rexp > summary .vbar, .drow.rexp > summary .chain { grid-column: 1 / -1; }
  .drow.rexp > summary .rt { grid-column: 2 / 3; grid-row: 1 / 2; }
  .drow.rexp > summary .tps { grid-column: 2 / 3; grid-row: 2 / 3; }

  .rd-in { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .frow { padding: 11px 16px; gap: 10px; }
  .fsel { width: 100%; }
  .fsel select { max-width: none; flex: 1; }
  .fres { margin-left: 0; width: 100%; }
  .ex-note { margin-left: 0; width: 100%; }
}

/* ── 19. 场景页 /can（add-can-page）──────────────────────────────────────── */

/*
 * 只排这一页独有的东西：机器选择器、Top 3 榜单、跨硬件对照表、显存太小的提示。
 * 表格、指标带、证据徽章、命令块、空状态、分布行**全部复用既有区块**——
 * 这一页的新 CSS 越少，两个页面的视觉就越不容易分叉（design.md 决策 7）。
 *
 * 颜色一律取既有令牌，本段**不新增任何颜色值**：色板是 `frontend/design.md`
 * 的契约，页面级样式偷偷加一个色号，是这类项目最常见的"慢慢就不一致了"。
 */

/* 机器选择器 */
.picker { margin: 0 0 var(--sp-5); }
.picker .prow { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-2) var(--sp-3); }
.picker .prow + .prow { margin-top: var(--sp-3); }
.picker .lbl { font-size: 12px; color: var(--ink-3); letter-spacing: .02em; }
.picker .chips { display: flex; flex-wrap: wrap; gap: 6px; }

.picker .chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px; border: 1px solid var(--line-2); border-radius: 999px;
  background: var(--surf); color: var(--ink-2);
  font-size: 12.5px; text-decoration: none; white-space: nowrap;
  transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.picker .chip:hover { background: var(--surf-2); color: var(--ink); }
/* 当前机器：`aria-current` 是导航状态，不是开关，所以视觉用"已在这一页"的实心感 */
.picker .chip[aria-current="true"] { background: var(--surf-3); border-color: var(--lime); color: var(--ink); }
.picker .chip .c { color: var(--ink-3); font-variant-numeric: tabular-nums; font-size: 11.5px; }
/* 未知机器：虚线边框 = "这不是我们的字典项"，但仍要能点、能读 */
.picker .chip-unknown { border-style: dashed; color: var(--ink-2); }
.picker .chip-unknown .c { color: var(--warn-ink); }

.picker .vrow { gap: var(--sp-2); }
.picker input[type="number"] {
  width: 120px; padding: 7px 10px;
  border: 1px solid var(--line-2); border-radius: var(--r-md);
  background: var(--surf-2); color: var(--ink);
  font: inherit; font-size: 13.5px; font-variant-numeric: tabular-nums;
}
.picker input[type="number"]::placeholder { color: var(--ink-3); }
.picker input[type="number"]:focus-visible { outline: 2px solid var(--lime); outline-offset: 1px; border-color: var(--lime); }
.picker .unit { color: var(--ink-3); font-size: 12.5px; }
.picker .hint { margin: var(--sp-2) 0 0; color: var(--ink-3); font-size: 12.5px; line-height: 1.55; }
.picker .hint b { color: var(--ink-2); font-weight: 600; }

/* Verdict 的四个数：与结论同屏，方便判断那句话的分量（3 条和 300 条不是同一句结论） */
.vmeta {
  display: flex; flex-wrap: wrap; gap: 4px var(--sp-3);
  margin: -4px 0 var(--sp-5); padding: 0 2px;
  font-size: 12.5px;
}
.vmeta .k { color: var(--ink-3); }
.vmeta .v { color: var(--ink); font-variant-numeric: tabular-nums; }

/* 产品建议：**必须**看起来像"我们的话"，不像测量结果（规格 S2.5） */
.advice {
  margin: var(--sp-3) 0 0; padding: 10px 12px;
  border-left: 2px solid var(--line-2); border-radius: 0 var(--r-sm) var(--r-sm) 0;
  background: var(--surf-2);
  color: var(--ink-2); font-size: 13px; line-height: 1.65;
}
/*
 * 标签与免责声明用 `--ink-2`，**不是** `--ink-3`。
 *
 * `--ink-3` 在 `--bg` / `--surf` 上是 5.4:1，到 `--surf-2`（这个块的浅底）上掉到
 * 5.03:1——只比 5.0 的门槛高 0.03。那不是"通过"，那是"下一次谁调一下令牌就红"。
 * 而这里恰好是两处**不能不好读**的东西：一个是"这是产品建议"的标签，
 * 一个是"这不是测量结果"的免责声明。层级改由字号（11/12px vs 13px）和边框承担。
 */
.advice .albl {
  display: inline-block; margin-right: 8px; padding: 1px 7px;
  border: 1px solid var(--line-2); border-radius: 999px;
  color: var(--ink-2); font-size: 11px; letter-spacing: .02em;
}
.advice .anote { display: block; margin-top: 5px; color: var(--ink-2); font-size: 12px; }
.vinvite { margin: var(--sp-3) 0 0; color: var(--ink-2); font-size: 13px; }

/* Top 3 榜单 */
.topruns { padding: 2px 0 4px; }
.tlist { list-style: none; margin: 0; padding: 0; }
.titem {
  display: grid; grid-template-columns: 26px minmax(0, 1fr) auto;
  align-items: center; gap: 4px var(--sp-3);
  padding: 11px 4px; border-bottom: 1px solid var(--hair);
}
.titem:last-child { border-bottom: 0; }
.titem .rank {
  grid-row: 1 / 3; align-self: center;
  color: var(--ink-3); font: 600 15px/1 var(--mono); text-align: center;
}
/* 第 1 名才给强调色：三个都是强调色等于没有名次 */
.titem:first-child .rank { color: var(--lime); }
.titem .mdl { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.titem .t1 { color: var(--ink); font-size: 14px; font-weight: 550; }
.titem .t1 a { color: inherit; text-decoration: none; }
.titem .t1 a:hover { text-decoration: underline; }
.titem .t1 em { margin-left: 7px; color: var(--ink-3); font-size: 12px; font-style: normal; }
.titem .t2 { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; }
.titem .tps {
  color: var(--ink); font: 600 15px/1 var(--mono); font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.titem .tps .u { margin-left: 4px; color: var(--ink-3); font: 400 11px/1 var(--sans); }

/* 区块级说明文字：与数据同屏，不是脚注 */
.tbody-note { margin: var(--sp-2) 0 var(--sp-4); color: var(--ink-3); font-size: 12.5px; line-height: 1.7; }
.tbody-note b { color: var(--ink-2); font-weight: 600; }

/* 跨硬件对照表 */
.table-scroll { overflow-x: auto; margin: 0 0 var(--sp-2); }
.xtable { width: 100%; border-collapse: collapse; font-size: 13px; }
.xtable caption { padding: 0 0 var(--sp-2); color: var(--ink-3); font-size: 12px; text-align: left; }
.xtable th, .xtable td {
  padding: 8px 10px; border-bottom: 1px solid var(--hair);
  text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.xtable thead th { color: var(--ink-3); font-size: 12px; font-weight: 500; }
.xtable tbody th { color: var(--ink); font-weight: 550; text-align: left; }
.xtable tbody th .p { display: block; margin-top: 2px; color: var(--ink-3); font-size: 11.5px; font-weight: 400; }
.xtable td { color: var(--ink-2); }
/* 领先列：只标"这列最快"，不改变数字本身，也不给整行加色 */
.xtable td.xlead { color: var(--ink); font-weight: 600; }
.xtable td .u { margin-left: 3px; color: var(--ink-3); font-size: 11px; }
.xtable td .n { display: block; margin-top: 1px; color: var(--ink-3); font-size: 11px; }
/* 缺格：占位符，不是 0（`docs/02` §4.2） */
.xtable td.xnone { color: var(--ink-3); }

/* 「按你填的显存一条都装不下」——独立状态，不是空榜单 */
.vsmall { border-color: var(--line-2); }
.vsmall .tbody-note { margin-bottom: 0; }

/* 侧栏里的空行容器（复用 §18 的 .srow / .rail） */
.rail .rows { display: flex; flex-direction: column; gap: 1px; }

/* ── 19b. 折叠区块（restructure-can-page · R-v0.3-CK-8）────────────────── */

/*
 * 默认折叠的区块。原生 `<details>` / `<summary>`，**零 JS**——这是这一整套样式
 * 存在的理由：折叠不能以"必须有脚本"为代价（S8.1）。
 *
 * 视觉上刻意**不是一张卡**：信封自己只有 `<summary>` 那一条（一行标题 + 右侧关键计数），
 * 卡片仍由折叠体里的 `.card` 承担。给信封再加一层背景 + 描边就是设计禁区里的
 * 「卡片内套卡片」，展开后还会出现两个嵌套的圆角边框。
 *
 * `.fold-sum` 的手感与 `.drow.rexp > summary`（§18 的可展开行）保持一致：
 * 去掉浏览器默认三角、换成同样的箭头、hover 提亮、`:focus-visible` 用 lime 外环
 * （frontend/design.md §8：焦点必须可见，键盘用户要能看出自己停在哪一条上）。
 */
.fold { display: block; }
.fold-sum {
  display: flex;
  align-items: baseline;
  padding: 12px 20px;
  cursor: pointer;
  list-style: none;
  background: rgba(255, 255, 255, .028);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  transition: background var(--t-fast);
}
.fold-sum::-webkit-details-marker { display: none; }
.fold-sum::marker { content: ''; }
.fold-sum:hover { background: rgba(255, 255, 255, .055); }
.fold-sum:focus-visible { outline: 3px solid var(--lime); outline-offset: 1px; }
.fold-t {
  display: flex;
  align-items: baseline;
  flex: 1 1 auto;
  min-width: 0;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: -.015em;
  color: var(--ink);
}
/* 与 `.drow.rexp` 同款的箭头：闭合指向右，展开转 90° */
.fold-t::before {
  content: '';
  flex: none;
  width: 0;
  height: 0;
  margin-right: 9px;
  align-self: center;
  border-left: 4px solid currentColor;
  border-top: 3.5px solid transparent;
  border-bottom: 3.5px solid transparent;
  opacity: .55;
  transition: transform 130ms;
}
.fold[open] > .fold-sum .fold-t::before { transform: rotate(90deg); }
/*
 * 折叠摘要是**信息**的一部分（"这句话有多少分量"），不是装饰：
 * 它给出该区块的关键计数，所以用 `--ink-3`（5.40:1 on `--surf`，过 AA），
 * 而**不是** `--ink-4`——那个色只许做纯装饰、不承载信息（frontend/design.md §0）。
 */
.fold-m {
  margin-left: auto;
  padding-left: 14px;
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--ink-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fold-body { margin-top: 12px; }
/* 侧栏里的折叠卡片沿用 §18 的栅格间距，比顶层区块紧一档 */
.rail .fold-sum { padding: 11px 17px; }
.rail .fold-body { margin-top: 10px; }

/* ── 19c. /can 首屏压缩（restructure-can-page · R-v0.3-CK-8）────────────── */

/*
 * 目的只有一个：让首屏那三件事（结论 / 装得下的最大模型 / 本机实测最快的配置）
 * 在**不滚动**的前提下同屏。
 *
 * 手段只有一种：**收掉页面顶部的留白**。一条文案没删、一个元素没少、
 * 一个区块没搬走——`.hero` `.picker` `.verdict` `.advice` 的内容与顺序都由
 * `can.html` 与 `can-page.js` 决定，这里改的只是它们之间的空气。
 *
 * 作用域挂在 `<main class="page p-can">` 上，**不改 `.hero` / `.picker` 的公共取值**：
 * 那两条规则同时服务 `/how` 与首页，为了一页的首屏去改它们，等于让另外两页
 * 在无人复核的情况下一起变样（`frontend/design.md` §10：不许散写一页的视觉值）。
 */
.page.p-can .hero { padding: 20px 0 12px; }
.page.p-can .hero .eb { margin-bottom: 8px; }
.page.p-can .hero .lead { margin-top: 12px; }
.page.p-can .picker { margin-bottom: 14px; }
.page.p-can .verdict { margin-top: 14px; }
.page.p-can .vmeta { margin-bottom: 14px; }
.page.p-can .advice { margin-top: 10px; }
/* 榜单每一行的上下留白收 2px ×3 行；行高与字号不动（数字仍要读得清） */
.page.p-can .topruns .titem { padding: 9px 4px; }
.page.p-can .topruns .tbody-note { margin: 4px 0 0; }

/* ── 20. 场景页 /how（add-how-page）──────────────────────────────────────── */

/*
 * 只排这一页独有的东西：方案卡、参数逐行对照表、命令块的分组外壳。
 * 选择器（`.picker`）、命令块（`.cmd`）、证据徽章、空状态、来源标识**全部复用
 * §19 与既有区块**——这一页的新 CSS 越少，两个场景页的视觉就越不容易分叉。
 *
 * 颜色一律取既有令牌，本段**不新增任何颜色值**。
 */

/* 方案区：两张卡并排，窄屏堆叠（`design.md` 决策 1） */
.plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--sp-3); margin: 0 0 var(--sp-4); }

.plancard {
  display: flex; flex-direction: column; gap: 8px;
  padding: var(--sp-4);
  border: 1px solid var(--line-2); border-radius: var(--r-md);
  background: var(--surf-2);
}
/*
 * 卡头：`pkind` 是"这是哪一套建议"，`paxis` 是"按什么选的"。
 * 轴必须与标签同屏——只写"最快"而不写按什么排，读者无法判断这个建议
 * 是不是他想要的那种快（`docs/01` §10：不做能力排行榜，所以轴上永远不出现能力）。
 *
 * 卡内直接落在 `--surf-2` 上的次要文字**用 `--ink-2` 而不是 `--ink-3`**：
 * `--ink-3` 在 `--surf-2` 上只有 5.03:1，门槛是 5:1——余量 0.03 等于没有余量，
 * 而这几处（排序轴、量化档、字段标签、标称显存）都是**承载信息**的文字，
 * 不是装饰。`--ink-2` 给到 7.31:1。这与 `add-can-page` 里把 `.advice`
 * 从 `--ink-3` 改成 `--ink-2` 是同一条取舍。
 */
.plancard .phead { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; }
.plancard .pkind { font-size: 13px; font-weight: 650; color: var(--ink); }
.plancard .paxis { font-size: 11.5px; color: var(--ink-2); }
.plancard .pmodel { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; margin: 0; }
.plancard .pmodel .t1 { font-size: 16px; font-weight: 600; color: var(--ink); }
.plancard .pmodel .t1 a { color: inherit; text-decoration: none; }
.plancard .pmodel .t1 a:hover { text-decoration: underline; }
.plancard .pmodel .t1 em { margin-left: 6px; font-style: normal; font-size: 12px; color: var(--ink-2); }
.plancard .pfw, .plancard .pfoot { margin: 0; font-size: 12.5px; color: var(--ink-2); }
.plancard .pk { margin-right: 6px; color: var(--ink-2); font-size: 11.5px; }
.plancard .fvv { color: var(--ink-3); }
.plancard .pvram { margin-left: 8px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
/*
 * 样本量徽章在卡内提亮一档。它是**这一页的诚实标记**（"这个数字是几次跑出来的"），
 * 落在 `--surf-2` 上用全局的 `--ink-3` 只有 5.03:1——门槛 5:1，余量 0.03。
 * 一个"刚刚够"的对比度用在最该被读到的标记上，是把余量花错了地方。
 */
.plancard .pmodel .t2 .ns { color: var(--ink-2); }

/* 卡上的三个指标格：decode 是主角，显存峰值与 TTFT 回答"代价是多少" */
.plancard .pmetrics {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px;
  margin: 2px 0; border: 1px solid var(--hair); border-radius: var(--r-sm); overflow: hidden;
}
.plancard .pcell { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; background: var(--surf); }
.plancard .plbl { font-size: 11px; color: var(--ink-3); }
.plancard .pv { color: var(--ink); font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }
.plancard .pv .u { margin-left: 3px; color: var(--ink-3); font-size: 10.5px; font-weight: 400; }

/* 「只有一条记录」：说明必须看起来像**我们的说明**，不像第三种方案 */
.plancard .psame {
  margin: 0; padding-top: 8px; border-top: 1px solid var(--hair);
  color: var(--ink-2); font-size: 12px; line-height: 1.65;
}
.plancard .psame b { color: var(--ink); }

/* 参数逐行对照表：窄屏可横向滚动，不撑破页面 */
.tablewrap { overflow-x: auto; margin: 0 0 var(--sp-2); }
.tablewrap table { width: 100%; border-collapse: collapse; font-size: 13px; }
.tablewrap caption { padding: 0 0 var(--sp-2); color: var(--ink-3); font-size: 12px; text-align: left; }
.tablewrap th, .tablewrap td {
  padding: 7px 10px; border-bottom: 1px solid var(--hair);
  text-align: left; white-space: nowrap;
}
.tablewrap thead th { color: var(--ink-3); font-size: 12px; font-weight: 500; }
.tablewrap thead th .colsub { display: block; margin-top: 2px; color: var(--ink-3); font-size: 11px; font-weight: 400; }
.tablewrap tbody th { color: var(--ink-3); font-weight: 500; }
.tablewrap td { color: var(--ink); }
.tablewrap td.num { font-variant-numeric: tabular-nums; }
/* 缺格：占位符，含义是"来源没说"，不是 0（`design.md` 决策 3） */
.tablewrap td.miss { color: var(--ink-3); }
.tablewrap td.src .src { color: var(--ink-2); }

/* 命令分组：每套方案一组，组标题写明是哪一套 */
.cmdblock + .cmdblock { margin-top: var(--sp-3); }
.cmdblock .cmd-what { margin: 0 0 6px; font-size: 12.5px; color: var(--ink-2); }
.cmdblock .cmd-what b { color: var(--ink); }
/* 未知框架：不生成命令，但要说明为什么——不能只是空白 */
.cmd-miss {
  margin-top: var(--sp-2); padding: 10px 12px;
  border-left: 2px solid var(--line-2); border-radius: 0 var(--r-sm) var(--r-sm) 0;
  background: var(--surf-2); color: var(--ink-2); font-size: 12.5px; line-height: 1.65;
}
.cmd-miss b { color: var(--ink); }

/* ── 21. 详情页 /run/:id（add-run-detail-page）──────────────────────────── */

/*
 * 这一页的 CSS 刻意**极少**：字段区复用 `/data` 展开体的 `.rd-in` / `.rd-col` /
 * `.kv`（§18），命令块复用 §12，卡片与标题复用 §8。新增的只有四样：
 * 标题区（`.runhero`）、标签行（`.tags`）、字段区外层卡片的副标题（`.csub`）、
 * 以及"字段区在页身里比在表格行里更宽"这一条布局差异。
 * 少写一样，两个场景页与详情页的视觉就少一条分叉路径。
 */

/* 标题区：与 `.hero` 同源，只把 h1 里的量化档做成次一级 */
.runhero h1 span { color: var(--ink-3); font-weight: 500; }
.runhero .tags {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2);
  margin-top: var(--sp-3);
}
.runhero .tags .rid { color: var(--ink-3); font-size: 12px; }
.runhero .tags .rid code {
  font-family: var(--mono); font-size: 11.5px; color: var(--ink-2);
  background: var(--surf-2); border-radius: var(--r-sm); padding: 2px 6px;
}

/* 卡片副标题：说明这一块在说什么，不抢标题的层级 */
.card .csub {
  margin: var(--sp-1) 0 0; color: var(--ink-3);
  font-size: 12.5px; line-height: 1.7;
}
.card .csub code {
  font-family: var(--mono); font-size: 11.5px; color: var(--ink-2);
  background: var(--surf-2); border-radius: var(--r-sm); padding: 1px 5px;
}
.card .csub b { color: var(--ink-2); }

/* 字段区在页身里比在表格行里宽：四列改成自适应，窄了自动落到两列 */
.runhero + section .rd-in,
.page .card > .rd-in { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }

/* 断言结论（不可达时为纯文本，不是链接）：与可点链接一样醒目 */
.cl .ct { color: var(--ink); font-weight: 500; }

/* 状态与复现链的说明行：字段区之下，属于同一块 */
.rd-notes { grid-column: 1 / -1; margin-top: var(--sp-2); }
.rd-notes p { margin: 0 0 6px; font-size: 12.5px; line-height: 1.7; color: var(--ink-3); }
.rd-notes .dnote { color: var(--ink-2); }
.rd-notes .dnote b { color: var(--ink); }

/* ── 22. 接口文档页 /api（add-api-page）──────────────────────────────────── */

/*
 * 与 §21 同一条纪律：新增的 CSS 越少，页面之间的视觉就越不容易分叉。
 * 这一页复用 `.hero`（§6）、`.card` / `.ch` / `.csub`（§8 + §21）、
 * `.tablewrap` / `table`（§18）、`cmdBlock`（§12）、`.deflist`（§18）、
 * `.tbody-note`（§18）。真正新增的只有两样：响应示例的 `<pre>`，与端点分块。
 */

/* 端点分块：三个端点之间用一条分隔线，块内不再套卡片 */
.apiend { margin-top: var(--sp-4); padding-top: var(--sp-4); border-top: 1px solid var(--line); }
.apiend:first-of-type { margin-top: var(--sp-3); padding-top: 0; border-top: 0; }
.apiend h3 { margin: 0 0 4px; font-size: 14px; color: var(--ink); font-weight: 600; }
.apiend .csub { margin: 0 0 var(--sp-2); }
/* 请求路径用等宽字体；query 单独一行，窄屏时不会把路径挤断 */
.apiend .csub code { color: var(--ink-2); }
.apiend .apireq {
  display: block; margin-top: 4px; font-family: var(--mono);
  font-size: 11.5px; color: var(--ink-3); word-break: break-all;
}
.apiend .csub + .tbody-note { margin-top: 0; }
.apiend .cmdblock { margin-top: var(--sp-2); }

/*
 * 原样代码块。**一条声明、两个诚实的名字**：
 *   `.apijson` —— `/api` 的响应示例（JSON）
 *   `.rawlog`  —— `/submit` 投稿指南里的程序原始日志（`add-submit-guide-page`）
 *
 * 为什么不复制一份：这两个视觉**完全一样**（等宽、可横向滚、可键盘聚焦），
 * 而"同一个视觉有两份实现"是本项目最贵的失效模式——改了一处，另一处不会报错，
 * 只会慢慢长得不一样。反过来，让 `/submit` 借用 `.apijson` 这个名字又会让标记说谎
 * （那段日志不是 JSON）。所以选择扩选择器、不扩声明：取值仍然只有一处。
 *
 * **横向可滚而不是换行**：日志与 JSON 换行都会让人看不出结构，
 * 而 `overflow-x: auto` + `tabindex="0"`（标记里给的）让它同时可键盘滚动。
 * 行高固定，避免长响应把页面拉得过长。
 */
.apijson, .rawlog {
  margin: var(--sp-2) 0 0; padding: var(--sp-3);
  background: var(--surf-2); border: 1px solid var(--line); border-radius: var(--r-md);
  overflow-x: auto; max-width: 100%;
  font-family: var(--mono); font-size: 11.5px; line-height: 1.65; color: var(--ink-2);
}
.apijson code, .rawlog code { font-family: inherit; white-space: pre; }
.apijson:focus-visible, .rawlog:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

/* ── 17. 响应式（docs/02 §8）───────────────────────────────────────────── */

@media (max-width: 1180px) {
  .band { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .cell:nth-child(4n) { border-right: 0; }
  .grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 900px) {
  :root { --gut: 16px; }

  /* 提示条：窄屏只留最关键信息 */
  .strip .sb, .strip .x { display: none; }
  .strip { overflow: hidden; }

  .hd-row { height: auto; flex-wrap: wrap; padding: 10px var(--gut); gap: 10px; row-gap: 10px; }
  .brand { order: 1; }
  .hbtns { order: 2; margin-left: auto; }
  .search { order: 3; width: 100%; max-width: none; margin-left: 0; }
  .nav { order: 4; width: 100%; overflow-x: auto; scrollbar-width: none; }
  .nav::-webkit-scrollbar { display: none; }

  .band { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cell:nth-child(2n) { border-right: 0; }

  .hero { padding: 26px 0 20px; }
  .hero h1 { font-size: 25px; }
  .scene-links { gap: 16px; }

  /* 表格：隐藏次要列，降为两行式（隐藏的列在详情页一定能看到）*/
  .hrow { display: none; }
  .drow { grid-template-columns: var(--cols-data-narrow); row-gap: 7px; }
  .drow .sec, .drow .tt { display: none; }
  .drow .vbar, .drow .chain { grid-column: 1 / -1; }
  .drow .rt { grid-column: 2 / 3; grid-row: 1 / 2; }
  .drow .tps { grid-column: 2 / 3; grid-row: 2 / 3; }

  .fbar { padding: 11px 16px; }
  .fbar .fres { margin-left: 0; width: 100%; }

  /* /can：榜单名次与速度并排会挤，速度换到第二行 */
  .titem { grid-template-columns: 22px minmax(0, 1fr); row-gap: 3px; }
  .titem .tps { grid-column: 2 / 3; }
  .picker .vrow .fapply { width: 100%; }
  .picker input[type="number"] { width: 100%; max-width: 200px; }

  /* /how：方案卡堆叠；卡上三个指标格改成两列（TTFT 换行），数字不至于挤成竖排 */
  .plans { grid-template-columns: minmax(0, 1fr); }
  .plancard .pmetrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* /api：响应示例缩到 11px 并保持横向滚动（换行会毁掉 JSON 的层级感） */
  .apijson, .rawlog { padding: 10px 12px; font-size: 11px; }
}

/* 尊重用户的动效偏好 */
@media (prefers-reduced-motion: reduce) {
  * { transition-duration: 1ms !important; animation-duration: 1ms !important; }
}