.sl-overlay {
    position: fixed;
    inset: 0;
    z-index: 70;
    display: none;
}

.sl-overlay.sl-open {
    display: block;
}

.sl-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(3, 7, 18, 0.82);
    backdrop-filter: blur(2px);
}

.sl-window {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 16px;
}

.sl-tablet {
    background: #181c28;
    border-radius: 24px;
    padding: 36px 18px 52px;
    position: relative;
    height: min(95vh, 1040px);
    width: auto;
    aspect-ratio: 960 / 916;
    max-width: 97vw;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    box-shadow:
        0 0 0 1px #0a0d15,
        0 0 0 3px #242838,
        0 16px 48px rgba(0, 0, 0, 0.8),
        inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

/* Camera dot */
.sl-tablet::before {
    content: '';
    position: absolute;
    top: 15px;
    left: 50%;
    transform: translateX(-50%);
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #0e1120;
    box-shadow: 0 0 0 1px #2a3050, inset 0 0 3px rgba(100, 140, 255, 0.15);
}

/* Home bar */
.sl-tablet::after {
    content: '';
    position: absolute;
    bottom: 18px;
    left: 50%;
    transform: translateX(-50%);
    width: 52px;
    height: 5px;
    border-radius: 3px;
    background: #242838;
}

.sl-tablet-screen {
    background: #080d18;
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid #0f1525;
    box-shadow:
        inset 0 0 24px rgba(0, 0, 0, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.02);
    flex: 1;
    min-height: 0;
    display: flex;
    align-items: stretch;
    position: relative;
}

.sl-hint {
    position: absolute;
    right: 10px;
    bottom: 10px;
    max-width: 190px;
    padding: 6px 9px;
    background: rgba(8, 13, 24, 0.88);
    border: 1px solid #1f2a40;
    border-radius: 5px;
    color: #7a8aa5;
    font-family: monospace;
    font-size: 10px;
    line-height: 1.4;
    pointer-events: none;
    z-index: 1;
}

.sl-close {
    position: absolute;
    top: 10px;
    right: 12px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: none;
    background: #242838;
    color: #6a7a9a;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
    box-shadow: 0 0 0 1px #0a0d15;
    transition: background 0.15s, color 0.15s;
}

.sl-close:hover {
    background: #2e3450;
    color: #c0cce0;
}

.sl-diagram {
    display: block;
    width: 100%;
    height: 100%;
}

.sl-flow-lane {
    stroke: rgba(74, 100, 130, 0.6);
    stroke-width: 2;
    stroke-dasharray: 6 6;
    fill: none;
    animation: sl-flow 3s linear infinite;
    transition: opacity 0.15s ease, stroke-width 0.15s ease;
}

/* Identity-dependency lanes (kind: 'identity' in CONNECTIONS): dotted and
   slightly thinner, so AD authentication dependency reads differently from
   data/operational flow. The 2+6 dash period divides the shared -24
   dash-offset loop, so the flow animation still cycles without jumping.
   Hover emphasis and dimming still apply. */
.sl-flow-lane.sl-flow-identity {
    stroke-dasharray: 2 6;
    stroke-width: 1.6;
}

.sl-flow-lane.sl-flow-lane-active {
    stroke-width: 3;
    opacity: 1;
}

.sl-flow-lane.sl-flow-lane-dimmed {
    opacity: 0.15;
}

@keyframes sl-flow {
    to {
        stroke-dashoffset: -24;
    }
}

.sl-node {
    cursor: pointer;
    transition: filter 0.15s ease, opacity 0.15s ease;
}

/* While a node is hovered, every node that is not the hovered node or one
   of its direct neighbors fades back, matching the lane dimming, so the
   hovered system's connections stand out as a group. */
.sl-node.sl-node-dimmed {
    opacity: 0.3;
}

/* A glow instead of a scale transform: scaling grew the node's box past
   its own edges, which are exactly where connection lines terminate, so
   the enlarged box painted over the arrowheads it should be highlighting.
   The glow and thicker border give the same "this is hovered" feedback
   without moving the box's actual edges. */
.sl-node:hover {
    filter: drop-shadow(0 0 5px rgba(140, 200, 255, 0.65));
}

.sl-node:hover rect {
    stroke-width: 3;
}

@media (prefers-reduced-motion: reduce) {
    .sl-flow-lane {
        animation: none;
    }

    .sl-node {
        transition: none;
    }
}