/* ============ GLOBAL NETWORK ============ */
.network-page{padding:28px var(--gutter) 40px;max-width:var(--frame-max);margin:0 auto;animation:fadeIn .3s ease-out;}
.network-page-title{font-family:'Pretendard',sans-serif;font-weight:700;font-size:26px;letter-spacing:-.01em;color:var(--gray-900);margin:0 0 10px;}
.network-graph-panel{height:min(880px,85vh);margin-top:4px;background:var(--primary-dark);border:none;border-radius:var(--r-lg);box-shadow:var(--shadow-md);}
.network-graph-panel .profile-graph-empty{color:rgba(247,247,245,.55);}
.network-graph-panel .pg-node .pg-ring{stroke:rgba(247,247,245,.35);}
.network-graph-panel .pg-node:hover .pg-ring{stroke:var(--mint);}
.network-graph-panel .pg-node.pg-selected .pg-ring{stroke:var(--mint);stroke-width:3px;}
.network-graph-panel .pg-node .pg-fallback{fill:var(--bg);}
.network-graph-panel .pg-node .pg-fallback-label{fill:var(--primary-dark);}
.network-graph-panel .pg-label{fill:var(--bg);}
/* No one is selected on load (or once the selection is cleared), so no
   connection lines are shown at all — only the selected node's own links
   become visible (see .pg-link-visible, toggled from network.js). */
.network-graph-panel .pg-link{stroke:rgba(247,247,245,.3);opacity:0;transition:opacity .15s linear;}
.network-graph-panel .pg-link.pg-link-visible{opacity:1;}
.network-graph-panel .pg-link.pg-mutual{stroke:var(--mint);}
.network-graph-panel .pg-node,
.network-graph-panel .pg-label{transition:opacity .15s linear;}
.network-graph-panel .pg-node.pg-dimmed,
.network-graph-panel .pg-label.pg-dimmed{opacity:.3;}

@media (max-width:640px){
  .network-page{padding-left:16px;padding-right:16px;}
}

/* ---------- view switch (everyone / my network) ----------
   Same pill shape as the campaign page's view tabs. It sits in
   .page-title-row, which base.css already floats to the bottom-left corner
   on a phone (body[data-mobile-fs]) — so the switch is at the top on the web
   and at the bottom in the app without a second rule for it. */
.network-view-tabs{display:inline-flex;background:var(--gray-100);border-radius:var(--r-full);padding:2px;gap:2px;flex-shrink:0;}
.nv-tab{
  appearance:none;border:none;background:transparent;cursor:pointer;
  font-family:'Pretendard',sans-serif;font-size:12px;font-weight:600;
  padding:7px 14px;border-radius:var(--r-full);color:var(--muted);white-space:nowrap;
  transition:background .12s linear,color .12s linear;
}
.nv-tab:hover:not(.active){color:var(--text);}
.nv-tab.active{background:var(--gradient-primary);color:#fff;}
@media (max-width:640px){
  /* Same breakpoint base.css uses for body[data-mobile-fs] — only there is
     this row floated over the canvas, so only there does it need the same
     readable backing the info button gets. */
  body[data-mobile-fs] .network-view-tabs{background:rgba(247,247,245,.95);box-shadow:0 2px 10px rgba(0,0,0,.14);}
  .nv-tab{padding:7px 12px;font-size:11.5px;}
}