/* BPV 360: the shared loop links every subject and returns to the learner. */
.vector-framework{--loop-color:#f78a21}
.vector-framework[data-active-fundamental="quality"],.vector-framework[data-active-fundamental="energy"]{--loop-color:#49b4ba}
.vector-framework[data-active-fundamental="controls"],.vector-framework[data-active-fundamental="operations"]{--loop-color:#a6cd6b}
.vector-framework .framework-art{isolation:isolate}
.vector-framework .framework-art>img{display:block}
.vector-framework .bpv-motion-layer{position:absolute;inset:0;display:block;width:100%;height:100%;z-index:1;overflow:visible;pointer-events:none}
.vector-framework .art-hotspot{z-index:2}
.bpv-motion-layer .bpv-orbit{fill:none;stroke:var(--orbit-color,#b5df78);stroke-width:var(--orbit-width,3);stroke-linecap:round;stroke-dasharray:var(--orbit-dashes,12 88);stroke-dashoffset:0;opacity:var(--orbit-opacity,.95);vector-effect:non-scaling-stroke;animation:bpv-orbit-flow var(--orbit-speed,8s) linear infinite var(--orbit-direction,normal)}
.bpv-motion-layer .bpv-world-flow{--orbit-color:var(--loop-color);--orbit-width:3.4;--orbit-dashes:6 94;--orbit-speed:18s;--orbit-opacity:1}
.bpv-motion-layer .bpv-outer-flow{--orbit-color:#49b4ba;--orbit-width:2;--orbit-dashes:1 99;--orbit-speed:24s;--orbit-direction:reverse;--orbit-opacity:.8}
.bpv-motion-layer .bpv-loop-track,.bpv-motion-layer .bpv-outer-rail,.bpv-motion-layer .bpv-hub-track{fill:none;vector-effect:non-scaling-stroke}
.bpv-motion-layer .bpv-loop-track{stroke:var(--loop-color);stroke-width:1.35;opacity:.4}
.bpv-motion-layer .bpv-outer-rail{stroke:#64aab1;stroke-width:.8;stroke-dasharray:.2 1.3;opacity:.42}
.bpv-motion-layer .bpv-hub-track{stroke:#49b4ba;stroke-width:1;stroke-dasharray:5 7;opacity:.3}
.bpv-motion-layer .bpv-hub-ring{fill:none;stroke:#f78a21;stroke-width:1.1;opacity:.42;vector-effect:non-scaling-stroke}
.bpv-motion-layer .bpv-signal{--connection-color:#f78a21}
.bpv-motion-layer .bpv-signal[data-signal="quality"],.bpv-motion-layer .bpv-signal[data-signal="energy"]{--connection-color:#49b4ba}
.bpv-motion-layer .bpv-signal[data-signal="controls"],.bpv-motion-layer .bpv-signal[data-signal="operations"]{--connection-color:#a6cd6b}
.bpv-motion-layer .bpv-spoke,.bpv-motion-layer .bpv-packet{fill:none;stroke:var(--connection-color);stroke-linecap:round;vector-effect:non-scaling-stroke}
.bpv-motion-layer .bpv-spoke{stroke-width:1.2;opacity:.14;transition:opacity .2s ease,stroke-width .2s ease}
.bpv-motion-layer .bpv-packet{stroke-width:2.2;stroke-dasharray:20 80;stroke-dashoffset:100;opacity:.4;animation:bpv-connection-flow 2.8s linear infinite}
.bpv-motion-layer .bpv-signal:nth-of-type(2n) .bpv-packet{animation-delay:-1.4s}
.bpv-motion-layer .bpv-signal.is-active .bpv-spoke{opacity:.66;stroke-width:1.6}
.bpv-motion-layer .bpv-signal.is-active .bpv-packet{stroke-width:4;stroke-dasharray:28 72;opacity:1;animation-duration:1.8s}
.bpv-motion-layer .bpv-outer-link{opacity:.65}
.bpv-motion-layer .bpv-signal.is-active .bpv-outer-link{opacity:1;stroke-width:2}
.bpv-motion-layer .bpv-junction{fill:#071c2c;stroke:var(--connection-color);stroke-width:1.5;opacity:.75;vector-effect:non-scaling-stroke}
.bpv-motion-layer .bpv-signal.is-active .bpv-junction{fill:var(--connection-color);stroke-width:2;opacity:1}
@keyframes bpv-orbit-flow{from{stroke-dashoffset:0}to{stroke-dashoffset:-100}}
@keyframes bpv-connection-flow{from{stroke-dashoffset:100}to{stroke-dashoffset:0}}

/* Pausing affects motion, not selection, focus, or the selected explanation. */
.vector-framework:is(.is-motion-paused,.is-motion-offscreen) .bpv-orbit,
.vector-framework:is(.is-motion-paused,.is-motion-offscreen) .bpv-packet,
.vector-framework:is(.is-motion-paused,.is-motion-offscreen) .art-hotspot{animation-play-state:paused!important}
.vector-framework.motion-reduced .bpv-orbit,
.vector-framework.motion-reduced .bpv-packet,
.vector-framework.motion-reduced .art-hotspot{animation:none!important;transition:none!important}
.vector-framework.motion-reduced .bpv-packet{opacity:0!important}
.vector-framework.motion-reduced .bpv-orbit{stroke-dasharray:none;opacity:.24}
.vector-framework.motion-reduced .bpv-signal.is-active .bpv-spoke{opacity:.85}

.vector-framework .motion-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding:15px 0 3px}
.vector-framework .motion-hint{flex:1 1 180px;margin:0 12px 0 0;color:var(--muted,#51636d);font-size:.78rem;line-height:1.6}
.vector-framework .motion-toggle,.vector-framework .tour-toggle{min-height:44px;padding:10px 14px;display:inline-flex;align-items:center;justify-content:center;gap:7px;border:1px solid #a9bcbd;border-radius:3px;background:#fff;color:var(--navy,#071c2c);font:600 .76rem/1.4 var(--body,'DM Sans',sans-serif);cursor:pointer;touch-action:manipulation;transition:background .18s ease,border-color .18s ease}
.vector-framework .motion-toggle:hover,.vector-framework .tour-toggle:hover{background:#edf3ef;border-color:var(--teal,#13838e)}
.vector-framework .tour-toggle[aria-pressed="true"]{background:var(--navy,#071c2c);border-color:var(--navy,#071c2c);color:#fff}
.vector-framework .motion-toggle:disabled,.vector-framework .tour-toggle:disabled{opacity:.6;cursor:default}
.vector-framework .motion-state{margin:9px 0 0;color:var(--teal,#13838e);font-size:.74rem;line-height:1.6;font-weight:600}
.vector-framework .tour-status{min-height:1.6em;margin:10px 0 5px;color:var(--muted,#51636d);font-size:.76rem;line-height:1.65}
.vector-framework .tour-status:empty{display:none}
.vector-framework .fundamental-controls button{min-height:44px;padding:11px 8px;line-height:1.4;cursor:pointer}
.vector-framework .fundamental-controls button:hover{border-color:var(--teal,#13838e)}
.vector-framework .fundamental-controls button[aria-pressed="true"]{border-color:var(--navy,#071c2c);background:var(--navy,#071c2c);color:#fff}
.vector-framework :is(.motion-toggle,.tour-toggle,.fundamental-controls button):focus-visible{outline:3px solid var(--teal,#13838e);outline-offset:3px}
.vector-framework .art-hotspot:focus-visible{outline:3px solid #fff;outline-offset:4px;border-color:var(--orange,#f78a21);box-shadow:0 0 0 7px #071c2c}

/* The number, visible separator and level label remain distinct at every width. */
.level-tabs button{display:flex;align-items:center;justify-content:center;gap:6px;min-height:44px;line-height:1.35;white-space:normal}
.level-tabs button>b{flex:0 0 auto;line-height:1.2}
.level-tabs button>span[aria-hidden="true"]{flex:0 0 auto;opacity:.55;line-height:1}
.level-tabs button>span:not([aria-hidden="true"]){min-width:0;line-height:1.35}
.level-tabs button:hover{background:#edf3ef}
.level-tabs button[aria-selected="true"],.level-tabs button[aria-selected="true"]:hover{background:var(--navy,#071c2c);color:#fff}
.level-tabs button:focus-visible{outline:3px solid var(--teal,#13838e);outline-offset:3px}

@media(max-width:620px){
 .vector-framework .motion-toolbar{gap:8px;padding-top:12px}
 .vector-framework .motion-hint{flex-basis:100%;margin:0 0 2px;font-size:.76rem}
 .vector-framework .motion-toggle,.vector-framework .tour-toggle{flex:1 1 120px;padding:10px 12px}
 .vector-framework .fundamental-controls{gap:7px}
 .vector-framework .fundamental-controls button{font-size:11px;padding:10px 5px}
 .vector-framework .tour-status{font-size:.74rem}
 .level-tabs button{gap:5px;padding:10px 6px}
}
@media(prefers-reduced-motion:reduce){
 .vector-framework .bpv-orbit,.vector-framework .bpv-packet,.vector-framework .art-hotspot{animation:none!important;transition:none!important}
 .vector-framework .bpv-packet{opacity:0!important}
 .vector-framework .bpv-orbit{stroke-dasharray:none;opacity:.24}
 .vector-framework .bpv-signal.is-active .bpv-spoke{opacity:.85}
 .vector-framework .bpv-spoke,.vector-framework .motion-toggle,.vector-framework .tour-toggle{transition:none!important}
}

/* A visitor can deliberately play this diagram even with reduced motion enabled. */
@media(prefers-reduced-motion:reduce){
 .vector-framework.motion-user-enabled .bpv-orbit{animation:bpv-orbit-flow var(--orbit-speed,8s) linear infinite var(--orbit-direction,normal)!important;stroke-dasharray:var(--orbit-dashes,12 88);opacity:var(--orbit-opacity,.95)}
 .vector-framework.motion-user-enabled .bpv-packet{animation:bpv-connection-flow 2.8s linear infinite!important;opacity:.4!important}
 .vector-framework.motion-user-enabled .bpv-signal.is-active .bpv-packet{animation-duration:1.8s!important;opacity:1!important}
 .vector-framework.motion-user-enabled:is(.is-motion-paused,.is-motion-offscreen) :is(.bpv-orbit,.bpv-packet){animation-play-state:paused!important}
}