/* Keep the project title clear: graph actions sit around the circle. */
.project-node .node-actions {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  display: block;
  transform: none;
  pointer-events: none;
}
.project-node .node-actions .node-action {
  position: absolute;
  width: 32px;
  height: 32px;
  z-index: 12;
  pointer-events: none;
  transform: translate(-50%, -50%);
}
.project-node .node-actions .node-action:hover { transform: translate(-50%, calc(-50% - 2px)); }
.project-node .node-actions [data-node-action="quick"] { left: 13%; top: -5%; }
.project-node .node-actions [data-node-action="size"] { left: 87%; top: -5%; }
.project-node .node-actions [data-node-action="members"] { left: 105%; top: 65%; }
.project-node .node-actions [data-node-action="edit"] { left: -5%; top: 65%; }
.project-node:hover .node-actions .node-action,
.project-node.hot .node-actions .node-action,
.project-node:focus-within .node-actions .node-action,
.project-node.touch-preview .node-actions .node-action { pointer-events: auto; }
.project-node .project-resize-handle {
  left: 50%;
  right: auto;
  bottom: -23px;
  transform: translateX(-50%);
}
@media (hover: none), (pointer: coarse) {
  .graph-node:not(.touch-preview) .node-actions,
  .graph-node:not(.touch-preview) .project-resize-handle {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }
  .graph-node.touch-preview .node-actions,
  .graph-node.touch-preview .project-resize-handle {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
  .graph-node:not(.touch-preview) .node-actions .node-action { pointer-events: none; }
  .graph-node.touch-preview .node-actions .node-action { pointer-events: auto; }
  .graph-node.touch-preview.project-node::before { opacity: 1; }
  .graph-node.touch-preview.person-node .person-avatar {
    box-shadow: 0 0 0 4px #0e67b32b, 0 8px 20px #1736551f;
  }
  .graph-node.touch-preview { z-index: 30; }
  .project-node .node-actions .node-action {
    width: calc(40px * var(--graph-control-inverse, 1));
    height: calc(40px * var(--graph-control-inverse, 1));
  }
  .project-node .node-actions [data-node-action="quick"] {
    left: calc(-18px * var(--graph-control-inverse, 1));
    top: calc(-18px * var(--graph-control-inverse, 1));
  }
  .project-node .node-actions [data-node-action="size"] {
    left: calc(100% + 18px * var(--graph-control-inverse, 1));
    top: calc(-18px * var(--graph-control-inverse, 1));
  }
  .project-node .node-actions [data-node-action="members"] {
    left: calc(100% + 18px * var(--graph-control-inverse, 1));
    top: calc(100% + 18px * var(--graph-control-inverse, 1));
  }
  .project-node .node-actions [data-node-action="edit"] {
    left: calc(-18px * var(--graph-control-inverse, 1));
    top: calc(100% + 18px * var(--graph-control-inverse, 1));
  }
  .project-node .project-resize-handle {
    width: calc(40px * var(--graph-control-inverse, 1));
    height: calc(40px * var(--graph-control-inverse, 1));
    bottom: calc(-70px * var(--graph-control-inverse, 1));
  }
}
@media (prefers-reduced-motion: reduce) {
  .project-node .node-actions,
  .project-node .node-actions .node-action { transition: none; }
}



.touch-graph-caption {
  position: absolute;
  left: 10px;
  bottom: 10px;
  z-index: 35;
  max-width: calc(100% - 145px);
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--touch-accent, var(--nhs));
  border-radius: 9px;
  background: var(--surface, #fff);
  color: var(--ink, #243a53);
  box-shadow: 0 5px 16px #10233f24;
  pointer-events: none;
  font-size: 12px;
  line-height: 1.3;
}
.touch-graph-caption strong { display: block; overflow-wrap: anywhere; }
.touch-graph-caption small { display: block; color: var(--muted); margin-top: 2px; }
@media (hover: none), (pointer: coarse) {
  .project-node .node-actions .node-action {
    font-size: calc(18px * var(--graph-control-inverse, 1));
    border-width: calc(1px * var(--graph-control-inverse, 1));
  }
  .project-node .project-resize-handle {
    font-size: calc(22px * var(--graph-control-inverse, 1));
    border-width: calc(2px * var(--graph-control-inverse, 1));
  }
}
/* Person actions must leave the avatar clear for the second tap. */
.person-node .node-actions {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  display: block;
  transform: none;
  pointer-events: none;
}
.person-node .node-actions .node-action {
  position: absolute;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.person-node .node-actions .node-action:hover { transform: translate(-50%, calc(-50% - 2px)); }
.person-node .node-actions [data-node-action="quick"] { left: -13px; top: -13px; }
.person-node .node-actions [data-node-action="edit-person"] { left: calc(100% + 13px); top: -13px; }
.person-node:hover .node-actions .node-action,
.person-node.hot .node-actions .node-action,
.person-node:focus-within .node-actions .node-action { pointer-events: auto; }
@media (hover: none), (pointer: coarse) {
  .person-node .node-actions .node-action {
    width: calc(40px * var(--graph-control-inverse, 1));
    height: calc(40px * var(--graph-control-inverse, 1));
    font-size: calc(18px * var(--graph-control-inverse, 1));
    border-width: calc(1px * var(--graph-control-inverse, 1));
  }
  .person-node .node-actions [data-node-action="quick"] {
    left: calc(-25px * var(--graph-control-inverse, 1));
    top: calc(-25px * var(--graph-control-inverse, 1));
  }
  .person-node .node-actions [data-node-action="edit-person"] {
    left: calc(100% + 25px * var(--graph-control-inverse, 1));
    top: calc(-25px * var(--graph-control-inverse, 1));
  }
  .person-node:not(.touch-preview) .node-actions .node-action { pointer-events: none; }
  .person-node.touch-preview .node-actions .node-action { pointer-events: auto; }
}
@media (hover: none), (pointer: coarse) {
  .project-node.touch-actions-lower .node-actions [data-node-action="quick"],
  .project-node.touch-actions-lower .node-actions [data-node-action="size"] {
    top: calc(35px * var(--graph-control-inverse, 1));
  }
  .project-node.touch-actions-upper .node-actions [data-node-action="members"],
  .project-node.touch-actions-upper .node-actions [data-node-action="edit"] {
    top: calc(100% - 35px * var(--graph-control-inverse, 1));
  }
  .project-node.touch-actions-upper .project-resize-handle {
    bottom: auto;
    top: calc(-70px * var(--graph-control-inverse, 1));
  }
}