/* ============================================================
   design-v7.css · 视觉系统 v7（2026-09-23）
   六类对照（不仅跟竞品比）——竞争页顶部的对照切换 + 各对照的专属排版。
   只做展示：不动鉴权、不动客户只读隔离、不新增依赖。
   1) .cmp-switch：对照切换（默认核心竞品；手机 4+3 两行，一屏放得下、不滑动）
   2) .cmp-pane  ：每个对照一屏内容，切换即显示
   3) .cmp-lead  ：每个对照的「一句话结论」（带 N 与时间范围）
   4) .rank-big  ：我方在板块内的名次/份额大数字
   5) .xref-grid ：趋势页的六类对照速览（点进竞争页对应页）
   ============================================================ */

/* ---------- 1 · 对照切换（flex-wrap：卡片数可增删，永不横向滚动） ---------- */
.cmp-switch{
  display:flex;flex-wrap:wrap;gap:4px;align-items:stretch;
  margin:8px 0 6px;padding:4px;border:1px solid var(--line);border-radius:12px;
  background:var(--bg2,rgba(0,0,0,.02));
}
.cmp-chip{
  appearance:none;border:1px solid transparent;background:transparent;color:var(--fg2);
  font-size:12px;font-weight:700;padding:7px 10px;border-radius:9px;cursor:pointer;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-height:32px;flex:1 1 auto;
}
.cmp-chip:hover{border-color:var(--brand-200);color:var(--brand-deep)}
.cmp-chip.active{background:var(--brand-wash);color:var(--brand-deep);border-color:var(--brand-200);box-shadow:var(--sh-1)}
.cmp-chip .n{font-weight:500;font-size:10.5px;opacity:.8}
.cmp-panes{margin-top:6px}
.cmp-pane{display:none}
.cmp-pane.active{display:block}

/* ---------- 3 · 一句话结论 ---------- */
.cmp-lead{
  margin:8px 0 10px;padding:10px 12px;border-radius:12px;
  border:1px solid var(--line);border-left:4px solid var(--brand);
  background:var(--card);font-size:13px;line-height:1.6;
}
.cmp-lead b{color:var(--brand-deep)}
.cmp-lead .cmp-lead-meta{display:block;margin-top:5px;font-size:11.5px;color:var(--fg2)}

/* ---------- 4 · 名次/份额大数字 ---------- */
.rank-big{display:flex;flex-wrap:wrap;gap:14px;align-items:flex-end}
.rank-big .rb-item{min-width:120px}
.rank-big .rb-v{font-size:30px;font-weight:800;letter-spacing:-.03em;line-height:1.1;color:var(--brand-deep)}
.rank-big .rb-v small{font-size:13px;font-weight:700;color:var(--fg2);margin-left:4px}
.rank-big .rb-l{font-size:11.5px;color:var(--fg2);margin-top:2px}
.board-hi .bar-row.hi .bar-track>i{background:linear-gradient(90deg,var(--brand-deep),var(--brand))}
.board-hi .bar-row.hi .bar-vl{color:var(--brand-deep);font-weight:800}
/* 板块全景的楼盘名较长：桌面给标签列更多宽度，避免截断成「大华·公园天下…」 */
@media (min-width:769px){
  .board-hi .bar-row{grid-template-columns:190px 1fr 132px}
}
body.is-mobile .board-hi .bar-row{grid-template-columns:110px 1fr 108px;font-size:11px}

/* ---------- 5 · 趋势页：六类对照速览 ---------- */
.xref-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:6px 0 10px}
/* rq_mv0acn22mhg7: 6 框 3 列等分；窄屏降 2 列/1 列 */
@media(max-width:900px){.xref-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.xref-grid{grid-template-columns:1fr}}
.xref-card{
  text-align:left;padding:10px 12px;border:1px solid var(--line);border-radius:11px;
  background:var(--card);cursor:pointer;
}
.xref-card:hover{border-color:var(--brand-200);box-shadow:var(--sh-2)}
.xref-card b{display:block;font-size:12.5px;margin-bottom:3px;color:var(--brand-deep)}
.xref-card p{margin:0;font-size:11.5px;line-height:1.55;color:var(--fg2)}
.xref-card .xref-go{display:block;margin-top:5px;font-size:11px;color:var(--brand);font-weight:700}

/* ---------- 手机 / 平板：一屏能切、不横向滑动（每行 4 个，8 个对照正好两行） ---------- */
body.is-mobile .cmp-switch{
  gap:3px;padding:3px;margin:6px 0 4px;
}
body.is-mobile .cmp-chip{padding:6px 4px;font-size:11.5px;min-height:30px;flex:0 0 calc(25% - 3px)}
body.is-mobile .cmp-chip .n{display:none}
body.is-tablet .cmp-chip{flex:0 0 calc(20% - 4px)}
body.is-mobile .rank-big .rb-v{font-size:26px}
body.is-mobile .cmp-lead{font-size:12.5px;padding:9px 10px}
body.is-mobile .cmp-pane .tablewrap{max-height:none}