/* Ṣaṭkarma page (/syllabus/shatkarma.html): the jala neti profile (nt-), the kapālabhāti pump (kp-) and the
   six-kriyā wheel (kw-). Stage frame, buttons and captions come from course.css. */
:root { --water: #A8DCEB; --mist: #E6F6FB; --dirt: #D08A66; }

/* ---------- 1. jala neti ---------- */
.stage .nt-svg { max-width: 760px; margin: 4px auto 0; overflow: visible; }
.nt-head { fill: rgba(255, 255, 255, .04); stroke: var(--glow); stroke-width: 1.4; stroke-opacity: .75; stroke-linejoin: round; }
.nt-hair { fill: rgba(243, 223, 168, .1); }
.nt-line { fill: none; stroke: var(--glow); stroke-opacity: .55; stroke-width: 1.1; stroke-linecap: round; stroke-linejoin: round; }
.nt-faint { stroke-opacity: .25; }
.nt-disc { fill: rgba(255, 255, 255, .03); stroke: var(--glow); stroke-opacity: .22; }
.nt-cavity { fill: url(#nt-hollow); stroke: var(--glow); stroke-opacity: .4; stroke-width: 1; stroke-dasharray: 3 4; }
.nt-septum { fill: rgba(243, 223, 168, .09); }
.nt-sedge { stroke: var(--glow); stroke-opacity: .5; stroke-dasharray: 2 3; }
.nt-pass { fill: none; stroke: rgba(255, 255, 255, .1); stroke-width: 11; stroke-linecap: round; }
.nt-pass.far { stroke: rgba(255, 255, 255, .06); }
.nt-water { fill: none; stroke: var(--water); stroke-width: 5; stroke-linecap: round; filter: url(#nt-glow); }
.nt-water.far { stroke-opacity: .45; }
.nt-nos { fill: rgba(18, 24, 49, .8); stroke: var(--glow); stroke-width: 1.2; }
.nt-nos.far { stroke-dasharray: 2 2; stroke-opacity: .6; }
.nt-fnos { fill: rgba(18, 24, 49, .9); stroke: var(--glow); stroke-opacity: .6; stroke-width: 1; }
.nt-fnos.up { fill: var(--water); stroke-opacity: 1; }
.nt-mouth { fill: #0D1027; stroke: var(--glow); stroke-opacity: .55; }
.nt-brass { fill: url(#nt-brass); stroke: #FFF1C9; stroke-opacity: .55; stroke-width: .8; }
.nt-fspout { stroke: #C5A55A; stroke-width: 3; stroke-linecap: round; }
.nt-rimpot { fill: #5E461B; stroke: #FFF1C9; stroke-opacity: .6; stroke-width: .8; }
.nt-handle { fill: none; stroke: #C5A55A; stroke-width: 4; stroke-linecap: round; }
.nt-shine { fill: none; stroke: #FFF6DC; stroke-opacity: .7; stroke-width: 1.5; stroke-linecap: round; }
.nt-basin { fill: rgba(255, 255, 255, .05); stroke: var(--glow); stroke-opacity: .6; stroke-width: 1.2; }
.nt-rim { fill: none; stroke: var(--glow); stroke-opacity: .6; stroke-width: 1.2; }
.nt-pool { fill: var(--water); }
.nt-drop { fill: var(--mist); }
.nt-drip { fill: var(--water); }
.nt-dirt { fill: var(--dirt); }
.nt-puff { fill: #FFF6DC; }
.nt-breath path { fill: none; stroke: #fff; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.nt-lbl { font: italic 500 15px var(--serif-it); fill: rgba(255, 255, 255, .88); }
.nt-c { text-anchor: middle; font-size: 14px; }
.nt-end { text-anchor: end; }
.nt-dim { fill: var(--glow); }
.nt-lead { fill: none; stroke: var(--glow); stroke-opacity: .5; stroke-width: .8; }
.nt-num { display: none; }
.nt-num circle { fill: var(--glow); }
.nt-num text { font: 600 24px var(--sans); fill: var(--night); text-anchor: middle; }
.nt-legend { display: none; margin: 10px 0 0; padding-left: 1.6em; font-size: .85rem; columns: 2; column-gap: 20px; }
.nt-legend li { margin-bottom: .2em; break-inside: avoid; }

/* ---------- 2. kapālabhāti ---------- */
.kp-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 12px 24px; align-items: center; }
.stage .kp-fig { max-width: 400px; margin: 0 auto; overflow: visible; }
.kp-body { fill: rgba(255, 255, 255, .05); stroke: var(--glow); stroke-width: 1.4; stroke-opacity: .75; stroke-linejoin: round; }
.kp-line { fill: none; stroke: var(--glow); stroke-width: 1.4; stroke-opacity: .75; stroke-linecap: round; }
.kp-belly { fill: none; stroke: var(--glow); stroke-width: 2.2; stroke-linecap: round; filter: drop-shadow(0 0 4px rgba(243, 223, 168, .7)); }
.kp-ghost { fill: none; stroke: #fff; stroke-opacity: .35; stroke-width: 1; stroke-dasharray: 3 4; }
.kp-mat { stroke: var(--sage); stroke-width: 2; stroke-linecap: round; }
.kp-arrow { fill: none; stroke: var(--glow); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.kp-soft { stroke: #fff; stroke-width: 1.4; }
.kp-lbl { font: italic 500 13.5px var(--serif-it); fill: rgba(255, 255, 255, .88); }
.kp-em { fill: var(--glow); }
.kp-puff { fill: #FFF6DC; }
.kp-read { text-align: center; }
.kp-read p { margin: 0 0 .4em; }
.kp-count b { display: block; font: 400 clamp(3rem, 8vw, 4.2rem)/1 var(--serif); color: var(--glow); font-variant-numeric: tabular-nums; }
.kp-count span, .kp-round { font-size: .85rem; letter-spacing: .08em; text-transform: uppercase; color: rgba(255, 255, 255, .7) !important; }
.kp-phase { font: italic 500 1.2rem/1.3 var(--serif-it); color: var(--glow) !important; }
.stage .kp-trace { margin-top: 14px; border-top: 1px solid rgba(243, 223, 168, .18); border-bottom: 1px solid rgba(243, 223, 168, .18); }
.kp-axis { stroke: #fff; stroke-opacity: .12; stroke-dasharray: 2 6; }
.kp-pump { fill: none; stroke: var(--glow); stroke-width: 2; stroke-linejoin: round; filter: drop-shadow(0 0 3px rgba(243, 223, 168, .6)); }
.kp-calm { fill: none; stroke: #A9C29A; stroke-width: 2; stroke-linejoin: round; }
.kp-key { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 16px; margin: 8px 0 0; font-size: .8rem; }
.kp-key span::before { content: ""; display: inline-block; width: 14px; height: 2px; margin-right: 6px; vertical-align: middle; background: var(--glow); }
.kp-key .kp-key-calm::before { background: #A9C29A; }

/* ---------- 3. the six kriyās wheel ---------- */
.kw-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 20px; align-items: center; margin-top: 8px; }
.stage .kw-wheel { max-width: 420px; margin: 0 auto; overflow: visible; }
.kw-ring { fill: none; stroke: var(--glow); stroke-opacity: .18; stroke-dasharray: 2 6; }
.kw-petal { cursor: pointer; outline: none; }
.kw-p { fill: rgba(255, 255, 255, .06); stroke: var(--glow); stroke-opacity: .5; stroke-width: 1.2; transition: fill .45s, stroke-opacity .45s, filter .45s; }
.kw-i { fill: none; stroke: var(--glow); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: stroke .45s; }
.kw-name { font: italic 500 16px var(--serif-it); fill: #fff; text-anchor: middle; transition: fill .45s; }
.kw-petal:hover .kw-p { fill: rgba(243, 223, 168, .18); }
.kw-petal.on .kw-p { fill: url(#kw-on); stroke-opacity: 1; filter: drop-shadow(0 0 10px rgba(243, 223, 168, .75)); }
.kw-petal.on .kw-i { stroke: var(--night); }
.kw-petal.on .kw-name { fill: var(--night); }
.kw-petal:focus-visible .kw-p { stroke: #fff; stroke-opacity: 1; stroke-width: 2.5; }
.kw-core { fill: url(#kw-core); stroke: var(--glow); stroke-opacity: .6; }
.kw-deva { font: 400 17px var(--deva); fill: var(--glow); text-anchor: middle; }
.kw-six { font: italic 500 15px var(--serif-it); fill: rgba(255, 255, 255, .8); text-anchor: middle; }
.kw-side { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 16px; align-items: center; }
.stage .kw-body { max-width: 112px; }
.kw-out { fill: none; stroke: #fff; stroke-opacity: .4; stroke-width: 1.2; stroke-linecap: round; }
.kw-reg, .kw-reg * { fill: rgba(243, 223, 168, .07); stroke: var(--glow); stroke-opacity: .3; stroke-width: 1; transition: fill .45s, stroke-opacity .45s, filter .45s; }
.kw-colon, .kw-reg[data-r="gullet"] path, .kw-reg[data-r="airway"] path:first-child { fill: none !important; stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; }
.kw-reg.on, .kw-reg.on * { fill: rgba(243, 223, 168, .75); stroke-opacity: 1; filter: drop-shadow(0 0 5px rgba(243, 223, 168, .9)); }
.stage .kw-info { text-align: left; margin: 0; max-width: none; font-size: .92rem; }
.kw-info p { margin: 0 0 .5em; }
.kw-title b { font: 400 1.5rem/1.2 var(--serif); color: #fff; }
.kw-title .deva { font-size: 1.15rem; color: var(--glow); margin-left: .3em; }
.kw-k { font: 600 .7rem/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--glow); margin-right: .4em; }
.kw-info [data-w="cleans"] { color: #fff; }

@media (max-width: 760px) {
  .kw-grid, .kp-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .nt-lbl { display: none; }
  .nt-lead { stroke-width: 1.6; stroke-opacity: .7; }
  .nt-num { display: inline; }
  .nt-legend { display: block; }
}
@media (max-width: 420px) {
  .nt-legend { columns: 1; }
  .kw-side { grid-template-columns: 88px minmax(0, 1fr); gap: 12px; }
  .stage .kw-body { max-width: 88px; }
}
@media (prefers-reduced-motion: reduce) {
  .kw-p, .kw-i, .kw-name, .kw-reg, .kw-reg * { transition: none; }
}