/* /syllabus/vyayama.html: warm-ups, Sūrya Namaskāra and āsana.
   Page-only styles: the Sūrya Namaskāra wheel (#sw), the joint map (#jm), the āsana sorter (#sorter),
   the practice tabs and small text helpers. Palette and the night stage come from course.css. */

html:not(.js) .vy-needs-js { display: none; }

.vy-code { display: inline-block; vertical-align: middle; margin-left: .4em; padding: .2em .5em; border-radius: 6px; background: var(--sage-lt); color: var(--sage-dk); font: 600 .7rem/1.2 var(--sans); letter-spacing: .04em; }
.verse span.cite { display: block; margin-top: .35em; font-size: .85rem; line-height: 1.4; color: var(--muted); }
.table-scroll .vy-sn-table { min-width: 640px; }
.vy-sn-table .deva { font-size: 1.08rem; white-space: nowrap; }
.vy-sn-table i { white-space: nowrap; }
.vy-tabs [role="tabpanel"] h4 { margin-top: .2em; }
.vy-tabs [role="tabpanel"]:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; border-radius: 8px; }

/* shared: Sanskrit on the night stage */
.stage .deva { color: #fff; }
.stage .iast { color: var(--glow); }

/* shared: the breath pill (dot grows on the in-breath, shrinks on the out-breath) */
.vy-sw-breath, .vy-jm-breath { display: inline-flex; align-items: center; gap: .6em; margin: 0 0 .9em; padding: .4em 1em .4em .8em; border: 1px solid rgba(243, 223, 168, .4); border-radius: 999px; font: 600 .74rem/1.2 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--glow) !important; }
.vy-sw-breath::before, .vy-jm-breath::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--glow); box-shadow: 0 0 10px rgba(243, 223, 168, .8); transform: scale(.7); transition: transform .9s ease-in-out, opacity .6s; }
[data-breath="in"]::before { transform: scale(1.5); }
[data-breath="out"]::before { transform: scale(.55); }
[data-breath="hold"]::before { transform: scale(.55); opacity: .5; }
[data-breath="normal"]::before { transform: scale(.9); opacity: .75; }

/* ---------- 1. Sūrya Namaskāra wheel ---------- */
.vy-sw-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: 16px 36px; align-items: center; margin-top: 10px; }
.vy-sw-svg { max-width: 560px; margin: 0 auto; touch-action: manipulation; overflow: visible; }
.vy-sw-panel { min-width: 0; }
.vy-sw-panel > * { margin-top: 0; }
.vy-sw-count { font: 600 .74rem/1.2 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .6) !important; margin-bottom: .5em; }
.vy-sw-count b { color: var(--glow); font-weight: 600; }
.stage .vy-sw-name { font: 400 clamp(1.5rem, 3vw, 2.05rem)/1.15 var(--serif); margin: 0 0 .15em; color: #fff; text-transform: none; letter-spacing: 0; }
.vy-sw-en { font: italic 500 1.2rem/1.3 var(--serif-it); color: var(--glow) !important; margin-bottom: .7em; }
.vy-sw-deva { font-size: 1.65rem; line-height: 1.4; margin: 0; }
.stage .vy-sw-iast { margin: 0 0 .25em; font-size: 1.25rem; }
.vy-sw-mean { margin-bottom: .8em; }
.vy-sw-cue { font-size: .93rem; min-height: 4.4em; margin-bottom: .6em; }
.vy-sw-bija { font-size: .82rem; color: rgba(255, 255, 255, .6) !important; margin-bottom: .4em; }
.vy-sw-bija span { font-style: italic; color: rgba(255, 255, 255, .85); }
.vy-sw-more { font-size: .88rem; margin: 0; min-height: 1.6em; }
.vy-sw-panel.swap > * { animation: vy-in .55s ease both; }
.vy-tempo { display: inline-flex; align-items: center; gap: 8px; font: 600 .8rem/1 var(--sans); color: rgba(255, 255, 255, .78); }

.sw-track { fill: none; stroke: rgba(243, 223, 168, .14); stroke-width: 1.5; }
.sw-orbit { fill: none; stroke: rgba(243, 223, 168, .08); stroke-width: 1; }
.sw-prog { fill: none; stroke: var(--glow); stroke-width: 2.6; stroke-linecap: round; filter: drop-shadow(0 0 4px rgba(243, 223, 168, .7)); }
.sw-mark { fill: #FFF6D8; filter: drop-shadow(0 0 6px rgba(243, 223, 168, .95)); }
.sw-horizon { stroke-width: 1.4; }
.sw-sun { filter: drop-shadow(0 0 18px rgba(243, 198, 90, .75)); }
.sw-rays line { stroke: rgba(243, 223, 168, .22); stroke-width: 1.2; stroke-linecap: round; }
.sw-rays { transform-box: fill-box; transform-origin: center; animation: vy-spin 90s linear infinite; animation-play-state: paused; }
.vy-sw.is-live .sw-rays { animation-play-state: running; }
.sw-breath { fill: none; stroke: rgba(243, 223, 168, .5); stroke-width: 1.6; }
.sw-breath.hold { stroke-dasharray: 2 8; stroke: rgba(243, 223, 168, .7); }
.sw-breath-word { font: italic 500 24px var(--serif-it); fill: var(--glow); text-anchor: middle; letter-spacing: .04em; }
.sw-fig path, .sw-big path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.sw-big path { stroke: #FFF4D6; stroke-width: 4.4; }
.sw-big { filter: drop-shadow(0 0 6px rgba(243, 223, 168, .55)); }
.sw-big .far, .sw-fig .far { opacity: .42; }
.sw-shade path, .sw-shade circle { fill: none; stroke: rgba(18, 24, 49, .78); stroke-width: 11; stroke-linecap: round; stroke-linejoin: round; }
.sw-big circle { fill: var(--night-3); stroke: #FFF4D6; stroke-width: 4.4; }
.sw-node { cursor: pointer; outline: none; }
.sw-disc { fill: rgba(18, 24, 49, .9); stroke: rgba(243, 223, 168, .32); stroke-width: 1.2; transition: fill .5s, stroke .5s; }
.sw-fig path { stroke: rgba(243, 223, 168, .68); stroke-width: 2.4; transition: stroke .5s; }
.sw-fig circle { fill: rgba(18, 24, 49, .9); stroke: rgba(243, 223, 168, .68); stroke-width: 2.4; transition: stroke .5s; }
.sw-node:hover .sw-disc { stroke: rgba(243, 223, 168, .7); }
.sw-node.on .sw-disc { fill: rgba(243, 223, 168, .16); stroke: var(--glow); stroke-width: 2; }
.sw-node.on .sw-fig path, .sw-node.on .sw-fig circle { stroke: #fff; }
.sw-node:focus-visible .sw-disc { stroke: #fff; stroke-width: 3; }
.sw-num { font: 600 23px var(--sans); fill: rgba(255, 255, 255, .5); text-anchor: middle; dominant-baseline: central; transition: fill .5s; }
.sw-num.on { fill: var(--glow); }

/* ---------- 2. joint map ---------- */
.vy-jm-grid { display: grid; grid-template-columns: minmax(0, 280px) minmax(0, 1fr); gap: 16px 32px; align-items: center; margin-top: 10px; }
.vy-jm-svg { max-width: 280px; margin: 0 auto; touch-action: manipulation; overflow: visible; }
.vy-jm-panel { min-width: 0; }
.vy-jm-sk { font: italic 500 1.15rem/1.3 var(--serif-it); color: var(--glow) !important; margin: 0; }
.stage .vy-jm-title { font: 400 1.7rem/1.2 var(--serif); margin: .05em 0 .25em; color: #fff; text-transform: none; letter-spacing: 0; }
.vy-jm-stage { font: 600 .74rem/1.4 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 255, 255, .62) !important; min-height: 1.4em; margin-bottom: .6em; }
.vy-jm-steps { margin: 0 0 .8em; padding-left: 1.2em; font-size: .93rem; min-height: 8.5em; }
.vy-jm-steps li { margin-bottom: .35em; }
.vy-jm-more { font-size: .88rem; margin: 0; }

.jm-torso { fill: rgba(243, 223, 168, .07); stroke: rgba(255, 244, 214, .7); stroke-width: 1.6; stroke-linejoin: round; }
.jm-glow { fill: none; stroke: rgba(243, 223, 168, .12); stroke-width: 15; stroke-linecap: round; stroke-linejoin: round; }
.jm-line { fill: none; stroke: rgba(255, 244, 214, .88); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.jm-head { fill: #221F44; stroke: rgba(255, 244, 214, .88); stroke-width: 2; }
.jm-eye { fill: rgba(255, 244, 214, .85); }
.jm-nose { fill: none; stroke: rgba(255, 244, 214, .7); stroke-width: 1.6; stroke-linecap: round; }
.jm-hand { fill: rgba(243, 223, 168, .22); stroke: rgba(255, 244, 214, .88); stroke-width: 1.6; }
.jm-tick { stroke: var(--glow); stroke-width: 2.2; stroke-linecap: round; }
.jm-guide { fill: none; stroke: rgba(243, 223, 168, .5); stroke-width: 1.4; stroke-dasharray: 3 6; opacity: 0; transition: opacity .6s; }
.jm-guide.on { opacity: 1; }
.jm-hot { cursor: pointer; outline: none; }
.jm-hit { fill: #000; fill-opacity: 0; pointer-events: all; }
.jm-halo { fill: rgba(243, 223, 168, .2); transform-box: fill-box; transform-origin: center; animation: vy-pulse 2.8s ease-in-out infinite; }
.jm-dot { fill: var(--glow); filter: drop-shadow(0 0 5px rgba(243, 223, 168, .9)); transition: fill .4s; }
.jm-hot.on .jm-dot { fill: #fff; }
.jm-hot.on .jm-halo { fill: rgba(243, 223, 168, .4); }
.jm-hot:hover .jm-halo { fill: rgba(243, 223, 168, .35); }
.jm-hot:focus-visible .jm-dot { stroke: #fff; stroke-width: 3; }

/* ---------- 3. āsana sorter ---------- */
.vy-sort-toggle { justify-content: flex-start; margin-top: 4px; }
.vy-sort-board { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 22px 26px; margin-top: 22px; }
.stage .vy-g h4 { margin: 0 0 .7em; font: 400 1.2rem/1.2 var(--serif); color: #fff; letter-spacing: 0; text-transform: none; }
.vy-g h4 small { margin-left: .35em; font: italic 500 1.02rem/1 var(--serif-it); color: var(--glow); }
.vy-g .vy-n { margin-left: .5em; padding: .15em .55em; border-radius: 999px; background: rgba(243, 223, 168, .14); font: 600 .72rem/1 var(--sans); color: var(--glow); vertical-align: middle; }
.vy-g:not([hidden]) h4 { animation: vy-in .6s ease both; }
.vy-chips { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0 !important; }
.stage .vy-chip { margin: 0; position: relative; }
.vy-chip a, .vy-chip span { display: inline-block; padding: .45em .9em; border: 1px solid rgba(243, 223, 168, .34); border-radius: 999px; background: rgba(255, 255, 255, .06); color: #fff; font: 500 .86rem/1.25 var(--sans); text-decoration: none; transition: background .25s, color .25s, border-color .25s, box-shadow .4s; }
.stage .vy-chip a { color: #fff; }
.vy-chip a:hover, .vy-chip a:focus-visible { background: var(--glow); border-color: var(--glow); color: var(--night); outline: none; }
.vy-chip.is-unclear span { border-style: dashed; color: rgba(255, 255, 255, .68); }
.vy-chip.flying a, .vy-chip.flying span { box-shadow: 0 0 16px rgba(243, 223, 168, .55); border-color: var(--glow); }

@keyframes vy-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes vy-spin { to { transform: rotate(360deg); } }
@keyframes vy-pulse { 0%, 100% { transform: scale(.8); opacity: .7; } 50% { transform: scale(1.25); opacity: 1; } }

@media (max-width: 760px) {
  .vy-sw-grid, .vy-jm-grid { grid-template-columns: 1fr; }
  .vy-jm-svg { max-width: 230px; }
  .vy-sw-cue { min-height: 0; }
  .vy-jm-steps { min-height: 0; }
  .vy-sort-board { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .sw-rays, .jm-halo, .vy-g:not([hidden]) h4, .vy-sw-panel.swap > * { animation: none; }
  .vy-sw-breath::before, .vy-jm-breath::before { transition: none; }
}