/* ==========================================================================
   compare.css — 客户端对比页（compare.html）专属样式
   依赖 base.css 的设计令牌，本文件不出现任何硬编码颜色。
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. 章节锚点跳转（尊重系统的减少动态偏好）
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion:no-preference){
  html{scroll-behavior:smooth;}
}

.cmp-toc{margin-top:30px;}

/* --------------------------------------------------------------------------
   2. 对比总表
   -------------------------------------------------------------------------- */

.cmp-table{min-width:780px;}

.cmp-name{
  display:block;
  font-family:var(--font-mono);
  font-size:13.5px;
  font-weight:700;
  letter-spacing:-.01em;
  color:var(--text);
}

.cmp-table thead th .badge{margin-top:8px;}
.cmp-table tbody th{color:var(--text);font-size:13px;}

/* --------------------------------------------------------------------------
   3. 客户端点评
   -------------------------------------------------------------------------- */

.cmp-reviews{display:flex;flex-direction:column;gap:22px;}

.cmp-review{
  display:grid;
  grid-template-columns:minmax(0,214px) minmax(0,1fr);
  gap:16px 40px;
  min-width:0;
  padding:30px 32px;
  background:var(--bg-panel);
  border:1px solid var(--border);
  border-radius:var(--r-xl);
  box-shadow:var(--shadow-soft);
}

.cmp-review-head{min-width:0;}

.cmp-review-name{
  margin:0;
  font-family:var(--font-mono);
  font-size:19px;
  font-weight:700;
  letter-spacing:-.01em;
  color:var(--text);
}

.cmp-review-meta{margin:10px 0 0;font-size:12.5px;line-height:1.75;color:var(--text-muted);}
.cmp-review-badges{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px;}

.cmp-review-body{min-width:0;font-size:14.5px;line-height:1.85;color:var(--text-muted);}
.cmp-review-body p{margin:0 0 14px;}
.cmp-review-body p:last-child{margin-bottom:0;}

/* --------------------------------------------------------------------------
   4. 内核说明
   -------------------------------------------------------------------------- */

.cmp-kernel-text{margin:10px 0 0;font-size:14.5px;line-height:1.85;color:var(--text-muted);}

.cmp-kernel-notes{max-width:74ch;margin:26px 0 22px;}
.cmp-kernel-notes p{margin:0 0 14px;font-size:14.5px;line-height:1.85;color:var(--text-muted);}
.cmp-kernel-notes p:last-child{margin-bottom:0;}

/* --------------------------------------------------------------------------
   5. 场景化选型
   -------------------------------------------------------------------------- */

.pick-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px;}
.pick-grid > *{min-width:0;}
.pick-grid .callout{margin:0;}

/* --------------------------------------------------------------------------
   6. 选型结论块
   -------------------------------------------------------------------------- */

.cmp-verdict{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:22px;
  min-width:0;
  margin-top:28px;
  padding:28px 30px;
  background:var(--coral-wash);
  border:1px solid var(--coral-soft);
  border-radius:var(--r-xl);
}

.cmp-verdict-body{flex:1 1 360px;min-width:0;}

.cmp-verdict-kicker{
  margin:0 0 8px;
  font-family:var(--font-mono);
  font-size:11.5px;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--accent-dark);
}

.cmp-verdict-title{margin:0 0 8px;font-size:19px;}
.cmp-verdict-text{margin:0;font-size:14px;line-height:1.8;color:var(--text-muted);}
.cmp-verdict-actions{display:flex;flex-wrap:wrap;gap:12px;}

/* --------------------------------------------------------------------------
   7. 响应式
   -------------------------------------------------------------------------- */

@media (max-width:760px){
  .cmp-toc{margin-top:24px;}
  .cmp-review{grid-template-columns:minmax(0,1fr);gap:14px;padding:24px 20px;}
  .cmp-verdict{padding:22px 20px;}
}

@media (max-width:640px){
  .cmp-table{min-width:660px;}
  .cmp-review-name{font-size:17px;}
}