/* ============================================================
   Clash中国官网 · 客户端对比页专属(compare.css)
   总表注脚 / 逐款点评档案卡 / 场景选型格 / 结论操作行
   颜色一律引用 base.css 设计令牌,零圆角零投影零渐变
   ============================================================ */

/* ——— 总表注脚 ——— */
.cmp-note{
  margin-top:14px;
  font-family:var(--font-mono);
  font-size:11.5px;
  letter-spacing:1px;
  color:var(--text-muted);
}
.cmp-note a{color:var(--cinnabar);border-bottom:1px solid var(--cinnabar)}
.cmp-note a:hover{color:var(--cinnabar-dark);border-bottom-color:var(--cinnabar-dark)}

/* ——— 逐款点评:档案卡(印蜕 + 事实行 + 正文)——— */
.cmp-list{display:grid;gap:18px}
.cmp-list>*{min-width:0}
.cmp-item{
  position:relative;
  display:flex;
  gap:20px;
  border:1px solid var(--ink);
  background:var(--paper-panel);
  padding:26px 28px;
  min-width:0;
}
.cmp-item::before{
  content:"";
  position:absolute;
  left:0;top:0;bottom:0;
  width:3px;
  background:var(--cinnabar);
  opacity:0;
  transition:opacity .18s ease;
}
.cmp-item:hover::before{opacity:1}
.cmp-seal{
  flex:none;
  width:56px;height:56px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--cinnabar);
  color:var(--paper);
  font-family:var(--font-display);
  font-weight:900;
  font-size:18px;
  letter-spacing:2px;
  padding-left:2px;
  outline:1px solid var(--seal-line);
  outline-offset:-5px;
  filter:url(#miniWobble);
  transition:background .18s ease;
}
.cmp-item:hover .cmp-seal{background:var(--cinnabar-dark)}
/* 归档客户端:印蜕由朱砂换墨,示停更之档 */
.cmp-seal.is-archive{background:var(--ink)}
.cmp-item:hover .cmp-seal.is-archive{background:var(--text)}
.cmp-body{flex:1;min-width:0}
.cmp-item-head{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:10px 14px;
  margin-bottom:10px;
}
.cmp-item-head h3{font-size:19px;letter-spacing:1px}
.cmp-facts{
  display:flex;
  flex-wrap:wrap;
  gap:5px 16px;
  font-family:var(--font-mono);
  font-size:11.5px;
  letter-spacing:.5px;
  color:var(--text-muted);
  margin-bottom:12px;
}
.cmp-facts b{font-weight:400;color:var(--text)}
.cmp-body p{font-size:14px;line-height:1.9;color:var(--text-muted);margin:0 0 .8em}
.cmp-body p:last-child{margin-bottom:0}
.cmp-body a{color:var(--cinnabar);border-bottom:1px solid var(--cinnabar)}
.cmp-body a:hover{color:var(--cinnabar-dark);border-bottom-color:var(--cinnabar-dark)}

/* ——— 场景选型:2×2 callout 格 ——— */
.cmp-scenes{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.cmp-scenes>*{min-width:0}
.cmp-scenes .callout{margin:0}

/* ——— 结论操作行 ——— */
.cmp-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:26px}

/* ——— 响应式 ——— */
@media (max-width:760px){
  .cmp-scenes{grid-template-columns:1fr}
  .cmp-item{flex-direction:column;gap:14px;padding:22px}
}
@media (max-width:640px){
  .cmp-actions{flex-direction:column}
  .cmp-actions .btn{width:100%}
}

/* ——— 减少动态偏好 ——— */
@media (prefers-reduced-motion:reduce){
  .cmp-item::before,.cmp-seal{transition:none}
}