/* Shared interaction styles; geometry and course colors remain in the .mmd. */
.course-diagram #graphWrap.graph-wrap .mermaid svg.dimmed g.node,
.course-diagram #graphWrap.graph-wrap .mermaid svg.dimmed path.flowchart-link {
  opacity: .13;
}

.course-diagram #graphWrap.graph-wrap .mermaid svg.dimmed g.node.highlighted,
.course-diagram #graphWrap.graph-wrap .mermaid svg.dimmed g.node.upstream,
.course-diagram #graphWrap.graph-wrap .mermaid svg.dimmed path.flowchart-link.highlighted,
.course-diagram #graphWrap.graph-wrap .mermaid svg.dimmed path.flowchart-link.upstream {
  opacity: 1;
}

.course-diagram #graphWrap.graph-wrap .mermaid svg g.node:focus-visible .label-container {
  outline: 2px solid #1b3664;
  outline-offset: 4px;
}

.course-diagram #graphWrap.graph-wrap .mermaid svg path.course-edge-flow {
  display: none;
  fill: none;
  stroke: #fff2cf;
  stroke-width: 2.5px;
  stroke-linecap: round;
  stroke-dasharray: 2 18;
  pointer-events: none;
}

.course-diagram #graphWrap.graph-wrap .mermaid svg path.course-edge-flow.active {
  display: inline;
  animation: course-edge-flow 1.2s linear infinite;
}

.course-diagram #graphWrap.graph-wrap .mermaid svg path.course-edge-flow.upstream {
  stroke: #d2d7df;
}

@keyframes course-edge-flow {
  from { stroke-dashoffset: 0; }
  to { stroke-dashoffset: -20; }
}

@media (prefers-reduced-motion: reduce) {
  .course-diagram #graphWrap.graph-wrap .mermaid svg path.course-edge-flow.active {
    display: none;
    animation: none;
  }
}

.course-diagram #graphWrap.graph-wrap .mermaid span.edgeLabel p {
  background: #fff;
}