/* /syllabus/pranayama.html: the four breath animations (sectional breathing, the kumbha pot,
   nāḍī śodhana, the three locks). The night stage, buttons and captions come from course.css. */

/* ---------- shared SVG language: thin gold lines, serif labels ---------- */
.pr-svg { max-width: 440px; margin: 10px auto 0; }
.pr-svg text { font-family: var(--serif-it); font-style: italic; font-weight: 500; fill: var(--glow); }
.pr-svg text.sans { font-family: var(--sans); font-style: normal; font-weight: 500; fill: rgba(255, 255, 255, .78); letter-spacing: .02em; }
.pr-line { fill: none; stroke: var(--glow); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.pr-soft { stroke-opacity: .4; }
.pr-lead { stroke: var(--glow); stroke-opacity: .4; stroke-width: 1; }
.hit { fill: transparent; stroke: transparent; }
.stage h3 { margin-top: 0; }
.stage .stage-cap { min-height: 3em; }
.stage label { display: inline-flex; flex-wrap: wrap; justify-content: center; max-width: 100%; align-items: center; gap: 8px; font: 600 .8rem/1.2 var(--sans); color: rgba(255, 255, 255, .8); }
.stage select { padding: .6em .9em; max-width: 100%; }
.verse i.iast { font-size: 1.12rem; }
.verse .deva, .verse .iast { overflow-wrap: anywhere; }
html:not(.js) .stage-controls, html:not(.js) .ns-status { display: none; }

/* clickable SVG parts */
[role="button"].sb-zone, [role="button"].bd-lock { cursor: pointer; outline: none; }
.sb-zone text, .bd-lock text { transition: fill .3s; }
.sb-zone:hover text, .sb-zone.on text, .bd-lock:hover text { fill: #fff; }
.sb-zone:focus-visible .hit, .bd-lock:focus-visible .bd-ring { stroke: #fff; stroke-width: 2; }
.sb-zone:focus-visible text, .bd-lock:focus-visible text { fill: #fff; text-decoration: underline; }

/* ---------- 1 · sectional breathing ---------- */
.sb-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, 300px); gap: 20px 36px; align-items: center; max-width: 860px; margin: 0 auto; }
.sb-svg { max-width: 420px; }
.sb-body ellipse, .sb-body path { fill: none; stroke: var(--glow); stroke-opacity: .85; stroke-width: 1.5; stroke-linecap: round; }
.sb-ribs path { fill: none; stroke: var(--glow); stroke-opacity: .3; stroke-width: 1.1; stroke-linecap: round; }
.sb-clavline { fill: none; stroke: var(--glow); stroke-width: 2; stroke-linecap: round; }
.sb-lung { fill: rgba(243, 223, 168, .05); stroke: var(--glow); stroke-opacity: .65; stroke-width: 1.2; }
.sb-band { fill: url(#sb-air); }
.sb-div { fill: none; stroke: #fff; stroke-opacity: .18; stroke-width: 1; stroke-dasharray: 2 4; }
.sb-dome { fill: none; stroke: #EBCB82; stroke-width: 2.2; stroke-linecap: round; }
.sb-hands g { opacity: 0; transition: opacity .6s; }
.sb-hands g.on { opacity: 1; }
.sb-hands ellipse { fill: rgba(255, 255, 255, .06); stroke: #fff; stroke-opacity: .75; stroke-width: 1.2; stroke-dasharray: 3 4; }
.sb-mode { font: 400 1.6rem/1.15 var(--serif); color: #fff !important; margin: 0 0 .25em; }
.sb-phase { font: italic 500 1.3rem/1.3 var(--serif-it); color: var(--glow) !important; margin: 0 0 1.1em; }
.sb-meters { list-style: none; padding: 0; margin: 0 0 1em; display: grid; gap: 10px; }
.sb-meters li { display: grid; grid-template-columns: 6.5em 1fr; align-items: center; gap: 10px; margin: 0; font-size: .85rem; }
.sb-meters i { display: block; height: 6px; border-radius: 99px; background: rgba(255, 255, 255, .12); overflow: hidden; }
.sb-meters b { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #C9A55A, var(--glow)); transform-origin: left center; }
.sb-note { font-size: .82rem; color: rgba(255, 255, 255, .6) !important; margin: 0; }

/* ---------- 2 · the kumbha pot ---------- */
.pk-svg { max-width: 400px; }
.pk-pot { fill: rgba(196, 101, 74, .18); stroke: #E7BC94; stroke-width: 1.6; stroke-linejoin: round; }
.pk-band { fill: none; stroke: var(--glow); stroke-opacity: .3; stroke-width: 1; }
.pk-fill { fill: url(#pk-air); }
.pk-surface { fill: none; stroke: #FFF6DC; stroke-width: 1.5; stroke-opacity: .9; }
.pk-dots circle { fill: #FFF4D6; }
.pk-svg .pk-word { fill: #fff; }
.pk-axis { stroke: rgba(255, 255, 255, .28); stroke-width: 1; }
.pk-segs line { stroke: rgba(255, 255, 255, .2); stroke-width: 1; stroke-dasharray: 2 3; }
.pk-guide { fill: none; stroke: rgba(255, 255, 255, .22); stroke-width: 1.2; stroke-dasharray: 3 5; }
.pk-live { fill: none; stroke: var(--glow); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.pk-dot { fill: #FFF4D6; stroke: rgba(243, 223, 168, .5); stroke-width: 5; }
.pk-warn { margin: 12px auto 0; max-width: 520px; text-align: center; font-size: .85rem; color: #F6CBB9 !important; }

/* ---------- 3 · nāḍī śodhana ---------- */
.ns-svg { max-width: 400px; }
.ns-face path { fill: none; stroke: var(--glow); stroke-opacity: .8; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.ns-face .pr-soft { stroke-opacity: .35; }
.ns-hole { fill: #0E1228; stroke: var(--glow); stroke-opacity: .6; stroke-width: 1; }
.ns-ch { fill: none; stroke: var(--glow); stroke-width: 1.4; stroke-opacity: .18; stroke-dasharray: 2 4; transition: stroke-opacity .5s; }
.ns-ch.on { stroke-opacity: .7; stroke-dasharray: none; }
.ns-brow-dot { fill: #FFF4D6; }
.ns-p { fill: #FFF4D6; }
.ns-palm { fill: rgba(28, 30, 62, .78); stroke: var(--glow); stroke-opacity: .75; stroke-width: 1.2; stroke-linejoin: round; stroke-linecap: round; }
.ns-thumb, .ns-ring { transition: transform .5s ease; }
.ns-tip { opacity: 0; transition: opacity .5s; }
.ns-thumb.press .ns-tip, .ns-ring.press .ns-tip { opacity: 1; }
.ns-lab { opacity: .6; transition: opacity .5s; }
.ns-lab.on { opacity: 1; }
.ns-sun { fill: #F3C65A; }
.ns-moon { fill: #EFE9DC; }
.ns-seq { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 8px; list-style: none; padding: 0; margin: 14px 0 0; }
.ns-seq li { margin: 0; padding: .35em .8em; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .2); font: 600 .78rem/1.2 var(--sans); color: rgba(255, 255, 255, .7); transition: background .4s, color .4s, border-color .4s; }
.ns-seq li.on { background: rgba(243, 223, 168, .16); border-color: var(--glow); color: var(--glow); }
.ns-status { text-align: center; margin: 10px 0 0; font: italic 500 1.15rem/1.3 var(--serif-it); color: var(--glow) !important; }

/* ---------- 4 · the three locks ---------- */
.bd-svg { max-width: 460px; }
.bd-mat { fill: rgba(123, 143, 110, .35); }
.bd-lungs { fill: rgba(243, 223, 168, .55); }
.bd-legs { fill: rgba(28, 30, 62, .5); }
.bd-arm { fill: rgba(28, 30, 62, .9); stroke: var(--glow); stroke-width: 1.3; stroke-linejoin: round; }
.bd-ring { fill: none; stroke: var(--glow); stroke-width: 1.6; }
.bd-arrow { fill: none; stroke: #FFF4D6; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.bd-breath { fill: rgba(255, 255, 255, .8); }

@media (max-width: 760px) {
  .sb-grid { grid-template-columns: 1fr; gap: 12px; }
  .sb-panel { text-align: center; }
  .sb-meters { max-width: 320px; margin-inline: auto; text-align: left; }
  .sb-phase { margin-bottom: .8em; }
}
@media (prefers-reduced-motion: reduce) {
  .sb-hands g, .ns-ch, .ns-thumb, .ns-ring, .ns-tip, .ns-lab, .ns-seq li { transition: none; }
}