/* ============================================================================
 * NPC Relationship Web — reference redesign (deploy143)
 * Left Find & Filter rail | center web (header, tabs, canvas, minimap, zoom)
 * | right Selected NPC inspector. Layers over the existing pan/zoom engine;
 * SVG node/edge internals keep their .nw-* hooks.
 * ==========================================================================*/
.nwx-app{
  --nwx-gold:var(--cx-accent); --nwx-gold-soft:var(--cx-accent-deep); --nwx-ink:var(--cx-bg);
  --nwx-line:color-mix(in srgb,var(--cx-accent) 22%,transparent); --nwx-line2:color-mix(in srgb,var(--cx-accent) 13%,transparent);
  --nwx-text:var(--cx-text); --nwx-dim:var(--cx-text-dim); --nwx-faint:var(--cx-accent-dim);
  --nwx-panel:color-mix(in srgb,var(--cx-field) 60%,transparent); --nwx-panel2:color-mix(in srgb,var(--cx-surface) 62%,transparent);
  --nwx-green:var(--cx-success); --nwx-blue:#5b93c8; --nwx-red:var(--cx-danger); --nwx-amber:var(--cx-accent); --nwx-gray:var(--cx-text-dim);
  display:grid; grid-template-columns:250px minmax(0,1fr) 0; gap:18px; align-items:start;
  color:var(--nwx-text); font-family:'EB Garamond',Georgia,serif; margin-top:6px;
}
.nwx-app.has-inspector{ grid-template-columns:250px minmax(0,1fr) 320px; }
.nwx-app *{ box-sizing:border-box; }
.nwx-app button{ font-family:inherit; }

/* ---- generic controls --------------------------------------------------- */
.nwx-btn{ font-family:'Cinzel',serif; font-size:11px; letter-spacing:.05em; text-transform:uppercase;
  display:inline-flex; align-items:center; gap:7px; padding:8px 13px; border-radius:8px; cursor:pointer;
  color:var(--nwx-text); background:color-mix(in srgb,var(--cx-accent) 6%,transparent); border:1px solid var(--nwx-line); transition:background .15s,border-color .15s,color .15s; }
.nwx-btn:hover{ background:color-mix(in srgb,var(--cx-accent) 13%,transparent); border-color:var(--nwx-gold-soft); }
.nwx-btn.on,.nwx-btn.active{ background:color-mix(in srgb,var(--cx-accent) 14%,transparent); border-color:var(--nwx-gold-soft); color:var(--nwx-gold); }
.nwx-btn.primary{ color:var(--nwx-ink); background:linear-gradient(180deg,var(--cx-accent),var(--cx-accent-deep)); border-color:var(--cx-accent); font-weight:600; }
.nwx-btn.primary:hover{ filter:brightness(1.06); }
.nwx-input,.nwx-select{ width:100%; font-family:'EB Garamond',serif; font-size:13.5px; color:var(--nwx-text);
  background:rgba(0,0,0,.3); border:1px solid var(--nwx-line); border-radius:8px; padding:9px 11px; }
.nwx-input:focus,.nwx-select:focus{ outline:none; border-color:var(--nwx-gold-soft); }
.nwx-select{ appearance:none; padding-right:28px;
  background-image:linear-gradient(45deg,transparent 50%,var(--nwx-dim) 50%),linear-gradient(135deg,var(--nwx-dim) 50%,transparent 50%);
  background-position:calc(100% - 15px) 17px,calc(100% - 10px) 17px; background-size:5px 5px; background-repeat:no-repeat; }

/* ---- left sidebar ------------------------------------------------------- */
.nwx-side{ position:sticky; top:8px; display:flex; flex-direction:column; gap:18px;
  border:1px solid var(--nwx-line); border-radius:14px; background:var(--nwx-panel); padding:18px 16px; }
.nwx-side-title{ font-family:'Cinzel',serif; font-size:14px; letter-spacing:.08em; text-transform:uppercase; color:var(--nwx-gold); }
.nwx-searchwrap{ position:relative; }
.nwx-searchwrap .nwx-search-ico{ position:absolute; right:11px; top:50%; transform:translateY(-50%); color:var(--nwx-dim); pointer-events:none; }
.nwx-group{ display:flex; flex-direction:column; gap:9px; }
.nwx-group.divide{ padding-top:16px; border-top:1px solid var(--nwx-line2); }
.nwx-glabel{ font-family:'Cinzel',serif; font-size:9.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--nwx-gold-soft); }
.nwx-toggle-row{ display:flex; align-items:center; gap:10px; font-size:13.5px; color:var(--nwx-text); cursor:pointer; }
.nwx-switch{ position:relative; width:34px; height:19px; border-radius:11px; background:rgba(0,0,0,.4); border:1px solid var(--nwx-line); flex:0 0 auto; transition:background .15s; }
.nwx-switch::after{ content:''; position:absolute; top:2px; left:2px; width:13px; height:13px; border-radius:50%; background:var(--nwx-dim); transition:transform .15s,background .15s; }
.nwx-toggle-row.on .nwx-switch{ background:color-mix(in srgb,var(--cx-accent) 30%,transparent); border-color:var(--nwx-gold-soft); }
.nwx-toggle-row.on .nwx-switch::after{ transform:translateX(15px); background:var(--nwx-gold); }
.nwx-quick{ display:flex; flex-direction:column; gap:9px; }
.nwx-quick .nwx-btn{ justify-content:center; padding:10px; }
.nwx-legend{ display:flex; flex-direction:column; gap:8px; }
.nwx-leg-row{ display:flex; align-items:center; gap:10px; font-size:13px; color:var(--nwx-text); background:none; border:0; padding:2px 0; cursor:pointer; text-align:left; opacity:1; transition:opacity .15s; }
.nwx-leg-row.off{ opacity:.4; }
.nwx-leg-line{ width:34px; height:0; flex:0 0 auto; }
.nwx-export{ justify-content:center; }

/* ---- center column ------------------------------------------------------ */
.nwx-main{ min-width:0; display:flex; flex-direction:column; gap:14px; }
.nwx-head{ display:flex; align-items:flex-start; gap:16px; }
.nwx-head-txt{ margin-right:auto; }
.nwx-title{ font-family:'Cinzel',serif; font-size:26px; color:var(--nwx-gold); letter-spacing:.01em; line-height:1.1; }
.nwx-sub{ font-size:14px; color:var(--nwx-dim); font-style:italic; margin-top:4px; }
.nwx-head-actions{ display:flex; gap:8px; flex-wrap:wrap; }
.nwx-tabs{ display:flex; gap:26px; border-bottom:1px solid var(--nwx-line); }
.nwx-tab{ font-family:'Cinzel',serif; font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--nwx-dim);
  background:none; border:0; border-bottom:2px solid transparent; padding:11px 2px; cursor:pointer; margin-bottom:-1px; }
.nwx-tab:hover{ color:var(--nwx-text); }
.nwx-tab.active{ color:var(--nwx-gold); border-bottom-color:var(--nwx-gold); }

/* ---- canvas stage ------------------------------------------------------- */
.nw-stage{ position:relative; border:1px solid var(--nwx-line); border-radius:14px; overflow:hidden; background:radial-gradient(120% 120% at 50% 0%,color-mix(in srgb,var(--cx-surface) 50%,transparent),color-mix(in srgb,var(--cx-field) 75%,transparent)); }
.nw-canvas{ width:100%; height:min(72vh,760px); }
#nw-svg{ width:100%; height:100%; display:block; touch-action:none; cursor:grab; }
#nw-svg:active{ cursor:grabbing; }

/* node cards */
.nw-node{ cursor:pointer; }
.nw-card-bg{ fill:color-mix(in srgb,var(--cx-surface) 96%,transparent); stroke:var(--nwx-line); stroke-width:1.5; }
.nw-node.nw-selected .nw-card-bg,.nw-node.nw-flash .nw-card-bg{ stroke:var(--nwx-gold); stroke-width:2.5; filter:drop-shadow(0 0 10px color-mix(in srgb,var(--cx-accent) 55%,transparent)); }
.nw-card-bg.nw-dead{ stroke:var(--cx-danger); }
.nw-card-bg.nw-hidden{ stroke:#b48ede; stroke-dasharray:7 5; }
.nw-name{ fill:var(--cx-accent-bright); font-family:'Cinzel',serif; font-size:14px; font-weight:600; }
.nw-role{ fill:var(--nwx-dim); font-family:'EB Garamond',serif; font-size:12px; }
.nw-loc{ fill:var(--nwx-faint); font-family:'EB Garamond',serif; font-size:11.5px; }
.nw-initial{ fill:color-mix(in srgb,var(--cx-accent) 50%,transparent); font-family:'Cinzel',serif; font-size:34px; }
.nw-star{ fill:var(--nwx-gold); }
.nw-dots{ fill:var(--nwx-dim); }
.nw-cross line{ stroke:var(--cx-danger); stroke-width:3; stroke-linecap:round; }

/* edges */
.nw-edge-label rect{ fill:var(--cx-surface); stroke-width:1; rx:5; }
.nw-edge-label text{ font-family:'Cinzel',serif; font-size:11px; }

/* unconnected tray */
.nwx-tray{ border:1px dashed var(--nwx-line); border-radius:12px; background:var(--nwx-panel); padding:14px 16px; }
.nwx-tray-head{ font-family:'Cinzel',serif; font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--nwx-gold-soft); margin-bottom:10px; }
.nwx-tray-row{ display:flex; align-items:center; gap:14px; }
.nwx-tray-cards{ display:flex; gap:12px; flex-wrap:wrap; }
.nwx-tray-card{ width:96px; border:1px solid var(--nwx-line); border-radius:9px; background:var(--nwx-panel2); padding:8px; text-align:center; cursor:pointer; transition:border-color .15s; }
.nwx-tray-card:hover{ border-color:var(--nwx-gold-soft); }
.nwx-tray-portrait{ width:100%; height:64px; border-radius:6px; object-fit:cover; background:rgba(0,0,0,.35); display:flex; align-items:center; justify-content:center; color:var(--nwx-faint); font-family:'Cinzel',serif; font-size:22px; }
.nwx-tray-name{ font-family:'Cinzel',serif; font-size:10.5px; letter-spacing:.02em; text-transform:uppercase; color:var(--nwx-text); margin-top:6px; line-height:1.2; }
.nwx-tray-role{ font-size:11px; color:var(--nwx-dim); font-style:italic; }
.nwx-tray-hint{ color:var(--nwx-dim); font-size:14px; line-height:1.5; }

/* minimap + zoom overlays */
.nwx-minimap{ position:absolute; right:14px; bottom:60px; width:190px; height:120px; border:1px solid var(--nwx-line); border-radius:9px; background:color-mix(in srgb,var(--cx-field) 80%,transparent); overflow:hidden; }
.nwx-minimap svg{ width:100%; height:100%; display:block; }
.nwx-zoom{ position:absolute; right:14px; bottom:14px; display:flex; align-items:center; gap:6px; }
.nwx-zoom .nwx-zbtn{ width:38px; height:34px; display:flex; align-items:center; justify-content:center; font-size:17px;
  border:1px solid var(--nwx-line); border-radius:8px; background:color-mix(in srgb,var(--cx-field) 82%,transparent); color:var(--nwx-text); cursor:pointer; }
.nwx-zoom .nwx-zbtn:hover{ border-color:var(--nwx-gold-soft); color:var(--nwx-gold); }
.nwx-zoom .nwx-zlevel{ min-width:64px; height:34px; display:flex; align-items:center; justify-content:center;
  border:1px solid var(--nwx-line); border-radius:8px; background:color-mix(in srgb,var(--cx-field) 82%,transparent); color:var(--nwx-text); font-family:'Cinzel',serif; font-size:13px; }
#nw-status{ font-size:12px; }

/* connections / groups tab bodies */
.nwx-conn-list{ display:flex; flex-direction:column; border:1px solid var(--nwx-line); border-radius:12px; overflow:hidden; }
.nwx-conn-item{ display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:14px; padding:12px 16px; border-top:1px solid var(--nwx-line2); cursor:pointer; }
.nwx-conn-item:first-child{ border-top:0; }
.nwx-conn-item:hover{ background:color-mix(in srgb,var(--cx-accent) 4%,transparent); }
.nwx-conn-a{ font-family:'Cinzel',serif; font-size:14px; color:var(--nwx-text); text-align:right; }
.nwx-conn-b{ font-family:'Cinzel',serif; font-size:14px; color:var(--nwx-text); }
.nwx-conn-mid{ display:flex; flex-direction:column; align-items:center; gap:3px; }
.nwx-conn-type{ font-family:'Cinzel',serif; font-size:10px; letter-spacing:.05em; text-transform:uppercase; }
.nwx-group-block{ margin-bottom:18px; }
.nwx-group-h{ font-family:'Cinzel',serif; font-size:13px; letter-spacing:.08em; text-transform:uppercase; color:var(--nwx-gold-soft); padding-bottom:8px; border-bottom:1px solid var(--nwx-line); margin-bottom:12px; }
.nwx-group-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:10px; }
.nwx-mini-card{ display:flex; align-items:center; gap:10px; border:1px solid var(--nwx-line); border-radius:9px; padding:9px 11px; background:var(--nwx-panel2); cursor:pointer; }
.nwx-mini-card:hover{ border-color:var(--nwx-gold-soft); }
.nwx-mini-portrait{ width:34px; height:34px; border-radius:6px; object-fit:cover; flex:0 0 auto; background:rgba(0,0,0,.35); }

/* ---- right inspector ---------------------------------------------------- */
.nw-inspector{ position:sticky; top:8px; border:1px solid var(--nwx-line); border-radius:14px; background:var(--nwx-panel);
  padding:16px; display:flex; flex-direction:column; gap:14px; max-height:calc(100vh - 24px); overflow:auto; }
.nw-inspector[hidden]{ display:none; }
.nwx-ins-head{ display:flex; align-items:center; justify-content:space-between; }
.nwx-ins-head h3{ margin:0; font-family:'Cinzel',serif; font-size:13px; letter-spacing:.09em; text-transform:uppercase; color:var(--nwx-gold); }
.nwx-ins-close{ background:none; border:0; color:var(--nwx-dim); font-size:16px; cursor:pointer; }
.nwx-ins-close:hover{ color:var(--nwx-text); }
.nwx-ins-id{ display:flex; gap:13px; align-items:center; }
.nwx-ins-portrait{ width:78px; height:96px; border-radius:9px; object-fit:cover; flex:0 0 auto; border:1px solid var(--nwx-line); background:rgba(0,0,0,.35);
  display:flex; align-items:center; justify-content:center; color:var(--nwx-faint); font-family:'Cinzel',serif; font-size:26px; position:relative; }
.nwx-ins-portrait .nwx-ins-star{ position:absolute; top:5px; left:5px; color:var(--nwx-gold); }
.nwx-ins-name{ font-family:'Cinzel',serif; font-size:19px; color:var(--cx-accent-bright); line-height:1.15; }
.nwx-ins-role{ font-size:14px; color:var(--nwx-dim); margin-top:5px; }
.nwx-ins-loc{ font-size:13.5px; color:var(--nwx-dim); }
.nwx-ins-btns{ display:flex; gap:10px; }
.nwx-ins-btns .nwx-btn{ flex:1; justify-content:center; }
.nwx-ins-hide{ display:flex; align-items:center; justify-content:space-between; gap:10px; font-family:'Cinzel',serif; font-size:11px; letter-spacing:.05em; text-transform:uppercase; color:var(--nwx-dim); }
.nwx-ins-hlabel{ display:flex; align-items:center; gap:8px; }
.nwx-sec-label{ font-family:'Cinzel',serif; font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--nwx-gold-soft); }
.nwx-ins-conns{ display:flex; flex-direction:column; gap:2px; }
.nwx-ins-conn{ display:grid; grid-template-columns:auto 1fr auto auto; align-items:center; gap:9px; padding:7px 6px; background:none; border:0; border-radius:7px; cursor:pointer; text-align:left; }
.nwx-ins-conn:hover{ background:color-mix(in srgb,var(--cx-accent) 6%,transparent); }
.nwx-ins-conn-av{ width:22px; height:22px; border-radius:5px; object-fit:cover; background:rgba(0,0,0,.4); flex:0 0 auto; }
.nwx-ins-conn-name{ font-size:14px; color:var(--nwx-text); min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.nwx-ins-conn-type{ font-family:'Cinzel',serif; font-size:11px; }
.nwx-ins-conn-dir{ font-size:13px; }
.nwx-ins-conn-star{ color:var(--nwx-gold); font-size:12px; width:14px; }
.nwx-addrel{ width:100%; justify-content:center; }
.nwx-notes{ width:100%; min-height:78px; resize:vertical; font-family:'EB Garamond',serif; font-size:13.5px; color:var(--nwx-text);
  background:rgba(0,0,0,.28); border:1px solid var(--nwx-line); border-radius:8px; padding:9px 11px; }
.nwx-notes:focus{ outline:none; border-color:var(--nwx-gold-soft); }
.nwx-tags{ display:flex; flex-wrap:wrap; gap:7px; align-items:center; }
.nwx-tag{ display:inline-flex; align-items:center; gap:6px; font-family:'Cinzel',serif; font-size:11px; color:var(--nwx-text);
  background:color-mix(in srgb,var(--cx-accent) 8%,transparent); border:1px solid var(--nwx-line); border-radius:6px; padding:4px 9px; }
.nwx-tag button{ border:0; background:none; color:var(--nwx-dim); cursor:pointer; font-size:12px; padding:0; }
.nwx-tag button:hover{ color:var(--nwx-text); }
.nwx-tag-add{ font-family:'Cinzel',serif; font-size:11px; color:var(--nwx-dim); border:1px dashed var(--nwx-line); background:none; border-radius:6px; padding:4px 9px; cursor:pointer; }
.nwx-tag-add:hover{ color:var(--nwx-gold); border-color:var(--nwx-gold-soft); }
.nwx-ins-foot{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding-top:6px; border-top:1px solid var(--nwx-line2); }
.nwx-ins-updated{ font-size:12px; color:var(--nwx-faint); font-style:italic; }

.nwx-empty{ padding:60px 20px; text-align:center; color:var(--nwx-dim); font-style:italic; }

@media(max-width:1180px){
  .nwx-app,.nwx-app.has-inspector{ grid-template-columns:1fr; }
  .nwx-side,.nw-inspector{ position:static; max-height:none; }
}