/* graph scene (NIC.fig.graphScene) */
.rn-svg text {
  font-family: var(--sans);
  text-anchor: middle;
}
.rn-base {
  stroke: var(--line-2);
  stroke-width: 3;
  stroke-linecap: round;
  transition:
    stroke var(--dur-3) ease,
    opacity var(--dur-3) ease;
}
.rn-hot {
  stroke: var(--teal);
  stroke-width: 6;
  stroke-linecap: round;
}
.rn-edge.try .rn-base {
  stroke: var(--amber);
  stroke-width: 4;
  stroke-dasharray: 6 5;
  animation: rn-dash 0.6s linear infinite;
}
.rn-edge.dim {
  opacity: 0.35;
}
.rn-edge.reject .rn-base {
  stroke: var(--rose);
  stroke-dasharray: 4 5;
}
.rn-hot.amber {
  stroke: var(--amber);
}
@keyframes rn-dash {
  to {
    stroke-dashoffset: -11;
  }
}
.rn-wt rect {
  fill: var(--panel);
  stroke: var(--line-2);
  stroke-width: 2;
}
.rn-wt text {
  font-size: 13px;
  font-weight: 900;
  fill: var(--text);
}
.rn-halo {
  fill: none;
  stroke: transparent;
  stroke-width: 4;
  opacity: 0;
}
.rn-c {
  fill: var(--panel-2);
  stroke: var(--line-2);
  stroke-width: 3;
  transition:
    fill var(--dur-4) ease,
    stroke var(--dur-4) ease;
}
.rn-l {
  font-size: 16px;
  font-weight: 900;
  fill: var(--text-dim);
  transition: fill var(--dur-4) ease;
}
.rn-tag rect {
  fill: var(--panel);
  stroke: var(--line);
  stroke-width: 2;
  transition:
    fill var(--dur-4) ease,
    stroke var(--dur-4) ease;
}
.rn-tag text {
  font-size: 12.5px;
  font-weight: 900;
  fill: var(--text-dim);
}
.rn-node.s-tent .rn-c {
  fill: var(--violet-dim);
  stroke: var(--violet);
}
.rn-node.s-tent .rn-l {
  fill: var(--violet-ink);
}
.rn-node.s-tent .rn-tag rect {
  stroke: var(--violet-edge);
}
.rn-node.s-done .rn-c {
  fill: var(--teal);
  stroke: var(--teal-lip);
}
.rn-node.s-done .rn-l {
  fill: var(--teal-on);
}
.rn-node.s-done .rn-tag rect {
  fill: var(--teal-dim);
  stroke: var(--teal-edge);
}
.rn-node.s-cur .rn-c {
  fill: var(--amber);
  stroke: var(--amber-lip);
}
.rn-node.s-cur .rn-l {
  fill: var(--amber-on);
}
.rn-node.s-cur .rn-tag rect {
  fill: var(--amber-dim);
  stroke: var(--amber-edge);
}
.rn-node.s-bad .rn-c {
  fill: var(--rose);
  stroke: var(--rose-lip);
}
.rn-node.s-bad .rn-l {
  fill: var(--rose-on);
}
@media (max-width: 720px) {
  .rn-code {
    padding: 4px 0;
  }
  .rn-code li:not(.on) {
    display: none;
  }
  .rn-code:not(:has(li.on))::before {
    content: "Code: press play";
    display: block;
    padding: 3px 12px;
    color: var(--text-faint);
    font-weight: 800;
  }
}

/* a2-astar grid runner (js/content/algo/algo-p2-*.js astarRun) */
.rn-gc rect {
  fill: var(--panel-2);
  stroke: var(--line);
  stroke-width: 2;
  transition:
    fill var(--dur-3) ease,
    stroke var(--dur-3) ease;
}
.rn-gc text {
  font-size: 13px;
  font-weight: 900;
  fill: var(--text-dim);
  pointer-events: none;
}
.rn-gc-free {
  cursor: pointer;
}
.rn-gc-free:hover rect {
  stroke: var(--blue-edge);
}
.rn-gc.wall rect {
  fill: var(--text-dim);
  stroke: var(--text-dim);
}
.rn-gc.open rect {
  fill: var(--violet-dim);
  stroke: var(--violet);
}
.rn-gc.open text {
  fill: var(--violet-ink);
}
.rn-gc.closed rect {
  fill: var(--teal-dim);
  stroke: var(--teal-edge);
}
.rn-gc.closed text {
  fill: var(--teal-ink);
}
.rn-gc.path rect {
  fill: var(--teal);
  stroke: var(--teal-lip);
}
.rn-gc.path text {
  fill: var(--teal-on);
}
.rn-gc.cur rect {
  fill: var(--amber);
  stroke: var(--amber-lip);
}
.rn-gc.cur text {
  fill: var(--amber-on);
}
.rn-gc-start rect {
  stroke: var(--amber);
  stroke-width: 3;
}
.rn-gc-goal rect {
  stroke: var(--rose);
  stroke-width: 3;
}
.rn-gc-goal:not(.path):not(.cur) text {
  fill: var(--rose-ink);
}
.rn-gc.rn-pickable rect {
  stroke: var(--violet);
  animation: rn-glow 1.1s ease-in-out infinite;
}

/* a5-graham — Graham scan runner (js/content/algo/algo-p5-*.js grahamRun). Prefix: rn-hull- */
.rn-hull-rays line {
  stroke: var(--line-2);
  stroke-width: 1.5;
  stroke-dasharray: 3 4;
}
.rn-hull-chain {
  fill: none;
  stroke: var(--teal);
  stroke-width: 4;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.rn-hull-chain.rn-hull-closed {
  fill: rgba(88, 204, 2, 0.1);
}
.rn-hull-try {
  stroke: var(--amber);
  stroke-width: 3.5;
  stroke-dasharray: 6 5;
  stroke-linecap: round;
  animation: rn-dash 0.6s linear infinite;
}
.rn-hull-c {
  fill: var(--panel-2);
  stroke: var(--line-2);
  stroke-width: 2.5;
  transition:
    fill var(--dur-3) ease,
    stroke var(--dur-3) ease;
}
.rn-hull-l {
  font-size: 13px;
  font-weight: 900;
  fill: var(--text-dim);
  pointer-events: none;
}
.rn-hull-ord circle {
  fill: var(--violet);
}
.rn-hull-ord text {
  font-size: 11px;
  font-weight: 900;
  fill: var(--violet-on);
  pointer-events: none;
}
.rn-hull-pt.rn-hull-on .rn-hull-c {
  fill: var(--teal-dim);
  stroke: var(--teal);
}
.rn-hull-pt.rn-hull-pivot .rn-hull-c {
  fill: var(--amber);
  stroke: var(--amber-lip);
}
.rn-hull-pt.rn-hull-pivot .rn-hull-l {
  fill: var(--amber-on);
}
.rn-hull-pt.rn-hull-out .rn-hull-c {
  fill: var(--rose-dim);
  stroke: var(--rose);
}
.rn-hull-pt.rn-hull-top .rn-hull-c {
  stroke: var(--amber);
  stroke-width: 4;
}
.rn-hull-pt.rn-hull-cand .rn-hull-c {
  fill: var(--violet-dim);
  stroke: var(--violet);
  stroke-width: 4;
}
.rn-hull-btn rect {
  fill: var(--panel);
  stroke: var(--line-2);
  stroke-width: 2;
  transition:
    fill var(--dur-2) ease,
    stroke var(--dur-2) ease;
}
.rn-hull-btn text {
  font-size: 13px;
  font-weight: 900;
  fill: var(--text-dim);
  pointer-events: none;
}
.rn-hull-btns {
  transition: opacity var(--dur-3) ease;
}
.rn-hull-btns.rn-hull-idle {
  opacity: 0.3;
}
.rn-hull-btn.rn-hull-yes rect {
  fill: var(--teal-dim);
  stroke: var(--teal);
}
.rn-hull-btn.rn-hull-yes text {
  fill: var(--teal-ink);
}
.rn-hull-btn.rn-hull-no rect {
  fill: var(--rose-dim);
  stroke: var(--rose);
}
.rn-hull-btn.rn-hull-no text {
  fill: var(--rose-ink);
}
.rn-hull-btn.rn-pickable rect {
  stroke: var(--violet);
  stroke-width: 3;
  animation: rn-glow 1.1s ease-in-out infinite;
}
.rn-hull-stack {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
  min-height: 32px;
}
.rn-hull-stack small {
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-right: 2px;
}
.rn-hull-cell {
  min-width: 30px;
  padding: 3px 8px;
  text-align: center;
  border: 2px solid var(--teal-edge, var(--teal));
  border-radius: 9px;
  background: var(--teal-dim);
  color: var(--teal-ink);
  font-weight: 900;
  font-size: 13px;
  box-shadow: 0 2px 0 var(--teal-edge, var(--teal));
}
.rn-hull-cell.top {
  border-color: var(--amber);
  background: var(--amber-dim);
  color: var(--amber-ink);
  box-shadow: 0 2px 0 var(--amber-edge);
}
.rn-hull-cell.gone {
  border-color: var(--rose-edge);
  background: var(--rose-dim);
  color: var(--rose-ink);
  text-decoration: line-through;
  box-shadow: none;
}

/* a4-mst Prim + Kruskal runners (js/content/algo/algo-p4-*.js primRun, kruskalRun) */
.rn-hit {
  stroke: transparent;
  stroke-width: 18;
  stroke-linecap: round;
}
.rn-mst-prim .rn-tag {
  display: none;
}
.rn-mst .rn-edge.reject .rn-wt rect {
  stroke: var(--rose);
  fill: var(--rose-dim);
}
.rn-mst .rn-edge.reject .rn-wt text {
  fill: var(--rose-ink);
}
.rn-mst .rn-edge.rn-pickable {
  cursor: pointer;
}
.rn-mst .rn-edge.rn-pickable .rn-wt rect {
  stroke: var(--violet) !important;
  stroke-dasharray: none;
  animation: rn-glow 1.1s ease-in-out infinite;
}