/* Runtime path (builder B2; client r16 note 272): on the light ground, a step list beside one environment drawn in the map's own
   isometric language; each step changes the drawing in place (your agent arrives, it runs with its kept state, it reaches the channels). */
.rt-path{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);align-items:center}
.rt-ps{grid-column:1 / 5;margin:0;padding:0;list-style:none}
.rt-ps li+li{margin-top:6px}
.rt-ps button{all:unset;box-sizing:border-box;display:block;width:100%;cursor:pointer;padding:18px 0 20px;border-top:1px solid var(--iline);position:relative}
.rt-ps button::before{content:'';position:absolute;left:0;top:-1px;height:2px;width:0;background:var(--verm);transition:width var(--t2) var(--ease)}
.rt-ps button h3{color:rgba(14,15,15,.45);transition:color var(--t1) var(--ease)}
.paper .rt-ps button p{color:rgba(74,77,78,.6);margin-top:8px;max-width:26em;transition:color var(--t1) var(--ease)}
.rt-ps button.on h3{color:var(--ink)}
.paper .rt-ps button.on p{color:var(--ink2)}
.rt-ps button.on::before{width:64px}
.rt-ps button:focus-visible{outline:2px solid var(--ink);outline-offset:4px}
.rt-pfig{grid-column:5 / 13;margin:0;display:flex;justify-content:center}
.rt-psvg{display:block;width:100%;max-width:760px;height:auto;overflow:visible}
/* the drawing's parts (state classes on .rt-path: s1, s2, s3; each holds the earlier ones) */
.rt-psvg .slab-t{fill:#fff;stroke:rgba(14,15,15,.22);stroke-width:1}
.rt-psvg .slab-f{fill:#e9ebea;stroke:rgba(14,15,15,.18);stroke-width:1}
.rt-psvg .slab-f2{fill:#dfe1e0;stroke:rgba(14,15,15,.18);stroke-width:1}
.rt-psvg .tick{stroke:rgba(14,15,15,.28);stroke-width:1}
.rt-psvg .c-t{fill:#fff;stroke:rgba(14,15,15,.55);stroke-width:1}
.rt-psvg .c-r{fill:#e6e8e7;stroke:rgba(14,15,15,.45);stroke-width:1}
.rt-psvg .c-l{fill:#d9dbda;stroke:rgba(14,15,15,.45);stroke-width:1}
.rt-psvg .c-i{fill:none;stroke:rgba(14,15,15,.16);stroke-width:1}
.rt-psvg .dot{fill:rgba(14,15,15,.55)}
.rt-psvg .cell{opacity:0;transition:opacity var(--t2) var(--ease)}
.rt-psvg .cell.pz .c-t{stroke-dasharray:3 3;fill:#f3f4f4}
.rt-psvg .cell.pz .dot{fill:rgba(14,15,15,.2)}
.rt-psvg .agent{transition:transform var(--t2) var(--ease-io),opacity var(--t1) var(--ease)}
.rt-psvg .agent .a-t{fill:#fff;stroke:rgba(14,15,15,.7);stroke-width:1.2}
.rt-psvg .agent .a-r{fill:#e6e8e7;stroke:rgba(14,15,15,.6);stroke-width:1.2}
.rt-psvg .agent .a-l{fill:#d6d8d7;stroke:rgba(14,15,15,.6);stroke-width:1.2}
.rt-psvg .agent .a-m{fill:none;stroke:rgba(14,15,15,.35);stroke-width:1}
.rt-psvg .store,.rt-psvg .kept,.rt-psvg .chan,.rt-psvg .flow{opacity:0;transition:opacity var(--t2) var(--ease)}
.rt-psvg .store .s-t{fill:#fff;stroke:rgba(14,15,15,.6);stroke-width:1.1}
.rt-psvg .store .s-b{fill:#e3e5e4;stroke:rgba(14,15,15,.5);stroke-width:1.1}
.rt-psvg .kept{fill:none;stroke:var(--verm);stroke-width:2.2;stroke-linecap:round}
.rt-psvg .flow{fill:none;stroke:var(--verm);stroke-width:2;stroke-linecap:round}
.rt-psvg .chan .c-t{fill:#fff}
.rt-psvg .chan .ch-d{fill:var(--verm)}
.rt-path.s1 .agent{opacity:1}
.rt-path.s2 .cell,.rt-path.s3 .cell{opacity:1}
.rt-path.s1 .cell.home{opacity:1}
.rt-path.s2 .cell.home .c-t,.rt-path.s3 .cell.home .c-t{fill:var(--verm);stroke:rgba(14,15,15,.4)}
.rt-path.s2 .store,.rt-path.s2 .kept,.rt-path.s3 .store,.rt-path.s3 .kept{opacity:1}
.rt-path.s3 .chan,.rt-path.s3 .flow{opacity:1}
@media (max-width:760px){
  .rt-path{display:flex;flex-direction:column-reverse}
  .rt-ps{width:100%;margin-top:18px}
  .rt-ps button{min-height:44px}
  .rt-pfig{width:100%}
}
@media (prefers-reduced-motion:reduce){ .rt-psvg *,.rt-ps button::before{transition:none!important} }