/* ============ 穿透图谱（SVG） ============ */

/* 海图纸底纹：经纬网格 */
.chart-grid-line { stroke: var(--chart-line); stroke-width: 1; }
.chart-grid-line--major { stroke: #c7d0da; }
.chart-depth-num { fill: #c3ccd6; font-family: var(--font-mono); font-size: 11px; user-select: none; }
.chart-contour { fill: none; stroke: #dde3ea; stroke-width: 1.2; }

/* 层级轴 */
.axis-label { fill: var(--chart-ink-2); font-size: 13px; font-weight: 600; letter-spacing: 2px; }
.axis-tick circle { fill: var(--navy-800); }
.axis-tick.is-dim circle { fill: #b6c1cd; }
.axis-tick text.num { fill: #fff; font-family: var(--font-mono); font-size: 11px; font-weight: 700; }
.axis-tick text.lv { fill: var(--chart-ink-2); font-size: 11.5px; }
.axis-line { stroke: #c7d0da; stroke-width: 1; stroke-dasharray: 2 4; }

/* 连线 */
.edge { fill: none; stroke: var(--navy-700); stroke-width: 1.6; transition: opacity 0.25s, stroke 0.25s; }
.edge--indirect { stroke: var(--blue-500); stroke-dasharray: 6 4; }
.edge--outside { stroke: var(--chart-ink-3); stroke-width: 1.1; stroke-dasharray: 3 4; }
.edge-arrow { fill: var(--navy-700); transition: opacity 0.25s; }
.edge-arrow--indirect { fill: var(--blue-500); }
.edge-arrow--outside { fill: var(--chart-ink-3); }
.edge-label { fill: var(--chart-ink-2); font-family: var(--font-mono); font-size: 11px; }
.edge-label-bg { fill: var(--chart-paper); opacity: 0.9; }

/* 节点 */
.node { cursor: pointer; transition: opacity 0.25s; }
.node__box {
  fill: #fff; stroke: var(--chart-line); stroke-width: 1;
  filter: drop-shadow(0 1px 3px rgba(36, 56, 77, 0.14));
  transition: stroke 0.2s;
}
.node:hover .node__box { stroke: var(--blue-500); }
.node__name { fill: var(--chart-ink); font-size: 13px; font-weight: 600; }
.node__pct-label { fill: var(--chart-ink-2); font-size: 11.5px; }
.node__pct { fill: var(--chart-ink); font-family: var(--font-mono); font-size: 12px; font-weight: 600; }

/* 节点变体 */
.node--fund .node__box { stroke: var(--blue-500); stroke-width: 1.4; }
.node--outside .node__box { fill: #f3f5f8; stroke: var(--chart-line); stroke-dasharray: 4 3; filter: none; }
.node--outside .node__name { fill: var(--chart-ink-3); }
.node--outside .node__pct, .node--outside .node__pct-label { fill: var(--chart-ink-3); }

/* 焦点企业（潜望镜锁定） */
.node--focal .node__box { fill: var(--navy-800); stroke: var(--navy-600); }
.node--focal .node__name { fill: #fff; }
.node--focal .node__pct-label { fill: var(--text-mid); }
.node--focal .node__pct { fill: var(--sonar-300); }
.focal-ring { fill: none; stroke: var(--sonar-500); pointer-events: none; }
.focal-ring--1 { stroke-width: 1.4; opacity: 0.85; }
.focal-ring--2 { stroke-width: 1; opacity: 0.4; }
.focal-crosshair { stroke: var(--sonar-500); stroke-width: 1; opacity: 0.6; pointer-events: none; }
.focal-ping {
  fill: none; stroke: var(--sonar-500); stroke-width: 1.5;
  transform-origin: center; transform-box: fill-box;
  animation: sonar-ping 2.6s ease-out infinite;
  pointer-events: none;
}
.focal-ping--late { animation-delay: 1.3s; }

/* 潜望镜聚焦：非链路淡出 */
.is-scoped .node:not(.on-chain) { opacity: 0.18; }
.is-scoped .edge:not(.on-chain), .is-scoped .edge-arrow:not(.on-chain) { opacity: 0.12; }
.is-scoped .edge-label-g:not(.on-chain) { opacity: 0.12; }
.is-scoped .edge.on-chain { stroke: var(--sonar-500); }
.is-scoped .edge-arrow.on-chain { fill: var(--sonar-500); }
.is-scoped .node.on-chain .node__box { stroke: var(--sonar-500); stroke-width: 1.6; }

/* 节点入场（只做透明度：CSS transform 会覆盖 SVG transform 属性） */
@keyframes node-in { from { opacity: 0; } to { opacity: 1; } }
.node, .edge, .edge-arrow, .edge-label-g { animation: node-in 0.45s ease both; }