/* =========================================================================
   两张量化图表（PRD 第六节）· 测评页报告卡片与 /report 报告页共用
   -------------------------------------------------------------------------
   沿用「纸与墨」的编辑风：发丝线分组、大量留白、唯一强调色陶土。
   图表读起来应该像印在纸上的示意图，而不是仪表盘：不用填充色块，不加阴影。
   ========================================================================= */

.chart {
  padding: 26px 0;
  border-top: 1px solid var(--line, rgba(26, 23, 20, .1));
}
.chart:last-child { padding-bottom: 8px; }

.chart__title {
  margin: 0 0 12px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .22em;
  color: var(--ink-3, rgba(26, 23, 20, .6));
}
.chart__sub {
  margin: 0 0 16px;
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--ink-2, rgba(26, 23, 20, .72));
}
.chart__sub b { color: var(--clay, #9c4b26); font-weight: 600; }
.chart__foot {
  margin: 16px 0 0;
  font-size: 12px;
  line-height: 1.8;
  letter-spacing: .02em;
  color: var(--ink-3, rgba(26, 23, 20, .6));
}
.chart__foot b { color: var(--ink, #1a1714); font-weight: 600; }
.chart__foot .dot { vertical-align: 1px; }

/* ===== 图 1：人生版本阶梯图 ===== */
.ladder { list-style: none; margin: 0; padding: 0; }
.ladder__row {
  display: grid;
  grid-template-columns: 24px 46px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 5px 0;
}
.ladder__key {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .1em;
  color: var(--ink-3, rgba(26, 23, 20, .6));
}
.ladder__name { font-size: 13px; color: var(--ink-3, rgba(26, 23, 20, .6)); }
.ladder__bar {
  display: block;
  height: 6px;
  width: var(--w, 50%);
  border-radius: 2px;
  background: rgba(26, 23, 20, .1);
}
.ladder__row.is-next .ladder__bar { background: rgba(26, 23, 20, .16); }
.ladder__row.is-current .ladder__key,
.ladder__row.is-current .ladder__name { color: var(--ink, #1a1714); font-weight: 600; }
.ladder__row.is-current .ladder__bar { background: var(--clay, #9c4b26); }

/* 「你在这里」用衬线小字，像批注而不是标签 */
.ladder__here {
  font-family: var(--serif, "Songti SC", serif);
  font-size: 12px;
  font-style: normal;
  letter-spacing: .04em;
  color: var(--clay, #9c4b26);
  white-space: nowrap;
}
.ladder__next {
  font-size: 11px;
  font-style: normal;
  letter-spacing: .04em;
  color: var(--ink-3, rgba(26, 23, 20, .6));
  white-space: nowrap;
}

/* ===== 图 2：五类资产雷达图 ===== */
.radar { display: block; width: 100%; max-width: 288px; height: auto; margin: 4px auto 0; }
.radar__grid { fill: none; stroke: var(--line, rgba(26, 23, 20, .1)); stroke-width: .8; }
.radar__grid[data-edge] { stroke: var(--line-2, rgba(26, 23, 20, .18)); }
.radar__axis { stroke: var(--line, rgba(26, 23, 20, .1)); stroke-width: .8; }
.radar__area {
  fill: var(--clay-soft, rgba(156, 75, 38, .07));
  stroke: var(--clay, #9c4b26);
  stroke-width: 1.4;
  stroke-linejoin: round;
}
.radar__dot { fill: var(--clay, #9c4b26); }
.radar__dot.is-under { stroke: var(--paper, #faf7f2); stroke-width: 2; }
.radar__label { font-size: 12px; fill: var(--ink-2, rgba(26, 23, 20, .72)); }
.radar__label.is-under { fill: var(--clay, #9c4b26); font-weight: 700; }
.radar__score {
  font-size: 10px;
  fill: var(--ink-3, rgba(26, 23, 20, .6));
  font-variant-numeric: tabular-nums;
}
.radar__score.is-under { fill: var(--clay, #9c4b26); font-weight: 600; }

.dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--clay, #9c4b26); margin-right: 6px; }
.dot--under { background: var(--clay, #9c4b26); }

/* 窄屏：版本名让位给进度条，图例仍然完整 */
@media (max-width: 380px) {
  .ladder__row { grid-template-columns: 22px 1fr auto; }
  .ladder__name { display: none; }
}