/* ==========================================================================
   Clash知识库 · 客户端对比页专属样式(compare.css)
   依赖 base.css / components.css 的设计令牌;直角、细线、无发光无投影。
   ========================================================================== */

/* ---------- 页头 ---------- */
.page-head h1{
  font-size:clamp(34px, 5vw, 52px);
  letter-spacing:.08em;
  margin-top:16px;
}
.page-head h1 em{font-style:normal;color:var(--accent);}

/* ---------- 逐款点评:药柜抽屉式条目 ---------- */
.client-list{display:flex;flex-direction:column;gap:16px;}
.client-list>*{min-width:0;}
.client-block{
  background:var(--bg-panel);
  border:1px solid var(--border);
  padding:24px 26px;
  transition:border-color .15s ease;
}
.client-block:hover{border-color:var(--border-strong);}
.client-block.is-top{border-color:var(--accent);}
.cb-head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:10px 18px;
  flex-wrap:wrap;
}
.cb-head h3{
  font-size:20px;
  letter-spacing:.04em;
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}
.cb-meta{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.08em;
  color:var(--text-muted);
}
.cb-body p{
  margin-top:12px;
  font-size:14px;
  line-height:1.95;
  color:var(--text-muted);
  max-width:72ch;
}
.cb-body p a{
  color:var(--text);
  text-decoration:underline;
  text-decoration-color:var(--accent);
  text-underline-offset:4px;
  transition:color .15s ease;
}
.cb-body p a:hover{color:var(--warn);}

/* 三味小签:上手 / 亮点(忌口)/ 适合 */
.cb-points{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:12px;
  margin-top:16px;
}
.cb-points>*{min-width:0;}
.cb-point{
  border:1px solid var(--border);
  background:var(--chip-bg);
  padding:12px 14px;
}
.cb-point b{
  display:flex;
  align-items:center;
  gap:8px;
  font-family:var(--font-mono);
  font-weight:400;
  font-size:11px;
  letter-spacing:.16em;
  color:var(--copper-hi);
}
.cb-point b::before{content:"";width:5px;height:5px;background:var(--copper);flex-shrink:0;}
.cb-point p{margin-top:8px;font-size:13px;line-height:1.8;color:var(--text-muted);}

.cb-dl{
  margin-top:14px;
  display:inline-flex;
  align-items:center;
  gap:7px;
  font-size:13px;
  letter-spacing:.06em;
  color:var(--accent);
  transition:color .15s ease;
}
.cb-dl:hover{color:var(--accent-dark);}

/* ---------- 总表下注 ---------- */
.table-note{
  margin-top:12px;
  font-size:12.5px;
  line-height:1.8;
  color:var(--text-muted);
}

/* ---------- 场景选型:callout 双列 ---------- */
.scene-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:16px;
}
.scene-grid>*{min-width:0;}
.scene-grid .callout{margin-bottom:0;}
.scene-grid .callout a{
  color:var(--text);
  text-decoration:underline;
  text-decoration-color:var(--accent);
  text-underline-offset:4px;
  transition:color .15s ease;
}
.scene-grid .callout a:hover{color:var(--warn);}

/* ---------- 结论笺纸面板上的链接与按钮 ---------- */
.panel-paper p a{
  color:var(--ink);
  text-decoration:underline;
  text-decoration-color:var(--accent);
  text-underline-offset:4px;
  transition:color .15s ease;
}
.panel-paper p a:hover{color:var(--accent-dark);}
.panel-paper .btn-ghost{border-color:var(--ink-faint);color:var(--ink);}
.panel-paper .btn-ghost:hover{border-color:var(--ink);background:var(--tag-lo);}

/* ---------- 窄屏 ---------- */
@media (max-width:760px){
  .cb-points{grid-template-columns:1fr;}
  .scene-grid{grid-template-columns:1fr;}
  .client-block{padding:20px 18px;}
}