/* One route becomes readable as the workflow reaches each existing step. */
.auto-route--demonstrating .auto-route__connection,
.auto-route--demonstrating .auto-route__arrows,
.auto-route--demonstrating .auto-route__merge { opacity: .2; transition: opacity 180ms linear; }
.auto-route--demonstrating .auto-route__art { opacity: .38; transition: opacity 160ms linear; }
.auto-route--demonstrating .is-auto-reached > .auto-route__art { opacity: 1; }
.auto-route--demonstrating .auto-route__branch--later { opacity: .3; transition: opacity 160ms linear; }
.auto-route--branching .auto-route__branch--later { opacity: 1; }
.auto-route .automation-trace {
    fill: none;
    stroke: #315c74;
    stroke-width: 2.1;
    stroke-linecap: round;
    stroke-linejoin: round;
    pointer-events: none;
    transition: opacity 180ms linear;
}
.auto-route .automation-trace[data-auto-to="wait"],
.auto-route .automation-trace[data-auto-to="followup"] { stroke: #a87029; }
.auto-route .automation-trace[data-auto-to="booked"] { stroke: #2b7658; }
.auto-route--restoring .auto-route__connection,
.auto-route--restoring .auto-route__arrows,
.auto-route--restoring .auto-route__merge { opacity: 1; }
.auto-route--restoring .automation-trace { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
    .auto-route--demonstrating :is(.auto-route__connection, .auto-route__arrows, .auto-route__merge, .auto-route__art, .auto-route__branch--later) { opacity: 1; transition: none; }
    .auto-route .automation-trace { display: none; }
}