/* The animated explainers (kind "explainer": Tso2.Deck.Explainer draws the stage, assets/js/tso/explainer.js moves
   it). The SVG carries every color as an attribute for the PDFs; here the states (lit, done, open, glow, dim, idea,
   live) are drawn with transitions, so a class the player sets eases in. The stage fills the room the slide leaves
   (wide layout) or follows the column (tall layout: story mode, upright windows). */

.w-xp{flex:1 0 auto;display:flex;flex-direction:column;gap:.45em;margin-top:.3em;position:relative}
.xp-stage{flex:1 1 auto;min-height:13em;position:relative}
.xp-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;display:block}
.w-xp[data-layout=wide] .xp-svg[data-for=tall],.w-xp[data-layout=tall] .xp-svg[data-for=wide]{display:none}
.xp-svg text{font-family:"Fira Sans",Arial,sans-serif}
/* type floors on screen (--xk: screen pixels per drawing unit, set by the player), capped so labels keep their room */
.xp-svg .xl{font-size:min(17px,max(13px,calc(11px / var(--xk,1))))}
.xp-svg .xsub{font-size:min(15px,max(11.5px,calc(10px / var(--xk,1))))}
.xp-svg .xlane{font-size:min(15px,max(11.5px,calc(10px / var(--xk,1))))}
.xp-svg .k-chip .xin{font-size:min(18px,max(14.5px,calc(11px / var(--xk,1))))}
.xp-svg .k-pill .xin{font-size:min(16px,max(13px,calc(11px / var(--xk,1))))}
.xp-svg .xhead{font-size:min(26px,max(21px,calc(13px / var(--xk,1))))}

/* ---------------------------------------------------------------- states */
.xp-svg .xa-in>*,.xp-svg .xa-in g>*{transition:fill .5s var(--ease),stroke .5s var(--ease),opacity .5s var(--ease)}
.xp-svg .xa-in,.xp-svg .xa-lb,.xp-svg .xc{transition:opacity .6s var(--ease)}
.xp-svg .xa.dim .xa-in,.xp-svg .xa.dim .xa-lb,.xp-svg .xc.dim{opacity:.26}
/* a Powerhouse that helps */
.xp-svg .k-building .xs-fill{fill:#fff}
.xp-svg .k-building .xs-halo{opacity:0}
.xp-svg .k-building.lit .xs-fill{fill:#D6F0FB}
.xp-svg .k-building.lit .xs-halo{opacity:.14}
/* the community */
.xp-svg .k-ring .xs-ring{stroke-dasharray:5 5}
.xp-svg .k-ring .xs-fill{fill:transparent}
.xp-svg .k-ring.lit .xs-ring{stroke-dasharray:none}
.xp-svg .k-ring.lit .xs-fill{fill:#EAF7FD}
/* the business groups */
.xp-svg .k-tile .xs-tile{fill:#fff;stroke:#9FB3C8}
.xp-svg .k-tile .xs-glyph{fill:#9FB3C8}
.xp-svg .k-tile.lit .xs-tile{fill:var(--cyan);stroke:var(--cyan)}
.xp-svg .k-tile.lit .xs-glyph{fill:#fff}
/* the front door: it glows, it opens (the attribute transform of the PDF is replaced here) */
.xp-svg .k-door .xs-glow{opacity:0;transition:opacity .6s var(--ease)}
.xp-svg .k-door.glow .xs-glow{opacity:.2}
.xp-svg .k-door .xs-leaf{transform:none;transform-box:fill-box;transform-origin:0 50%;transition:transform .8s cubic-bezier(.65,0,.25,1)}
.xp-svg .k-door.open .xs-leaf{transform:scaleX(.16)}
/* the idea over the person with a business problem */
.xp-svg .look-you .xp-idea{opacity:0;transition:opacity .5s var(--ease)}
.xp-svg .look-you.idea .xp-idea{opacity:1}
/* the phases: lit while the case is there, done after, live in production */
.xp-svg .k-chip .xs-chip{fill:#fff;stroke:var(--blue)}
.xp-svg .k-chip .xin{fill:var(--blue)}
.xp-svg .k-chip.lit .xs-chip{fill:var(--cyan-deep);stroke:var(--cyan-deep)}
.xp-svg .k-chip.done .xs-chip{fill:var(--blue);stroke:var(--blue)}
.xp-svg .k-chip.lit .xin,.xp-svg .k-chip.done .xin{fill:#fff}
.xp-svg .k-chip .xs-live{opacity:0}
.xp-svg .k-chip.live .xs-live{opacity:1}
.xp-svg .k-chip.live .xs-live circle:first-child{transform-box:fill-box;transform-origin:50% 50%;animation:xpulse 1.8s ease-out infinite}
.xp-svg .k-token .xs-halo{transform-box:fill-box;transform-origin:50% 50%;animation:xpulse 1.8s ease-out infinite}
@keyframes xpulse{0%{transform:scale(.7);opacity:.45}100%{transform:scale(2.1);opacity:0}}

/* ---------------------------------------------------------------- the player bar */
.xp-bar{display:flex;align-items:center;gap:.75em;flex:none;font-size:.78em;min-height:2.6em}
.xp-play{flex:none;width:2.5em;height:2.5em;border-radius:50%;border:2px solid var(--blue);background:#fff;color:var(--blue);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;padding:0;transition:background .2s,color .2s}
.xp-play:hover{background:var(--blue);color:#fff}
.xp-play svg.i{width:1.05em;height:1.05em}
.xp-play>span{display:inline-flex}
.xp-i-pause,.w-xp.playing .xp-i-play{display:none!important}
.w-xp.playing .xp-i-pause{display:inline-flex!important}
.xp-track{position:relative;flex:0 0 30%;height:2.2em;cursor:pointer;touch-action:none;border-radius:4px}
.xp-track:focus-visible{outline:3px solid var(--cyan-deep);outline-offset:2px}
.xp-rail{position:absolute;left:0;right:0;top:50%;height:4px;margin-top:-2px;border-radius:2px;background:var(--line);overflow:hidden}
.xp-fill{position:absolute;left:0;top:0;bottom:0;width:100%;background:var(--blue)}
.xp-tick{position:absolute;top:50%;left:0;width:8px;height:8px;margin:-4px 0 0 -4px;border-radius:50%;background:#fff;border:1.5px solid #9FB3C8;transition:background .3s,border-color .3s}
.xp-tick.on{background:var(--blue);border-color:var(--blue)}
.xp-tick.on.lane-1{background:var(--cyan-deep);border-color:var(--cyan-deep)}
.xp-cap{flex:1 1 auto;min-width:0;margin:0;font-weight:600;color:var(--blue);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.3}
/* a live session leads: the follower's controls rest */
.w-xp.following .xp-play,.w-xp.following .xp-track{pointer-events:none;opacity:.45}

/* a window too small for the design box (compact, a phone held sideways): the stage keeps the drawing's
   shape at the content's width and the slide scrolls, so the labels stay legible */
.stagewrap>.frame>.deck.compact .xp-stage{flex:none;min-height:0;aspect-ratio:1000 / 440}
/* the deck's type floors (assets/js/hooks/stage.js: --zf) */
.stagewrap>.frame>.deck .xp-bar{font-size:max(.78em,calc(11.5px / var(--zf)))}

/* ---------------------------------------------------------------- story mode (phones held upright) */
.story .w-xp{flex:none;margin:4px 0 18px;gap:8px}
.story .xp-stage{flex:none;min-height:0}
.story .xp-svg{position:relative;inset:auto;width:100%;height:auto}
.story .xp-bar{flex-wrap:wrap;font-size:14px;row-gap:4px}
.story .xp-play{width:44px;height:44px}
.story .xp-track{flex:1 1 auto;height:44px}
.story .xp-cap{flex:1 0 100%;white-space:normal;font-size:14px}

/* ---------------------------------------------------------------- reduced motion: the static diagram */
@media (prefers-reduced-motion:reduce){
  .w-xp .xp-play,.w-xp .xp-track{display:none}
  .xp-svg *{transition:none!important;animation:none!important}
}