/* Progressive discovery + organic relationship drawing */
.graph-viewport {
  overscroll-behavior: contain;
  touch-action: pan-x pan-y;
}

.graph-zoom-surface {
  position: relative;
  width: 1240px;
  height: 940px;
}

.graph-canvas {
  min-width: 1240px !important;
  min-height: 940px !important;
  padding: 0 !important;
  transform: scale(var(--map-zoom, 1));
  transform-origin: 0 0;
  will-change: transform;
}

.nodes {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
}

.character-node {
  position: absolute;
  left: var(--node-x);
  top: var(--node-y);
  width: 178px;
  min-height: 68px;
  grid-column: auto !important;
  grid-row: auto !important;
  transition:
    opacity 220ms ease,
    border-color 180ms ease,
    background 180ms ease,
    box-shadow 180ms ease,
    transform 220ms ease,
    filter 220ms ease;
}

.character-node.is-undiscovered {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transform: translateY(7px) scale(.95);
}

.character-node.is-obscured {
  opacity: .74;
  color: rgba(52, 53, 46, .68);
  border-color: rgba(91, 83, 68, .2);
  background: rgba(231, 222, 201, .6);
  box-shadow: 0 5px 12px rgba(71, 60, 44, .045);
}

.character-node.is-obscured .node-portrait,
.character-node.is-obscured .node-copy {
  filter: blur(4.5px);
  opacity: .54;
  user-select: none;
  transition: filter 220ms ease, opacity 220ms ease;
}

.character-node.is-obscured .node-portrait {
  border-color: rgba(93, 84, 67, .24);
  color: rgba(73, 72, 62, .54);
  background: rgba(255, 252, 241, .18);
}

.character-node.is-obscured:hover,
.character-node.is-obscured:focus-visible {
  border-color: rgba(128, 110, 86, .5);
  background: rgba(238, 229, 208, .86);
  transform: translateY(-1px);
}

.character-node.is-obscured:hover .node-portrait,
.character-node.is-obscured:hover .node-copy,
.character-node.is-obscured:focus-visible .node-portrait,
.character-node.is-obscured:focus-visible .node-copy {
  filter: blur(3.1px);
  opacity: .7;
}

.character-node.is-newly-surfaced {
  animation: record-surface 420ms cubic-bezier(.22, 1, .36, 1) both;
}

.relationship-lines {
  z-index: 1;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.pencil-line {
  fill: none;
  vector-effect: non-scaling-stroke;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
  transition: opacity 180ms ease, stroke-width 180ms ease, stroke 180ms ease;
}

.pencil-line-primary {
  stroke-width: 1.25;
  opacity: .62;
}

.pencil-line-shadow {
  stroke-width: 2.1;
  opacity: .12;
}

.pencil-line.is-connected.pencil-line-primary {
  stroke-width: 1.6;
  opacity: .9;
}

.pencil-line.is-connected.pencil-line-shadow {
  opacity: .19;
}

/* The same relationship colours govern both the filter key and the drawing. */
.type-community { stroke: #8b877a; }
.type-romantic { stroke: #a27c78; }
.type-ecological { stroke: #4e887f; }
.type-adversarial { stroke: #9b735f; }
.type-institutional { stroke: #9a8151; }
.type-deep-time { stroke: #847f8f; }

.pencil-line.type-adversarial:not(.is-growing) { stroke-dasharray: 5 6; }
.pencil-line.type-institutional:not(.is-growing) { stroke-dasharray: 9 5; }
.pencil-line.type-deep-time:not(.is-growing) { stroke-dasharray: 2 7; }

.pencil-line.is-growing {
  stroke-dasharray: var(--path-length) var(--path-length);
  stroke-dashoffset: var(--path-length);
  animation: pencil-draw 760ms cubic-bezier(.33, 1, .68, 1) var(--draw-delay, 0ms) forwards;
}

.filters button {
  --relationship-colour: #716f66;
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.filters button::before {
  content: "";
  display: block;
  width: 14px;
  height: 1px;
  flex: 0 0 14px;
  background: var(--relationship-colour);
  opacity: .72;
}

.filters button[data-filter="romantic"] { --relationship-colour: #a27c78; }
.filters button[data-filter="community"] { --relationship-colour: #8b877a; }
.filters button[data-filter="ecological"] { --relationship-colour: #4e887f; }
.filters button[data-filter="adversarial"] { --relationship-colour: #9b735f; }
.filters button[data-filter="institutional"] { --relationship-colour: #9a8151; }
.filters button[data-filter="deep-time"] { --relationship-colour: #847f8f; }

.filters button:hover,
.filters button:focus-visible,
.filters button.is-active {
  border-bottom-color: var(--relationship-colour);
}

.filters button.is-active::before {
  height: 2px;
  opacity: 1;
}

.related-list button.is-unresolved span {
  color: rgba(69, 68, 59, .54);
  font-style: italic;
}

.related-list button.is-unresolved small {
  color: rgba(92, 84, 68, .52);
}

.related-list button:disabled {
  cursor: default;
  opacity: .7;
}

.related-list li.is-unresolved p {
  color: rgba(73, 71, 62, .45);
  font-style: italic;
}

@keyframes pencil-draw {
  to { stroke-dashoffset: 0; }
}

@keyframes record-surface {
  from {
    opacity: 0;
    filter: blur(2.5px);
    transform: translateY(9px) scale(.95);
  }
  72% { filter: blur(.5px); }
  to { filter: none; }
}

@media (max-width: 700px) {
  .graph-canvas {
    min-width: 1240px !important;
    min-height: 940px !important;
  }

  .character-node {
    width: 178px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .character-node.is-newly-surfaced,
  .pencil-line.is-growing {
    animation: none;
    stroke-dashoffset: 0;
  }
}