/*
 * sd-graph.css — shared topology / node-link primitive (Doc 31 §J).
 * Pairs with sd-graph.js. No hex.
 */

.lp-graph {
    background: var(--lp-pane-amber-50);
}

.lp-graph-svg {
    width: 100%;
    height: 320px;
    display: block;
    color: var(--lp-pane-amber-900);
}

.lp-graph-edge {
    pointer-events: stroke;
}

.lp-graph-node rect {
    fill: var(--lp-pane-bg);
    stroke: var(--lp-pane-amber-700);
    stroke-width: 0.3;
}

.lp-graph-node text {
    fill: var(--lp-pane-amber-900);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 1.6px;
    dominant-baseline: middle;
}

.lp-graph-node {
    cursor: pointer;
    transition: filter 100ms ease;
}

.lp-graph-node:hover rect,
.lp-graph-node:focus-visible rect {
    fill: var(--lp-pane-amber-100);
    stroke-width: 0.5;
    outline: none;
}

.lp-graph-node--anomaly rect {
    stroke: var(--lp-pane-status-critical-ink);
    stroke-width: 0.5;
}

.lp-graph-node-icon { color: var(--lp-pane-amber-900); }

.lp-graph-caption {
    font-size: 11px;
    color: var(--lp-pane-ink-faint);
    font-style: italic;
    text-align: center;
    margin-top: 6px;
    padding: 0 var(--lp-pane-pad-x);
}

@container (max-width: 520px) {
    .lp-graph-svg { height: 240px; }
}

@media (max-width: 520px) {
    .lp-graph-svg { height: 240px; }
}