/* ==========================================================================
   3D 可视化样式：Canvas 容器、坐标轴、悬浮提示。
   颜色全部走主题变量，禁止写死背景色。
   ========================================================================== */

.viz3d {
  position: relative;
  width: 100%;
  border-radius: var(--radius, 18px);
  overflow: hidden;
  touch-action: pan-y;
}
.viz3d-canvas {
  display: block;
  width: 100%;
  height: 100%;
}
/* 指标图有 10 根柱，容器要够高，否则轴标签会被柱底压住看不见 */
.viz3d-bars { height: clamp(330px, 44vh, 460px); }
.viz3d-bars.is-dense { height: clamp(420px, 54vh, 560px); }
.viz3d-court { height: clamp(320px, 46vh, 480px); }
/* 能力盘用正方形比例，十边形才不会被压扁 */
.viz3d-radar { height: clamp(340px, 48vh, 520px); }
.viz3d-empty {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  color: var(--ink-3, #86868b);
}

/* 能力盘下面："该补哪里"三行 */
.radar-gap {
  margin-top: 6px;
  padding-top: 14px;
  border-top: 1px solid var(--line, #e5e5ea);
}
.radar-gap-k {
  display: block;
  font-size: 11px;
  letter-spacing: .16em;
  color: var(--ink-3, #86868b);
  margin-bottom: 8px;
}
.radar-gap-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 0;
  font-size: 13px;
}
.radar-gap-row i {
  width: 8px; height: 8px; border-radius: 50%;
  flex: 0 0 auto;
}
.radar-gap-row b { font-weight: 600; color: var(--ink, #1d1d1f); min-width: 5.4em; }
.radar-gap-bar {
  flex: 1 1 auto;
  height: 2px;
  background: var(--line, #e5e5ea);
  position: relative;
  min-width: 40px;
}
.radar-gap-bar s { position: absolute; inset: 0; background: currentColor; opacity: .35; }
.radar-gap-num { color: var(--ink-2, #6e6e73); font-variant-numeric: tabular-nums; white-space: nowrap; }
.radar-gap-none, .radar-gap-note { font-size: 12px; color: var(--ink-3, #86868b); margin-top: 4px; }
.viz3d-layers { height: 100%; min-height: 100%; }

/* 叙事图层放在大号数字背后：数字和说明文案要压在上面，否则三层平面会被盖住看不见 */
.story-3d { z-index: 0; pointer-events: none; }
.story-visual { position: relative; }
.story-visual .story-metric,
.story-visual .story-caption,
.story-visual .story-hint { position: relative; z-index: 1; }

.viz3d-axis {
  position: absolute;
  left: 0; right: 0; bottom: 6px;
  display: flex;
  justify-content: space-around;
  gap: 4px;
  pointer-events: none;
  padding: 0 6px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
}
.viz3d-axis::-webkit-scrollbar { display: none; }
.viz3d-axis span {
  flex: 0 0 auto;
  min-width: 0;
  text-align: center;
  font-size: 11px;
  line-height: 1.35;
  color: var(--ink-3, #86868b);
  /* 中文 4 字折行，窄容器里也不会被裁成省略号 */
  max-width: 4em;
  white-space: normal;
  word-break: break-word;
  overflow-wrap: anywhere;
}

/* 按柱子的真实屏幕位置定位（见 viz3d.js placeLabels），不用 flex 均分 */
.viz3d-axis.viz3d-axis-abs {
  display: block;
  padding: 0;
}
.viz3d-axis-abs span {
  position: absolute;
  transform: translateX(-50%);
  flex: none;
  top: 2px;
}

.viz3d-tip {
  position: absolute;
  z-index: 3;
  pointer-events: none;
  padding: 8px 10px;
  border-radius: 10px;
  background: var(--bg);
  box-shadow: var(--shadow);
  border: 1px solid var(--line);
  font-size: 12px;
  line-height: 1.45;
  max-width: 190px;
}
.viz3d-tip b { display: block; font-weight: 600; color: var(--ink); }
.viz3d-tip span { display: block; color: var(--ink-2); }
.viz3d-tip em {
  display: block;
  font-style: normal;
  font-weight: 600;
  font-size: 15px;
  letter-spacing: -.02em;
  color: var(--accent);
}

.viz3d-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 14px;
  font-size: 12px;
  color: var(--ink-2);
}
.viz3d-legend i {
  display: inline-block;
  width: 10px; height: 10px;
  border-radius: 50%;
  margin-right: 6px;
  vertical-align: -1px;
}

/* 3D 图层叙事：随滚动从平铺旋起 */
/* 关键：容器必须有非 auto 的 z-index（网页里的 canvas 若处在 z-index:auto 的定位盒里，
   Chrome 合成时会把整块内容丢掉，现象就是"画得出来但看不见"）。再用 isolation 把它单独隔离成一层。 */
.story-3d {
  position: absolute;
  inset: -26% -12% -6% 26%;
  width: 88%;
  height: 132%;
  z-index: 2;
  isolation: isolate;
  pointer-events: none;
}
.story-3d .viz3d-canvas { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 1; }

/* 数字压在图层正中会挡住三层平面，把它移到左下方，图层放到右上。
   注意：canvas 必须自成一个定位层（absolute + z-index），否则它会被合成到
   大号数字下面又被白色底遮住，实测整块 3D 都看不见。 */
.story-visual .story-metric {
  transform: translate(-46%, 16%) scale(var(--sp, .94));
  opacity: .55;
}
.story-visual .story-caption { margin-top: 86px; }
.story-3d .viz3d-canvas {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
}

@media (max-width: 860px) {
  .viz3d-bars { height: 300px; }
  .viz3d-bars.is-dense { height: 400px; }
  .viz3d-court { height: 340px; }
  .viz3d-axis span { font-size: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .viz3d-tip { transition: none; }
}