/* =========================================================================
   StepWISE — Indoor Navigation animation V2

   Production presentation, promoted from the approved prototype. Loaded by
   capabilities/indoor-navigation/index.html, AFTER site.css,
   with graphic rules scoped to .nav2-* and one mobile-only alignment rule
   scoped to the navigation introduction's .navigation-explainer class.
   The standalone prototype keeps its own CSS and JavaScript. Colour values reuse
   the existing --navy / --waypoint-blue / --amber / --rule / --white
   design tokens from site.css; nothing new is introduced at the token
   level. .explain-graphic / .explain-frame / .desktop-variant /
   .mobile-variant are the same shared, untouched site.css classes the
   production graphic already uses — this file does not redefine them.

   All animation state (box growth, route draw, hold, reverse reset) is
   driven by assets/js/indoor-navigation-graphic-v2.js. This
   file supplies only static presentation: the shared stroke treatment for
   the boundary/boxes/route, and — the one Safari-specific concern named
   in the brief — an explicit transform-box/transform-origin on every box
   so a CSS transform:scale() reliably grows each box from its own centre
   rather than the SVG viewport's origin.

   The default (no-JS / pre-script) appearance of every element below is
   already the complete final frame: full-size boxes, a solid complete
   route. The script hides them at runtime only when it is actually going
   to animate them — exactly the pattern the production
   indoor-navigation-graphic.js file itself uses for its route. */

.nav2-boundary{
  fill:none;
  stroke:var(--control-border);
  stroke-width:1.5;
}

.nav2-box{
  /* rgba(140,135,126,0.16) is --warm-gray (#8C877E = rgb(140,135,126)) at a
     light 16% opacity — a restrained fill that makes each room shape read
     clearly against the frame without competing with the route. Applied as
     a plain fill (not animated on its own): because it lives on the same
     element as the JS-driven transform:scale()/opacity, it grows and fades
     with the box automatically, in lockstep with the existing animation. */
  fill:rgba(140,135,126,0.16);
  stroke:var(--text-gray);
  stroke-width:1.5;
  transform-box:fill-box;
  transform-origin:50% 50%;
}

.nav2-route{
  fill:none;
  stroke-width:3;
  stroke-linecap:round;
  stroke-linejoin:round;
}

/* The introduction belongs visually to the mobile illustration. The
   explanatory steps below it retain their left-aligned reading layout. */
@media (max-width:760px){
  .navigation-explainer > .wrap-wide > .section-head,
  .navigation-explainer > .wrap-wide > .section-intro{ text-align:center; }
}