/* Diagram refinements limited to phones and stacked tablet layouts. */
.mobile-action-lines{display:none}
@media(max-width:800px){
 #pilier-accountability{row-gap:12px}
 #pilier-accountability .pillar-right{margin-top:0}
 .p2-hero-grid:has(.action-scene){row-gap:12px}
 .p2-hero-grid:has(.action-scene) .p2-lead{margin-bottom:12px}
 #pilier-accountability .action-scene,.p2-hero-grid .action-scene{padding-top:0}
 #pilier-accountability .action-map,.p2-hero-grid .action-map{margin-top:0}
 .action-map:before{display:none}
 .action-map .mobile-action-lines{display:block;position:absolute;inset:45px 17%;width:66%;height:calc(100% - 90px);overflow:visible;fill:none;pointer-events:none;z-index:-1}
 .mobile-action-lines .action-trace{stroke-width:1.2;opacity:1}
 .context-map{aspect-ratio:1;margin-top:24px}
 .context-map .scene-lines{display:none}
 .context-map:before,.context-map:after{content:'';position:absolute;left:50%;top:50%;translate:-50% -50%;width:68%;aspect-ratio:1;border:1px solid #c2d2bc;border-radius:50%;pointer-events:none}
 .context-map:after{width:91%;border-style:dashed;border-color:#d4dfd0}
 .context-person{width:30%;max-width:130px}
 .context-node{width:48%}
 .context-node span{font-size:11px;margin-bottom:7px}
 .context-node strong{font-size:clamp(21px,6cqi,27px);background:transparent;padding:0 2px}
 .context-a{left:24%;top:11%}.context-b{left:76%;top:11%}
 .context-c{left:24%;top:89%}.context-d{left:76%;top:89%}
 .p1-pair-arrow{rotate:90deg;transform:none!important}
}
@media(max-width:540px){
 /* Follow the circle rows rather than the full height of their labels. */
 .action-map .mobile-action-lines{grid-row:1 / 3;inset:21px 17% -43px;height:calc(100% + 22px)}
}
@media(max-width:540px) and (prefers-reduced-motion:no-preference){
 /* The mobile rectangle reaches circles 02, 03 and 04 at 20%, 50% and 70%. */
 .scene-running .stop-two .stop-circle{animation-name:action-mobile-node-1}
 .scene-running .stop-three .stop-circle{animation-name:action-mobile-node-2}
 .scene-running .stop-four .stop-circle{animation-name:action-mobile-node-3}
 @keyframes action-mobile-node-1{0%,15%,25%,100%{background:#f8faf5;color:var(--deep);box-shadow:0 0 0 5px #e9eee6}18%,22%{background:var(--deep);color:white;box-shadow:0 0 0 8px #91bb8525}}
 @keyframes action-mobile-node-2{0%,45%,55%,100%{background:#f8faf5;color:var(--deep);box-shadow:0 0 0 5px #e9eee6}48%,52%{background:var(--deep);color:white;box-shadow:0 0 0 8px #91bb8525}}
 @keyframes action-mobile-node-3{0%,65%,75%,100%{background:#f8faf5;color:var(--deep);box-shadow:0 0 0 5px #e9eee6}68%,72%{background:var(--deep);color:white;box-shadow:0 0 0 8px #91bb8525}}
}
@media(prefers-reduced-motion:reduce){.mobile-action-lines .action-trace{stroke-dasharray:none;opacity:.3}}