/* A fixed automation setup, with a condition and two visible outcomes. */
.auto-route {
    --route-paper: var(--background-bright, #fcf9f2);
    --route-ink: #19364b;
    --route-muted: #657984;
    --route-amber: #af762c;
    --route-green: #2b7658;
    width: 100%;
    color: var(--route-ink);
    font-size: 14px;
    line-height: 1.4;
}
.auto-route__map { position: relative; height: 490px; margin-top: 24px; }
.auto-route__connectors { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.auto-route__connectors--mobile { display: none; }
.auto-route__connection, .auto-route__arrows { fill: none; stroke: #8fa5b1; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.auto-route__connection--yes, .auto-route__arrows--yes { stroke: #7fa68d; }
.auto-route__connection--later, .auto-route__arrows--later { stroke: #bc965e; }
.auto-route__merge { fill: var(--route-green); stroke: var(--route-paper); stroke-width: 2; }
.auto-route__stop { position: absolute; top: 15.3061%; width: 90px; height: 90px; transform: translate(-50%, -50%); }
.auto-route__stop--lead { left: 7.9268%; }
.auto-route__stop--welcome { left: 30.4878%; }
.auto-route__stop--condition { left: 53.0488%; width: 82px; height: 82px; }
.auto-route__stop--wait { left: 53.0488%; top: 45.9184%; width: 64px; height: 64px; }
.auto-route__stop--followup { left: 73.1707%; top: 45.9184%; width: 76px; height: 76px; }
.auto-route__stop--booked { left: 90.2439%; top: 74.4898%; width: 100px; height: 100px; }
.auto-route__art { display: block; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 7px 7px rgb(25 54 75 / 7%)); }
.auto-route__label { position: absolute; top: calc(100% + 12px); left: 50%; transform: translateX(-50%); width: 174px; display: grid; gap: 4px; text-align: center; }
.auto-route__label strong { font-size: 18px; font-weight: 600; }
.auto-route__label > span { color: var(--route-muted); font-size: 12px; line-height: 1.5; }
.auto-route__label > .auto-route__role { font-size: 10px; font-weight: 600; letter-spacing: .11em; text-transform: uppercase; line-height: 1.2; }
.auto-route__stop--condition .auto-route__label { top: auto; bottom: calc(100% + 9px); width: 160px; }
.auto-route__stop--condition strong { font-size: 16px; }
.auto-route__stop--wait .auto-route__label { top: calc(100% + 17px); width: 130px; }
.auto-route__stop--followup .auto-route__label { width: 180px; gap: 3px; }
.auto-route__stop--wait strong, .auto-route__stop--followup strong { font-size: 16px; }
.auto-route__stop--wait .auto-route__role, .auto-route__stop--followup .auto-route__role { color: #936b35; }
.auto-route__stop--booked .auto-route__label { top: calc(100% + 10px); width: 180px; }
.auto-route__stop--booked strong { color: var(--route-green); font-size: 22px; }
.auto-route__branch { position: absolute; font-size: 12px; font-weight: 500; }
.auto-route__branch--later { left: 55%; top: 27.5%; color: #996b2f; }

@media screen and (min-width: 1025px) and (max-height: 800px) {
    .auto-route__map { height: 410px; margin-top: 24px; }
    .auto-route__stop { width: 80px; height: 80px; }
    .auto-route__stop--condition { width: 72px; height: 72px; }
    .auto-route__stop--booked { width: 90px; height: 90px; }
    .auto-route__stop--wait { width: 54px; height: 54px; }
    .auto-route__stop--followup { width: 64px; height: 64px; }
    .auto-route__label { top: calc(100% + 9px); gap: 3px; }
    .auto-route__label strong { font-size: 16px; }
    .auto-route__label > span { font-size: 11px; }
    .auto-route__label > .auto-route__role { font-size: 9px; }
    .auto-route__stop--condition .auto-route__label { bottom: calc(100% + 7px); }
    .auto-route__stop--condition strong { font-size: 15px; }
    .auto-route__stop--wait .auto-route__label { top: calc(100% + 14px); }
    .auto-route__stop--wait strong, .auto-route__stop--followup strong { font-size: 15px; }
    .auto-route__stop--booked strong { font-size: 21px; }
}
/* Keep the complete setup readable on phones, including short viewports. */
@media screen and (max-width: 1024px) {
    .ppc-panel--showcase-automations .ppc-mobile { max-width: 540px; gap: 24px; padding-block: 20px; }
    .ppc-panel--showcase-automations .ppc-mobile__points { display: none; }
    .auto-route { max-width: 440px; margin-inline: auto; }
    .auto-route__map { height: 480px; margin-top: 0; }
    .auto-route__connectors--desktop { display: none; }
    .auto-route__connectors--mobile { display: block; }
    .auto-route__stop { left: 12.2222%; width: 74px; height: 74px; }
    .auto-route__stop--lead { top: 6.7308%; }
    .auto-route__stop--welcome { top: 22.6923%; }
    .auto-route__stop--condition { top: 38.4615%; width: 64px; height: 64px; }
    .auto-route__stop--wait { left: 73.6111%; top: 55%; width: 64px; height: 64px; }
    .auto-route__stop--followup { left: 73.6111%; top: 73.0769%; width: 72px; height: 72px; }
    .auto-route__stop--booked { top: 92.3077%; width: 88px; height: 88px; }
    .auto-route__label { left: calc(100% + 12px); top: 50%; transform: translateY(-50%); width: min(210px, calc(100vw - 128px)); text-align: left; gap: 3px; }
    .auto-route__label strong { font-size: 18px; line-height: 1.35; }
    .auto-route__label > span { font-size: 14px; line-height: 1.45; }
    .auto-route__label > .auto-route__role { font-size: 13px; line-height: 1.3; letter-spacing: .08em; }
    .auto-route__stop--condition .auto-route__label { top: 50%; bottom: auto; left: calc(100% + 20px); width: min(200px, calc(100vw - 136px)); }
    .auto-route__stop--condition strong { font-size: 18px; }
    .auto-route__stop--wait .auto-route__label,
    .auto-route__stop--followup .auto-route__label { left: auto; right: calc(100% + 12px); top: 50%; transform: translateY(-50%); width: 160px; text-align: right; }
    .auto-route__stop--wait strong, .auto-route__stop--followup strong { font-size: 18px; }
    .auto-route__stop--booked .auto-route__label { top: 50%; left: calc(100% + 11px); width: min(220px, calc(100vw - 128px)); }
    .auto-route__stop--booked strong { font-size: 24px; }
    .auto-route__branch { font-size: 14px; }
    .auto-route__branch--later { left: calc(73.6111% + 12px); top: 43%; }
    body:has(.ppc--pinned .ppc-panel--showcase-automations.is-active) #backToTop { visibility: hidden; }
}
@media screen and (max-width: 360px) {
    .auto-route__stop--wait .auto-route__label,
    .auto-route__stop--followup .auto-route__label { width: 144px; }
}
/* Density is selected from the measured space available to the whole slide. */
@media screen and (max-width: 1024px) {
    .ppc-mobile--compact .auto-route__map { height: 420px; }
    .ppc-mobile--compact .auto-route__stop { width: 58px; height: 58px; }
    .ppc-mobile--compact .auto-route__stop--condition,
    .ppc-mobile--compact .auto-route__stop--wait { width: 50px; height: 50px; }
    .ppc-mobile--compact .auto-route__stop--followup { width: 64px; height: 64px; }
    .ppc-mobile--compact .auto-route__stop--booked { width: 68px; height: 68px; }
    .ppc-mobile--compact .auto-route__label { gap: 2px; }
    .ppc-mobile--compact .auto-route__label strong { font-size: 18px; line-height: 1.3; }
    .ppc-mobile--compact .auto-route__label > span { font-size: 14px; line-height: 1.35; }
    .ppc-mobile--compact .auto-route__label > .auto-route__role { font-size: 12px; line-height: 1.2; }
    .ppc-mobile--compact .auto-route__stop--booked strong { font-size: 22px; }
    .ppc-mobile--compact .auto-route__branch { font-size: 13px; }
    .ppc-mobile--short .auto-route__map { height: 380px; }
    .ppc-mobile--short .auto-route__stop { width: 52px; height: 52px; }
    .ppc-mobile--short .auto-route__stop--condition,
    .ppc-mobile--short .auto-route__stop--wait { width: 44px; height: 44px; }
    .ppc-mobile--short .auto-route__stop--followup { width: 50px; height: 50px; }
    .ppc-mobile--short .auto-route__stop--booked { width: 72px; height: 72px; }
    .ppc-mobile--short .auto-route__label { gap: 2px; }
    .ppc-mobile--short .auto-route__label strong { font-size: 18px; line-height: 1.3; }
    .ppc-mobile--short .auto-route__label > span { font-size: 14px; line-height: 1.35; }
    .ppc-mobile--short .auto-route__label > .auto-route__role { display: none; }
    .ppc-mobile--short .auto-route__stop--booked strong { font-size: 22px; }
    .ppc-mobile--short .auto-route__branch { font-size: 12px; }
}
@media screen and (max-width: 360px) {
    .ppc-mobile--compact .auto-route__stop--wait .auto-route__label,
    .ppc-mobile--compact .auto-route__stop--followup .auto-route__label { width: 144px; }
    .ppc-mobile--short .auto-route__stop--wait .auto-route__label,
    .ppc-mobile--short .auto-route__stop--followup .auto-route__label { width: 144px; }
}
@media screen and (min-width: 430px) and (max-width: 1024px) {
    .auto-route__map { height: clamp(480px, calc(100svh - 430px), 620px); }
    .auto-route__stop { width: 88px; height: 88px; }
    .auto-route__stop--condition, .auto-route__stop--wait { width: 76px; height: 76px; }
    .auto-route__stop--followup { width: 84px; height: 84px; }
    .auto-route__stop--booked { width: 104px; height: 104px; }
    .auto-route__stop--wait .auto-route__label, .auto-route__stop--followup .auto-route__label { width: 190px; }
    .auto-route__label strong { font-size: 20px; }
    .auto-route__label > span { font-size: 15px; }
    .auto-route__label > .auto-route__role { font-size: 13px; }
    .auto-route__stop--booked strong { font-size: 26px; }
}
/* Tighten the route spacing on the shortest narrow phones, not its labels. */
@media screen and (max-width: 360px) and (max-height: 650px) {
    .ppc-mobile--short .auto-route__map { height: 320px; }
    .ppc-mobile--short .auto-route__stop--booked { width: 64px; height: 64px; }
}