/* ───── SVG Container ───── */
#lp-svg {
    width: 70%;
    max-width: 70%;
    display: block;
    margin: auto;
}

/* ───── SVG styles ───── */
.node-group {
    cursor: pointer;
    outline: none;
}

.node-rect {
    rx: 0;
    ry: 0;
    stroke-width: 0;
    transition: all 0.3s ease;
    transform-origin: center;
    transform-box: fill-box;
}

.node-label {
    font-size: 12px;
    fill: #fff;
    pointer-events: none;
    text-anchor: start;
    dominant-baseline: central;
    transition: opacity 0.3s ease;
}

.node-code {
    font-size: 11px;
    fill: #fff;
    pointer-events: none;
    text-anchor: start;
    opacity: 0.85;
    transition: opacity 0.3s ease;
}

.node-days {
    font-size: 11px;
    fill: #fff;
    pointer-events: none;
    text-anchor: end;
    opacity: 0.85;
    transition: opacity 0.3s ease;
}

.edge {
    fill: none;
    stroke-width: 2;
    stroke: #ddd;
    transition: all 0.3s ease;
}

/* Level-specific colours – From lighter to darker, ending with #095c93 */
.level-1 .node-rect {
    fill: #1a8fcf;
    stroke: none;
}

.level-2 .node-rect {
    fill: #0f76b1;
    stroke: none;
}

.level-3 .node-rect {
    fill: #095c93;
    stroke: none;
}

/* Hover & focus highlight */
.node-group:hover .node-rect,
.node-group:focus-visible .node-rect {
    filter: brightness(1.15);
}

.node-group:focus-visible .node-rect {
    outline: 2px solid #095c93;
    outline-offset: 2px;
}

/* Dimmed state when another node is hovered */
svg.has-hover .node-group.dimmed .node-rect {
    opacity: 0.3;
}

svg.has-hover .node-group.dimmed .node-label {
    opacity: 0.3;
}

svg.has-hover .node-group.dimmed .node-code {
    opacity: 0.3;
}

svg.has-hover .node-group.dimmed .node-days {
    opacity: 0.3;
}

svg.has-hover .edge.dimmed {
    opacity: 0.15;
}

svg.has-hover .edge.highlighted {
    stroke-width: 3;
    opacity: 1;
}

    svg.has-hover .edge.highlighted.level-1-2 {
        stroke: #1a8fcf;
    }

    svg.has-hover .edge.highlighted.level-2-3 {
        stroke: #0f76b1;
    }

/* Tooltip */
.tooltip {
    position: fixed;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 0.75rem 1rem;
    color: #333;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s ease;
    z-index: 1000;
    max-width: 250px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

    .tooltip.visible {
        opacity: 1;
    }