/* Networking set piece: the membership network (see partials/features/network-graph.php).
   Mobile first: a vertical list joined by a connector that runs from "You" to the last node.
   Wide and tall enough screens: the SVG map, labels placed beside (never over) each node. */
.ngx { overflow: clip; }
.ngx-head { margin-bottom: clamp(1.6rem, 3vw, 2.6rem); }

/* --------------------------------------------------------------- list (mobile) */
.ngx-map { position: relative; }
.ngx-svg { display: none; }
.ngx-youm {
  position: relative; z-index: 2; display: grid; place-items: center;
  width: 52px; height: 52px; border-radius: 50%; margin: 0 0 1rem;
  background: var(--tick); color: #fff; box-shadow: 0 0 0 6px rgba(159,216,180,.18);
  font: 800 1rem/1 var(--display); letter-spacing: -.02em;
}
.ngx-list { position: relative; display: grid; margin: 0; padding: 0; list-style: none; }
.ngx-item { position: relative; padding: 0 0 clamp(1.3rem, 3vw, 1.8rem) 3.6rem; }
.ngx-item:last-child { padding-bottom: 0; }
.ngx-dot {
  position: absolute; left: 15px; top: .3rem; z-index: 2; width: 22px; height: 22px; border-radius: 50%;
  background: var(--pine); border: 3px solid var(--mint-deep); box-sizing: border-box;
}
.ngx-item h3 { font-size: clamp(1.2rem, 1.6vw, 1.35rem); margin: 0 0 .3rem; color: #fff; }
.ngx-item p { margin: 0; font-size: 1.0625rem; line-height: 1.5; color: rgba(255,255,255,.8); }

/* static connector (no JS): a segment from each dot to the next, plus You to the first */
.ngx-youm::after {
  content: ""; position: absolute; left: calc(50% - 1px); top: 100%; width: 2px;
  height: calc(1rem + .3rem + 11px); background: rgba(159,216,180,.6);
}
.ngx-item:not(:last-child)::before {
  content: ""; position: absolute; left: 25px; width: 2px; top: calc(.3rem + 11px); bottom: calc(-.3rem - 11px);
  background: rgba(159,216,180,.6);
}
/* the drawn connector (sized by the script from the marker centres) */
.ngx-thread { display: none; position: absolute; left: 23px; top: 26px; z-index: 1; overflow: visible; pointer-events: none; }
.ngx-thread path { fill: none; stroke: var(--mint-deep); stroke-width: 3; stroke-linecap: round; }
.ngx.is-threaded .ngx-thread { display: block; }
.ngx.is-threaded .ngx-youm::after, .ngx.is-threaded .ngx-item::before { display: none; }

/* ------------------------------------------------------------------ the map */
@media (min-width: 1100px) and (min-height: 640px) {
  .ngx { --gh: clamp(440px, 52vh, 540px); }
  .ngx-map { width: min(100%, calc(var(--gh) * 2)); aspect-ratio: 2 / 1; margin-inline: auto; }
  .ngx-svg { display: block; position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
  .ngx-youm, .ngx-thread, .ngx.is-threaded .ngx-thread, .ngx-dot { display: none; }
  .ngx-item::before { display: none; }
  .ngx-list { position: absolute; inset: 0; display: block; pointer-events: none; }
  .ngx-item {
    position: absolute; top: calc(var(--y) - .8rem); width: 25%; padding: 0; pointer-events: auto;
  }
  .ngx-item.is-l { right: calc(100% - var(--x) + 4.4%); text-align: right; }
  .ngx-item.is-r { left: calc(var(--x) + 4.4%); }
  .ngx-item h3 { font-size: clamp(1.15rem, 1.3vw, 1.3rem); line-height: 1.25; margin-bottom: .2rem; transition: color .3s; }
  .ngx-item p { font-size: 1rem; line-height: 1.4; }
  .ngx-item.is-hot h3 { color: var(--mint-deep); }
}

/* svg parts */
.ngx-line { fill: none; stroke: rgba(159,216,180,.55); stroke-width: 2.5; stroke-linecap: round; transition: stroke .3s, stroke-width .3s; }
.ngx-line.is-hot { stroke: var(--mint-deep); stroke-width: 4; }
.ngx-link { fill: none; stroke: rgba(244,185,66,.75); stroke-width: 2; stroke-linecap: round; }
.ngx-member { fill: var(--honey); stroke: var(--pine); stroke-width: 3; }
.ngx-halo { fill: rgba(159,216,180,.1); transition: fill .3s; }
.ngx-node.is-hot .ngx-halo { fill: rgba(159,216,180,.3); }
.ngx-disc { fill: #0F4A31; stroke: var(--mint-deep); stroke-width: 2; }
.ngx-ico { fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ngx-you-disc { fill: var(--tick); }
.ngx-you-ring { fill: none; stroke: rgba(159,216,180,.45); stroke-width: 2; stroke-dasharray: 2 8; stroke-linecap: round; }
.ngx-you-pulse { fill: none; stroke: var(--mint-deep); stroke-width: 2; opacity: 0; }
.ngx-you-tick { fill: none; stroke: #fff; stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; }
.ngx-you-t { font-family: var(--display); font-weight: 800; font-size: 40px; letter-spacing: -.03em; fill: #fff; }