/* NETWORK-00C: finite, model-authoritative motion; the 00B field stays intact. */
.network-page .signal {
  animation: none;
  stroke-opacity: 0;
  stroke-dasharray: .025 1;
}
.network-page .signal.is-selected-route,
.network-page .signal.is-demo-route {
  stroke-opacity: 0;
}
.network-page .motion-context {
  color: var(--brass);
  font-size: 14px;
  margin: 0;
}
.network-page .plot-footer {
  flex-wrap: wrap;
  gap: 12px;
}
.network-page .is-workflow .cluster-button.is-selected {
  background: var(--ink);
  color: var(--brass);
}
.network-page .is-workflow .cluster-button.is-selected .cluster-number,
.network-page .is-workflow .cluster-button.is-selected .cluster-pointer {
  color: var(--brass);
}
.network-page .is-workflow .cluster-button.is-workflow-current {
  background: var(--brass);
  color: var(--ink);
  border-color: var(--brass);
}
.network-page .is-workflow .cluster-button.is-workflow-current .cluster-number,
.network-page .is-workflow .cluster-button.is-workflow-current .cluster-pointer {
  color: var(--ink);
}
.network-page .is-review-hold .node-halo {
  stroke: var(--brass);
  stroke-width: 2.5;
  stroke-dasharray: 3 3;
}
.network-page .is-review-hold .node-ring {
  stroke-width: 2.5;
}
.network-page .is-awaiting-review [data-cluster="review"]::after {
  content: 'APPROVAL REQUIRED';
  position: absolute;
  top: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  color: var(--brass);
  font-size: 11px;
  letter-spacing: .06em;
  white-space: nowrap;
}
@media (forced-colors: active) {
  .network-page .is-workflow .cluster-button.is-workflow-current {
    background: Highlight;
    color: HighlightText;
  }
  .network-page .is-workflow .cluster-button.is-workflow-current .cluster-number,
  .network-page .is-workflow .cluster-button.is-workflow-current .cluster-pointer {
    color: HighlightText;
  }
  .network-page .motion-context,
  .network-page .is-awaiting-review [data-cluster="review"]::after {color: CanvasText;}
}

/* 00D: preserve the palette while lifting control boundaries above 3:1. */
.network-page .cluster-button,
.network-page .quiet-button:not(:disabled) {
  border-color: var(--mist);
  border-color: color-mix(in srgb, var(--slate) 80%, var(--mist));
}
.network-page .cluster-button:hover,
.network-page .cluster-button.is-selected,
.network-page .quiet-button:not(:disabled):hover {
  border-color: var(--brass);
}
@media (forced-colors: active) {
  .network-page .cluster-button,
  .network-page .quiet-button:not(:disabled) {border-color: ButtonText;}
}

@media (forced-colors: active) {
  /* These states already use system Highlight/HighlightText. Avoid UA text
     backplates hiding their dark text; retain the user's system palette. */
  .network-page .network-stage:not(.is-workflow) .cluster-button.is-selected,
  .network-page .is-workflow .cluster-button.is-workflow-current {
    forced-color-adjust: none;
  }
}