/* The desktop calendar, route, van and dispatch details, composed for phones. */
@media screen and (max-width: 1024px) {
    .ppc-panel[data-ppc-slug="scheduling"] .ppc-mobile { max-width: 560px; padding-block: 20px; gap: 18px; }
    .pm-visual--scheduling .pm-dispatch { position: relative; isolation: isolate; width: calc(100% + 16px); max-width: 520px; left: 50%; transform: translateX(-50%); margin-inline: 0; color: #19364b; }
    .pm-dispatch__job, .pm-dispatch__location { position: relative; z-index: 2; border: 1px solid #dce3e8; border-radius: 11px; background: #fff; box-shadow: 0 12px 26px -17px rgb(17 34 51 / 30%), 0 2px 4px rgb(17 34 51 / 4%); }
    .pm-dispatch__job { width: 88%; max-width: 350px; padding: 16px; }
    .pm-dispatch__job-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 9px; }
    .pm-dispatch__job-head > span:first-child { color: #5b6873; font-size: 13px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; }
    .pm-dispatch__status { padding: 3px 8px; border: 1px solid #aac6db; border-radius: 20px; color: #174e7c; background: #edf5fa; font-size: 13px; font-weight: 600; line-height: 1.4; }
    .pm-dispatch__job-body { display: flex; align-items: center; gap: 9px; }
    .pm-dispatch__icon { flex: 0 0 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; color: #214968; background: #f4f3f1; font-size: 13px; }
    .pm-dispatch__job-body > div { min-width: 0; display: grid; gap: 3px; }
    .pm-dispatch__job-body strong { font-size: 16px; line-height: 1.4; }
    .pm-dispatch__job-body > div > span { color: #5b6873; font-size: 14px; line-height: 1.4; }
    .pm-dispatch__art { position: relative; z-index: 1; margin-top: -12px; }
    .pm-dispatch__scene { display: block; width: 100%; height: auto; object-fit: contain; pointer-events: none; mask-image: linear-gradient(to right, transparent, #000 4%, #000 96%, transparent), linear-gradient(to bottom, transparent, #000 4%, #000 96%, transparent); mask-composite: intersect; }
    .pm-dispatch__van { position: absolute; z-index: 1; right: 0; bottom: -42px; width: 38%; height: auto; pointer-events: none; filter: drop-shadow(0 12px 10px rgb(17 34 51 / 14%)); }
    .pm-dispatch__location { display: flex; align-items: center; gap: 10px; width: 59%; margin-top: 4px; padding: 14px; }
    .pm-dispatch__pin { flex: 0 0 32px; height: 32px; display: grid; place-items: center; color: #fff; background: #123456; border-radius: 50%; font-size: 13px; }
    .pm-dispatch__location > div { display: grid; gap: 2px; min-width: 0; }
    .pm-dispatch__location strong { font-size: 16px; line-height: 1.4; }
    .pm-dispatch__location > div > span { color: #5b6873; font-size: 14px; line-height: 1.4; }
}
@media screen and (max-width: 360px) {
    .pm-dispatch__job { width: 100%; padding: 14px; }
    .pm-dispatch__location { width: 61%; padding: 12px 10px; gap: 8px; }
    .pm-dispatch__location strong { font-size: 16px; }
    .pm-dispatch__van { width: 36%; bottom: -38px; }
}
/* Measured density steps keep the complete dispatch illustration in view. */
@media screen and (max-width: 1024px) {
    .ppc-mobile--compact .pm-visual--scheduling .pm-dispatch { max-width: 480px; }
    .ppc-mobile--compact .pm-dispatch__job { padding: 12px 14px; }
    .ppc-mobile--compact .pm-dispatch__job-head { margin-bottom: 6px; }
    .ppc-mobile--compact .pm-dispatch__job-head > span:first-child,
    .ppc-mobile--compact .pm-dispatch__status { font-size: 12px; }
    .ppc-mobile--compact .pm-dispatch__job-body strong,
    .ppc-mobile--compact .pm-dispatch__location strong { font-size: 16px; }
    .ppc-mobile--compact .pm-dispatch__job-body > div > span,
    .ppc-mobile--compact .pm-dispatch__location > div > span { font-size: 14px; }
    .ppc-mobile--compact .pm-dispatch__icon,
    .ppc-mobile--compact .pm-dispatch__pin { flex-basis: 28px; height: 28px; }
    .ppc-mobile--compact .pm-dispatch__location { padding: 11px 12px; }
    .ppc-mobile--compact .pm-dispatch__van { bottom: -34px; }
    .ppc-mobile--short .pm-visual--scheduling .pm-dispatch { max-width: 440px; }
    .ppc-mobile--short .pm-dispatch__job { width: 100%; padding: 10px 12px; }
    .ppc-mobile--short .pm-dispatch__job-head { margin-bottom: 4px; }
    .ppc-mobile--short .pm-dispatch__job-head > span:first-child,
    .ppc-mobile--short .pm-dispatch__status { font-size: 12px; }
    .ppc-mobile--short .pm-dispatch__status { padding-block: 2px; }
    .ppc-mobile--short .pm-dispatch__job-body strong,
    .ppc-mobile--short .pm-dispatch__location strong { font-size: 16px; }
    .ppc-mobile--short .pm-dispatch__job-body > div > span,
    .ppc-mobile--short .pm-dispatch__location > div > span { font-size: 14px; }
    .ppc-mobile--short .pm-dispatch__job-body > div,
    .ppc-mobile--short .pm-dispatch__location > div { gap: 1px; }
    .ppc-mobile--short .pm-dispatch__location { width: 61%; padding: 9px 10px; gap: 7px; }
    .ppc-mobile--short .pm-dispatch__icon,
    .ppc-mobile--short .pm-dispatch__pin { flex-basis: 26px; height: 26px; }
    .ppc-mobile--short .pm-dispatch__van { width: 36%; bottom: -30px; }
}
/* The landscape visual wrapper supplies its own scaling transform. */
@media screen and (min-width: 740px) and (max-width: 1024px) and (max-height: 800px) {
    .ppc-mobile--landscape-fit .pm-visual--scheduling .pm-dispatch {
        left: 0;
        width: 100%;
        margin-inline: auto;
    }
}