/* Spinal Alignment interactives (see docs/superpowers/specs/2026-08-01-spinal-alignment-design.md) */
.ax{background:#081E2A;border-radius:1rem;padding:2rem 1.5rem;position:relative;overflow:hidden}
@media(min-width:768px){.ax{padding:2.5rem}}
.ax-grid{display:grid;gap:1.5rem;align-items:start;grid-template-columns:1fr}
@media(min-width:768px){.ax-grid{grid-template-columns:auto 1fr 1.15fr;gap:2rem}}
.ax-chips{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center}
@media(min-width:768px){.ax-chips{flex-direction:column;justify-content:flex-start}}
.ax-chip{font-family:'Oswald',sans-serif;letter-spacing:.1em;font-size:.85rem;color:#cfe2ea;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);border-radius:.65rem;padding:.65rem 1.1rem;cursor:pointer;transition:background .2s,box-shadow .2s,color .2s;text-align:left}
.ax-chip small{display:block;font-family:'Sora',sans-serif;font-size:.62rem;letter-spacing:.02em;color:#9db4c0;text-transform:none}
.ax-chip:hover{background:rgba(249,118,0,.3)}
.ax-chip:focus-visible{outline:2px solid #F97600;outline-offset:2px}
.ax-chip.ax-on{background:#F97600;color:#081E2A;border-color:#F97600;box-shadow:0 0 16px rgba(249,118,0,.5)}
.ax-chip.ax-on small{color:#081E2A}
.ax-fig{justify-self:center;width:min(100%,254px);position:relative;isolation:isolate;overflow:hidden;background:transparent}
/* padding ratio (not aspect-ratio) so children's height:100% resolves in iOS Safari */
.ax-fig::before{content:'';display:block;padding-top:200%}
.ax-patient-art{display:block;position:absolute;top:0;left:50%;height:100%;width:auto;max-width:none;transform:translateX(-50%)}
.ax-measure-layer{position:absolute;top:0;left:50%;height:100%;width:auto;max-width:none;z-index:2;pointer-events:none;transform:translateX(-50%)}
.ax-patient{fill:rgba(46,163,214,.075);stroke:rgba(207,226,234,.28);stroke-width:1.25}
.ax-patient--skin{fill:rgba(220,232,237,.18);stroke:rgba(237,246,249,.48)}
.ax-patient--gown{fill:rgba(25,82,104,.38);stroke:rgba(141,178,194,.44)}
.ax-patient--arm{fill:rgba(207,226,234,.12);stroke:rgba(207,226,234,.38)}
.ax-patient--leg{fill:rgba(25,82,104,.32);stroke:rgba(141,178,194,.38)}
.ax-patient--far{fill:rgba(46,163,214,.035);stroke:rgba(207,226,234,.16)}
.ax-patient-edge{fill:none;stroke:rgba(207,226,234,.18);stroke-width:1.1;stroke-linecap:round}
.ax-eye{fill:#cfe2ea}.ax-shoe{fill:rgba(207,226,234,.2);stroke:rgba(207,226,234,.35);stroke-width:1}
.ax-ribs{fill:none;stroke:rgba(207,226,234,.075);stroke-width:1}
.ax-shadow{fill:rgba(0,121,170,.16)}
.ax-bone{fill:rgba(255,255,255,.10);stroke:rgba(255,255,255,.28);stroke-width:1.1}
.ax-detail{fill:none;stroke:rgba(255,255,255,.22);stroke-width:1;stroke-linecap:round}
.ax-pelvis-bone{stroke-width:1.35}
.ax-overlay{opacity:0;transition:opacity .3s}
.ax-overlay.ax-show{opacity:1}
.ax-line{stroke:#F97600;stroke-width:.8;fill:none;filter:drop-shadow(0 0 1.2px rgba(249,118,0,.7))}
.ax-line--ref{stroke:#2ea3d6;stroke-dasharray:2 1.5;stroke-width:.55}
.ax-arc{stroke:#F97600;stroke-width:.9;fill:rgba(249,118,0,.15)}
.ax-dot{fill:#F97600}
.ax-lbl{font-family:'Oswald',sans-serif;font-size:4px;fill:#ffb066;letter-spacing:.06em;font-weight:600}
.ax-panel{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.15);border-radius:.75rem;padding:1.35rem 1.5rem;min-height:15rem}
.ax-panel h4{font-family:'Oswald',sans-serif;color:#F97600;letter-spacing:.14em;font-size:.9rem;margin:0 0 .35rem;text-transform:uppercase}
.ax-panel .ax-range{display:inline-block;background:rgba(249,118,0,.15);border:1px solid rgba(249,118,0,.4);color:#ffb066;border-radius:999px;padding:.2rem .8rem;font-size:.78rem;margin:.2rem 0 .8rem}
.ax-panel p,.ax-panel dd{color:#cfe2ea;font-size:.87rem;line-height:1.65;margin:0}
.ax-panel dt{color:#fff;font-weight:600;font-size:.85rem;margin-top:.7rem}
.ax-hint{color:#9db4c0;font-size:.9rem;line-height:1.7}
/* simulator */
.bx{background:#081E2A;border-radius:1rem;padding:2rem 1.5rem;position:relative;overflow:hidden}
@media(min-width:768px){.bx{padding:2.5rem}}
.bx-grid{display:grid;gap:1.75rem;grid-template-columns:1fr}
@media(min-width:900px){.bx-grid{grid-template-columns:minmax(260px,340px) 1fr;gap:3rem;align-items:center}}
.bx-fig{justify-self:center;width:min(100%,254px);position:relative;overflow:hidden;background:transparent;isolation:isolate}
.bx-fig::before{content:'';display:block;padding-top:200%}
.bx-pose{position:absolute;inset:0;background-image:url('/assets/img/alignment-compensation-stages-transparent.png');background-repeat:no-repeat;background-size:300% 100%;background-color:transparent;transition:opacity .18s linear;will-change:opacity}
.bx-pose--0{background-position:0 0}.bx-pose--1{background-position:50% 0;opacity:0}.bx-pose--2{background-position:100% 0;opacity:0}
.bx-overlay{position:absolute;inset:0;width:100%;height:100%;z-index:3;pointer-events:none}
.bx-ground{fill:rgba(0,121,170,.16);stroke:rgba(0,121,170,.5);stroke-width:.65}
.bx-plumb{stroke:#F97600;stroke-width:.75;stroke-dasharray:2 2;filter:drop-shadow(0 0 1px rgba(249,118,0,.55))}
.bx-dot{fill:#F97600}
.bx-body{fill:rgba(38,91,112,.7);stroke:rgba(207,226,234,.72);stroke-width:1.6;stroke-linejoin:round}
.bx-far{fill:rgba(207,226,234,.055);stroke:rgba(207,226,234,.28)}
.bx-torso{fill:rgba(32,101,128,.68);stroke:rgba(185,215,226,.82)}
.bx-arm{fill:none;stroke:rgba(74,135,158,.92);stroke-width:15;stroke-linecap:round;stroke-linejoin:round}
.bx-neck{stroke:rgba(207,226,234,.72);stroke-width:11;stroke-linecap:round}
.bx-spine{stroke:#ffb066;stroke-width:8;stroke-linecap:round;fill:none;filter:drop-shadow(0 0 6px rgba(249,118,0,.4))}
.bx-head{fill:#dce8ed;stroke:rgba(255,255,255,.9);stroke-width:1.5;stroke-linejoin:round}
.bx-face{fill:#557786}
.bx-pelvis{fill:rgba(255,255,255,.25);stroke:rgba(255,255,255,.6);stroke-width:1.5}
.bx-joint{fill:#9db4c0;stroke:#dce8ed;stroke-width:1.2}
.bx-slider{width:100%;accent-color:#F97600;height:2.2rem}
.bx-readouts{display:grid;grid-template-columns:repeat(3,1fr);gap:.75rem;margin-top:1rem}
.bx-stat{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.15);border-radius:.65rem;padding:.7rem .9rem;text-align:center}
.bx-stat b{font-family:'Oswald',sans-serif;font-size:1.25rem;display:block;letter-spacing:.04em}
.bx-stat span{font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:#9db4c0}
.bx-g{color:#4ade80}.bx-o{color:#ffb066}.bx-r{color:#f87171}
.bx-meter{height:.6rem;border-radius:999px;background:rgba(255,255,255,.1);overflow:hidden;margin-top:.4rem}
.bx-meter i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,#4ade80,#ffb066,#f87171);transition:width .15s}
.bx-story{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.15);border-radius:.75rem;padding:1.2rem 1.35rem;margin-top:1.1rem;min-height:7.5rem}
.bx-story h4{font-family:'Oswald',sans-serif;letter-spacing:.12em;font-size:.85rem;margin:0 0 .3rem;text-transform:uppercase}
.bx-story p{color:#cfe2ea;font-size:.86rem;line-height:1.65;margin:0}
@media(prefers-reduced-motion:reduce){.ax-overlay{transition:none}.bx-meter i{transition:none}.ax-chip,.ax-chip.ax-on{box-shadow:none;transition:none}}
@media(prefers-reduced-motion:reduce){.bx-pose{transition:none}}