/* /syllabus/paths.html: Aṣṭāṅga, the four paths and Haṭha.
   Limb cards (.lc) hold the text of the eight limbs; four night stages animate the unit:
   .asc eight-step ascent · .fp four paths, one summit · .nd iḍā, piṅgalā, suṣumnā · .tx three manuscripts.
   Motion uses transform, opacity and stroke-dashoffset only; reduced motion freezes it (style.css
   already drops transitions, the keyframe animations are dropped below). */
:root { --sage-n: #A9BE9A; --sage-n2: #D3E0C8; --moon: #BFD3F2; --sun: #F3C65A; }

/* ---------- limb cards ---------- */
.lc { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 20px; align-items: start; padding: 24px 0; border-top: 1px solid var(--border); }
.lc-img { width: 88px; height: 88px; border-radius: 50%; object-fit: cover; box-shadow: 0 10px 24px -14px rgba(45, 41, 38, .5); }
.lc-ring { width: 88px; height: 88px; border-radius: 50%; border: 2px solid var(--gold); box-shadow: 0 0 0 6px rgba(197, 165, 90, .14), inset 0 0 18px rgba(197, 165, 90, .35); background: radial-gradient(circle, #FFF6DA 0 14%, transparent 15%); }
.lc-tag { font: 600 .72rem/1.3 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--sage-dk); margin: 0 0 .45em; }
.lc-tag-in { color: #7A5F24; }   /* 5.5:1 on cream; #8C6F2E was 4.4:1 */
.subject .lc-name { font: 400 1.45rem/1.25 var(--serif); letter-spacing: 0; text-transform: none; color: var(--char); margin: 0 0 .35em; }
.lc-name .deva { font-size: 1.15rem; margin-left: .15em; }
.lc-en { font: italic 500 1.12rem/1 var(--serif-it); color: var(--muted); margin-left: .2em; }
.lc .verse { margin: .9em 0 1.1em; padding: 16px 18px; }
.lc .verse .deva { font-size: 1.25rem; }
.lc-parts { list-style: none; padding: 0 !important; margin: 0 0 1em; display: grid; gap: 8px; }
.subject .lc-parts li { margin: 0; padding: 10px 14px; background: #fff; border: 1px solid var(--border); border-radius: 12px; font-size: .95rem; line-height: 1.55; }
.lc-fruit { display: block; margin-top: 3px; font-size: .86rem; color: var(--muted); }
.lc-more .deva { font-size: 1.05rem; }
.lc-today { font-size: .95rem; padding-left: 12px; border-left: 3px solid var(--sage); }
.lc-body > :last-child { margin-bottom: 0; }
/* long Sanskrit compounds have no spaces: let them wrap on phones instead of widening the page */
.course .deva { overflow-wrap: anywhere; }

/* two small figures side by side (Karma yoga) */
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 0 0 1.4em; }
.pair-item { margin: 0; }
.pair-item img { border-radius: 18px; }
.pair-item figcaption { font-size: .86rem; color: var(--muted); margin-top: 8px; }

/* ---------- shared stage layout ---------- */
.stage h3 { margin: 0 0 18px; font-size: clamp(1.35rem, 3vw, 1.75rem); }
.st-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 28px; align-items: center; }
.stage .st-svg { width: 100%; max-width: 470px; margin: 0 auto; }
.st-panel { padding: 20px 22px; border-radius: 18px; background: rgba(255, 255, 255, .045); border: 1px solid rgba(243, 223, 168, .18); font-size: .95rem; }
.st-panel > :last-child { margin-bottom: 0; }
html:not(.js) .st-ctl { display: none; }
.stage .st-svg { font-family: var(--sans); }

/* the panel shows a cloned limb card or table row on the night background */
.stage .st-panel .lc-tag { color: var(--sage-n); }
.stage .st-panel .lc-tag-in { color: var(--glow); }
.stage .st-panel .lc-name, .stage .st-panel h4 { font: 400 1.5rem/1.2 var(--serif); letter-spacing: 0; text-transform: none; color: #fff; margin: 0 0 .3em; }
.st-panel .deva { color: var(--glow); }
.st-panel .lc-en { color: rgba(255, 255, 255, .6); }
.stage .st-panel .verse { margin: .7em 0 .9em; padding: 12px 14px; background: rgba(18, 24, 49, .55); border: 1px solid rgba(243, 223, 168, .2); border-left: 3px solid var(--glow); }
.st-panel .verse .deva { color: #fff; font-size: 1.15rem; }
.st-panel .verse .iast { color: var(--glow); font-size: 1.05rem; }
.st-panel .cite { color: rgba(255, 255, 255, .55); }
.st-panel .lc-more, .st-panel .lc-fruit { display: none; }
.st-panel .lc-today { border-left-color: var(--sage-n); }
.stage .st-panel .lc-parts { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 .5em; }
.stage .st-panel .lc-parts li { margin: 0; padding: 0; background: none; border: 0; animation: st-pop .55s cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(var(--j, 0) * 90ms + 120ms); }
.stage .asc-chip { padding: .55em .9em; font: 600 .8rem/1.1 var(--sans); }
.stage .asc-fruit { min-height: 3em; margin: 0 0 .8em; font-size: .88rem; color: rgba(255, 255, 255, .75); }
@keyframes st-pop { from { opacity: 0; transform: translateY(8px) scale(.9); } to { opacity: 1; transform: none; } }

/* ---------- 1 · the eight-step ascent ---------- */
.asc-panel { min-height: 25rem; }
.asc-stars circle { fill: #fff; opacity: .55; }
.asc-mtn { fill: url(#asc-mtn); }
.asc-svg text { font: 500 15px var(--sans); fill: #fff; }
.asc-svg .asc-small { font-size: 15px; }
.asc-svg .asc-labels text:not(.asc-small) { font: italic 500 21px var(--serif-it); }
.asc-svg .asc-in-label { fill: var(--glow); }
.asc-svg .asc-out-label { fill: var(--sage-n2); }
.asc-svg .asc-ring text:not(.asc-small) { font: italic 500 22px var(--serif-it); fill: var(--glow); }
.asc-step { cursor: pointer; outline: none; }
.asc-step text { pointer-events: none; opacity: .55; transition: opacity .6s; }
.asc-step rect { stroke-width: 1.4; transition: fill .6s, stroke .6s, stroke-width .3s; }
.asc-step.out rect { fill: rgba(123, 143, 110, .12); stroke: rgba(169, 190, 154, .5); }
.asc-step.in rect { fill: rgba(243, 223, 168, .06); stroke: rgba(243, 223, 168, .4); }
.asc-step.lit text { opacity: 1; }
.asc-step.out.lit rect { fill: rgba(123, 143, 110, .42); stroke: var(--sage-n2); }
.asc-step.in.lit rect { fill: rgba(243, 223, 168, .24); stroke: var(--glow); }
.asc-step.sel rect { stroke-width: 2.8; }
.asc-step:hover rect { stroke: #fff; }
.asc-step:focus-visible rect, .asc-step:focus-visible .asc-ring-line { stroke: #fff; stroke-width: 3.2; }
.asc-five circle { fill: var(--sage-n2); opacity: 0; transform: scale(.2); transform-box: fill-box; transform-origin: center; transition: opacity .4s, transform .5s cubic-bezier(.2, .8, .2, 1.3); }
.asc-step.sel .asc-five circle { opacity: 1; transform: none; }
.asc-step.sel .asc-five circle:nth-child(2) { transition-delay: .08s; }
.asc-step.sel .asc-five circle:nth-child(3) { transition-delay: .16s; }
.asc-step.sel .asc-five circle:nth-child(4) { transition-delay: .24s; }
.asc-step.sel .asc-five circle:nth-child(5) { transition-delay: .32s; }
.asc-gem { fill: var(--glow); transition: transform 1.2s cubic-bezier(.5, 0, .2, 1), opacity 1.2s; }
.asc.fused .asc-gem { transform: translate(var(--dx), var(--dy)); opacity: 0; }
.asc-ring-halo { fill: rgba(243, 223, 168, .14); }
.asc-ring-line { fill: none; stroke: var(--glow); stroke-width: 2.2; }
.asc-ring circle { transform-box: fill-box; transform-origin: center; transition: transform 1s cubic-bezier(.2, .8, .2, 1.25) .8s, opacity .8s .8s; }
.asc-ring text { transition: opacity .8s .9s; }
.js .asc:not(.fused) .asc-ring circle { transform: scale(.4); opacity: .3; }
.js .asc:not(.fused) .asc-ring text { opacity: .45; }
.asc-orb { transition: transform 1.1s cubic-bezier(.45, 0, .2, 1); pointer-events: none; }
.asc-orb-core { fill: #FFF8E2; }

/* ---------- 2 · four paths, one summit ---------- */
.fp-panel { min-height: 21rem; }
.fp-mtn { fill: url(#fp-mtn); }
.fp-svg text { font: 500 15px var(--sans); }
.fp-svg .fp-top { font: italic 500 22px var(--serif-it); fill: var(--glow); }
.fp-svg .fp-sub { font-size: 15px; fill: rgba(255, 255, 255, .62); }
.fp-svg .fp-name { font-weight: 600; font-size: 16px; fill: var(--c); }
.fp-route[data-k="0"], .fp-target[data-k="0"] { --c: #F3DFA8; }
.fp-route[data-k="1"], .fp-target[data-k="1"] { --c: #F0A68E; }
.fp-route[data-k="2"], .fp-target[data-k="2"] { --c: #BAD0A7; }
.fp-route[data-k="3"], .fp-target[data-k="3"] { --c: #BFD3F2; }
.fp-trail { fill: none; stroke: var(--c); stroke-width: 1.5; stroke-dasharray: 2 5; stroke-linecap: round; opacity: .5; transition: opacity .5s; }
.fp-glow { fill: none; stroke: var(--c); stroke-width: 3; stroke-linecap: round; }
.js .fp-glow { stroke-dasharray: 1 2; stroke-dashoffset: 1; }
.fp-walker circle { fill: #FFF8E2; }
.fp-walker .fp-walker-halo { fill: var(--c); opacity: .4; }
html:not(.js) .fp-walker { display: none; }
.js .fp-walker { opacity: 0; transition: opacity .4s; }
.js .fp-route.on .fp-walker { opacity: 1; }
.fp-svg.has-sel .fp-route:not(.on) .fp-trail { opacity: .16; }
.fp-target { cursor: pointer; outline: none; transition: opacity .4s; }
.fp-hit { fill: transparent; }
.fp-focus { fill: rgba(255, 255, 255, .04); stroke: var(--c); stroke-width: 1.4; opacity: 0; transition: opacity .3s; }
.fp-target:hover .fp-focus, .fp-target.on .fp-focus { opacity: .85; }
.fp-target:focus-visible .fp-focus { opacity: 1; stroke: #fff; stroke-width: 2.6; }
.fp-icon { fill: none; stroke: var(--c); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.fp-icon .fp-seed, .fp-icon .fp-spark { fill: var(--c); stroke: none; }
.fp-icon .fp-faint { opacity: .5; }
.fp-svg.has-sel .fp-target:not(.on) { opacity: .45; }
.fp-sun { fill: #FFF8E2; }
.fp-burst { opacity: .3; transform: scale(.55); transform-box: fill-box; transform-origin: center; transition: opacity .8s, transform 1.2s cubic-bezier(.2, .8, .2, 1.2); }
.fp.arrived .fp-burst { opacity: 1; transform: none; }
.fp.arrived.all .fp-burst { transform: scale(1.4); }
.fp-panel dl { margin: 0; }
.fp-panel dt { margin: .8em 0 .1em; font: 600 .7rem/1.3 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--glow); }
.fp-panel dd { margin: 0; color: rgba(255, 255, 255, .84); }
.fp-panel .deva { font-size: 1.1rem; }
.fp-panel p b { color: #fff; }

/* ---------- 3 · iḍā, piṅgalā, suṣumnā ---------- */
.nd-aura { opacity: .3; transition: opacity 1.2s; }
.nd[data-mode="moon"] .nd-aura-moon, .nd[data-mode="sun"] .nd-aura-sun { opacity: 1; }
.nd[data-mode="both"] .nd-aura { opacity: .55; }
.nd-moon path { fill: var(--moon); opacity: .5; transition: opacity 1s; }
.nd-sun circle { fill: var(--sun); opacity: .5; transition: opacity 1s; }
.nd-rays path { fill: none; stroke: var(--sun); stroke-width: 2; stroke-linecap: round; opacity: .45; transition: opacity 1s; }
.nd[data-mode="moon"] .nd-moon path, .nd[data-mode="both"] .nd-moon path,
.nd[data-mode="sun"] .nd-sun circle, .nd[data-mode="both"] .nd-sun circle, .nd[data-mode="sun"] .nd-rays path { opacity: 1; }
.nd-svg .nd-deva { font: 22px var(--deva); fill: var(--moon); }
.nd-svg .nd-deva-sun { font-size: 20px; fill: var(--night); }
.nd-svg .nd-iast { font: italic 500 18px var(--serif-it); fill: rgba(255, 255, 255, .78); }
.nd-body path, .nd-body rect, .nd-body circle { fill: url(#nd-body); }
.nd-body .nd-arm { fill: none; stroke: url(#nd-body); stroke-width: 18; stroke-linecap: round; }
.nd-spine { stroke: rgba(243, 223, 168, .28); stroke-width: 2; stroke-dasharray: 2 6; }
.nd-sush { fill: rgba(255, 255, 255, .07); stroke: rgba(243, 223, 168, .3); stroke-width: .8; }
.nd-sush-fill { fill: url(#nd-fill); transform: scaleY(0); transform-box: fill-box; transform-origin: 50% 100%; transition: transform 2.6s cubic-bezier(.5, 0, .2, 1); }
.nd[data-mode="both"] .nd-sush-fill { transform: none; }
.nd-crown { opacity: 0; transition: opacity 1s; }
.nd[data-mode="both"] .nd-crown { opacity: 1; transition-delay: 2.3s; }
.nd-ch { fill: rgba(255, 255, 255, .16); stroke: rgba(243, 223, 168, .55); stroke-width: 1; transition: fill .5s; }
.nd[data-mode="both"] .nd-ch { fill: var(--glow); transition-delay: calc(var(--i) * .36s); }
.nd-ida, .nd-pin { fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: opacity 1s, stroke-width 1s; }
.nd-ida { stroke: var(--moon); }
.nd-pin { stroke: var(--sun); }
.nd-glow { fill: none; stroke-width: 7; opacity: 0; transition: opacity 1s; }
.nd-glow-ida { stroke: var(--moon); }
.nd-glow-pin { stroke: var(--sun); }
.nd[data-mode="moon"] .nd-glow-ida, .nd[data-mode="sun"] .nd-glow-pin { opacity: .85; }
.nd[data-mode="both"] .nd-glow { opacity: .4; }
.nd[data-mode="moon"] .nd-ida, .nd[data-mode="sun"] .nd-pin { stroke-width: 3; }
.nd[data-mode="moon"] .nd-pin, .nd[data-mode="sun"] .nd-ida { opacity: .35; }
.nd-dots { transition: opacity 1s; }
.nd-dots-i circle { fill: #EEF4FF; }
.nd-dots-p circle { fill: #FFF2CC; }
.nd[data-mode="moon"] .nd-dots-p, .nd[data-mode="sun"] .nd-dots-i { opacity: .3; }
html:not(.js) .nd-dots { display: none; }
.nd-svg .nd-top { font-size: 14px; fill: var(--glow); }
.nd-svg .nd-l { font: italic 500 24px var(--serif-it); }
.nd-svg .nd-l-ida { fill: var(--moon); }
.nd-svg .nd-l-pin { fill: var(--sun); }
.nd-svg .nd-s { font-size: 14px; fill: rgba(255, 255, 255, .7); }
.nd-svg .nd-s-sush { fill: var(--glow); }
.nd-modes { display: grid; gap: 10px; }
.stage .nd-mode { display: grid; gap: 4px; padding: 14px 16px; border-radius: 16px; text-align: left; font: 400 .88rem/1.5 var(--sans); color: rgba(255, 255, 255, .78); background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .16); transition: background .4s, border-color .4s, box-shadow .4s; }
.stage .nd-mode b { font: 600 .95rem/1.3 var(--sans); color: #fff; }
.stage .nd-mode:hover { color: #fff; background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .36); }
.stage .nd-mode-moon[aria-pressed="true"] { color: #fff; background: rgba(191, 211, 242, .12); border-color: var(--moon); box-shadow: 0 0 0 1px var(--moon), 0 12px 30px -14px rgba(191, 211, 242, .6); }
.stage .nd-mode-sun[aria-pressed="true"] { color: #fff; background: rgba(243, 198, 90, .12); border-color: var(--sun); box-shadow: 0 0 0 1px var(--sun), 0 12px 30px -14px rgba(243, 198, 90, .6); }
.stage .nd-mode-both[aria-pressed="true"] { color: #fff; background: rgba(243, 223, 168, .12); border-color: var(--glow); box-shadow: 0 0 0 1px var(--glow), 0 12px 30px -14px rgba(243, 223, 168, .6); }

/* ---------- 4 · three manuscripts ---------- */
.tx-shelf { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0 0 20px; }
.stage .tx-bundle { display: grid; justify-items: center; align-content: start; gap: 4px; padding: 14px 10px 12px; border-radius: 18px; text-align: center; font: 400 .85rem/1.35 var(--sans); color: #fff; background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .14); transition: background .4s, border-color .4s; }
.stage .tx-bundle:hover { color: #fff; background: rgba(255, 255, 255, .08); border-color: rgba(243, 223, 168, .45); }
.stage .tx-bundle[aria-pressed="true"] { color: #fff; background: rgba(243, 223, 168, .1); border-color: var(--glow); }
.stage .tx-bsvg { width: 100%; max-width: 128px; margin-bottom: 6px; overflow: visible; }
.tx-stack rect { fill: #E9D6A8; opacity: .8; transition: fill .6s, opacity .6s; }
.tx-board { fill: #8A5A3C; stroke: rgba(243, 223, 168, .45); stroke-width: .8; transform-box: fill-box; transform-origin: center; transition: transform .6s cubic-bezier(.2, .8, .2, 1.2); }
.tx-string { fill: none; stroke: #D07B60; stroke-width: 1.6; transition: opacity .4s; }
.tx-bundle[aria-pressed="true"] .tx-top { transform: translateY(-7px) rotate(-4deg); }
.tx-bundle[aria-pressed="true"] .tx-bot { transform: translateY(7px) rotate(3deg); }
.tx-bundle[aria-pressed="true"] .tx-string { opacity: 0; }
.tx-bundle[aria-pressed="true"] .tx-stack rect { fill: #F7E7BE; opacity: 1; }
.tx-name { font: 400 1.05rem/1.2 var(--serif); }
.tx-by { font-size: .78rem; color: rgba(255, 255, 255, .65); }
.tx-area { min-height: 25rem; }
.stage .tx-title { margin: 0 0 12px; font: 600 .74rem/1.3 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--glow); }
.tx-leaves { list-style: none; padding: 0; margin: 0 0 22px; display: grid; gap: 8px; perspective: 900px; }
.stage .tx-leaves li { position: relative; display: grid; gap: 2px; margin: 0; padding: 11px 18px 11px 42px; border-radius: 10px 28px 28px 10px; color: #3D3530; background: linear-gradient(90deg, #F2E3BC, #E4CD98); box-shadow: 0 10px 22px -16px rgba(0, 0, 0, .8); transform-origin: left center; }
.tx-leaves li::before { content: ""; position: absolute; left: 17px; top: 50%; width: 9px; height: 9px; margin-top: -4.5px; border-radius: 50%; background: #6E4630; box-shadow: 0 0 0 2px rgba(110, 70, 48, .25); }
.tx-leaves b { font: 400 1.08rem/1.25 var(--serif); color: #2D2926; }
.tx-leaves span { font-size: .86rem; color: #5C4F45; }
.js .tx-book .tx-leaves li { opacity: 0; transform: rotateY(-75deg); }
.js .tx-book.open .tx-leaves li { opacity: 1; transform: none; transition: opacity .5s, transform .8s cubic-bezier(.2, .8, .2, 1); }
.js .tx-book.open .tx-leaves li:nth-child(2) { transition-delay: .12s; }
.js .tx-book.open .tx-leaves li:nth-child(3) { transition-delay: .24s; }
.js .tx-book.open .tx-leaves li:nth-child(4) { transition-delay: .36s; }
.js .tx-book.open .tx-leaves li:nth-child(5) { transition-delay: .48s; }
.js .tx-book.open .tx-leaves li:nth-child(6) { transition-delay: .6s; }
.js .tx-book.open .tx-leaves li:nth-child(7) { transition-delay: .72s; }
.stage .tx-csvg { max-width: 460px; margin: 0 auto 8px; }
.tx-csvg .cmp-head { font-size: 15px; font-weight: 600; letter-spacing: .04em; fill: var(--glow); }
.cmp-pill rect { fill: rgba(243, 223, 168, .1); stroke: var(--glow); stroke-width: 1.2; }
.cmp-pill.cmp-solo rect { fill: rgba(255, 255, 255, .03); stroke: rgba(255, 255, 255, .45); stroke-dasharray: 4 4; }
.tx-csvg .cmp-pill text { font-size: 15px; font-weight: 500; fill: #fff; }
.tx-csvg .cmp-solo text { fill: rgba(255, 255, 255, .68); }
.tx-csvg .cmp-key { font-size: 15px; fill: rgba(255, 255, 255, .6); }
.cmp-line { fill: none; stroke: var(--glow); stroke-width: 1.8; }
.js .cmp-line { stroke-dasharray: 1 2; stroke-dashoffset: 1; }
.js .tx-book.open .cmp-line { stroke-dashoffset: 0; transition: stroke-dashoffset 1s cubic-bezier(.5, 0, .2, 1) var(--d, 0s); }
.js .cmp-col { opacity: 0; }
.js .tx-book.open .cmp-col { opacity: 1; transition: opacity .6s; }
.js .tx-book.open .cmp-right { transition-delay: .2s; }

/* ---------- small screens ---------- */
@media (max-width: 860px) {
  .st-grid { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .asc-panel { min-height: 22rem; }
  .fp-panel { min-height: 19rem; }
}
@media (max-width: 560px) {
  .lc { grid-template-columns: 56px minmax(0, 1fr); gap: 14px; }
  .lc-img, .lc-ring { width: 56px; height: 56px; }
  .pair { grid-template-columns: 1fr; }
  .tx-shelf { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .stage .tx-bundle { grid-template-columns: 80px minmax(0, 1fr); justify-items: start; column-gap: 14px; row-gap: 2px; padding: 10px 14px; text-align: left; }
  .stage .tx-bsvg { grid-row: span 2; align-self: center; margin: 0; }
  .tx-area { min-height: 27rem; }
  .st-panel { padding: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .stage .st-panel .lc-parts li { animation: none; }
}