/*
 * React Flow, routed through the design tokens.
 *
 * Scoped to `.react-flow` rather than added to index.css, so the canvas needs no
 * tokens of its own and follows the theme in both modes without a `colorMode`
 * prop. See the root DESIGN-GUIDELINES.md → Shells.
 */

.react-flow {
  --xy-background-color: var(--background);
  --xy-background-pattern-dots-color: color-mix(
    in srgb,
    var(--muted-foreground) 30%,
    transparent
  );
  --xy-edge-stroke: color-mix(
    in srgb,
    var(--muted-foreground) 55%,
    transparent
  );
  --xy-edge-stroke-selected: var(--primary);
  --xy-edge-stroke-width: 1.5;
  --xy-handle-background-color: var(--card);
  --xy-handle-border-color: var(--muted-foreground);
  --xy-selection-background-color: color-mix(
    in srgb,
    var(--primary) 8%,
    transparent
  );
  --xy-selection-border: 1px solid var(--primary);
  --xy-attribution-background-color: transparent;
}

/*
 * Where a pulse lands: the opaque twin of the stroke the edge rests in, so the
 * last step back is invisible. A selected edge rests in blue and so decays into
 * it rather than crossing to grey and snapping back at the end.
 */
.react-flow__edge {
  --edge-rest: var(--muted-foreground);
}

.react-flow__edge.selected {
  --edge-rest: var(--primary);
}

/* A message arriving lights its edge, then decays back to rest. */
@media (prefers-reduced-motion: no-preference) {
  .react-flow__edge-path.edge-live {
    animation: edge-pulse var(--duration-pulse) var(--ease-emphasized);
  }

  /*
   * Both ends are plain colours. The implied `to` would be the edge's resting
   * stroke, which is a `color-mix()` — and interpolating a hex against one of
   * those goes through oklab and leaves the gamut on the way, which turned
   * every pulse fluorescent yellow.
   */
  @keyframes edge-pulse {
    from {
      stroke: var(--primary);
      stroke-width: 2.5;
    }
    to {
      stroke: var(--edge-rest);
      stroke-width: var(--xy-edge-stroke-width);
    }
  }
}

/* A node that just published something says so, once, and settles. */
@media (prefers-reduced-motion: no-preference) {
  .node-pulse {
    position: absolute;
    inset: -3px;
    border-radius: inherit;
    border: 2px solid var(--primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent);
    pointer-events: none;
    animation: node-pulse var(--duration-pulse) var(--ease-emphasized) forwards;
  }

  @keyframes node-pulse {
    from {
      opacity: 1;
      transform: scale(1);
    }
    to {
      opacity: 0;
      transform: scale(1.09);
    }
  }
}

/* Handles are neutral: the one brand-secondary affordance here is Run. */
.react-flow__handle {
  width: 12px;
  height: 12px;
  border-width: 2px;
}

.react-flow__handle.unbound {
  border-style: dashed;
  border-color: color-mix(in srgb, var(--muted-foreground) 40%, transparent);
}

.react-flow__handle-connecting {
  border-color: var(--primary);
}

.react-flow__node:focus-visible,
.react-flow__node:focus {
  outline: none;
}

/*
 * Brain graph. Both ends of a connection sit at the neuron's centre, which is
 * what `BrainEdge` measures its rim trim and its arrowhead from.
 */
.brain-handle {
  opacity: 0;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

/*
 * Embedded on Home rather than on a canvas of its own: the graph paints no
 * surface, so the page's own background shows through behind the neurons.
 *
 * `--brain-decay` is how long a neuron or a connection takes to dim from its
 * brightest back to the floor. Not a UI transition but the falloff of a signal,
 * so it is measured in minutes rather than in the `--duration-*` tokens.
 */
.react-flow.brain-flat {
  --xy-background-color: transparent;
  --brain-decay: 90s;
}

/*
 * A neuron is a filled disc rather than an outline: a `--card` circle on
 * `--background` is a hairline in light and all but nothing in dark.
 *
 * The fill is neutral, and stays neutral — status still speaks only through the
 * border and the word under it. What its lightness carries is how recently this
 * page saw the neuron publish: brightest just after it fires, decaying to a
 * floor it never drops below, so a graph left open sorts itself into what is
 * busy and what is not. A fresh page has seen nothing either way, so everything
 * starts at `.brain-idle`, halfway, claiming no history it does not have.
 */
.brain-cell {
  cursor: pointer;
  background-color: color-mix(
    in srgb,
    var(--muted-foreground) 28%,
    transparent
  );
  transition: border-color var(--duration-base) var(--ease-standard);
}

.brain-cell.brain-idle {
  background-color: color-mix(
    in srgb,
    var(--muted-foreground) 42%,
    transparent
  );
}

/* Snapped into, decayed out of — never the other way round. */
.brain-cell.brain-hot {
  background-color: color-mix(
    in srgb,
    var(--muted-foreground) 65%,
    transparent
  );
  transition: none;
}

@media (prefers-reduced-motion: no-preference) {
  .brain-cell {
    transition:
      border-color var(--duration-base) var(--ease-standard),
      background-color var(--brain-decay) linear;
  }
}

.brain-cell:hover,
.react-flow__node:focus-visible .brain-cell {
  border-color: var(--primary);
}

/*
 * A name under every circle is what makes the graph unreadable, so only the
 * hovered or focused neuron carries one. Absolutely positioned: the layout's
 * collide radius already holds this space clear, and revealing a label must not
 * move anything.
 */
.brain-label {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-top: 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  visibility: hidden;
}

.brain-cell:hover .brain-label,
.react-flow__node:focus-visible .brain-label,
.brain-label.brain-label-on {
  visibility: visible;
}

/* The same falloff as the neurons, on the line instead of the disc. */
.react-flow__edge-path.brain-edge {
  stroke: color-mix(in srgb, var(--muted-foreground) 38%, transparent);
  stroke-linecap: round;
  stroke-linejoin: round;
}

.react-flow__edge-path.brain-edge.brain-idle {
  stroke: color-mix(in srgb, var(--muted-foreground) 55%, transparent);
}

.react-flow__edge-path.brain-edge.brain-hot {
  stroke: color-mix(in srgb, var(--muted-foreground) 85%, transparent);
  transition: none;
}

@media (prefers-reduced-motion: no-preference) {
  .react-flow__edge-path.brain-edge {
    transition: stroke var(--brain-decay) linear;
  }
}