/* ============================================================================
 * modcheck 官网 · 兼容性检查页（/check.html 与 /en/check.html）
 * ----------------------------------------------------------------------------
 * 本文件只允许出现 .chk- 前缀的页面级类。
 * 公共组件类（.appwin* / .tab / .trow / .tcell--* / .btn / .card / .state /
 * .dot / .chip / .badge / .code / .rule / .callout / .steps / .cta-band /
 * .hero / .grid / .prose / .container / .section …）由 tokens.css / base.css /
 * components.css / appwin.css 提供，此处一律不得重定义。
 *
 * 颜色、间距、字体、圆角、阴影、动效全部取自 tokens.css 的变量；
 * 本文件不出现任何 #hex / rgb() / hsl() 字面量。
 * ==========================================================================*/

/* ── 锚点跳转时不被粘顶页头遮住 ─────────────────────────────────────────── */
#states,
#honest,
#demo {
  scroll-margin-top: calc(var(--h-header) + var(--sp-6));
}

/* ── base.css 的 `li + li { margin-top }` 会把栅格/列表的第 2..n 项顶下去，
      造成 .grid / .steps / .footer__list 里首项与其余项不对齐。
      本页所有作为栅格项的 <li> 都带上 .chk-item 抵消它。 ─────────────────── */
.chk-item { margin-top: 0; }

/* ── 六态卡片之后的小标题 ───────────────────────────────────────────────── */
.chk-subtitle {
  margin: 0 0 var(--sp-6);
  color: var(--c-text);
  font-size: var(--fs-h3);
  font-weight: var(--fw-heading);
  letter-spacing: var(--ls-heading-cn);
}

/* ── 灵魂区块的收束句 ───────────────────────────────────────────────────── */
.chk-vow__punch { margin-top: var(--sp-6); }

/* ── 演示区下方的说明 ───────────────────────────────────────────────────── */
.chk-demo__note {
  max-width: var(--w-wide);
  margin: var(--sp-6) auto 0;
  color: var(--c-text-3);
  font-size: var(--fs-sm);
}

/* ── 演示窗口内的页面级零件 ─────────────────────────────────────────────── */

/* 进度条：轨道是本页自己的 .chk-progress，被动画改 width 的是内层的
   <span class="appwin__progress">（设计经理已把这个语义定死：它是填充条，
   不是轨道）。内层同时带 .chk-progress__fill —— appwin.css 完成语义切换
   前后，这一条都能稳定显示为强调色填充，不会退化成一条灰线。 */
.chk-progress {
  height: var(--sp-1);
  margin: var(--sp-4) 0 0;
  overflow: hidden;
  border-radius: var(--r-full);
  background-color: var(--c-line);
}
.chk-progress__fill {
  display: block;
  width: 0;
  height: 100%;
  margin: 0;
  border-radius: inherit;
  background-color: var(--c-accent);
}

.chk-tab__label { white-space: nowrap; }

/* 未解析 / 无数据 的单元格占位 */
.chk-pending { color: var(--c-text-3); }
.chk-none { color: var(--c-text-4); }

/* 空状态（该状态下没有模组时，替代表格出现，不是空白） */
.chk-empty {
  margin: var(--sp-4);
  padding: var(--sp-10) var(--sp-5);
  border: var(--bd-1) solid var(--c-line-soft);
  border-radius: var(--r-md);
  color: var(--c-text-2);
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
  text-align: center;
}

/* 详情面板内容 */
.chk-detail__idle {
  margin: 0;
  color: var(--c-text-3);
}
.chk-detail__list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-2) var(--sp-6);
  margin: 0;
}
.chk-detail__k {
  padding-top: 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) .chk-detail__k { text-transform: uppercase; }
.chk-detail__v {
  margin: 0;
  color: var(--c-text);
}
.chk-detail__versions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
}
.chk-detail__advice { color: var(--c-text); }

@media (min-width: 640px) {
  .chk-detail__list { grid-template-columns: max-content minmax(0, 1fr); }
}

/* ── 演示按钮「按到了」的即时反馈 ───────────────────────────────────────── */
.chk-poked {
  border-color: var(--c-accent-line);
  color: var(--c-text);
}

/* ── 页内提示条（toast）：固定右下角，2.5 秒淡出，Esc 可关 ─────────────── */
.chk-toast {
  position: fixed;
  left: var(--sp-4);
  right: var(--sp-4);
  bottom: var(--sp-4);
  z-index: var(--z-toast);
  margin: 0;
  padding: var(--sp-4) var(--sp-5);
  border: var(--bd-1) solid var(--c-accent-line);
  border-radius: var(--r-md);
  background-color: var(--c-surface-2);
  box-shadow: var(--sh-2);
  color: var(--c-text);
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
  opacity: 0;
  transform: translateY(var(--sp-2));
  pointer-events: none;
  transition: opacity var(--t-base), transform var(--t-base);
}
.chk-toast.is-on {
  opacity: 1;
  transform: none;
}

@media (min-width: 640px) {
  .chk-toast {
    left: auto;
    right: var(--sp-5);
    bottom: var(--sp-5);
    max-width: var(--w-text);
  }
}

@media (prefers-reduced-motion: reduce) {
  .chk-toast {
    transform: none;
    transition: none;
  }
}