/* ============ 因果链图（#causalWrap） ============ */
/* 纸面古典风：复用 base.css 的变量与 .chip；整图高度按节点数自适应，正常文档流滚动 */

.causal-wrap[hidden] { display: none; }
.causal-wrap { margin-top: 6px; }

/* 顶部链筛选 chips 行 */
.cz-chips {
  display: flex; gap: 6px; flex-wrap: wrap;
  margin-bottom: 10px;
}
.cz-chip { display: inline-flex; align-items: center; gap: 6px; }
.cz-chip i {
  width: 8px; height: 8px; border-radius: 2px; transform: rotate(45deg);
  flex: none; display: inline-block;
}
.cz-chip.on i { box-shadow: 0 0 0 1px rgba(246,239,224,.6); }

/* 一句话剧透条 */
.cz-spoiler {
  font-size: 13px; line-height: 1.7; color: var(--ink-soft);
  background: rgba(255,252,242,.7); border: 1px solid var(--line);
  border-left: 3px solid var(--gold); border-radius: 8px;
  padding: 9px 14px; margin-bottom: 14px;
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
}
.cz-spoiler i {
  width: 9px; height: 9px; border-radius: 2px; transform: rotate(45deg);
  flex: none; align-self: center;
}
.cz-spoiler b { color: var(--ink); font-weight: 700; letter-spacing: .04em; }
.cz-spoiler .cz-sp-hint { color: var(--ink-faint); }

/* 画布：DOM 节点层 + 同尺寸 SVG 边层 */
.cz-stage {
  position: relative; width: 100%;
  border: 1px solid var(--line); border-radius: 12px;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255,252,240,.5), transparent 60%),
    rgba(255,252,242,.4);
  overflow: hidden;
}
.cz-svg { position: absolute; inset: 0; pointer-events: none; }
.cz-nodes { position: absolute; inset: 0; }

/* SVG 边 */
.cz-edge {
  stroke-width: 1.6; opacity: .82;
  pointer-events: stroke; cursor: help;
  transition: opacity .25s, stroke-width .2s;
}
.cz-edge:hover { stroke-width: 2.8; opacity: 1; }
.cz-edge.dim { opacity: .08; }

/* 迷你卡节点 */
.cz-node {
  position: absolute;
  font-family: var(--serif); text-align: left; cursor: pointer;
  background: var(--paper); color: var(--ink);
  border: 1px solid var(--line); border-radius: 9px;
  padding: 8px 12px 9px; box-sizing: border-box;
  box-shadow: 0 1px 3px rgba(60,45,20,.1);
  transition: transform .18s, box-shadow .18s, opacity .25s, border-color .18s;
  display: flex; flex-direction: column; gap: 2px;
  z-index: 2;
}
.cz-node:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 16px rgba(60,45,20,.22);
  border-color: var(--ink-faint);
  z-index: 5;
}
.cz-node .cz-y {
  font-size: 11px; color: var(--ink-faint); letter-spacing: .02em;
  font-family: Georgia, var(--serif);
}
.cz-node .cz-t {
  font-size: 13.5px; font-weight: 700; line-height: 1.25; color: var(--ink);
  letter-spacing: .02em;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.cz-node .cz-dot {
  position: absolute; top: 9px; right: 10px;
  width: 9px; height: 9px; border-radius: 50%;
  box-shadow: 0 0 0 2px var(--paper);
}

/* 淡化与高亮态 */
.cz-node.dim { opacity: .28; }
.cz-node.dim:hover { opacity: .55; }
.cz-node.sel {
  border-color: var(--vermilion);
  box-shadow: 0 0 0 2px rgba(169,50,38,.25), 0 6px 16px rgba(60,45,20,.22);
}

/* 边 label 浮层 */
.cz-tip {
  position: absolute; z-index: 20; max-width: 240px;
  font-size: 12px; line-height: 1.5; color: var(--ink);
  background: var(--paper); border: 1px solid var(--ink-faint); border-radius: 7px;
  padding: 6px 10px; box-shadow: 0 4px 14px rgba(60,45,20,.25);
  pointer-events: none;
  display: flex; align-items: baseline; gap: 7px;
}
.cz-tip i {
  width: 8px; height: 8px; border-radius: 2px; transform: rotate(45deg);
  flex: none; align-self: center;
}
.cz-tip[hidden] { display: none; }

/* 数据缺失占位 */
.cz-empty {
  padding: 60px 20px; text-align: center;
  font-size: 14px; color: var(--ink-faint); line-height: 1.9;
  border: 1px dashed var(--line); border-radius: 12px;
  background: rgba(255,252,242,.4);
}

@media (max-width: 760px) {
  .cz-spoiler { font-size: 12.5px; }
  .cz-node .cz-t { font-size: 12.5px; }
}