/* ==========================================================================
   Remix 客户端网站 · 本页自有的布局
   页面骨架（.top / .hero / .legend / .instruments / .bench / .spec / .tokens /
   .qed）来自 assets/lattice/page.css，组件样式来自 assets/lattice/bundle.css。
   本文件只写这两层没有覆盖的、Remix 专属的区块，颜色与间距一律用体系的令牌。
   ========================================================================== */

/* ---------- 中英切换 ----------
   体系本身是中英并排显示的，[lang] 只负责字体族；
   “只显示当前语言”属于页面层，由根节点的 data-lang 控制。 */
html[data-lang="zh"] [lang="en"],
html[data-lang="en"] [lang="zh"] { display: none !important; }

/* 首屏右侧的点集序号 */
.set-index { font-family: var(--f-dot); font-weight: 900; font-size: 15px; color: var(--hot); }

/* ---------- 浮在点场之上的分节 ---------- */
.over { position: relative; z-index: 2; padding: var(--s-9) 0; }

/* 卡片里的说明文字不需要 .spec__n 的底部留白 */
.spec__n--last { margin-bottom: 0; }
/* 滑杆那格要占满宽度，否则 lx-range 的 1fr 轨道会被 justify-items:start 压扁 */
.col--wide { width: 100%; }

/* ---------- 模块详解 ---------- */
.detail {
  display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 48px;
  padding: 48px 0; border-top: 1px solid var(--line);
}
.detail:last-child { border-bottom: 1px solid var(--line); }
.detail__no { font-size: 15px; color: var(--hot); padding-top: 5px; }
.detail__body h3 { margin: 0 0 16px; font-size: var(--t-28); font-weight: 600; line-height: 1.2; letter-spacing: -.01em; }
.detail__body p { margin: 0; color: var(--text-dim); max-width: 74ch; }
.detail__body p + p { margin-top: 12px; }

.facts { list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 10px; }
.facts li { position: relative; padding-left: 20px; color: var(--text-dim); font-size: 14px; }
/* 冰蓝标“这个模块使能了什么”（冰蓝 = 使能与下游） */
.facts li::before {
  content: ""; position: absolute; left: 2px; top: .62em;
  width: 4px; height: 4px; border-radius: 50%; background: var(--hot-2);
}

/* 二级标题（.bench 上方的小标题） */
.h3 { margin: 56px 0 0; font-size: var(--t-21); font-weight: 600; }

/* ---------- 版本历史 ---------- */
.timeline { list-style: none; margin: 8px 0 0; padding: 0; }
.timeline li {
  display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 40px;
  padding: 22px 0; border-top: 1px solid var(--line);
}
.timeline li:last-child { border-bottom: 1px solid var(--line); }
.tl__head { display: flex; align-items: baseline; gap: 12px; }
.tl__head .matrix { font-size: var(--t-21); }   /* 点阵字只在 >= 15px 用 */
.tl__date { color: var(--text-faint); font-size: 12px; }
.tl__body { color: var(--text-dim); max-width: 74ch; }

/* ---------- 注册表 ---------- */
.filter { max-width: 420px; margin-top: 4px; }

.mods { list-style: none; margin: 22px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.mods li {
  padding: 7px 13px; border-radius: var(--r-pill);
  box-shadow: inset 0 0 0 1px var(--line-strong);
  color: var(--text-dim); font: 500 13.5px/1.1 var(--f-ui);
  transition: color var(--t-fast), box-shadow var(--t-fast);
}
.mods li:hover { color: var(--text); box-shadow: inset 0 0 0 1px var(--hot); }
.mods li.is-hit { color: var(--text); box-shadow: inset 0 0 0 1px var(--hot); }

.reg {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center; gap: 20px; margin-top: 36px;
}
.reg__label, .reg__value { margin: 0; color: var(--text-dim); font-size: 13px; white-space: nowrap; }
.reg__value .matrix { font-size: 15px; }

/* ---------- 下载与安装 ---------- */
.dl { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: start; margin-top: 8px; }
.dl__label { margin: 0 0 16px; font-size: 15px; color: var(--hot); }
.row--acts { margin-top: 26px; }

.needs { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.needs li { position: relative; padding-left: 20px; font-size: 15px; }
/* 橙标“它需要什么”（橙 = 需要与动作） */
.needs li::before {
  content: ""; position: absolute; left: 2px; top: .55em;
  width: 5px; height: 5px; border-radius: 50%; background: var(--hot);
}

.steps { list-style: none; margin: 0; padding: 0; }
.steps li {
  display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 16px;
  padding: 16px 0; color: var(--text-dim); border-top: 1px solid var(--line);
}
.steps li:last-child { border-bottom: 1px solid var(--line); }
/* 编号 + 正文两列。中英两个 span 必须收在同一个网格单元里，
   否则第三个子元素会掉进 44px 的编号列，英文一个词一行竖排。 */
.step__text { display: block; min-width: 0; }
.steps .matrix { font-size: 15px; color: var(--hot); padding-top: 3px; }

/* ---------- 响应式 ---------- */
@media (max-width: 900px) {
  .over { padding: var(--s-8) 0; }
  .timeline li { grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 18px 0; }
  .h3 { margin-top: 40px; }
  .detail { grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 36px 0; }
  .detail__no { padding-top: 0; }
  .dl { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .reg { grid-template-columns: minmax(0, 1fr); gap: 10px; }
}
@media (max-width: 640px) {
  .steps li { grid-template-columns: 32px minmax(0, 1fr); gap: 12px; }
}