.record-relationships-panel { display:flex; flex-direction:column; min-height:0; overflow:auto; padding:0 8px; }
.relationships-header { display:flex; justify-content:space-between; align-items:center; gap:16px; margin-bottom:16px; }
.relationships-header h3 { margin:0; font-size:var(--text-md); font-weight:500; }
.relationships-header p { margin:6px 0 0; font-size:var(--text-xs); line-height:18px; color:var(--subtle); }
.relationships-controls { display:flex; flex-shrink:0; gap:4px; }
.relationship-control { min-height:32px; min-width:32px; padding:6px 10px; border:1px solid var(--line); border-radius:6px; background:var(--canvas); color:var(--ink); font:inherit; font-size:var(--text-xs); cursor:pointer; }
.relationship-control:hover:not(:disabled) { background:var(--surface-2); }
.relationship-control:disabled { opacity:.4; cursor:default; }
.relationships-workspace { display:grid; grid-template-columns:minmax(0,1fr) 280px; flex:1; min-height:320px; gap:16px; }
.relationships-viewport { display:flex; align-items:center; justify-content:center; overflow:auto; min-width:0; border:1px solid var(--line); border-radius:10px; background-color:var(--canvas); background-image:radial-gradient(var(--line) 1px,transparent 1px); background-size:24px 24px; }
.relationships-canvas { position:relative; width:1000px; height:640px; flex-shrink:0; transform-origin:center; }
.relationship-edges { position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.relationship-edges line { stroke:var(--brand-color); stroke-width:2; opacity:.65; }
.relationship-edges marker path { fill:none; stroke:var(--brand-color); stroke-width:1.5; }
.relationship-node { position:absolute; transform:translate(-50%,-50%); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; min-width:180px; max-width:240px; padding:16px 20px; border:1px solid var(--line); border-radius:10px; background:var(--canvas); color:var(--ink); font:inherit; text-align:center; cursor:pointer; box-shadow:0 2px 8px rgb(32 33 39 / .04); transition:border-color 140ms ease,background-color 140ms ease; }
.relationship-node:hover { border-color:var(--brand-color); background:var(--surface-1); }
.relationship-node[aria-pressed="true"] { border-color:var(--brand-color); box-shadow:0 0 0 3px color-mix(in srgb,var(--brand-color) 10%,transparent); }
.relationship-node strong { font-size:var(--text-sm); font-weight:500; white-space:nowrap; }
.relationship-node-caption { font-size:var(--text-xs); line-height:18px; color:var(--subtle); }
.relationship-node-icon { display:grid; place-items:center; width:40px; height:40px; border-radius:50%; background:var(--surface-4); color:var(--brand-color); font-size:var(--text-sm); font-weight:500; }
.relationship-phone .relationship-node-icon { border-radius:8px; }
.relationship-node-icon svg { width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.relationship-detail { overflow:auto; padding:20px; border:1px solid var(--line); border-radius:10px; background:var(--canvas); }
.relationship-detail-label { font-size:var(--text-xs); color:var(--subtle); }
.relationship-detail h3 { margin:8px 0; font-size:var(--text-md); font-weight:500; overflow-wrap:anywhere; }
.relationship-detail h4 { margin:24px 0 12px; font-size:var(--text-xs); font-weight:500; }
.relationship-detail-subtitle,.relationship-detail-note { font-size:var(--text-xs); line-height:18px; color:var(--subtle); }
.relationship-source { display:flex; flex-direction:column; gap:6px; padding:12px; margin-bottom:8px; border:1px solid transparent; border-radius:6px; background:var(--surface-1); font-size:var(--text-xs); line-height:18px; }
.relationship-source:hover { border-color:var(--line); background:var(--surface-2); }
.relationship-source strong { font-weight:500; }
.relationship-source span { color:var(--subtle); }
.relationship-source .relationship-current { color:var(--brand-color); }
.relationship-legend { display:flex; flex-wrap:wrap; justify-content:center; gap:20px; padding:16px; font-size:var(--text-xs); color:var(--subtle); }
@media(max-width:1000px) { .relationships-workspace { grid-template-columns:minmax(0,1fr); } .relationships-viewport { min-height:400px; } .relationship-detail { max-height:260px; } }
@media(prefers-reduced-motion:reduce) { .relationship-node { transition:none; } }

/* Structured network canvas with shared endpoints and inspectable edges. */
.relationships-scope-bar { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:16px; }
.relationship-scope-caption { color:var(--subtle); font-size:var(--text-xs); }
.relationships-workspace { min-height:420px; grid-template-columns:minmax(0,1fr) 300px; }
.relationships-viewport { display:block; position:relative; background-color:var(--surface-1); padding:20px; }
.relationships-stage { position:relative; margin:0 auto; }
.relationships-canvas { transform-origin:top left; }
.relationship-column-label { position:absolute; top:32px; transform:translateX(-50%); font-size:var(--text-xs); letter-spacing:.6px; color:var(--subtle); }
.relationship-node { flex-direction:row; justify-content:flex-start; gap:12px; width:232px; min-height:76px; padding:14px; text-align:left; }
.relationship-node-icon { width:36px; height:36px; flex-shrink:0; }
.relationship-node-text { display:flex; flex-direction:column; gap:4px; min-width:0; }
.relationship-node strong { font-size:var(--text-xs); }
.relationship-node.is-current::after { content:""; position:absolute; right:10px; top:10px; width:5px; height:5px; border-radius:50%; background:var(--brand-color); }
.relationship-node.is-muted { opacity:.55; }
.relationship-edge { fill:none; stroke:var(--line); stroke-width:2; }
.relationship-edge.is-active { stroke:var(--brand-color); }
.relationship-edge.is-muted { opacity:.45; }
.relationship-edge-label { position:absolute; transform:translate(-50%,-50%); min-height:28px; padding:4px 8px; border:1px solid var(--line); border-radius:5px; background:var(--canvas); color:var(--subtle); font:inherit; font-size:var(--text-xs); cursor:pointer; }
.relationship-edge-label:hover,.relationship-edge-label[aria-pressed="true"] { color:var(--brand-color); border-color:var(--brand-color); }
.relationship-origin { display:inline-flex; padding:4px 8px; border:1px solid var(--line); border-radius:4px; color:var(--muted); font-size:var(--text-xs); }
.relationship-detail h4 { padding-top:16px; border-top:1px solid var(--line); }
.relationship-source[aria-current="page"] { border-color:color-mix(in srgb,var(--brand-color) 20%,var(--line)); background:var(--surface-4); }
@media(max-width:1000px) { .relationships-workspace { grid-template-columns:minmax(0,1fr); } .relationships-scope-bar { flex-wrap:wrap; } }

/* The selected phone number is the hub; detainees sit around it. */
.relationship-phone { width:260px; max-width:260px; min-height:110px; border-color:var(--brand-color); background:var(--canvas); }
.relationship-phone .relationship-node-icon { width:44px; height:44px; }
.relationship-phone strong { font-size:var(--text-sm); }
.relationship-phone .relationship-node-text { gap:6px; }
.relationships-viewport { overscroll-behavior:contain; }

/* Organic network: compact icons, external labels, and thin source connections. */
.relationships-scope-bar { justify-content:flex-start; flex-wrap:wrap; }
.relationship-search { min-width:180px; flex:1; max-width:300px; min-height:38px; padding:8px 12px; border:1px solid var(--line); border-radius:6px; background:var(--canvas); color:var(--ink); font:inherit; font-size:var(--text-xs); }
.relationships-scope-bar .relationship-scope-caption { margin-left:auto; }
.relationship-node { display:block; width:160px; min-width:0; max-width:160px; min-height:0; height:48px; padding:0; border:0; border-radius:0; background:transparent; box-shadow:none; text-align:center; }
.relationship-node-icon { width:44px; height:44px; margin:0 auto; border:1px solid color-mix(in srgb,var(--brand-color) 20%,var(--line)); background:var(--canvas); }
.relationship-node-text { position:absolute; top:54px; left:50%; transform:translateX(-50%); gap:3px; width:max-content; max-width:180px; padding:4px 7px; border-radius:4px; background:var(--surface-1); }
.relationship-node strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.relationship-node:hover { background:transparent; border:0; }
.relationship-node:hover .relationship-node-icon,.relationship-node[aria-pressed="true"] .relationship-node-icon,.relationship-node.is-search-match .relationship-node-icon { border-color:var(--brand-color); background:var(--surface-4); box-shadow:0 0 0 4px color-mix(in srgb,var(--brand-color) 10%,transparent); }
.relationship-node[aria-pressed="true"] { border:0; box-shadow:none; }
.relationship-node.is-current::after { display:none; }
.relationship-phone { width:160px; max-width:160px; min-height:0; background:transparent; }
.relationship-phone .relationship-node-icon { width:44px; height:44px; border-radius:10px; color:var(--muted); }
.relationship-node.is-hub { height:60px; }
.relationship-node.is-hub .relationship-node-icon { width:60px; height:60px; border-color:var(--brand-color); color:var(--brand-color); background:var(--surface-4); }
.relationship-node.is-hub .relationship-node-text { top:66px; }
.relationship-phone strong { font-size:var(--text-xs); }
.relationship-edge { stroke:var(--subtle); stroke-width:1; opacity:.45; }
.relationship-edge.is-active { stroke:var(--brand-color); stroke-width:1.5; opacity:1; }
.relationship-edge-label { min-height:24px; padding:2px 6px; font-size:var(--text-xs); background:var(--surface-1); border-color:transparent; }
.relationship-node.is-muted { opacity:.7; }
.relationships-viewport { cursor:grab; }
.relationships-viewport.is-panning { cursor:grabbing; user-select:none; }
.relationships-viewport button { cursor:pointer; }

/* Zoom stays anchored to the canvas while the network pans underneath. */
.relationships-graph-surface { position:relative; display:flex; min-width:0; min-height:0; }
.relationships-graph-surface > .relationships-viewport { width:100%; flex:1; }
.relationships-graph-surface > .relationships-controls { position:absolute; right:16px; bottom:16px; z-index:2; flex-direction:column; align-items:center; gap:8px; }
.relationships-graph-surface .relationship-control { width:40px; height:40px; padding:0; border-radius:8px; box-shadow:0 2px 8px rgb(32 33 39 / .06); }
.relationships-graph-surface .relationship-control:first-child,
.relationships-graph-surface .relationship-control:nth-child(2) { font-size:var(--text-xl); }

/* Reserve separate inner and outer rings, and inspect edge counts on selection. */
.relationship-node-text { max-width:200px; }
.relationship-node:not(.is-hub) .relationship-node-text { top:52px; }
.relationship-node:not(.is-hub) .relationship-node-caption { font-size:var(--text-xs); }
.relationship-edge.is-muted { opacity:.16; }
.relationship-edge-hit { fill:none; stroke:transparent; stroke-width:14px; pointer-events:stroke; cursor:pointer; }
.relationship-edge-label { z-index:2; border-color:var(--line); background:var(--canvas); }
.relationship-node { z-index:3; }

.relationship-alert-badge { position:absolute; left:calc(50% + 12px); top:-6px; display:grid; place-items:center; min-width:20px; height:20px; padding:0 4px; border:2px solid var(--surface-1); border-radius:50%; background:#fff0cd; color:#785400; font-size:var(--text-xs); font-weight:600; }
.relationship-node.is-hub .relationship-alert-badge { left:calc(50% + 20px); }
.relationship-alert-card { margin-bottom:8px; border:1px solid var(--line); border-radius:6px; background:var(--canvas); overflow:hidden; }
.relationship-alert-card > summary { display:flex; align-items:center; gap:8px; min-height:40px; padding:10px; color:var(--ink); font-size:var(--text-xs); font-weight:500; cursor:pointer; list-style:none; }
.relationship-alert-card > summary::-webkit-details-marker { display:none; }
.relationship-alert-symbol { display:grid; place-items:center; width:18px; height:18px; flex-shrink:0; border-radius:4px; background:#fff0cd; color:#785400; }
.relationship-alert-chevron { margin-left:auto; color:var(--subtle); transition:transform 140ms ease; }
.relationship-alert-card[open] .relationship-alert-chevron { transform:rotate(90deg); }
.relationship-alert-content { padding:0 12px 12px; font-size:var(--text-xs); line-height:18px; }
.relationship-alert-content p { color:var(--subtle); margin:0 0 12px; }
.relationship-demo-label { display:block; margin-bottom:10px; color:var(--subtle); }
.relationship-alert-evidence { display:flex; flex-direction:column; gap:4px; padding:10px; margin-top:8px; border-radius:4px; background:var(--surface-1); color:var(--subtle); }
.relationship-alert-evidence blockquote { margin:0 0 8px; color:var(--ink); line-height:20px; }
.relationship-alert-source { color:var(--brand-color); }
.relationship-alert-source:hover { text-decoration:underline; }
@media(prefers-reduced-motion:reduce) { .relationship-alert-chevron { transition:none; } }