/* ============================================================
   对外榜单图表样式（样板阶段：综合型 / 安全型）
   口径：docs/页面设计/3.1.1-基准测试榜单.md 3.6 榜单分型（决策 21）
   风格沿用对外榜单：白底、细边框、去渐变与辉光；
   网格线只作参考（--line-2），数据用固定色板（TP.PALETTE），文字颜色取全站墨阶。
   ============================================================ */

/* ---------------- 通用：图例 ---------------- */
.pb-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 3px 13px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 9.5px;
  color: var(--ink-3);
}
.pb-legend li { display: inline-flex; align-items: center; gap: 6px; min-width: 0; max-width: 240px; }
.pb-legend li > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pb-legend li > b { font-size: 9.5px; color: var(--ink); }
.pb-legend-mean {
  flex: none;
  width: 12px;
  height: 0;
  border-top: 1.6px dashed #8A94A6;
}

/* 输入 / 输出 Token 段色块（指标对照的 Token 列表头给出两段配色） */
.pb-seg-chip {
  flex: none;
  display: inline-block;
  width: 12px;
  height: 9px;
  border-radius: 2px;
}
.pb-seg-chip.is-in { background: var(--blue, #0F62FE); }
.pb-seg-chip.is-out { background: #00A3C4; }
/* ---------------- 通用：多系列折线（能力维度 / 多轮诱导衰减共用） ---------------- */
.pb-line-wrap { display: flex; flex-direction: column; gap: 10px; }
.pb-line { width: 100%; height: auto; }
.pb-line-grid { stroke: var(--line-2); stroke-width: 1; }
.pb-line-ytick,
.pb-line-xtick { font-size: 9.5px; fill: var(--ink-4); }
.pb-line-xtick { font-size: 9.5px; fill: var(--ink-3); }
.pb-line-series { fill: none; stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }
.pb-line-series.is-mean { stroke-dasharray: 4 3; stroke-width: 1.4; }
.pb-line-dot { stroke: #fff; stroke-width: 1.2; }
.pb-line-dot.is-mean { fill: #fff; stroke: #8A94A6; }

/* ---------------- 综合型 图二：得分分布点线 ---------------- */
.pb-dot { padding-top: 2px; }
.pb-dot-axis,
.pb-dot-row,
.pb-dot-overlay {
  display: grid;
  grid-template-columns: 176px minmax(0, 1fr) 52px 76px;
  gap: 8px;
  align-items: center;
}
.pb-dot-axis { padding-bottom: 4px; }
.pb-dot-ticks { display: flex; justify-content: space-between; font-size: 9.5px; color: var(--ink-4); }
.pb-dot-ticks i { font-style: normal; }
.pb-dot-body { position: relative; padding-top: 14px; }
/* 参考线覆盖层：与数据行同网格，只占轨道列，不拦点击 */
.pb-dot-overlay { position: absolute; inset: 0; pointer-events: none; }
.pb-dot-overlay > span:first-child,
.pb-dot-overlay > span:nth-child(3),
.pb-dot-overlay > span:nth-child(4) { min-width: 0; }
.pb-dot-ref-cell { position: relative; height: 100%; }
.pb-dot-row { padding: 3px 0; border-top: 1px solid var(--line-2); }
.pb-dot-row:first-of-type { border-top: none; }
.pb-dot-name {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  font-size: 10px;
  color: var(--ink-2);
}
.pb-dot-name > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pb-dot-track { position: relative; height: 16px; }
/* 网格线由 JS 按刻度位置生成（.pb-dot-grid），与横轴刻度一一对齐 */
.pb-dot-grid {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 0;
  border-left: 1px solid var(--line-2);
}
.pb-dot-range {
  position: absolute;
  top: 50%;
  height: 3px;
  margin-top: -1.5px;
  border-radius: 2px;
  background: rgba(11, 27, 51, 0.22);
}
.pb-dot-pt {
  position: absolute;
  top: 50%;
  width: 8px;
  height: 8px;
  margin: -4px 0 0 -4px;
  border-radius: 50%;
  border: 1.5px solid #fff;
  box-shadow: 0 1px 2px rgba(11, 27, 51, 0.18);
}
.pb-dot-val { text-align: right; font-size: 10px; color: var(--ink); font-weight: 600; }
.pb-dot-range-txt { text-align: right; font-size: 9.5px; color: var(--ink-4); }
.pb-dot-ref {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 0;
  border-left: 1px dashed rgba(11, 27, 51, 0.28);
  pointer-events: none;
}
.pb-dot-ref.is-top { border-left-style: solid; border-left-color: rgba(15, 98, 254, 0.45); }
.pb-dot-ref > b {
  position: absolute;
  top: 1px;
  left: 4px;
  padding: 1px 5px;
  border-radius: 3px;
  background: var(--surface);
  font-size: 9px;
  font-weight: 500;
  color: var(--ink-3);
  white-space: nowrap;
}
.pb-dot-ref.is-flip > b { left: auto; right: 4px; }
.pb-dot-ref.is-top > b { color: var(--blue); }

/* ---------------- 安全型 图一：拦截率矩阵 ---------------- */
/* 不出现横向滚动条：列宽按卡片宽度等分（2026-09-20 用户裁决） */
.pb-matrix-wrap { overflow: visible; }
.pb-matrix-xaxis { display: flex; padding-left: 116px; height: 168px; }
.pb-matrix-xaxis .pb-xcell { flex: none; }
.pb-matrix-tbl { width: 100%; table-layout: fixed; border-collapse: collapse; }
.pb-matrix-tbl .pb-mx-head {
  width: 116px;
  padding: 0 8px 0 0;
  text-align: left;
  font-size: 10px;
  font-weight: 500;
  color: var(--ink-2);
  vertical-align: middle;
}
.pb-matrix-tbl .pb-mx-head em {
  display: block;
  font-style: normal;
  font-size: 9px;
  color: var(--ink-4);
}
.pb-mx-cell {
  height: 24px;
  border: 1px solid #fff;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 9.5px;
  color: var(--ink-2);
}
.pb-matrix-legend {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 8px;
  font-size: 9.5px;
  color: var(--ink-4);
}
.pb-matrix-scale {
  width: 140px;
  height: 7px;
  border-radius: 2px;
  background: linear-gradient(to right, rgba(229, 72, 77, 0.6), rgba(229, 72, 77, 0.12) 42%,
    rgba(15, 98, 254, 0.1) 58%, rgba(15, 98, 254, 0.4));
}
.pb-matrix-scale-gap { flex: 1; }

/* ---------------- 分组柱状图（传统条形图，2026-09-21 决策 38：折线改柱） ----------------
   复用柱状图底座（.pb-cols / .pb-col / .pb-bar / .pb-xaxis），只在组内并排多根细柱；
   组内 1px 缝、组间靠 padding 留白，柱宽随卡片宽度自适应（不出现横向滚动）。 */
.pb-cols-group { gap: 2px; }
.pb-col.is-group {
  gap: 1px;
  padding: 0 4px;
}
.pb-col.is-group > .pb-bar {
  width: auto;
  min-width: 0;
  flex: 1 1 0;
  border-radius: 2px 2px 0 0;
}
/* 图例色块（维度等分类着色，与对象徽标区分） */
.pb-swatch {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 5px;
  border-radius: 2px;
  vertical-align: -1px;
}

/* ---------------- 总榜：指标对照（能力 / 效率 / 成本 三列合一，2026-09-21 决策 46） ----------------
   一行＝一个对象、三列＝三个指标：名称列固定，每列＝「轨道（条 + 该列全体中位虚线）+ 数值列」；
   列头给该列色块、口径与中位；列宽由 --mgc-cols 单点定义，表头与数据行同模板 → 行行对齐。 */
.pb-mgc { --mgc-cols: 172px minmax(0, 1fr) 46px minmax(0, 1fr) 46px minmax(0, 1fr) 56px; }
.pb-mgc-head,
.pb-mgc-row {
  display: grid;
  grid-template-columns: var(--mgc-cols);
  align-items: center;
  column-gap: 8px;
}
.pb-mgc-head { padding-bottom: 5px; border-bottom: 1px solid var(--line-2); }
.pb-mgc-h {
  grid-column: span 2;
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  font-size: 9.5px;
  color: var(--ink-2);
}
.pb-mgc-h.is-name { grid-column: auto; font-size: 9px; color: var(--ink-4); letter-spacing: 0.04em; }
.pb-mgc-h > em {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-style: normal;
  font-size: 9px;
  color: var(--ink-4);
}
.pb-mgc-h > b { margin-left: auto; white-space: nowrap; font-size: 9px; font-weight: 600; color: var(--ink-3); }
.pb-mgc-row { height: 26px; border-top: 1px solid var(--line-2); }
.pb-mgc-head + .pb-mgc-row { border-top: none; }
.pb-mgc-name { display: inline-flex; align-items: center; gap: 6px; min-width: 0; font-size: 10px; color: var(--ink-2); }
.pb-mgc-name > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 轨道：浅底表示该列的刻度范围，条自左端起；中位虚线贯穿轨道 */
.pb-mgc-track { position: relative; min-width: 0; height: 12px; border-radius: 2px; background: var(--surface-2); }
.pb-mgc-bar {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  height: 100%;
  border-radius: 2px;
  overflow: hidden;
}
.pb-mgc-seg { display: block; height: 100%; }
.pb-mgc-seg.is-in { background: var(--blue, #0F62FE); }
.pb-mgc-seg.is-out { background: #00A3C4; }
.pb-mgc-ref { position: absolute; top: -2px; bottom: -2px; width: 0; border-left: 1px dashed #8A94A6; }
.pb-mgc-val { text-align: right; font-size: 9.5px; font-weight: 600; color: var(--ink-2); }

/* ---------------- 雷达图（能力维度，2026-09-21 决策 40；2026-09-22 改 8 轴） ----------------
   画布 460×344（8 轴时轴名在左右两侧横排，最长 9 字）；1:1 渲染，轴名字号即 SVG 的 10px。 */
.pb-radar-wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 24px; }
.pb-radar { flex: none; width: 460px; max-width: 100%; height: auto; }
.pb-radar-wrap .pb-legend { flex: 1 1 220px; }

/* ---------------- 卡片头「对象」下拉筛选（2026-09-21 用户「对象不要平铺，改为下拉筛选」） ----------------
   视觉：与卡片头同排、32px 高、1px 细边、focus 有 3px 蓝晕；窄屏不与工具项挤在同一行。 */
.pb-chart-head { display: flex; align-items: center; gap: 10px; }
.pb-chart-head h4 { flex: none; white-space: nowrap; }
.pb-head-right { display: inline-flex; align-items: center; margin-left: auto; }
.pb-chart-head .pb-select { height: 28px; min-width: 124px; font-size: 11px; }
.pb-filter { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.pb-filter-label { font-size: 10px; color: var(--ink-3); letter-spacing: 0.04em; }
.pb-select {
  height: 32px;
  max-width: 240px;
  min-width: 132px;
  padding: 0 28px 0 10px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: #fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6'><path d='M0 0h10L5 6z' fill='%235A6577'/></svg>") no-repeat right 10px center;
  -webkit-appearance: none;
  appearance: none;
  font-family: inherit;
  font-size: 11.5px;
  color: var(--ink-1);
  cursor: pointer;
  transition: border-color 0.16s var(--ease), box-shadow 0.16s var(--ease);
}
.pb-select:hover { border-color: #9FB0C8; }
.pb-select:focus-visible { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(15, 98, 254, 0.14); }

/* 溢出防护（2026-09-21 用户「行业场景的图表都溢出了」）：卡片 / 平铺格 / 图表区不得撑破容器，
   宽表在自己的容器内横向滚动，不外溢到页面。 */
.pb-card,
.pb-charts,
.pb-mix-sec,
.pb-mix-cell,
.pb-data-box { min-width: 0; max-width: 100%; }
/* 图表框自身不溢出：柱内数值竖排后不应再有横向外溢，这里再兜一层（裁切而非撑破卡片） */
.pb-chart-block { overflow: hidden; }
.pb-data-box .tbl-wrap,
.pb-matrix-wrap,
.pb-mx2-wrap { max-width: 100%; overflow-x: auto; }

/* ---------------- 分组项：基础原子能力平铺 + 场景与行业能力切换（决策 41；决策 47 改名） ---------------- */
.pb-mix-sec { margin-bottom: 12px; }
.pb-mix-sec-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 0 2px 8px;
  border-bottom: 1px solid var(--line-2);
  margin-bottom: 10px;
}
.pb-mix-sec-head h4 { margin: 0; font-size: 13px; font-weight: 600; color: var(--ink-1); }
/* 平铺＝逐个下滑的全尺寸卡片（2026-09-21 用户「不要缩小图表」）：单列、卡片内图表保持原尺寸 */
.pb-mix-flat { display: block; }
.pb-mix-cell {
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 12px 14px 6px;
  margin-bottom: 12px;
  background: #fff;
}
.pb-mix-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 4px;
}
.pb-mix-name { font-size: 12px; font-weight: 600; color: var(--ink-1); }
.pb-mix-n { font-size: 9px; color: var(--ink-4); }
/* 格头下的榜单说明（2026-09-21 用户「给每个榜单加一句文字说明」）：该基准的简介一句话 */
.pb-mix-desc {
  margin: 0 0 6px;
  font-size: 9.5px;
  line-height: 1.5;
  color: var(--ink-4);
}
/* 平铺卡内图表保持全尺寸（与单项榜单一致），不再压高度 */
.pb-mix-switch { display: flex; flex-wrap: wrap; gap: 6px; padding: 2px 0 10px; }
.pb-mix-tab {
  border: 1px solid var(--line);
  border-radius: 4px;
  background: #fff;
  padding: 5px 12px;
  font-size: 11px;
  color: var(--ink-2);
  cursor: pointer;
  transition: border-color 0.16s var(--ease), color 0.16s var(--ease), background 0.16s var(--ease);
}
.pb-mix-tab:hover { border-color: var(--blue); color: var(--blue-700); }
.pb-mix-tab.is-active {
  border-color: var(--blue);
  background: rgba(15, 98, 254, 0.06);
  color: var(--blue-700);
  font-weight: 600;
}
.pb-mix-detail-head { border-top: 1px solid var(--line-2); padding-top: 12px; }

/* ---------------- 分布总览：对齐刻度栅格（strip plot，2026-09-21 重做） ----------------
   格局：一行＝一个基准、**全部行共用同一条 60–100 轴**——列宽由 --sp2-cols 一处给出，
   轴（表头）/ 覆盖层（网格线 + 全体中位）/ 数据行三者同模板，因此行与行严格对齐；
   与「得分分布点线」同一套栅格语法（左侧名称列 · 中间轨道 · 行尾数值列 · 行分隔线）。
   行内：点为域色小圆（撞车时竖向微排）、竖线＝该基准中位、虚线＝全体中位（在覆盖层里贯通各行）；
   域头遮住网格线形成分节，中位与样本数各自成列、等宽右对齐。 */
.pb-sp2 { --sp2-cols: 132px minmax(0, 1fr) 52px 52px; }
.pb-sp2-axis {
  display: grid;
  grid-template-columns: var(--sp2-cols);
  align-items: end;
  padding-bottom: 5px;
  border-bottom: 1px solid var(--line-2);
}
.pb-sp2-h { font-size: 9px; color: var(--ink-4); letter-spacing: 0.04em; }
.pb-sp2-h.is-num { text-align: right; padding-left: 12px; }
/* 刻度：按轴上位置绝对定位 + 居中，因此每个刻度值正落在对应的网格线上 */
.pb-sp2-ticks { position: relative; height: 12px; font-size: 9.5px; color: var(--ink-4); }
.pb-sp2-tick { position: absolute; top: 0; transform: translateX(-50%); font-style: normal; }
.pb-sp2-body { position: relative; }
/* 覆盖层与数据行同模板：网格线 / 全体中位参考线贯通全部行，不拦点击 */
.pb-sp2-overlay {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: var(--sp2-cols);
  pointer-events: none;
}
.pb-sp2-refs { position: relative; min-width: 0; }
.pb-sp2-grid { position: absolute; top: 0; bottom: 0; width: 0; border-left: 1px solid var(--line-2); }
.pb-sp2-cohort { position: absolute; top: 0; bottom: 0; width: 0; border-left: 1px dashed #8A94A6; }
/* 域头即分节线：白底遮住网格线，域名在左、基准数与域中位在右 */
.pb-sp2-group {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 12px;
  padding: 2px 0 5px;
  border-bottom: 1px solid var(--line);
  background: #fff;
  font-size: 10px;
  font-weight: 600;
  color: var(--ink-2);
}
.pb-sp2-group:first-child { margin-top: 0; }
.pb-sp2-gdot { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--dc, currentColor); }
.pb-sp2-gn { margin-left: auto; font-size: 9.5px; font-weight: 400; color: var(--ink-4); }
/* 数据行：名称 / 轨道 / 中位 / 样本 */
.pb-sp2-row {
  display: grid;
  grid-template-columns: var(--sp2-cols);
  align-items: center;
  height: 25px;
  border-top: 1px solid var(--line-2);
}
.pb-sp2-group + .pb-sp2-row { border-top: none; }
.pb-sp2-name {
  min-width: 0;
  padding-right: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 10px;
  color: var(--ink-2);
}
.pb-sp2-track { position: relative; min-width: 0; height: 20px; }
.pb-sp2-dot {
  position: absolute;
  top: 50%;
  width: 4.5px;
  height: 4.5px;
  margin: -2.25px 0 0 -2.25px;
  border-radius: 50%;
  /* 按测试域着色、按撞车级数竖向微排（--dc / --dy 由行与点内联给出） */
  background: var(--dc, rgba(22, 35, 58, 0.55));
  opacity: 0.62;
  transform: translateY(var(--dy, 0));
}
.pb-sp2-med { position: absolute; top: 1px; bottom: 1px; width: 0; border-left: 1.5px solid var(--dc, rgba(15, 98, 254, 0.5)); }
.pb-sp2-val {
  padding-left: 12px;
  text-align: right;
  font-size: 9.5px;
  font-weight: 600;
  color: var(--ink-2);
}
.pb-sp2-n { padding-left: 12px; text-align: right; font-size: 9px; color: var(--ink-4); }
/* 图例里的「该基准中位」样板（竖实线；「全体中位」复用 .pb-legend-mean 虚线样板） */
.pb-sp2-med-mark { flex: none; width: 0; height: 11px; border-left: 1.5px solid var(--ink-3); }

/* ---------------- 结果总览：对象 × 榜单 得分矩阵（2026-09-21 第一批） ----------------
   单色深浅表示得分高低（60–100 截断轴）、未测为虚线浅格、末两列为均分与覆盖数；
   单元格可点：跳到该榜单并定位该对象。列宽自适应、无横向滚动（决策 25）。 */
.pb-mx2-wrap { overflow: visible; }
.pb-mx2 { width: 100%; table-layout: fixed; border-collapse: collapse; }
.pb-mx2 col.is-name { width: 172px; }
.pb-mx2 col.is-num { width: 54px; }
.pb-mx2 th,
.pb-mx2 td { padding: 0; }
.pb-mx2 thead .pb-mx2-ch {
  height: 30px;
  padding: 0 3px;
  border-bottom: 1px solid #16233A;
  font-size: 9px;
  font-weight: 600;
  color: var(--ink-3);
  text-align: center;
  vertical-align: bottom;
  white-space: normal;
  line-height: 1.2;
}
.pb-mx2 .pb-mx2-rh {
  padding: 0 8px 0 0;
  overflow: hidden;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 9.5px;
  font-weight: 400;
  color: var(--ink-2);
}
.pb-mx2 thead .pb-mx2-rh { border-bottom: 1px solid #16233A; }
.pb-mx2 .pb-mx2-cell {
  height: 21px;
  border: 1px solid #fff;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--ink-2);
  cursor: pointer;
}
.pb-mx2 .pb-mx2-cell:hover { box-shadow: inset 0 0 0 1.5px var(--blue); }
.pb-mx2 .pb-mx2-cell.is-empty {
  background: repeating-linear-gradient(45deg, #F4F6F9 0 3px, #FAFBFD 3px 6px);
  color: var(--ink-4);
  cursor: default;
}
.pb-mx2 .pb-mx2-cell.is-sum { background: var(--surface-2); font-weight: 600; color: var(--ink); cursor: default; }
.pb-mx2 .pb-mx2-cell.is-cov { background: var(--surface-2); color: var(--ink-4); cursor: default; }
.pb-mx2 tfoot .pb-mx2-rh,
.pb-mx2 tfoot .pb-mx2-cell { border-top: 1px solid #16233A; background: none; color: var(--ink-3); }
.pb-mx2 tfoot .pb-mx2-rh { font-weight: 600; }
.pb-mx2 tfoot .pb-mx2-cell.is-med { font-weight: 600; }

/* ---------------- 安全型 图二：多轮诱导衰减（折线，样式见 .pb-line） ---------------- */
.pb-decay-wrap { display: flex; flex-direction: column; gap: 10px; }

/* 窄屏：点线图的两列收窄（覆盖层同网格，参考线自动跟随），横向条形同收 */
@media (max-width: 900px) {
  .pb-dot-axis,
  .pb-dot-row,
  .pb-dot-overlay { grid-template-columns: 118px minmax(0, 1fr) 44px 58px; }

  /* 分布总览：名称列与两个数值列收窄，轨道列自适应 */
  .pb-sp2 { --sp2-cols: 104px minmax(0, 1fr) 46px 44px; }
}