/* ============================================================================
 * modcheck 官网 · Components
 * ----------------------------------------------------------------------------
 * 依赖：tokens.css + base.css
 * 覆盖：DESIGN_SPEC.md §4 冻结类清单（.appwin\* 见 appwin.css）+ §10.4 页头页脚骨架
 *      + 全站通用版式辅助类。
 *
 * 冻结接口声明：本文件定义的类名与语义来自 DESIGN_SPEC.md，任何人不得重命名、
 * 不得改变语义、不得在页面 CSS 里重定义。新增组件类只能加在本文件，
 * 且必须只用 var(--...) 取色。
 * 本文件不允许出现任何颜色字面量。
 *
 * 目录
 *   1. 页头骨架 .site-header / .site-header__*
 *   2. 主导航 .nav / .nav__list / .nav__link / .nav-toggle
 *   3. 语言切换 .lang-switch
 *   4. 页脚骨架 .site-footer / .footer__*
 *   5. 按钮 .btn
 *   6. 卡片 .card
 *   7. 状态胶囊 .chip（六态）
 *   8. 状态圆点 .dot（六态，含三种非常规形状）
 *   9. 代码 .kbd / .code / .code-block
 *  10. 分隔与标签 .rule / .badge
 *  11. 图标 .icon
 *  12. 配置占位 .slot / .is-unset
 *  13. 通用版式辅助（网格 / 首屏 / 状态卡 / 步骤 / 清单 / 对照 / 收口）
 *  14. 入场动画 .reveal
 * ==========================================================================*/

/* ==========================================================================
 * 1. 页头骨架（§10.4 冻结）
 * ========================================================================*/

.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
}

/* blur 放在伪元素上，而不是 .site-header 自身：
   backdrop-filter 会为 fixed 后代创建包含块，那样移动端抽屉就会以头部（而不是视口）为参照系。 */
.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-color: var(--c-scrim);
  border-bottom: var(--bd-1) solid transparent;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  transition: background-color var(--t-base), border-bottom-color var(--t-base);
  pointer-events: none;
}

.site-header.is-scrolled::before {
  background-color: var(--c-scrim-solid);
  border-bottom-color: var(--c-line);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  min-height: var(--h-header);
}

.site-header__brand {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  flex: none;
  min-height: var(--tap-min);
  color: var(--c-text);
  text-decoration: none;
}

.site-header__brand:hover { color: var(--c-text); text-decoration: none; }
.site-header__brand:hover .site-header__logo { transform: translateY(-1px); }

/* 产品图标（像素画，自带透明通道与深色描边）。
   显式给盒子尺寸 + 圆角，保证在深色底上是"芯片"而不是一团像素。 */
.site-header__logo {
  display: block;
  width: 26px;
  height: 28px;
  flex: none;
  object-fit: contain;
  border-radius: var(--r-sm);
  image-rendering: -webkit-optimize-contrast;
  transition: transform var(--t-fast);
}

.site-header__wordmark {
  color: var(--c-text);
  font-family: var(--f-mono);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semi);
  letter-spacing: var(--ls-wordmark);
}

.site-header__actions {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex: 0 1 auto;
  min-width: 0;
}

.site-header__actions .site-header__gh {
  display: none;
  width: auto;
  min-height: var(--tap-min);
  /* 页头是 no-wrap flex：这一项必须单行，否则会顶高页头、错开移动端抽屉的 top */
  white-space: nowrap;
  color: var(--c-text-2);
  font-size: var(--fs-sm);
}

.site-header__actions .site-header__gh:hover { color: var(--c-text); }

@media (min-width: 640px) {
  .site-header__actions { gap: var(--sp-4); }
  .site-header__actions .site-header__gh { display: inline-flex; }
}

@media (min-width: 900px) {
  .site-header__inner { gap: var(--sp-6); }
}

/* ==========================================================================
 * 2. 主导航（移动优先：<900px 抽屉，≥900px 行内）
 * ========================================================================*/

.nav {
  /* 移动端 = 抽屉面板。position:fixed 的 flex 子项不参与 gap，也不占位。 */
  position: fixed;
  top: var(--h-header);
  left: 0;
  right: 0;
  z-index: var(--z-drawer);
  max-height: calc(100vh - var(--h-header));
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--sp-4) var(--sp-5) var(--sp-6);
  background-color: var(--c-bg-soft);
  border-bottom: var(--bd-1) solid var(--c-line);
  box-shadow: var(--sh-3);
  visibility: hidden;
  opacity: 0;
  transform: translateY(calc(var(--sp-2) * -1));
  transition: opacity var(--t-base), transform var(--t-base), visibility var(--t-base);
}

.nav.is-open {
  visibility: visible;
  opacity: 1;
  transform: none;
}

.nav__list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav__link {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  min-height: var(--tap-min);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-sm);
  color: var(--c-text-2);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-none);
  text-decoration: none;
  transition: color var(--t-fast), background-color var(--t-fast);
}

.nav__link:hover {
  color: var(--c-text);
  background-color: var(--c-surface);
  text-decoration: none;
}

.nav__link.is-active { color: var(--c-text); }

.nav__link.is-active::after {
  content: "";
  position: absolute;
  left: var(--sp-3);
  bottom: var(--sp-2);
  width: var(--sp-5);
  height: var(--bd-2);
  border-radius: var(--r-full);
  background-color: var(--c-accent);
}

/* 汉堡按钮：三条 16px 横线（§10.4） */
.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--tap-min);
  height: var(--tap-min);
  flex: none;
  border: var(--bd-1) solid var(--c-line);
  border-radius: var(--r-sm);
  background-color: var(--c-surface);
  color: var(--c-text-2);
  transition: border-color var(--t-fast), background-color var(--t-fast);
}

.nav-toggle:hover { border-color: var(--c-text-4); }

.nav-toggle[aria-expanded="true"] {
  border-color: var(--c-accent-line);
  background-color: var(--c-surface-2);
}

.nav-toggle__bars {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--sp-1);
  width: var(--sp-4);
  height: var(--sp-4);
}

.nav-toggle__bars > i {
  display: block;
  width: 100%;
  height: var(--bd-2);
  border-radius: var(--r-full);
  background-color: var(--c-text-2);
  transition: transform var(--t-base), opacity var(--t-fast), background-color var(--t-fast);
}

.nav-toggle:hover .nav-toggle__bars > i { background-color: var(--c-text); }

/* 展开时三条横线收成 X（只动 transform / opacity） */
.nav-toggle[aria-expanded="true"] .nav-toggle__bars > i { background-color: var(--c-text); }

.nav-toggle[aria-expanded="true"] .nav-toggle__bars > i:nth-child(1) {
  transform: translateY(calc(var(--bd-2) + var(--sp-1))) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bars > i:nth-child(2) { opacity: 0; }

.nav-toggle[aria-expanded="true"] .nav-toggle__bars > i:nth-child(3) {
  transform: translateY(calc((var(--bd-2) + var(--sp-1)) * -1)) rotate(-45deg);
}

.nav__drawer-title {
  margin: 0 0 var(--sp-2);
  padding-inline: var(--sp-3);
  color: var(--c-text-3);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-label);
}

:lang(en) .nav__drawer-title { text-transform: uppercase; }

.nav__drawer-extra {
  margin-top: var(--sp-4);
  padding-top: var(--sp-4);
  border-top: var(--bd-1) solid var(--c-line-soft);
}

@media (min-width: 900px) {
  .nav {
    position: static;
    z-index: auto;
    max-height: none;
    overflow: visible;
    padding: 0;
    background-color: transparent;
    border-bottom: 0;
    box-shadow: none;
    visibility: visible;
    opacity: 1;
    transform: none;
    transition: none;
  }

  .nav__list {
    flex-direction: row;
    align-items: center;
    gap: var(--sp-1);
  }

  .nav__link {
    width: auto;
    padding-inline: var(--sp-3);
  }

  .nav__link.is-active::after {
    left: var(--sp-3);
    right: var(--sp-3);
    bottom: var(--sp-1);
    width: auto;
  }

  .nav-toggle { display: none; }
  .nav__drawer-title,
  .nav__drawer-extra { display: none; }
}

/* ==========================================================================
 * 3. 语言切换
 * ========================================================================*/

.lang-switch {
  display: inline-flex;
  align-items: center;
  flex: none;
  gap: var(--sp-1);
  padding: var(--bd-1);
  border: var(--bd-1) solid var(--c-line);
  border-radius: var(--r-full);
  background-color: var(--c-surface);
}

.lang-switch__item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--sp-10);
  min-height: calc(var(--tap-min) - var(--sp-1));
  padding: var(--sp-1) var(--sp-3);
  border-radius: var(--r-full);
  color: var(--c-text-3);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-label);
  line-height: 1;
  text-decoration: none;
  text-transform: uppercase;
  transition: color var(--t-fast), background-color var(--t-fast);
}

.lang-switch__item:hover {
  color: var(--c-text-2);
  background-color: var(--c-surface-2);
  text-decoration: none;
}

.lang-switch__item.is-active,
.lang-switch__item[aria-current="true"] {
  background-color: var(--c-surface-2);
  color: var(--c-text);
}

/* ==========================================================================
 * 4. 页脚骨架（§10.4 冻结）
 * ========================================================================*/

.site-footer {
  margin-top: auto;
  padding-block: var(--sp-12) var(--sp-8);
  border-top: var(--bd-1) solid var(--c-line);
  background-color: var(--c-bg-soft);
  color: var(--c-text-3);
  font-size: var(--fs-sm);
}

/* <900px 单列堆叠；≥900px 才用 grid 四列 */
.footer__grid { display: block; }

.footer__col + .footer__col { margin-top: var(--sp-8); }

.footer__col { min-width: 0; }

.footer__brand { max-width: 34ch; }

.footer__wordmark {
  display: inline-block;
  margin-bottom: var(--sp-2);
  color: var(--c-text);
  font-family: var(--f-mono);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semi);
  letter-spacing: var(--ls-wordmark);
}

.footer__text {
  margin: 0;
  color: var(--c-text-3);
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
}

.footer__title {
  margin: 0 0 var(--sp-3);
  color: var(--c-text-3);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-label);
  line-height: 1.4;
}

:lang(en) .footer__title { text-transform: uppercase; }

.footer__list {
  display: grid;
  gap: var(--sp-1);
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer__link {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min);
  color: var(--c-text-2);
  font-size: var(--fs-sm);
  text-decoration: none;
}

.footer__link:hover { color: var(--c-text); text-decoration: none; }

.footer__legal {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  margin-top: var(--sp-10);
  padding-top: var(--sp-5);
  border-top: var(--bd-1) solid var(--c-line);
  color: var(--c-text-3);
  font-size: var(--fs-xs);
}

.footer__legal p { margin: 0; }

.footer__copy { color: var(--c-text-3); }

@media (min-width: 900px) {
  .site-footer { padding-block: var(--sp-16) var(--sp-10); }

  .footer__grid {
    display: grid;
    grid-template-columns: 2fr repeat(3, minmax(0, 1fr));
    gap: var(--sp-10);
  }

  .footer__col + .footer__col { margin-top: 0; }

  .footer__legal {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-6);
  }
}

/* ==========================================================================
 * 5. 按钮
 * ========================================================================*/

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: var(--tap-min);
  padding: var(--sp-2) var(--sp-5);
  border: var(--bd-1) solid transparent;
  border-radius: var(--r-md);
  background-color: transparent;
  color: var(--c-text);
  font-family: var(--f-sans);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  line-height: 1.2;
  letter-spacing: var(--ls-none);
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--t-fast), border-color var(--t-fast),
              color var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast);
}

.btn:hover { text-decoration: none; }

.btn:active { transform: translateY(1px); }

/* 中文不断词工具类。
   浏览器的 CJK 断行会在**词内任意位置**断开（"之前" → "之 / 前"，"逻辑" → "逻 / 辑"），
   而 text-wrap:balance / pretty 都不阻止词内断行。需要保住的二字词用 <span class="nb"> 包起来。 */
.nb { white-space: nowrap; }

/* 长标签的按钮必须能换行。
   英文文案常比中文长一截（例如 "Not sure yet? Read the three-minute walkthrough"），
   若按钮不可换行，它会顶破父容器并让整页多出 1px 横向滚动。 */
.btn {
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
}

.btn .icon { font-size: 1.05em; }

.btn--primary {
  background-color: var(--c-accent-lo);
  border-color: var(--c-accent-lo);
  color: var(--c-on-accent);
}

.btn--primary:hover {
  background-color: var(--c-accent-deep);
  border-color: var(--c-accent-deep);
  color: var(--c-on-accent);
}

.btn--primary:focus-visible { outline-color: var(--c-accent-hi); }

.btn--ghost {
  border-color: var(--c-line);
  background-color: var(--c-surface);
  color: var(--c-text);
}

.btn--ghost:hover {
  border-color: var(--c-text-4);
  background-color: var(--c-surface-2);
  color: var(--c-text);
}

.btn--quiet { color: var(--c-text-2); }

.btn--quiet:hover {
  background-color: var(--c-surface);
  color: var(--c-text);
}

.btn--lg {
  min-height: var(--sp-12);
  padding: var(--sp-3) var(--sp-8);
  font-size: var(--fs-body);
}

.btn--icon {
  width: var(--tap-min);
  min-width: var(--tap-min);
  padding: 0;
}

.btn[aria-disabled="true"],
.btn:disabled {
  opacity: 0.45;
  pointer-events: none;
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3);
}

/* ==========================================================================
 * 6. 卡片
 * ========================================================================*/

.card {
  position: relative;
  display: block;
  background-color: var(--c-surface);
  border: var(--bd-1) solid var(--c-line);
  border-radius: var(--r-lg);
  color: var(--c-text-2);
  transition: border-color var(--t-base), background-color var(--t-base),
              box-shadow var(--t-base), transform var(--t-base);
}

.card--pad { padding: var(--sp-6); }

.card--glow {
  border-color: var(--c-accent-line);
  box-shadow: var(--sh-glow);
}

.card--link { text-decoration: none; }

.card--link:hover {
  border-color: var(--c-accent-line);
  background-color: var(--c-surface-2);
  transform: translateY(-2px);
  text-decoration: none;
}

.card__title {
  margin: 0 0 var(--sp-2);
  color: var(--c-text);
  font-size: var(--fs-lg);
  font-weight: var(--fw-semi);
  letter-spacing: var(--ls-none);
  line-height: 1.35;
}

.card__text {
  margin: 0;
  color: var(--c-text-2);
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
}

.card__meta {
  margin-top: var(--sp-4);
  color: var(--c-text-3);
  font-size: var(--fs-xs);
  font-family: var(--f-mono);
  font-variant-numeric: tabular-nums;
}

.card--warn { border-color: color-mix(in srgb, var(--s-blocked) 32%, transparent); }

.card--warn .card__title { color: var(--s-blocked); }

.card__head {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-3);
}

.card__head .icon {
  color: var(--c-text-3);
  font-size: 1.25rem;
}

.card__head .card__title,
.card__head .card__text { margin-bottom: 0; }

/* ==========================================================================
 * 7. 状态胶囊 .chip —— 六态
 * ========================================================================*/

.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--bd-2) var(--sp-3);
  border: var(--bd-1) solid var(--c-line);
  border-radius: var(--r-full);
  background-color: var(--c-surface-2);
  color: var(--c-text-2);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  line-height: 1.5;
  letter-spacing: var(--ls-none);
  white-space: nowrap;
}

.chip--ready {
  color: var(--s-ready);
  border-color: color-mix(in srgb, var(--s-ready) 34%, transparent);
  background-color: color-mix(in srgb, var(--s-ready) 12%, transparent);
}

.chip--notice {
  color: var(--s-notice);
  border-color: color-mix(in srgb, var(--s-notice) 34%, transparent);
  background-color: color-mix(in srgb, var(--s-notice) 12%, transparent);
}

.chip--prerelease {
  color: var(--s-prerelease);
  border-color: color-mix(in srgb, var(--s-prerelease) 34%, transparent);
  background-color: color-mix(in srgb, var(--s-prerelease) 12%, transparent);
}

.chip--blocked {
  color: var(--s-blocked);
  border-color: color-mix(in srgb, var(--s-blocked) 38%, transparent);
  background-color: color-mix(in srgb, var(--s-blocked) 12%, transparent);
}

.chip--unknown {
  color: var(--s-unknown);
  border-color: color-mix(in srgb, var(--s-unknown) 34%, transparent);
  background-color: color-mix(in srgb, var(--s-unknown) 10%, transparent);
}

/* --s-ignored 对深底只有 2.4:1，按 SPEC 只做圆点不做文字：
   文字退回 --c-text-2，边框保留 --s-ignored 以维持语义识别。 */
.chip--ignored {
  color: var(--c-text-2);
  border-color: color-mix(in srgb, var(--s-ignored) 55%, transparent);
  background-color: color-mix(in srgb, var(--s-ignored) 14%, transparent);
}

.chip--ignored .dot { background-color: var(--s-ignored); }

.chip .dot { margin-inline-start: calc(var(--sp-1) * -1); }

/* ==========================================================================
 * 8. 状态圆点 .dot —— 六态
 *    形状本身就是语义：灰度打印与色盲下也必须可辨（SPEC §4）
 * ========================================================================*/

.dot {
  display: inline-block;
  flex: none;
  width: var(--dot-size);
  height: var(--dot-size);
  vertical-align: middle;
  border: 0;
  border-radius: var(--r-full);
  background-color: var(--c-text-3);
}

/* 实心圆 ×3 */
.dot--ready { background-color: var(--s-ready); }

.dot--notice { background-color: var(--s-notice); }

.dot--prerelease { background-color: var(--s-prerelease); }

/* 非常规形状 1/3：实心方块（旋转 0，2px 圆角） */
.dot--blocked {
  background-color: var(--s-blocked);
  border-radius: var(--r-xs);
}

/* 非常规形状 2/3：空心环（透明填充） */
.dot--unknown {
  background-color: transparent;
  border: var(--bd-ring) solid var(--s-unknown);
}

/* 非常规形状 3/3：短横线（2px 高 × 8px 宽） */
.dot--ignored {
  width: var(--dot-bar-w);
  height: var(--dot-bar-h);
  border-radius: var(--r-full);
  background-color: var(--s-ignored);
}

/* 圆点 + 文字标签的组合：状态永远不能只靠颜色与形状表达 */
.state {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  white-space: nowrap;
}

.state__label {
  font-size: inherit;
  color: inherit;
}

.state--ready .state__label { color: var(--s-ready); }
.state--notice .state__label { color: var(--s-notice); }
.state--prerelease .state__label { color: var(--s-prerelease); }
.state--blocked .state__label { color: var(--s-blocked); }
.state--unknown .state__label { color: var(--s-unknown); }
.state--ignored .state__label { color: var(--c-text-2); }

/* ==========================================================================
 * 9. 代码
 * ========================================================================*/

.kbd {
  display: inline-block;
  padding: 0.1em var(--sp-2);
  border: var(--bd-1) solid var(--c-line);
  border-bottom-width: var(--bd-2);
  border-radius: var(--r-sm);
  background-color: var(--c-surface-2);
  color: var(--c-text);
  font-family: var(--f-mono);
  font-size: 0.85em;
  font-variant-numeric: tabular-nums;
  line-height: 1.5;
  white-space: nowrap;
}

.code {
  display: inline-block;
  max-width: 100%;
  padding: 0.1em var(--sp-2);
  border: var(--bd-1) solid var(--c-line-soft);
  border-radius: var(--r-sm);
  background-color: var(--c-surface-2);
  color: var(--c-text-2);
  font-family: var(--f-mono);
  font-size: var(--fs-xs);
  font-variant-numeric: tabular-nums;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.code-block {
  display: block;
  position: relative;
  overflow-x: auto;
  margin: 0;
  padding: var(--sp-4) var(--sp-5);
  border: var(--bd-1) solid var(--c-line);
  border-radius: var(--r-md);
  background-color: var(--c-surface);
  color: var(--c-text-2);
  font-family: var(--f-mono);
  font-size: var(--fs-sm);
  font-variant-numeric: tabular-nums;
  line-height: 1.7;
  white-space: pre;
  tab-size: 2;
}

.code-block__cmt { color: var(--c-text-4); }

.code-block__cmd { color: var(--c-text); }

.code-block__flag { color: var(--c-accent-hi); }

/* ==========================================================================
 * 10. 分隔线 / 中性标签
 * ========================================================================*/

.rule {
  height: var(--bd-1);
  margin-block: var(--sp-8);
  border: 0;
  background-color: var(--c-line-soft);
}

.rule--tight { margin-block: var(--sp-5); }

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--bd-1) var(--sp-3);
  border: var(--bd-1) solid var(--c-line);
  border-radius: var(--r-sm);
  background-color: var(--c-surface-2);
  color: var(--c-text-3);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  line-height: 1.6;
  letter-spacing: var(--ls-none);
  white-space: nowrap;
}

.badge--mono {
  font-family: var(--f-mono);
  font-variant-numeric: tabular-nums;
  color: var(--c-text-2);
}

.badge--accent {
  border-color: var(--c-accent-line);
  background-color: var(--c-accent-dim);
  color: var(--c-accent-hi);
}

/* ==========================================================================
 * 11. 图标（内联 SVG 包装）
 * ========================================================================*/

.icon {
  display: inline-block;
  flex: none;
  width: 1em;
  height: 1em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: -0.125em;
}

.icon--lg { width: 1.5em; height: 1.5em; }

.icon--xl { width: 2em; height: 2em; }

.icon--accent { color: var(--c-accent-hi); }

.icon--mute { color: var(--c-text-3); }

.icon--ok { color: var(--s-ready); }

.icon--warn { color: var(--s-blocked); }

/* ==========================================================================
 * 12. 配置占位 .slot / 未配置弱化态 .is-unset
 * ========================================================================*/

.slot {
  /* 故意不声明 display：下载按钮同时带 .btn 与 .slot，不能被降级成 inline-block */
  max-width: 100%;
}

.slot--inline { display: inline; }

/* 大面积待填位（下载卡）：虚框 */
.slot--box {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--sp-24);
  padding: var(--sp-6);
  border: var(--bd-1) dashed var(--c-line);
  border-radius: var(--r-md);
  background-color: var(--c-surface);
  color: var(--c-text-3);
  font-family: var(--f-mono);
  font-size: var(--fs-sm);
  text-align: center;
}

/* data-site 未配置：弱化但仍是正常文本，不是虚框（§10.4） */
.is-unset,
a.is-unset,
.site-header__actions .site-header__gh.is-unset,
.footer__list .is-unset,
.footer__legal .is-unset {
  color: var(--c-text-3);
  cursor: help;
  text-decoration: none;
  border-bottom: 0;
}

a.is-unset:hover,
.site-header__actions .site-header__gh.is-unset:hover,
.footer__list .is-unset:hover,
.footer__legal .is-unset:hover {
  color: var(--c-text-3);
  text-decoration: none;
  background-color: transparent;
}

/* 未配置的下载按钮：不许看起来像能点的主 CTA */
.btn.is-unset {
  background-color: var(--c-surface-2);
  border-color: var(--c-line);
  color: var(--c-text-3);
  font-family: var(--f-mono);
  font-size: var(--fs-xs);
}

/* ==========================================================================
 * 13. 通用版式辅助
 * ========================================================================*/

.grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-5);
  list-style: none;
  margin: 0;
  padding: 0;
}

/* 栅格容器里的 li 是布局单元：任何"相邻项间距"都不该渗进来。
   间距由容器的 gap 统一负责，第 2/3 项必须和第 1 项顶部对齐。 */
.grid > li,
.steps > li,
.checklist > li,
.spec-list > li,
.footer__list > li,
.card-grid > li {
  margin-top: 0;
}

.stack > * + * { margin-top: var(--sp-4); }
.stack--sm > * + * { margin-top: var(--sp-2); }
.stack--lg > * + * { margin-top: var(--sp-8); }

.lead {
  color: var(--c-text);
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
}

.muted { color: var(--c-text-3); }

.mono {
  font-family: var(--f-mono);
  font-variant-numeric: tabular-nums;
}

.measure { max-width: 62ch; }

.measure--tight { max-width: 48ch; }

.center { text-align: center; }

@media (min-width: 640px) {
  .grid--2,
  .grid--3,
  .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 900px) {
  .grid { gap: var(--sp-6); }

  .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  .grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ── 首屏 ─────────────────────────────────────────────────────────────── */

.hero {
  position: relative;
  overflow: hidden;
  padding-block: var(--sp-16) var(--sp-12);
  border-bottom: var(--bd-1) solid var(--c-line-soft);
}

/* 全站唯一允许的渐变（§10.6）：颜色仍来自 token，radial-gradient 只做遮罩 */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-color: var(--c-accent);
  opacity: .10;
  -webkit-mask-image: radial-gradient(60% 50% at 50% 0%, #000 0%, transparent 70%);
          mask-image: radial-gradient(60% 50% at 50% 0%, #000 0%, transparent 70%);
}

.hero__inner {
  position: relative;
  z-index: 1;
}

.hero__copy { max-width: 60ch; }

.hero__sub {
  max-width: 56ch;
  margin: var(--sp-5) 0 0;
  color: var(--c-text-2);
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3);
  margin-top: var(--sp-8);
}

.hero__note {
  margin: var(--sp-5) 0 0;
  color: var(--c-text-3);
  font-family: var(--f-mono);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-none);
}

.hero__preview { margin-top: var(--sp-10); }

@media (min-width: 900px) {
  .hero { padding-block: var(--sp-24) var(--sp-16); }

  .hero__preview { margin-top: var(--sp-16); }
}

/* ── 六态卡片 ─────────────────────────────────────────────────────────── */

.state-card {
  display: flex;
  flex-direction: column;
}

.state-card__advice {
  margin: auto 0 0;
  padding-top: var(--sp-4);
  border-top: var(--bd-1) solid var(--c-line-soft);
  color: var(--c-text);
  font-size: var(--fs-sm);
  line-height: 1.6;
}

.state-card .card__text { margin-bottom: var(--sp-4); }

.state-card__advice-k {
  display: block;
  margin-bottom: var(--sp-1);
  color: var(--c-text-3);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-label);
}

:lang(en) .state-card__advice-k { text-transform: uppercase; }

/* 未判定卡片是这一段的重点，给最强视觉权重（但不用颜色当唯一手段：
   标题文字与空心环形状同时表意） */
.state-card--unknown {
  border-color: var(--c-accent-line);
  box-shadow: var(--sh-glow);
}

.state-card--unknown .card__title { color: var(--c-text); }

/* ── 强调块 ───────────────────────────────────────────────────────────── */

.callout {
  padding: var(--sp-6);
  border: var(--bd-1) solid var(--c-line);
  border-left: var(--bd-3) solid var(--c-accent);
  border-radius: var(--r-lg);
  background-color: var(--c-surface);
}

.callout--accent {
  border-color: var(--c-accent-line);
  border-left-color: var(--c-accent);
  background-color: var(--c-surface);
  box-shadow: var(--sh-glow);
}

.callout__title {
  margin: 0 0 var(--sp-3);
  color: var(--c-text);
  font-size: var(--fs-h3);
  font-weight: var(--fw-heading);
  letter-spacing: var(--ls-heading-cn);
}

.callout__text {
  margin: 0;
  color: var(--c-text-2);
  line-height: var(--lh-body);
}

.callout__text + .callout__text { margin-top: var(--sp-4); }

@media (min-width: 900px) {
  .callout { padding: var(--sp-8) var(--sp-10); }
}

/* ── 步骤 ─────────────────────────────────────────────────────────────── */

.steps {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-6);
  list-style: none;
  margin: 0;
  padding: 0;
}

.step {
  position: relative;
  padding-left: var(--sp-12);
}

.step__num {
  position: absolute;
  left: 0;
  top: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--sp-8);
  height: var(--sp-8);
  border: var(--bd-1) solid var(--c-line);
  border-radius: var(--r-full);
  background-color: var(--c-surface-2);
  color: var(--c-accent-hi);
  font-family: var(--f-mono);
  font-size: var(--fs-sm);
  font-variant-numeric: tabular-nums;
}

.step__title {
  margin: 0 0 var(--sp-2);
  color: var(--c-text);
  font-size: var(--fs-lg);
  font-weight: var(--fw-semi);
  letter-spacing: var(--ls-none);
  line-height: 1.35;
}

.step__text {
  margin: 0;
  color: var(--c-text-2);
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
}

.step__text + .step__text { margin-top: var(--sp-3); }

/* 第 4 步是"可选但最省时间"的一步，视觉上要与前三步区分：加一条强调色左描边 */
.step--extra {
  padding-left: calc(var(--sp-12) + 2px);
  border-left: 2px solid var(--c-accent-line);
}

.step__link {
  color: var(--c-accent-hi);
  font-weight: var(--fw-semi);
  text-decoration: none;
  border-bottom: 1px solid var(--c-accent-line);
}
.step__link:hover {
  color: var(--c-text);
  border-bottom-color: var(--c-text);
}

@media (min-width: 900px) {
  /* 两列而不是三列：首页「它是怎么工作的」现在是 4 步（前 3 步 + 可选的下载步），
     三列会让第 4 步单独占一行、左边空掉一大块 —— 2×2 更整齐。 */
  .steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sp-8);
  }
}

/* ── 诚实清单 ─────────────────────────────────────────────────────────── */

.checklist {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-3);
  list-style: none;
  margin: 0;
  padding: 0;
}

.checklist__item {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  border: var(--bd-1) solid var(--c-line);
  border-radius: var(--r-md);
  background-color: var(--c-surface);
}

.checklist__icon {
  flex: none;
  margin-top: 0.15em;
  color: var(--c-text-3);
  font-size: 1.1rem;
}

.checklist--no .checklist__icon { color: var(--s-blocked); }

.checklist__text {
  min-width: 0;
  margin: 0;
  color: var(--c-text-2);
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
}

.checklist__text strong { color: var(--c-text); font-weight: var(--fw-semi); }

@media (min-width: 900px) {
  .checklist { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ── 两栏对照 ─────────────────────────────────────────────────────────── */

.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-5);
}

@media (min-width: 900px) {
  .split {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sp-6);
  }
}

.spec-list {
  display: grid;
  gap: 0;
  margin: var(--sp-4) 0 0;
  padding: 0;
  list-style: none;
}

.spec-list__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-4);
  padding-block: var(--sp-3);
  border-bottom: var(--bd-1) solid var(--c-line-soft);
  font-size: var(--fs-sm);
}

.spec-list__row:last-child { border-bottom: 0; }

.spec-list__k { color: var(--c-text-3); }

.spec-list__v {
  color: var(--c-text);
  font-family: var(--f-mono);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

/* ── 收口 CTA ─────────────────────────────────────────────────────────── */

.cta-band {
  padding: var(--sp-10) var(--sp-6);
  border: var(--bd-1) solid var(--c-line);
  border-radius: var(--r-xl);
  background-color: var(--c-surface);
  text-align: center;
}

.cta-band__title {
  margin: 0 0 var(--sp-3);
  color: var(--c-text);
  font-size: var(--fs-h3);
}

.cta-band__text {
  max-width: 52ch;
  margin: 0 auto var(--sp-6);
  color: var(--c-text-2);
}

.cta-band__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
}

.cta-band__note {
  margin: var(--sp-5) 0 0;
  color: var(--c-text-3);
  font-family: var(--f-mono);
  font-size: var(--fs-xs);
}

@media (min-width: 900px) {
  .cta-band { padding: var(--sp-16) var(--sp-10); }
}

/* ==========================================================================
 * 14. 入场动画 .reveal
 *     JS 关闭时（html.no-js）直接可见，避免内容永久不可见
 * ========================================================================*/

.reveal {
  opacity: 0;
  transform: translateY(var(--sp-3));
  transition: opacity var(--t-slow), transform var(--t-slow);
}

.reveal.is-visible {
  opacity: 1;
  transform: none;
}

html.no-js .reveal {
  opacity: 1;
  transform: none;
  transition: none;
}

@media (prefers-reduced-motion: reduce) {
  .reveal,
  html.no-js .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .card--link:hover,
  .btn:active { transform: none; }

  .nav-toggle__bars > i { transition: none; }
}