.causal-graph-viewer[hidden], .causal-graph-viewer [hidden] { display: none !important; }
.causal-graph-viewer { min-width: 0; border: 1px solid #d3ddd2; border-radius: 14px; padding: 18px; background: #fcfdf9; display: grid; gap: 12px; scroll-margin-top: 12px; }
.causal-graph-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.causal-graph-heading h4 { margin: 0; font-size: 19px; }
.causal-graph-viewer p { margin: 0; line-height: 1.65; overflow-wrap: anywhere; }
.causal-graph-controls { display: flex; align-items: end; flex-wrap: wrap; gap: 8px; }
.causal-graph-controls label { display: grid; gap: 5px; font-size: 12px; }
.causal-graph-controls select { min-width: 160px; max-width: 300px; margin: 0; }
.causal-graph-controls .causal-graph-proposals { display: flex; gap: 7px; align-items: center; padding: 10px 2px; }
.causal-graph-proposals input { width: auto; margin: 0; }
.causal-graph-controls button { font-size: 12px; padding: 9px 10px; }
.causal-graph-zoom { font-size: 12px; padding: 10px 1px; min-width: 35px; text-align: center; font-variant-numeric: tabular-nums; }
.causal-graph-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 11px; color: #4f6255; }
.causal-graph-key { display: inline-flex; align-items: center; gap: 5px; }
.causal-graph-key::before { content: ''; width: 10px; height: 10px; border: 1px solid #9eaf9f; border-radius: 3px; background: #fff; }
.causal-graph-key.exposure::before { background: #e8f1e9; }
.causal-graph-key.outcome::before { background: #e9eff7; }
.causal-graph-key.control::before { background: #fff1d9; }
.causal-graph-key.risk::before { border: 2px solid #aa651c; }
.causal-graph-notice { color: #53634f; }
.causal-graph-canvas { min-width: 0; overflow: hidden; border: 1px solid #dce3d9; border-radius: 10px; background-color: #f8faf5; background-image: radial-gradient(#dbe3d7 .8px, transparent .8px); background-size: 18px 18px; }
.causal-graph-canvas svg { display: block; width: 100%; height: 360px; cursor: grab; touch-action: none; user-select: none; }
.causal-graph-canvas.is-panning svg { cursor: grabbing; }
.causal-graph-node, .causal-graph-edge { cursor: pointer; outline: none; }
.causal-graph-node:focus rect, .causal-graph-node.is-selected rect { stroke: #234c39; stroke-width: 3.5px; }
.causal-graph-edge:focus .causal-graph-edge-line, .causal-graph-edge.is-selected .causal-graph-edge-line { stroke: #234c39; stroke-width: 3.5px; }
.causal-graph-detail { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 14px; min-width: 0; background: #f0f4ed; border-radius: 9px; }
.causal-graph-detail > h5, .causal-graph-detail > p { flex: 1 1 100%; margin: 0; }
.causal-graph-detail > h5 { font-size: 14px; }
.causal-graph-detail button, .causal-graph-risks button { font-size: 12px; padding: 7px 9px; }
.causal-graph-risks { display: flex; flex-wrap: wrap; gap: 8px; }
.causal-graph-risk-explanation { flex: 1 1 100%; padding: 11px 13px; border-left: 3px solid #ad7730; border-radius: 5px; background: #fff5e2; font-size: 13px; }
.causal-graph-other-risks { flex: 1 1 100%; min-width: 0; font-size: 12px; }
.causal-graph-other-risks summary { cursor: pointer; font-weight: 550; color: #77603c; }
.causal-graph-other-risks > div { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px; padding: 10px; border: 1px solid #e6ddc9; border-radius: 7px; background: #fffdf8; }
.causal-graph-other-risks p { flex: 1 1 100%; }
.causal-graph-relations { min-width: 0; font-size: 13px; }
.causal-graph-relations summary { cursor: pointer; color: #496451; }
.causal-graph-relation { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding-top: 8px; }
.causal-graph-relation button { padding: 5px 9px; font-size: 12px; }
.causal-graph-empty:empty, .causal-graph-risks:empty { display: none; }
@media (max-width: 600px) {
  .causal-graph-viewer { padding: 12px; gap: 12px; }
  .causal-graph-heading h4 { font-size: 17px; }
  .causal-graph-controls > label:first-child { flex: 1 1 100%; }
  .causal-graph-controls select { width: 100%; max-width: 100%; }
  .causal-graph-controls .causal-graph-proposals { flex: 1 1 100%; }
  .causal-graph-controls button { flex: 1 1 auto; }
  .causal-graph-canvas svg { height: 300px; }
  .causal-graph-detail { padding: 11px; }
}