/* Yoga for wellness (/syllabus/therapy.html): the ādhi → vyādhi rings (av-), the condition explorer (cx-),
   the pregnancy journey (pj-), the kośa table (kh-) and the thyroid split (th-).
   Stage frame, buttons, tabs and captions come from course.css. */
:root { --ok: #A9C29A; --amber: #E8B85C; --stop: #E59A80; --maroon: #8E4250; }

/* ---------- page bits ---------- */
.subject h3.cond { font-size: 1.6rem; margin-top: 2.2em; padding-top: 1em; border-top: 1px solid var(--border); }
.kh-table td:first-child { min-width: 128px; line-height: 1.35; }
.kh-dot { display: inline-block; width: 10px; height: 10px; margin-right: 7px; border-radius: 50%; vertical-align: .05em; }
.kh-anna { background: #5D6B50; }
.kh-prana { background: #3F6F7A; }
.kh-mano { background: #4A4A8C; }
.kh-vij { background: #8E6AA6; }
.kh-ananda { background: var(--gold); }
.th-split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 1.2em 0 1.4em; }
.th-card { padding: 16px 18px; border-radius: 16px; border: 1px solid var(--border); }
.th-card p { font-size: .94rem; }
.th-card > :last-child { margin-bottom: 0; }
.th-hypo { background: #EEF3F4; border-left: 4px solid #3F6F7A; }
.th-hypo .tag-line { color: #3F6F7A; }
.th-hyper { background: #FBEEE9; border-left: 4px solid var(--terra); }
.th-hyper .tag-line { color: var(--terra-dk); }
.th-card .tag-line { font: 600 .72rem/1.3 var(--sans); letter-spacing: .1em; text-transform: uppercase; margin-bottom: .5em; }

/* without JS the stages show their still state and every panel; controls that need JS are hidden */
html:not(.js) #adhi-stage .stage-controls, html:not(.js) #journey .stage-controls,
html:not(.js) .cx-tabs, html:not(.js) .cx-fig, html:not(.js) .cx-hint, html:not(.js) .pj-btns { display: none; }

/* ---------- 1. ādhi → vyādhi ---------- */
.av-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 16px 28px; align-items: center; margin-top: 12px; }
.stage .av-svg { max-width: 440px; margin: 0 auto; overflow: visible; }
.av-band { fill: none; stroke: rgba(123, 143, 110, .4); stroke-width: 30; }
.av-edge { fill: none; stroke: var(--glow); stroke-opacity: .35; stroke-width: 1; }
.av-heal { fill: none; stroke: var(--glow); stroke-width: 30; stroke-opacity: .55; filter: drop-shadow(0 0 10px rgba(243, 223, 168, .8)); }
.av-prana { fill: none; stroke-width: 2.2; stroke-linejoin: round; filter: drop-shadow(0 0 4px rgba(243, 223, 168, .45)); }
.av-pulse { fill: #FFF6DC; filter: drop-shadow(0 0 6px rgba(243, 223, 168, .95)); }
.av-mind-edge { fill: none; stroke: var(--glow); stroke-opacity: .55; stroke-width: 1.2; }
.av-rip { fill: none; stroke: var(--maroon); stroke-width: 4; }
.av-goldrip { fill: none; stroke: var(--glow); stroke-width: 1.8; }
.av-spot-core { fill: #FFD9C9; }
.av-lbl { font: italic 500 15px var(--serif-it); fill: rgba(255, 255, 255, .86); text-anchor: middle; letter-spacing: .03em; }
.av-mid { font-size: 16px; }
.av-deva { font: 400 18px var(--deva); fill: #FFF6DC; text-anchor: middle; }
.av-tag { font: italic 600 17px var(--serif-it); fill: var(--stop); text-anchor: middle; letter-spacing: .04em; }
.av-story { list-style: none; margin: 0; padding: 0 !important; counter-reset: av; }
.stage .av-story li { position: relative; margin: 0 0 4px; padding: .45em .8em .45em 2.1em; border-radius: 10px; font-size: .92rem; line-height: 1.4; color: rgba(255, 255, 255, .66); transition: background .4s, color .4s; }
.js .stage .av-story li { padding: 0; }
.stage .av-jump, .stage .av-jump:hover { display: block; width: 100%; padding: .45em .8em .45em 2.1em; border: 0; border-radius: 10px; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.av-story li::before { content: ""; position: absolute; left: .8em; top: .95em; width: 8px; height: 8px; border-radius: 50%; background: var(--maroon); box-shadow: 0 0 0 2px rgba(229, 154, 128, .35); }
.av-story li:first-child::before { background: var(--ok); box-shadow: 0 0 0 2px rgba(169, 194, 154, .3); }
.av-story li.av-heal-step::before { background: var(--glow); box-shadow: 0 0 0 2px rgba(243, 223, 168, .3); }
.av-story li b { color: #fff; font-weight: 600; }
.stage .av-story li:hover { background: rgba(255, 255, 255, .06); }
.stage .av-story li.on { background: rgba(243, 223, 168, .14); color: #fff; }
.av-story li.on::before { box-shadow: 0 0 0 3px rgba(243, 223, 168, .5), 0 0 10px rgba(243, 223, 168, .8); }
.stage .av-side .stage-cap { text-align: left; margin: 12px 0 0; max-width: none; min-height: 4.4em; }
.stage .av-invite { border-color: var(--glow); animation: av-invite 1.8s ease-in-out infinite; }
@keyframes av-invite { 0%, 100% { box-shadow: 0 0 0 0 rgba(243, 223, 168, .55); } 50% { box-shadow: 0 0 0 8px rgba(243, 223, 168, 0); } }

/* ---------- 2. condition explorer ---------- */
.stage .cx-hint { font-size: .9rem; margin-bottom: 14px; }
.cx-grid { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 20px 28px; align-items: start; }
.stage .cx-body { max-width: 180px; margin: 0 auto; overflow: visible; }
.cx-out * { fill: rgba(243, 223, 168, .05); stroke: var(--glow); stroke-opacity: .5; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.cx-spine { fill: none; stroke: var(--glow); stroke-opacity: .22; stroke-width: 1.4; stroke-dasharray: 3 4; }
.cx-reg { opacity: 0; transition: opacity .6s ease; }
.cx-reg * { fill: rgba(243, 223, 168, .82); stroke: #FFF4D6; stroke-width: 1; }
.cx-reg .cx-line { fill: none; stroke: var(--glow); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.cx-reg .cx-baby { fill: rgba(43, 36, 71, .55); stroke: #2B2447; stroke-width: 1.4; }
.cx-reg .cx-line.cx-baby { fill: none; }
.cx-reg.on { opacity: 1; filter: drop-shadow(0 0 6px rgba(243, 223, 168, .9)); animation: cx-breathe 3s ease-in-out .6s infinite; }
@keyframes cx-breathe { 0%, 100% { opacity: 1; } 50% { opacity: .62; } }
.stage .cx-cap { font-size: .86rem; line-height: 1.45; color: rgba(255, 255, 255, .78); text-align: center; margin: 10px 0 0; min-height: 3.6em; }
.stage .cx-title { font: 400 1.45rem/1.2 var(--serif); letter-spacing: 0; text-transform: none; color: #fff; margin: 0 0 12px; }
.cx-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; }
.cx-col { padding: 12px 14px; border-radius: 14px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .1); }
.stage .cx-col p { margin: 0; font-size: .9rem; line-height: 1.5; }
.stage .cx-k { font: 600 .7rem/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--glow) !important; margin-bottom: .6em !important; }
.cx-do { border-color: rgba(169, 194, 154, .45); }
.stage .cx-do .cx-k { color: var(--ok) !important; }
.cx-no { border-color: rgba(229, 154, 128, .45); }
.stage .cx-no .cx-k { color: var(--stop) !important; }
.stage .cx-more { margin: 12px 0 0; font-size: .88rem; }
html:not(.js) .cx-panels [role="tabpanel"] + [role="tabpanel"] { margin-top: 26px; }

/* ---------- 3. pregnancy journey ---------- */
.stage .pj-svg { max-width: 760px; margin: 6px auto 0; overflow: visible; }
.pj-track { fill: none; stroke: rgba(255, 255, 255, .2); stroke-width: 2; stroke-dasharray: 2 6; stroke-linecap: round; }
.pj-trail { fill: none; stroke: var(--glow); stroke-width: 2.4; stroke-linecap: round; filter: drop-shadow(0 0 4px rgba(243, 223, 168, .6)); }
.pj-node { fill: var(--night); stroke: var(--glow); stroke-opacity: .7; stroke-width: 1.5; transition: fill .5s; }
.pj-node.passed { fill: var(--glow); }
.pj-orb { fill: #FFF6DC; }
.pj-fig circle, .pj-fig path { fill: none; stroke: #fff; stroke-opacity: .9; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pj-fig > circle:first-child { fill: rgba(255, 255, 255, .08); }
.pj-fig .pj-bun { fill: rgba(255, 255, 255, .3); }
.pj-fig .pj-baby { fill: rgba(243, 223, 168, .45); stroke: var(--glow); stroke-width: 1.4; }
.pj-btns { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 12px; }
.pj-stages { margin-top: 14px; }
html:not(.js) .pj-stage + .pj-stage { margin-top: 24px; }
.stage .pj-stage h4 { font: 400 1.35rem/1.2 var(--serif); letter-spacing: 0; text-transform: none; color: #fff; margin: 0 0 12px; }
.pj-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; }
.pj-col { padding: 12px 14px 10px; border-radius: 14px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .1); border-top-width: 3px; }
.pj-col ul { margin: 0; padding-left: 1.1em; }
.stage .pj-col li { font-size: .9rem; line-height: 1.45; margin-bottom: .3em; }
.stage .pj-k { font: 600 .7rem/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; margin: 0 0 .6em; }
.pj-yes { border-top-color: var(--ok); }
.stage .pj-yes .pj-k { color: var(--ok); }
.pj-mod { border-top-color: var(--amber); }
.stage .pj-mod .pj-k { color: var(--amber); }
.pj-no { border-top-color: var(--stop); }
.stage .pj-no .pj-k { color: var(--stop); }
.stage .pj-doc { margin: 12px 0 0; padding: 10px 14px; border-radius: 12px; background: rgba(243, 223, 168, .1); border: 1px dashed rgba(243, 223, 168, .45); font-size: .88rem; color: #fff; }
.pj-doc::before { content: "Doctor first · "; font-weight: 600; color: var(--glow); }
.pj-key { font-weight: 600; }
.pj-key-yes { color: var(--ok); }
.pj-key-mod { color: var(--amber); }
.pj-key-no { color: var(--stop); }

@media (max-width: 760px) {
  .av-grid { grid-template-columns: 1fr; }
  .cx-grid { grid-template-columns: 1fr; }
  .cx-fig { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 14px; align-items: center; }
  .stage .cx-body { max-width: 104px; }
  .stage .cx-cap { text-align: left; margin: 0; min-height: 0; }
}
@media (max-width: 600px) {
  .th-split { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .cx-reg, .pj-node, .stage .av-story li { transition: none; }
  .cx-reg.on, .stage .av-invite { animation: none; }
}