/* ── the wiring board ─────────────────────────────────────────────────────────
   Three columns with an SVG layer on top. The SVG is position:absolute over
   the whole board and sized to it, so line coordinates are board-relative and
   survive scrolling the page.
   ⚠ pointer-events:none on the layer, and re-enabled per line — otherwise the
     overlay swallows every click meant for a node. */
.wire{position:relative;display:grid;grid-template-columns:1fr 1fr 1fr;gap:0;
  border:1px solid var(--r-rule);border-radius:8px;background:var(--r-card);
  margin:1.2rem 0;min-height:26rem;overflow:hidden}
.wire-lines{position:absolute;inset:0;width:100%;height:100%;
  pointer-events:none;z-index:2;overflow:visible}
.wire-lines path{pointer-events:stroke;cursor:pointer;fill:none;
  stroke:var(--r-ajori);stroke-width:1.6;opacity:.75}
.wire-lines path:hover{stroke-width:3;opacity:1}
.wire-lines path.k-group-user{stroke:var(--r-ink-soft);stroke-dasharray:3 3;opacity:.5}
.wire-lines path.k-addr-addr{stroke-dasharray:5 3}
.wire-lines path.drawing{pointer-events:none;stroke-dasharray:4 3;opacity:.9}

.wcol{padding:.9rem .8rem 1.4rem;border-inline-end:1px solid var(--r-rule);
  display:flex;flex-direction:column;gap:.4rem;position:relative;z-index:1}
.wcol:last-child{border-inline-end:0}
.wcol h3{font-size:.8rem;letter-spacing:.04em;text-transform:uppercase;
  color:var(--r-ink-soft);margin:0 0 .5rem;font-weight:600}

/* ── a node ──────────────────────────────────────────────────────────────── */
.wn{position:relative;display:flex;align-items:center;gap:.5rem;
  background:var(--r-ground);border:1px solid var(--r-rule);border-radius:6px;
  padding:.42rem .6rem;font-size:.86rem;line-height:1.25;cursor:default}
.wn-t{display:flex;flex-direction:column;min-width:0;flex:1}
.wn-t small{color:var(--r-ink-soft);font-size:.72rem}
.wn.is-box{opacity:.72;border-style:dashed}
.wn.is-alias{border-color:var(--r-ajori)}
.wn.is-dead{border-style:dotted;opacity:.75}
.wn.is-dead .wn-t small{color:var(--r-danger)}
.wn.is-grp{border-color:var(--r-ajori);background:var(--r-sand,transparent)}
.wn.is-tier{opacity:.6;border-style:dashed}
.wn.is-drop{outline:2px solid var(--r-ajori);outline-offset:2px}
.wn.is-src{box-shadow:0 0 0 2px var(--r-ajori) inset}
.wn .av{width:22px;height:22px;flex:none;border-radius:50%;
  display:grid;place-items:center;font-size:9.5px;background:var(--r-ajori);
  color:var(--r-ajori-ink);font-family:var(--r-en);letter-spacing:.02em}

/* the handle — the thing you drag, like a node editor port */
.wh{position:absolute;inset-inline-end:-6px;top:50%;transform:translateY(-50%);
  width:12px;height:12px;border-radius:50%;background:var(--r-card);
  border:2px solid var(--r-ajori);cursor:grab;z-index:3}
.wh:hover{background:var(--r-ajori)}
.wh:focus-visible{outline:2px solid var(--r-act-text);outline-offset:2px}
[dir=rtl] .wh{inset-inline-end:auto;inset-inline-start:-6px}

/* the person column is the far end, so its nodes take the line on the near side */
.wcol:last-child .wn{padding-inline-start:.6rem}

@media (max-width:820px){
  .wire{grid-template-columns:1fr}
  .wire-lines{display:none}          /* lines are meaningless once stacked */
  .wcol{border-inline-end:0;border-bottom:1px solid var(--r-rule)}
}