/* 7 · Wayfinding — before/after plan with a drawn customer route */
.cba-way__app{display:grid;grid-template-columns:minmax(0,8fr) minmax(0,4fr);gap:var(--bdh-gap);align-items:start}
.cba-way__plan{padding:18px 20px 16px;box-shadow:var(--sh-1);min-width:0}
.cba-way__top{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;padding-bottom:14px;border-bottom:var(--cba-hair)}
.cba-way__switch{display:flex;flex-wrap:wrap;gap:8px}
.cba-way__svgwrap{margin:16px 0 12px}
.cba-way__svg{display:block;width:100%;height:auto;overflow:visible}
.cba-way__outline{fill:none;stroke:var(--ink);stroke-width:3}

/* zones — two layers crossfade; zones rise into place one after another */
.cba-way__layer{transition:opacity .5s var(--e)}
.cba-way__zone{transition:opacity .45s var(--e),transform .6s var(--e);transition-delay:calc(var(--i) * 45ms)}
.cba-way__zone rect{fill:var(--paper);stroke:var(--ink);stroke-width:1.25}
.cba-way__zone text{font-family:var(--f-b);font-size:15px;font-weight:500;fill:var(--ink)}
.cba-way__layer--before .cba-way__zone rect{fill:var(--paper-2);stroke-dasharray:none}
.cba-way__layer--after .cba-way__zone rect{fill:var(--paper)}
.cba-way__layer--after .cba-way__zone:first-child rect{fill:var(--blue-wash)}
.cba-way__app[data-state="before"] .cba-way__layer--after,.cba-way__app[data-state="after"] .cba-way__layer--before{opacity:0;pointer-events:none}
.cba-way__app[data-state="before"] .cba-way__layer--after .cba-way__zone,.cba-way__app[data-state="after"] .cba-way__layer--before .cba-way__zone{opacity:0;transform:translateY(10px)}

/* route: pathLength="1" dash-draw on plain strokes (no non-scaling strokes, default aspect ratio) */
.cba-way__route{fill:none;stroke:var(--blue);stroke-width:4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 2.4s var(--e-io)}
.cba-way__app[data-state="before"] .cba-way__layer--before .cba-way__route,.cba-way__app[data-state="after"] .cba-way__layer--after .cba-way__route{stroke-dashoffset:0;transition-delay:.35s}
.cba-way__dead path{fill:none;stroke:var(--ink);stroke-width:3;stroke-linecap:round}
.cba-way__dead{opacity:0;transition:opacity .3s var(--e) 2.2s}
.cba-way__app[data-state="before"] .cba-way__layer--before .cba-way__dead{opacity:1}
.cba-way__door rect{fill:var(--blue)}
.cba-way__door text{font-family:var(--f);font-size:13px;letter-spacing:.1em;text-transform:uppercase;fill:var(--ink)}
.cba-way__walker{fill:var(--paper);stroke:var(--blue);stroke-width:4}

.cba-way__legend{display:flex;flex-wrap:wrap;gap:8px 22px;padding-top:12px;border-top:var(--cba-hair)}
.cba-way__legend span{display:inline-flex;align-items:center;gap:8px}
.cba-way__legend i{display:inline-block;width:22px;height:0;border-top:3px solid var(--blue)}
.cba-way__legend i.is-dead{width:10px;height:10px;border:0;background:linear-gradient(45deg,transparent 45%,var(--ink) 45% 58%,transparent 58%),linear-gradient(-45deg,transparent 45%,var(--ink) 45% 58%,transparent 58%)}

/* side */
.cba-way__side{display:flex;flex-direction:column;gap:18px;min-width:0}
.cba-way__stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-top:var(--cba-ink-hair)}
.cba-way__stats>div{padding:14px 0 14px;border-bottom:var(--cba-hair)}
.cba-way__stats>div:nth-child(odd){padding-right:14px;border-right:var(--cba-hair)}
.cba-way__stats>div:nth-child(even){padding-left:14px}
.cba-way__stats dt{font-family:var(--f);font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
.cba-way__stats dd{margin-top:8px;font-family:var(--f);font-size:clamp(1.4rem,2.2vw,1.9rem);font-weight:500;letter-spacing:-.04em;color:var(--ink);line-height:1}
.cba-way__app[data-state="after"] .cba-way__stats dd{color:var(--blue-d)}
.cba-way__note{font-size:var(--t-sm);line-height:1.6;color:var(--txt);min-height:4.8em}
/* the figure is the size container, so every cqi below is a share of the photo's width */
.cba-way__photo{width:100%;aspect-ratio:1/1;container-type:inline-size}
.cba-way__photo img{object-position:0 100%}
/* directory composited onto the blank panel: in this square bottom crop the panel spans ≈ 0–57% × 15–90% */
.cba-way__dir{position:absolute;left:5%;top:20%;width:47%;height:64%;display:flex;flex-direction:column;gap:2.4cqi;padding:3.3cqi 3.8cqi;overflow:hidden}
.cba-way__dir b{font-family:var(--f-h);font-size:clamp(.7rem,5.2cqi,1.3rem);font-weight:500;letter-spacing:-.012em;color:var(--ink);line-height:1.1;padding-bottom:1.9cqi;border-bottom:1.5px solid var(--ink)}
.cba-way__dirlist{display:flex;flex-direction:column;gap:1.1cqi;list-style:none;margin:0;padding:0}
.cba-way__dirlist li{font-family:var(--f-b);font-size:clamp(.5rem,3.1cqi,.95rem);font-weight:500;color:var(--txt);line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cba-way__dirlist--after li{font-size:clamp(.55rem,3.3cqi,1rem);padding:1.2cqi 0;border-bottom:1px solid var(--line-3)}
/* goal pin at the end of each route, after the walk has drawn */
.cba-way__goal circle{fill:var(--blue-wash-2);stroke:var(--blue);stroke-width:2}
.cba-way__goal .cba-way__goal-c{fill:var(--blue);stroke:none}
.cba-way__goal{opacity:0;transition:opacity .35s var(--e)}
.cba-way__app[data-state="before"] .cba-way__layer--before .cba-way__goal,.cba-way__app[data-state="after"] .cba-way__layer--after .cba-way__goal{opacity:1;transition-delay:2.3s}
.cba-way__legend i.is-goal{width:12px;height:12px;border:2px solid var(--blue);border-radius:50%;background:var(--blue-wash-2)}
.cba-way__hint{display:none;margin-top:12px}
.cba-way__dirlist--after li::before{content:"→ ";color:var(--blue)}
.cba-way__app[data-state="before"] .cba-way__dirlist--after,.cba-way__app[data-state="after"] .cba-way__dirlist--before{display:none}
.cba-way__who{font-size:var(--t-sm);line-height:1.6;color:var(--muted)}
.cba-way__who .cba-mono{margin-right:4px}

@media (max-width:1024px){.cba-way__app{grid-template-columns:minmax(0,1fr)}.cba-way__side{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}.cba-way__photo{grid-row:span 3}}
@media (max-width:700px){
  .cba-way__side{display:flex;align-items:stretch}.cba-way__plan{padding:14px 12px 12px}
  .cba-way__switch .cba-ctl{flex:1 1 auto;padding:0 12px}
  /* the plan keeps a legible scale on phones and scrolls sideways inside its sheet */
  .cba-way__hint{display:block}
  .cba-way__svgwrap{overflow-x:auto;margin:10px -12px 12px;padding:0 12px 8px;-webkit-overflow-scrolling:touch}
  .cba-way__svg{width:640px;max-width:none}
}
@media (prefers-reduced-motion:reduce){.cba-way__layer,.cba-way__zone,.cba-way__route,.cba-way__dead,.cba-way__goal{transition:none}}