.note-relationship-graph,
.note-graph-explorer {
  display: none;
  margin: 2.75rem 0 0;
  padding: .5rem;
  border: 1px solid var(--hr-border, rgba(73, 91, 110, .24));
  border-radius: .85rem;
  background: var(--card-bg, rgba(127, 127, 127, .06));
}

.note-relationship-graph.is-ready,
.note-graph-explorer.is-ready { display: block; }

.note-graph-explorer { margin-top: .5rem; }

.note-relationship-graph__canvas {
  min-height: 13rem;
  border-radius: .6rem;
  overflow: hidden;
  background: radial-gradient(circle at 50% 45%, rgba(86, 135, 211, .12), transparent 64%);
}

.note-graph-explorer .note-relationship-graph__canvas {
  min-height: clamp(29rem, 68vh, 46rem);
  background: radial-gradient(circle at 50% 45%, rgba(86, 135, 211, .16), transparent 66%);
}

.note-relationship-graph__svg {
  display: block;
  width: 100%;
  height: 13rem;
  touch-action: none;
  cursor: grab;
  user-select: none;
}

.note-relationship-graph__svg--overview { height: clamp(29rem, 68vh, 46rem); }
.note-relationship-graph__svg.is-panning { cursor: grabbing; }
.note-relationship-graph__svg.is-dragging { cursor: move; }

.note-relationship-graph__edge {
  stroke: rgba(75, 122, 184, .48);
  stroke-width: 1.7;
  transition: opacity .18s ease, stroke .18s ease, stroke-width .18s ease;
}

.note-relationship-graph__edge[data-relation-type='tag'] {
  stroke-dasharray: 4 4;
  stroke: rgba(116, 112, 159, .58);
}

.note-relationship-graph__edge.is-muted,
.note-relationship-graph__node.is-muted { opacity: .13; }

.note-relationship-graph__edge.is-highlighted {
  stroke: #f0bf57;
  stroke-width: 2.6;
}

.note-relationship-graph__node {
  cursor: pointer;
  transition: opacity .18s ease;
}

.note-relationship-graph__node circle {
  fill: var(--btn-bg, #4b7ab8);
  stroke: var(--card-bg, #fff);
  stroke-width: 3;
  transition: r .18s ease, stroke .18s ease, stroke-width .18s ease, filter .18s ease;
}

.note-relationship-graph__node--current circle { fill: #d88142; }
.note-relationship-graph__node--isolated circle { fill: #9aaabd; stroke-width: 2; }
.note-relationship-graph__node--hub circle { fill: #d88142; }

.note-relationship-graph__node text {
  fill: var(--font-color, #444);
  font-size: 13px;
  pointer-events: none;
  transition: opacity .18s ease;
}

.note-relationship-graph__svg--overview .note-relationship-graph__node text { font-size: 12px; opacity: 0; }

.note-relationship-graph__svg--overview .note-relationship-graph__node:hover text,
.note-relationship-graph__svg--overview .note-relationship-graph__node:focus-visible text,
.note-relationship-graph__svg--overview .note-relationship-graph__node.is-highlighted text { opacity: 1; }

.note-relationship-graph__node:focus-visible circle,
.note-relationship-graph__node:hover circle,
.note-relationship-graph__node.is-highlighted circle {
  stroke: #f0bf57;
  stroke-width: 4;
  filter: drop-shadow(0 0 4px rgba(240, 191, 87, .65));
}

@media (max-width: 600px) {
  .note-relationship-graph { padding: .35rem; }
  .note-relationship-graph__canvas { min-height: 10rem; }
  .note-relationship-graph__svg { height: 10rem; }
  .note-graph-explorer .note-relationship-graph__canvas,
  .note-relationship-graph__svg--overview { min-height: 27rem; height: 62vh; }
  .note-relationship-graph__node text { font-size: 11px; }
}

@media (prefers-reduced-motion: reduce) {
  .note-relationship-graph__edge,
  .note-relationship-graph__node,
  .note-relationship-graph__node circle,
  .note-relationship-graph__node text { transition: none; }
}