.routing-relationship {overflow:clip;margin-bottom:20px}
.relationship-header {padding:13px 20px;display:flex;justify-content:space-between;gap:12px;border-bottom:1px solid var(--border);font-size:11px;color:var(--muted)}
.relationship-board {height:640px}
.relationship-columns {position:absolute;top:25px;left:0;right:0;display:grid;grid-template-columns:25% 30% 45%;text-align:center;font-size:11px;letter-spacing:.06em;color:var(--muted);pointer-events:none}
.relationship-labels {position:absolute;top:0;left:0;transform-origin:0 0;pointer-events:none;width:1px;height:1px;will-change:transform}
.relationship-item {position:absolute;transform:translate(25px,-50%);width:210px;min-height:44px;border:0;background:none;color:var(--text);padding:5px 8px;text-align:left;pointer-events:auto;cursor:pointer;border-radius:8px;display:flex;align-items:center;gap:12px;isolation:isolate}
.relationship-copy {position:relative;z-index:1;display:grid;gap:5px;min-width:0;width:100%}.relationship-copy strong {font-size:14px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.relationship-copy>span,.relationship-copy>small {font-size:11px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.relationship-source {transform:translate(-50%,37px);text-align:center;width:200px}.relationship-rule {width:235px}.relationship-rule.is-default {width:200px}
.relationship-exit.topology-node {width:232px;height:84px;transform:translate(-50%,-50%);padding:15px 18px;border-radius:12px;color:var(--panel-text);background:var(--panel-base);z-index:1}
.relationship-card-icon {z-index:1;display:grid;place-items:center;flex:none;width:33px;height:33px;border:1px solid var(--panel-icon-border);border-radius:9px;color:var(--panel-icon);background:var(--panel-icon-base)}
.relationship-exit .relationship-copy>span,.relationship-exit .relationship-copy>small {color:var(--panel-muted)}
.relationship-exit.is-default {border-color:var(--relationship-accent);box-shadow:0 0 0 1px color-mix(in srgb,var(--relationship-accent) 35%,transparent),0 6px 16px -8px var(--relationship-shadow)}
.relationship-item.dimmed .relationship-copy strong {color:var(--muted)}.relationship-item.inactive .relationship-copy strong {text-decoration:line-through;text-decoration-color:var(--muted)}
.relationship-exit.unavailable {border-style:dashed}.relationship-item.selected {outline:1px solid var(--relationship-accent);outline-offset:3px}.relationship-exit.topology-node.selected {border-color:var(--relationship-accent);box-shadow:0 0 0 2px color-mix(in srgb,var(--relationship-accent) 20%,transparent)}
.relationship-tools {position:absolute;top:60px;left:20px;display:flex;align-items:center;gap:3px;padding:5px 7px;border:1px solid var(--border);border-radius:10px;background:var(--surface);box-shadow:0 3px 12px var(--relationship-shadow);cursor:default;z-index:4}
.relationship-tools>span {font-size:11px;color:var(--muted);padding:0 7px;min-width:43px;text-align:center;font-variant-numeric:tabular-nums}
.relationship-tools button,.relationship-close {border:0;background:none;color:var(--muted);width:30px;height:30px;border-radius:6px;display:grid;place-items:center;cursor:pointer}.relationship-tools button:hover,.relationship-close:hover {background:var(--surface-2);color:var(--text)}
.relationship-animation-note {position:absolute;bottom:30px;right:22px;font-size:10px;color:var(--muted);pointer-events:none}
.relationship-inspector {position:absolute;right:18px;top:65px;z-index:5;width:290px;max-height:calc(100% - 145px);overflow:auto;padding:20px;border:1px solid var(--border);border-radius:14px;background:var(--surface);box-shadow:0 12px 45px var(--relationship-shadow);cursor:default;display:flex;flex-direction:column;gap:8px;font-size:12px}
.relationship-close {position:absolute;top:5px;right:5px}.relationship-inspector>small {font-size:10px;color:var(--muted);padding-right:20px}.relationship-inspector>strong {font-size:14px;overflow-wrap:anywhere;padding-right:10px}.relationship-inspector p {margin:4px 0;line-height:1.65;overflow-wrap:anywhere;max-height:100px;overflow:auto;color:var(--muted);font-size:11px}.relationship-summary {padding:8px 0;font-size:11px;color:var(--muted);border-top:1px solid var(--border)}.relationship-inspector-exit {font-size:11px}
.relationship-search {display:flex;align-items:center;gap:7px;margin-top:8px;border:1px solid var(--border);border-radius:7px;padding:7px;color:var(--muted)}.relationship-search input {width:100%;min-width:0;background:none;border:0;outline:none;color:var(--text);font-size:11px}.relationship-search-results {display:flex;flex-direction:column;max-height:260px;overflow:auto;gap:3px}.relationship-search-results>small {color:var(--muted);font-size:10px;padding:5px 0}.relationship-search-results>button {border:0;border-radius:6px;background:none;padding:8px;text-align:left;color:var(--text);font-size:11px;overflow-wrap:anywhere;cursor:pointer}.relationship-search-results>button:hover {background:var(--surface-2)}.relationship-search-results>button small {display:block;font-size:9px;color:var(--muted);margin-top:4px}
.relationship-item:focus-visible,.relationship-tools button:focus-visible,.relationship-board:focus-visible {outline:2px solid var(--relationship-accent);outline-offset:3px}
.relationship-webgl-status {position:absolute;left:20px;top:55px;color:var(--muted);font-size:11px}.relationship-fallback .relationship-labels {transform:scale(.7);transform-origin:0 0}.relationship-fallback .relationship-rule::before,.relationship-fallback .relationship-source::before {content:'';position:absolute;left:-23px;top:15px;width:14px;height:14px;border-radius:50%;background:radial-gradient(circle at 30% 30%,#c4e3f8,#408ecc);border:1px solid var(--relationship-rim)}
@media(max-width:600px){.relationship-header {padding:12px;font-size:10px;flex-direction:column;gap:4px}.relationship-board {height:560px}.relationship-columns {font-size:10px;top:18px}.relationship-tools {left:10px;top:50px;gap:0;padding:4px}.relationship-tools button {width:27px}.relationship-tools>span {padding:0 3px;min-width:36px}.relationship-inspector {right:10px;left:10px;top:auto;bottom:12px;width:auto;max-height:45%;padding:16px}.relationship-animation-note {bottom:65px;right:15px}}
@media(prefers-reduced-motion:reduce){.relationship-item {transition:none}}
.relationship-preview {display:grid;gap:9px;font-size:10px;color:var(--muted)}.relationship-preview>label {display:grid;gap:7px}.relationship-preview input {width:100%;accent-color:var(--relationship-accent)}
.relationship-rule::before {content:'';position:absolute;left:-46px;top:0;width:46px;height:100%;background:transparent}.relationship-source::before {content:'';position:absolute;top:-75px;left:calc(50% - 34px);width:68px;height:68px;background:transparent}
.relationship-back {align-self:flex-start;border:0;background:none;color:var(--relationship-accent);font-size:11px;padding:0 20px 6px 0;cursor:pointer}
.relationship-tools button:disabled {opacity:.4;cursor:default}
.relationship-labels,.relationship-columns,.relationship-animation-note {z-index:1}
.relationship-board>canvas {z-index:1}
.relationship-item.selected:not(.relationship-exit) {outline:none}
.relationship-item.selected:not(.relationship-exit) .relationship-copy strong {color:#366f94}
.theme-dark .relationship-item.selected:not(.relationship-exit) .relationship-copy strong {color:#b0d0e1}
.relationship-item.selected:not(.relationship-exit):focus-visible {outline:2px solid var(--relationship-accent);outline-offset:3px}
.relationship-pack-caption {width:170px;text-align:center;transform:translate(-70%,calc(-100% - 28px))}
.relationship-pack-caption::before {left:calc(70% - 30px);top:calc(100% + 4px);width:60px;height:60px}
@media(min-width:601px){.relationship-category-caption {transform:translate(-115%,calc(-100% - 28px))}.relationship-category-caption::before {left:calc(115% - 30px)}}
@media(max-width:600px){.relationship-board:has(.relationship-pack-caption.selected) .relationship-rule.is-default .relationship-copy {visibility:hidden}}
.theme-dark .routing-relationship .relationship-exit.topology-node {--panel-base:#253643;--panel-center:#1c2b36;--panel-light:#354c5c;--panel-cover-strength:.11;--panel-rim:#97b9cb;--panel-edge:#678fa5;--panel-edge-strength:.36;--panel-inner-halo:5px;--panel-outline:#526e82;--panel-side:#324653;--panel-side-thickness:1px;--panel-radius:10px;border-radius:10px;box-shadow:0 5px 12px -8px rgba(1,8,15,.65)}
.relationship-exit::after {content:'';position:absolute;right:-11px;top:calc(50% - 16px);width:30px;height:32px;background:radial-gradient(ellipse,rgba(152,191,211,.21),transparent 70%);pointer-events:none;z-index:0}
.theme-dark .relationship-exit::after {background:radial-gradient(ellipse,rgba(159,197,215,.28),transparent 70%)}
/* Reference scene: thin glass exits, compact details, and room for the luminous fan. */
.relationship-exit.topology-node {width:220px;height:72px;padding:11px 15px;border-radius:8px;background:linear-gradient(165deg,#f1f6f6,#e2ecee 57%,#dbe7e8);box-shadow:0 4px 13px -9px rgba(34,65,74,.3)}
.relationship-card-icon {width:26px;height:26px;border-radius:5px;background:transparent;border-color:rgba(111,161,170,.24)}
.relationship-exit .relationship-copy {gap:3px}.relationship-exit .relationship-copy>small {font-size:10px}
.routing-relationship .relationship-exit .topology-node-material {background:radial-gradient(ellipse at 36% 3%,rgba(173,220,218,.11),transparent 60%),linear-gradient(160deg,rgba(192,222,218,.08),transparent 42%,rgba(0,0,0,.16));box-shadow:inset 0 1px 0 rgba(200,226,224,.24),inset 0 -1px 0 rgba(0,0,0,.3)}
.theme-dark .routing-relationship .relationship-exit.topology-node {--panel-base:#10282b;--panel-center:#0b1a20;--panel-light:#254047;--panel-cover-strength:.04;--panel-rim:#8fa9a8;--panel-edge:#547c80;--panel-edge-strength:.22;--panel-inner-halo:2px;--panel-outline:#365256;--panel-side:#172c31;--panel-side-thickness:1px;--panel-radius:8px;background:linear-gradient(160deg,#183134,#0d2127 58%,#0a191f);border-radius:8px;box-shadow:0 5px 15px -9px rgba(0,0,0,.7)}
.routing-relationship .relationship-exit.is-default,.routing-relationship .relationship-exit.selected {outline:none;border-color:#b3b19c;box-shadow:inset 0 0 0 1px rgba(204,197,157,.23),0 0 14px -8px rgba(204,205,170,.30)}
.relationship-exit::after {right:-20px;top:calc(50% - 18px);width:42px;height:36px;background:radial-gradient(ellipse,rgba(194,188,141,.26),transparent 68%)}
.theme-dark .relationship-exit::after {background:radial-gradient(ellipse,rgba(228,222,178,.55),rgba(173,215,211,.12) 36%,transparent 72%)}
.relationship-inspector {width:250px;top:80px;max-height:calc(100% - 170px);padding:15px;border-radius:10px;gap:6px;box-shadow:0 10px 30px rgba(0,0,0,.12);background:color-mix(in srgb,var(--surface) 94%,transparent);backdrop-filter:blur(12px)}
.relationship-search-results {max-height:160px}.relationship-search-results>button {padding:6px 7px}.relationship-summary {padding:6px 0}
.relationship-copy strong {font-weight:500}.relationship-source .relationship-copy strong,.relationship-pack-caption .relationship-copy strong {font-weight:600}
@media(max-width:600px){.relationship-inspector {top:auto;bottom:12px;left:10px;right:10px;width:auto;max-height:38%;padding:12px}.relationship-search-results {max-height:100px}}

@media(min-width:601px){.relationship-category-caption {transform:translate(-50%,calc(-100% - 40px))}.relationship-category-caption::before {left:calc(50% - 30px);top:calc(100% + 12px)}}

/* Secondary information stays legible when the camera fits a larger branch. */
.relationship-labels {--relationship-view-scale:1}
.relationship-copy strong {font-size:max(14px,calc(11px / var(--relationship-view-scale)))}
.relationship-copy>span,.relationship-copy>small,.relationship-exit .relationship-copy>small {font-size:max(11px,calc(10px / var(--relationship-view-scale)))}
.relationship-copy {gap:3px}.relationship-exit .relationship-copy {gap:2px}
.relationship-item:disabled {cursor:default;pointer-events:none}

.relationship-exit.topology-node {padding-top:6px;padding-bottom:6px}.relationship-copy {line-height:1.12}

@media(min-width:601px){.relationship-board:has(.relationship-category-caption.selected) .relationship-rule.is-default {transform:translate(25px,calc(-100% - 16px))}}
/* Explicit borders restore the card rim after the generic graph button's border:0. */
.routing-relationship .relationship-exit.topology-node {border-width:1px;border-style:solid}
.routing-relationship .relationship-exit.topology-node:not(.is-default):not(.selected) {border-color:var(--panel-outline)}
.routing-relationship .relationship-exit.topology-node.unavailable {border-style:dashed}
.routing-relationship .relationship-exit.topology-node.selected {outline:none;border-color:#4d92a9;--panel-rim:#7cb9c9;--panel-edge:#73aab9;--panel-edge-strength:.44;box-shadow:inset 0 0 0 1px rgba(110,187,207,.24),0 4px 12px -9px var(--relationship-shadow)}
.theme-dark .routing-relationship .relationship-exit.topology-node.selected {border-color:#9dccd7;--panel-rim:#b4dce3;--panel-edge:#8bbecb;--panel-edge-strength:.44;box-shadow:inset 0 0 0 1px rgba(161,215,228,.24),0 4px 12px -9px rgba(0,0,0,.55)}
.routing-relationship .relationship-exit.topology-node.selected::after {background:radial-gradient(ellipse,rgba(166,220,229,.45),rgba(134,194,211,.10) 36%,transparent 72%)}