.borderbottom {
border-bottom: 1px dotted gray;
}

#networkLayoutGraphDiv0 {
padding-left: 200px;
}

.center-div
{
margin: 10px auto;
border-radius: 0px;
}

/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 400px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content */
.modal-content {
    position: relative;
    background-color: #fefefe;
    margin: auto;
    padding: 0;
    border: 1px solid #888;
    width: 80%;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,1.19);
    -webkit-animation-name: animatetop;
    -webkit-animation-duration: 0.4s;
    animation-name: animatetop;
    animation-duration: 0.4s
}

/* Add Animation */
@-webkit-keyframes animatetop {
    from {top:-300px; opacity:0} 
    to {top:0; opacity:1}
}

@keyframes animatetop {
    from {top:-300px; opacity:0}
    to {top:0; opacity:1}
}

/* The Close Button */
.close {
    color: white;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}

.modal-header {
    padding: 2px 16px;
    background-color: #7a7a7a;
    color: white;
}

.modal-body {padding: 2px 16px;}

.modal-footer {
    padding: 2px 16px;
    background-color: #7a7a7a;
    color: white;
}

/* ====================================================================
   Bridge dialog — focused D3 sub-graph of one surprising bridge
   ==================================================================== */
#bridgeDialog { font-family: 'Inter', system-ui, sans-serif; }

.bridge-meta { margin-bottom: 6px; }
.bridge-meta .bm-pair { display: block; font-size: 17px; font-weight: 700; color: #1f2933; }
.bridge-meta .bm-sub  { display: block; font-size: 12px; color: #6b7682; margin-top: 2px; }

.bridge-canvas {
  width: 100%;
  border: 1px solid #e6e9ee;
  border-radius: 8px;
  background: radial-gradient(circle at 50% 40%, #fbfcfe 0%, #f3f5f8 100%);
}
svg.bridge-svg { width: 100%; height: 420px; display: block; }

.bridge-link { stroke: #c4ccd6; stroke-width: 1.2px; stroke-opacity: 0.8; }
.bridge-edge { stroke: #f5a623; stroke-width: 3.5px; stroke-opacity: 1; }

.bridge-node circle { stroke: #ffffff; stroke-width: 1.5px; cursor: default; }
.bridge-node circle.bridge-endpoint { stroke: #f5a623; stroke-width: 3px; }
.bridge-label { fill: #1f2933; text-anchor: middle; pointer-events: none; }

.bridge-legend { display: flex; gap: 18px; margin: 8px 2px 4px; font-size: 12px; color: #6b7682; }
.bridge-legend .lg-swatch { display: inline-block; width: 16px; height: 4px; border-radius: 2px; vertical-align: middle; margin-right: 5px; }
.bridge-legend .lg-bridge { background: #f5a623; }
.bridge-legend .lg-endpoint { height: 10px; width: 10px; border-radius: 50%; background: #fff; border: 3px solid #f5a623; }

.bridge-narrative {
  margin-top: 8px;
  font-size: 13px;
  line-height: 1.55;
  color: #374151;
  background: #fbfaf6;
  border-left: 3px solid #f5a623;
  padding: 8px 12px;
  border-radius: 0 6px 6px 0;
}

/* ====================================================================
   Community rows — anonymous groups given a human meaning + importance
   ==================================================================== */
.comm-row { display: block !important; position: relative; padding: 4px 2px; line-height: 1.3; }
.comm-row .comm-name { font-weight: 600; color: #1f2933; }
.comm-row .cnt { color: #8a929c; font-size: 11px; margin-left: 6px; font-weight: 400; }
.comm-row .comm-sub { display: block; font-size: 11px; color: #7a828d; margin-left: 20px; }
.comm-badge {
  display: inline-block; font-size: 9px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; color: #fff; background: #f5a623; border-radius: 3px;
  padding: 1px 5px; margin-left: 4px; vertical-align: middle;
}
.comm-badge.alt { background: #5b9bd5; }

/* ====================================================================
   Agentic traversal dialog — route map + narrated, cited steps
   ==================================================================== */
#traversalDialog { font-family: 'Inter', system-ui, sans-serif; }
.trav-intro { font-size: 13px; color: #4a5568; line-height: 1.5; margin-bottom: 8px; }
.trav-canvas {
  width: 100%; overflow-x: auto;
  border: 1px solid #e6e9ee; border-radius: 8px;
  background: radial-gradient(circle at 50% 40%, #fbfcfe 0%, #f1f4f8 100%);
}
svg.trav-svg { height: 200px; display: block; }
.trav-edge { stroke: #f5a623; stroke-width: 2.5px; }
.trav-teleport { stroke-dasharray: 4 4; stroke: #c98a1f; }
.trav-node circle { stroke: #fff; stroke-width: 2px; }
.trav-node circle.trav-seed { stroke: #2b6cb0; stroke-width: 3.5px; }
.trav-num { fill: #fff; font-size: 11px; font-weight: 700; text-anchor: middle; pointer-events: none; }
.trav-name { fill: #1f2933; font-size: 11px; font-weight: 600; text-anchor: middle; pointer-events: none; }

.trav-steps { margin-top: 12px; }
.trav-step {
  display: flex; gap: 10px; padding: 11px 4px 11px 12px;
  border-bottom: 1px solid #f0f2f5;
  border-left: 3px solid #2b6cb0;
}
.trav-step.trav-weakTie  { border-left-color: #38a169; }
.trav-step.trav-broker   { border-left-color: #f5a623; }
.trav-step.trav-teleport { border-left-color: #a0aec0; }
.trav-step .ts-num {
  flex: 0 0 24px; height: 24px; border-radius: 50%; background: #2b6cb0; color: #fff;
  font-size: 12px; font-weight: 700; text-align: center; line-height: 24px;
}
.trav-step.trav-weakTie .ts-num { background: #38a169; }
.trav-step.trav-broker  .ts-num { background: #f5a623; }
.trav-step.trav-teleport .ts-num { background: #a0aec0; }
/* Reasoning sentence is the focal point: larger, darker, airier. */
.trav-step .ts-head { font-size: 14.5px; line-height: 1.6; color: #1a202c; font-weight: 500; }
/* Metadata is secondary/quieter. */
.trav-step .ts-meta { font-size: 10.5px; color: #a0aab5; margin-top: 4px; }
.trav-step .ts-chip {
  display: inline-block; background: #eef1f5; color: #5a6675; border-radius: 3px;
  padding: 0 5px; margin-left: 4px; font-variant-numeric: tabular-nums;
}
.trav-refs { margin-top: 10px; font-size: 11px; color: #8a929c; }
.trav-refs summary { cursor: pointer; color: #5b9bd5; }
.trav-refs ul { margin: 6px 0 0 0; padding-left: 18px; line-height: 1.5; }

/* ====================================================================
   Super-subtle node metrics readout — fixed, faint, non-intrusive
   ==================================================================== */
#nodeMetrics {
  position: fixed; right: 14px; bottom: 14px; z-index: 2000;  /* above docked side panels (1100-1300) so hover readout is never covered */
  width: 210px; max-width: 210px; max-height: 62vh; overflow-y: auto;
  padding: 10px 12px;
  font-family: 'Inter', system-ui, sans-serif;
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(203, 213, 224, 0.5);
  border-radius: 8px;
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  opacity: 0; transform: scale(0.94); transform-origin: top left;
  transition: opacity 0.12s ease, transform 0.12s cubic-bezier(.2,.8,.2,1);
  pointer-events: none;
  box-shadow: 0 8px 26px rgba(16, 24, 40, 0.18);
}
/* DEFINITIVE shown state (was opacity:0.62 — too faint over dense edges, and
   readability used to depend on load order vs modern.css). Now near-solid so
   the readout is legible regardless of which sheet wins. The matching
   !important rule in modern.css makes this load-order-independent. */
#nodeMetrics.show {
  opacity: 0.99;
  transform: scale(1);
  background: rgba(255, 255, 255, 0.97);
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
#nodeMetrics:hover { opacity: 1; pointer-events: auto; }
#nodeMetrics .nm-name {
  display: block; font-size: 12.5px; font-weight: 700; color: #2d3748;
  letter-spacing: .01em; line-height: 1.3;
}
#nodeMetrics .nm-sub {
  display: block; font-size: 9.5px; color: #9aa3ad; margin-top: 1px; line-height: 1.35;
}
/* Compact label / value rows */
#nodeMetrics .nm-rows { margin-top: 7px; }
#nodeMetrics .nm-row {
  display: flex; justify-content: space-between; gap: 12px;
  font-size: 10px; color: #94a0ad; line-height: 1.6;
}
#nodeMetrics .nm-row i { font-style: normal; }
#nodeMetrics .nm-row b { font-weight: 600; color: #5a6675; font-variant-numeric: tabular-nums; }
/* Connection chips wrap into small pills */
#nodeMetrics .nm-conns {
  margin-top: 8px; display: flex; flex-wrap: wrap; gap: 4px; align-items: center;
}
#nodeMetrics .nm-conns i {
  flex: 0 0 100%; font-style: normal; font-size: 9px; text-transform: uppercase;
  letter-spacing: .05em; color: #aab2bc; margin-bottom: 1px;
}
#nodeMetrics .nm-conn {
  display: inline-block; font-size: 9.5px; color: #5a6675;
  background: rgba(226, 232, 240, 0.7); border-radius: 9px;
  padding: 1px 7px; line-height: 1.5; white-space: nowrap;
}
/* Quiet italic insight line with a subtle top divider */
#nodeMetrics .nm-reason {
  margin-top: 9px; padding-top: 8px; border-top: 1px solid rgba(203, 213, 224, 0.5);
  font-size: 10.5px; font-style: italic; line-height: 1.5; color: #7a828d;
}

/* ====================================================================
   Explore tools + full screen
   ==================================================================== */
.explore-btns { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.explore-btns input { flex: 1 1 auto; }
#graphs:fullscreen, #graphs:-webkit-full-screen {
  background: #ffffff; padding: 0; width: 100vw; height: 100vh; display: flex;
  align-items: center; justify-content: center;
}
#graphs:fullscreen #graphContainer, #graphs:-webkit-full-screen #graphContainer { margin-top: 0; width: 100%; }
#graphs:fullscreen svg, #graphs:-webkit-full-screen svg { height: 100vh !important; max-width: 100vw; }

/* ====================================================================
   Hierarchical views (community overview + drill-down)
   ==================================================================== */
#communityDialog, #bundleDialog { font-family: 'Inter', system-ui, sans-serif; }
.hv-bar, .hv-bbar { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; min-height: 28px; }
.hv-title, .hv-btitle { font-size: 13px; color: #4a5568; }
.hv-hint { color: #9aa3ad; font-weight: 400; }
.hv-back {
  border: 1px solid #cbd5e0; background: #fff; color: #2b6cb0; border-radius: 5px;
  font-size: 12px; font-weight: 600; padding: 3px 9px; cursor: pointer;
}
.hv-back:hover { background: #f0f6ff; }
.hv-canvas, .hv-bcanvas {
  width: 100%; border: 1px solid #e6e9ee; border-radius: 8px;
  background: radial-gradient(circle at 50% 40%, #fbfcfe 0%, #f1f4f8 100%);
}
svg.hv-svg { width: 100%; height: 480px; display: block; }
#bundleDialog svg.hv-svg { height: 560px; }

.hv-agg { fill: none; stroke: #c2cad3; stroke-opacity: 0.35; }
/* Super-node labels: white fill over a STRONG dark halo so the community name
   stays legible on ANY palette hue (light colorblind-safe yellows/greens
   included). modern.css reinforces this further; both kept robust on their own. */
.hv-clabel { fill: #fff; font-size: 12.5px; font-weight: 700; text-anchor: middle; pointer-events: none;
  paint-order: stroke; stroke: rgba(17,26,39,0.9); stroke-width: 3.5px;
  stroke-linejoin: round; stroke-linecap: round; letter-spacing: .01em; }
.hv-csize { fill: #fff; font-size: 10px; text-anchor: middle; pointer-events: none; opacity: 1;
  paint-order: stroke; stroke: rgba(17,26,39,0.85); stroke-width: 2.5px;
  stroke-linejoin: round; stroke-linecap: round; }
.hv-mlink { stroke: #cbd5e0; stroke-width: 1px; stroke-opacity: 0.6; }
.hv-member circle { cursor: default; }
.hv-mlabel { fill: #1f2933; font-size: 10px; font-weight: 600; text-anchor: middle; pointer-events: none; }

/* hierarchical edge bundling */
.bundle-link { fill: none; stroke-opacity: 0.32; stroke-width: 1px; }
.bundle-fade { stroke-opacity: 0.04; }
.bundle-out { stroke: #2b6cb0 !important; stroke-opacity: 0.95; stroke-width: 1.8px; }
.bundle-in  { stroke: #e8590c !important; stroke-opacity: 0.95; stroke-width: 1.8px; }
/* Traced bundling edges — single strong colour for an at-a-glance path. */
.bundle-hot { stroke: #2b6cb0 !important; stroke-opacity: 0.95; stroke-width: 1.8px; }
.bundle-leaf circle { cursor: pointer; stroke: #fff; stroke-width: 0.5px; }
.bundle-leaf circle:hover { stroke: #1f2933; stroke-width: 1.5px; }
/* ====================================================================
   Network Intelligence dashboard — docked, large, readable side panel
   ==================================================================== */
#intelPanel {
  position: fixed; top: 0; right: 0; z-index: 1100;
  width: 400px; max-width: 92vw; height: 100vh;
  background: #ffffff; box-shadow: -6px 0 28px rgba(0,0,0,0.18);
  font-family: 'Inter', system-ui, sans-serif; color: #1f2933;
  display: flex; flex-direction: column;
  transform: translateX(105%); transition: transform 0.28s ease;
}
#intelPanel.open { transform: translateX(0); }
#intelPanel .intel-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 18px; border-bottom: 1px solid #eef1f5;
  background: linear-gradient(180deg,#fbfcfe,#f4f6f9);
}
#intelPanel .intel-title { font-size: 17px; font-weight: 700; letter-spacing: .01em; }
#intelPanel .intel-close {
  border: none; background: none; font-size: 24px; line-height: 1; color: #8a929c; cursor: pointer;
}
#intelPanel .intel-close:hover { color: #1f2933; }
#intelBody { overflow-y: auto; padding: 6px 18px 28px; }

.ni-section { padding: 14px 0; border-bottom: 1px solid #f2f4f7; }
.ni-section h3 { font-size: 14px; font-weight: 700; margin: 0 0 8px; color: #2d3748; }
.ni-section h3 .ni-hint { font-weight: 400; font-size: 11px; color: #9aa3ad; margin-left: 6px; }
.ni-stats { display: flex; flex-wrap: wrap; gap: 10px 16px; margin-bottom: 8px; }
.ni-stats span { font-size: 11px; color: #8a929c; display: flex; flex-direction: column; }
.ni-stats b { font-size: 20px; font-weight: 700; color: #2b6cb0; line-height: 1.1; }
.ni-summary, .ni-reach { font-size: 13.5px; line-height: 1.6; color: #374151; margin: 4px 0 0; }
.ni-list { list-style: none; margin: 0; padding: 0; }
.ni-person { padding: 8px 10px; border-radius: 8px; cursor: pointer; transition: background .12s; }
.ni-person:hover { background: #f0f6ff; }
.ni-pname { display: block; font-size: 13.5px; font-weight: 700; color: #1a202c; }
.ni-pwhy { display: block; font-size: 12px; line-height: 1.5; color: #6b7682; margin-top: 1px; }
.ni-empty { font-size: 12.5px; color: #9aa3ad; padding: 6px 4px; }
.ni-comm { display: flex; gap: 10px; padding: 9px 4px; align-items: flex-start; }
.ni-swatch { flex: 0 0 12px; width: 12px; height: 12px; border-radius: 50%; margin-top: 3px; }
.ni-csum { font-size: 13px; line-height: 1.55; color: #374151; }
.ni-mini, .ni-link { background: none; border: none; color: #2b6cb0; font-size: 12px; cursor: pointer; padding: 2px 0; font-weight: 600; }
.ni-link:hover, .ni-mini:hover { text-decoration: underline; }

/* ====================================================================
   Ego dialog (clicked node)
   ==================================================================== */
.ego-meta { margin-bottom: 6px; }
.ego-name { display: block; font-size: 18px; font-weight: 700; color: #1f2933; }
.ego-sub { display: block; font-size: 12.5px; color: #6b7682; margin-top: 2px; }
.ego-rows { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 8px; }
.ego-rows span { font-size: 11px; color: #8a929c; }
.ego-rows b { font-size: 15px; color: #2b6cb0; margin-left: 4px; font-variant-numeric: tabular-nums; }
.ego-reason { margin-top: 8px; font-size: 13.5px; line-height: 1.6; color: #374151;
  background: #fbfaf6; border-left: 3px solid #2b6cb0; padding: 9px 12px; border-radius: 0 6px 6px 0; }
.ego-actions { margin-top: 10px; display: flex; gap: 12px; align-items: center; }
.ego-link { font-size: 13px; color: #2b6cb0; font-weight: 600; }
.ego-focus { border: 1px solid #cbd5e0; background: #fff; color: #2b6cb0; border-radius: 6px;
  font-size: 12.5px; font-weight: 600; padding: 4px 10px; cursor: pointer; }
.ego-focus:hover { background: #f0f6ff; }

/* ====================================================================
   Island list + person search (sidebar)
   ==================================================================== */
.island-list { list-style: none; margin: 6px 0 0; padding: 0; max-height: 260px; overflow-y: auto; }
.island-row { padding: 5px 6px; border-radius: 6px; cursor: pointer; }
.island-row:hover { background: #f0f6ff; }
.island-name { display: block; font-size: 12.5px; font-weight: 600; color: #1f2933; }
.island-head { display: block; font-size: 10.5px; color: #8a929c; }

#nodeSearch { width: 100%; box-sizing: border-box; padding: 7px 10px; font-size: 13px;
  border: 1px solid #cbd5e0; border-radius: 7px; outline: none; }
#nodeSearch:focus { border-color: #2b6cb0; }
.search-results { margin-top: 6px; max-height: 240px; overflow-y: auto; }
.search-row { padding: 6px 8px; border-radius: 6px; cursor: pointer; }
.search-row:hover { background: #f0f6ff; }
.search-row b { display: block; font-size: 12.5px; color: #1f2933; }
.search-row span { display: block; font-size: 10.5px; color: #8a929c; }

/* ====================================================================
   POLISH PASS (appended; refines without removing any selector above).
   Cohesive 8px radii, calmer borders, gentler hovers, snappier focus
   rings — kept on the #2b6cb0 / #f5a623 palette. modern.css loads after
   this file, so these are intentionally low-risk refinements.
   ==================================================================== */

/* Legacy raw modal chrome -> softer, on-brand (modern.css overrides most,
   but tidy the close button + header text here too). */
.close { transition: color 0.12s ease, opacity 0.12s ease; opacity: 0.85; }
.close:hover, .close:focus { opacity: 1; }

/* Community + island + search rows: unify radius and hover transition. */
.comm-row, .island-row, .search-row, .trav-step {
  transition: background 0.12s ease;
}
.comm-row { border-radius: 6px; padding: 5px 6px; }
.comm-row:hover { background: #f6f9fd; }

/* Traversal step rows: a touch more breathing room + soft hover. */
.trav-step:hover { background: #f8fafc; }
.trav-step .ts-num { box-shadow: 0 1px 2px rgba(16, 24, 40, 0.12); }

/* Ego dialog focus button — tactile press + smoother hover. */
.ego-focus, .hv-back {
  transition: background 0.12s ease, border-color 0.12s ease, transform 0.08s ease;
}
.ego-focus:active, .hv-back:active { transform: translateY(0.5px); }

/* Inputs: clearer, on-brand focus ring (search + path inputs). */
#nodeSearch:focus { box-shadow: 0 0 0 3px rgba(43, 108, 176, 0.14); }

/* Node metrics card — calmer divider + crisper name. */
#nodeMetrics { box-shadow: 0 2px 10px rgba(16, 24, 40, 0.06); }
#nodeMetrics .nm-name { letter-spacing: -0.005em; }

/* ====================================================================
   LENS PANEL — sidebar controls for the live render contract:
     #nodeMetricSel  -> LIGraph.setNodeMetric(name)
     #edgeModeSel    -> LIGraph.setEdgeMode(mode)
     #backboneRange  -> LIGraph.setBackbone(frac)  (#backboneReadout caption)
   The two <select>s mirror #nodeSearch exactly (full-width, padded, rounded,
   #cbd5e0 border, #2b6cb0 focus). The range is a normal slider on the brand
   blue; its readout sits small and muted beneath. Selectors are id-anchored
   so they style the controls wherever the markup is mounted; harmless until
   the elements exist. On-brand: #2b6cb0 / #f5a623, Inter.
   ==================================================================== */

/* Optional wrapper rows (defensive — only apply if the markup emits them). */
.lens-row { margin: 8px 0; }
.lens-row > label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: #8a929c;
  margin-bottom: 4px;
}

/* The two metric/edge selects — styled to match #nodeSearch. */
#nodeMetricSel,
#edgeModeSel {
  width: 100%;
  box-sizing: border-box;
  padding: 7px 30px 7px 10px;        /* room on the right for the chevron */
  font-size: 13px;
  font-family: 'Inter', system-ui, sans-serif;
  color: #1f2933;
  background-color: #fff;
  border: 1px solid #cbd5e0;
  border-radius: 7px;
  outline: none;
  cursor: pointer;
  line-height: 1.3;
  /* Reset native chrome so the control reads like #nodeSearch + a chevron. */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path fill='none' stroke='%238a929c' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M2.5 4.5L6 8l3.5-3.5'/></svg>");
  background-repeat: no-repeat;
  background-position: right 10px center;
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
#nodeMetricSel:hover,
#edgeModeSel:hover { border-color: #b6c2d2; }
#nodeMetricSel:focus,
#edgeModeSel:focus {
  border-color: #2b6cb0;
  box-shadow: 0 0 0 3px rgba(43, 108, 176, 0.14);
}
/* Give the two selects a little vertical separation when stacked. */
#nodeMetricSel { margin-bottom: 8px; }

/* The betweenness backbone slider — a normal, on-brand range. */
#backboneRange {
  width: 100%;
  box-sizing: border-box;
  margin: 2px 0 4px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: transparent;
  cursor: pointer;
}
#backboneRange:focus { outline: none; }
/* Track */
#backboneRange::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 999px;
  background: #e2e8f0;
}
#backboneRange::-moz-range-track {
  height: 4px;
  border-radius: 999px;
  background: #e2e8f0;
}
/* Thumb */
#backboneRange::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 15px;
  height: 15px;
  margin-top: -5.5px;                 /* center on the 4px track */
  border-radius: 50%;
  background: #2b6cb0;
  border: 2px solid #fff;
  box-shadow: 0 1px 3px rgba(16, 24, 40, 0.25);
  transition: background 0.12s ease, transform 0.08s ease;
}
#backboneRange::-moz-range-thumb {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: #2b6cb0;
  border: 2px solid #fff;
  box-shadow: 0 1px 3px rgba(16, 24, 40, 0.25);
  transition: background 0.12s ease, transform 0.08s ease;
}
#backboneRange:hover::-webkit-slider-thumb { background: #245a94; }
#backboneRange:hover::-moz-range-thumb { background: #245a94; }
#backboneRange:active::-webkit-slider-thumb { transform: scale(1.1); }
#backboneRange:active::-moz-range-thumb { transform: scale(1.1); }
#backboneRange:focus::-webkit-slider-thumb { box-shadow: 0 0 0 4px rgba(43, 108, 176, 0.16); }
#backboneRange:focus::-moz-range-thumb { box-shadow: 0 0 0 4px rgba(43, 108, 176, 0.16); }

/* Small, muted caption for the slider value (#backboneReadout). */
#backboneReadout {
  display: block;
  font-size: 11px;
  color: #8a929c;
  letter-spacing: 0;
  text-transform: none;
  font-weight: 400;
  line-height: 1.4;
  margin-top: 2px;
}

/* ====================================================================
   "What's new — methods" panel — a collapsible <details> that lists the
   network-science methods used, with small inline citations. Readable
   list, quiet citations, on-brand. Anchored to a .methods-panel wrapper;
   harmless if absent.
   ==================================================================== */
.methods-panel {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 12.5px;
  color: #374151;
  line-height: 1.55;
}
.methods-panel > summary {
  cursor: pointer;
  list-style: none;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: #2b6cb0;
  padding: 4px 0;
  outline: none;
  transition: color 0.12s ease;
}
.methods-panel > summary:hover { color: #245a94; }
.methods-panel > summary:focus-visible { color: #245a94; text-decoration: underline; }
/* Replace the default disclosure triangle with an on-brand caret. */
.methods-panel > summary::-webkit-details-marker { display: none; }
.methods-panel > summary::before {
  content: "▸";
  display: inline-block;
  margin-right: 6px;
  font-size: 10px;
  color: #8a929c;
  transition: transform 0.15s ease;
}
.methods-panel[open] > summary::before { transform: rotate(90deg); }

/* The readable methods list. */
.methods-panel .methods-list {
  list-style: none;
  margin: 8px 0 2px;
  padding: 0;
}
.methods-panel .methods-list > li {
  position: relative;
  padding: 6px 0 6px 16px;
  border-bottom: 1px dashed #eef1f5;
}
.methods-panel .methods-list > li:last-child { border-bottom: none; }
/* A small brand-blue bullet. */
.methods-panel .methods-list > li::before {
  content: "";
  position: absolute;
  left: 2px; top: 12px;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: #2b6cb0;
}
.methods-panel .methods-list b,
.methods-panel .methods-list .m-name {
  color: #1f2933;
  font-weight: 600;
}
/* Quiet, small citations (e.g. "Brandes 2001", "Newman 2006"). */
.methods-panel .m-cite,
.methods-panel cite {
  display: inline;
  font-size: 10.5px;
  font-style: normal;
  color: #8a929c;
  letter-spacing: .01em;
  white-space: nowrap;
}
.methods-panel .m-cite a,
.methods-panel cite a,
.methods-panel a { color: #5b9bd5; text-decoration: none; }
.methods-panel .m-cite a:hover,
.methods-panel cite a:hover,
.methods-panel a:hover { color: #2b6cb0; text-decoration: underline; }

/* (Voronoi region cells removed — replaced by lightweight community hull outlines.) */

/* ====================================================================
   ORG (company) FILTER LIST (#uniqueColorCheckboxesOrg) — the new
   per-organisation colour/visibility filter. Styled to match the existing
   community/location filter rows (.filter-row look from modern.css): each
   checkbox label is a full-width block row, quiet body text, with the
   checkbox spaced from its label and the trailing count muted. Anchored to
   the container id so it's harmless until the markup is mounted.
   ==================================================================== */
#uniqueColorCheckboxesOrg {
  max-height: 260px;
  overflow-y: auto;
}
#uniqueColorCheckboxesOrg label {
  display: block;
  margin: 4px 0;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  font-size: 12px;
  color: #1f2933;
  line-height: 1.3;
  cursor: pointer;
}
#uniqueColorCheckboxesOrg label:hover { color: #2b6cb0; }
#uniqueColorCheckboxesOrg input {
  margin-right: 7px;
  vertical-align: middle;
}
#uniqueColorCheckboxesOrg .cnt {
  color: #647280;
  font-weight: 400;
  font-size: 11px;
  margin-left: 6px;
}

/* ====================================================================
   DRAGGABLE NODES — the force layout freezes after 1s (force.stop() +
   node.fixed = true), after which each <g.node> can be dragged to reshape
   the layout. Surface that affordance: a grab cursor at rest, grabbing
   while held. Applied to the whole node group so the label + halo share it
   (the inner circle already has cursor:pointer in modern.css; :active here
   wins during a drag). Id/class-anchored — harmless if a node lacks .node.
   ==================================================================== */
.node { cursor: grab; }
.node:active { cursor: grabbing; }

/* ====================================================================
   COMMUNITY HULLS (.comm-hull) — soft convex/region outlines the graph
   draws around each community when LIGraph.toggleHulls(on) is on. The JS
   sets stroke + fill INLINE per community (from the shared palette), so we
   only set the SHARED, palette-agnostic look here: a very faint fill, a
   gentle stroke, rounded joins, and no hit-testing (they sit behind the
   nodes and must never steal hover/click from the graph). currentColor is a
   safe fallback if the JS ever sets only `color` rather than fill/stroke.
   ==================================================================== */
.comm-hull {
  fill: currentColor;
  fill-opacity: 0.06;
  stroke-opacity: 0.5;
  stroke-width: 1.5px;
  stroke-linejoin: round;
  stroke-linecap: round;
  pointer-events: none;
}

/* ====================================================================
   COMMUNITY LEGEND (#communityLegend) — a small, fixed, translucent card
   that keys the community swatch colours (window.groupColor), mirroring
   #edgeLegend / #roleLegend exactly: a blurred translucent card, faint
   until hover, never hit-testing the graph. It stacks ABOVE #roleLegend
   (bottom:84px) and #edgeLegend (bottom:14px) so the three small legends
   never overlap. Rows are a small colour dot (.cl-swatch) + a quiet label
   (.cl-row). Swatch colour is set inline per-row from window.groupColor,
   so the palette is never hardcoded here. Defensive / id-anchored — it is
   harmless until the markup is mounted.
   ==================================================================== */
#communityLegend {
  position: fixed;
  left: 14px;
  bottom: 154px;                /* clears #roleLegend (bottom:84px) + its height */
  z-index: 5;
  width: 180px;
  max-height: 42vh;
  overflow-y: auto;
  padding: 9px 11px 10px;
  font-family: 'Inter', system-ui, sans-serif;
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(203, 213, 224, 0.5);
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(16, 24, 40, 0.06);
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  opacity: 0.72;
  transition: opacity 0.3s ease;
  pointer-events: none;
}
#communityLegend:hover { opacity: 0.97; pointer-events: auto; }

/* "communities" caption — quiet, uppercase, tracks like #edgeLegend. */
#communityLegend .cl-label {
  display: block;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #8a929c;
  margin-bottom: 6px;
  text-align: center;
}

/* One legend entry: a small round swatch + a quiet community label. */
#communityLegend .cl-row {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 10px;
  line-height: 1.5;
  color: #647280;
  cursor: pointer;
}
#communityLegend .cl-row + .cl-row { margin-top: 3px; }
#communityLegend .cl-row:hover { color: #2b6cb0; }
#communityLegend .cl-name { letter-spacing: 0.01em; }
#communityLegend .cl-count {
  margin-left: auto;
  color: #9aa3ad;
  font-variant-numeric: tabular-nums;
}

/* The colour dot — tiny, soft white ring so it reads on any backdrop.
   Background colour is supplied inline per-row from window.groupColor. */
#communityLegend .cl-swatch,
.cl-swatch {
  flex: 0 0 9px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.9), 0 1px 2px rgba(16, 24, 40, 0.05);
}

@media (max-width: 640px) {
  #communityLegend { width: 150px; left: 8px; bottom: 140px; }
}