/* /syllabus/teaching.html: yoga education and teaching skills.
   Page-only styles for the four animations: the teaching cycle (#cycle), the lesson-plan timeline (#lesson),
   voice and body language (#voice) and the class formation planner (#formation).
   Palette and the night stage come from course.css. SVG text sizes are in viewBox units and are raised on
   small screens so they never render below about 12px. */

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

.stage .tc-swap > * { animation: tc-in .5s ease both; }

/* ---------- 1. teaching cycle ---------- */
.tc-cy-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 12px 28px; align-items: center; margin-top: 8px; }
.tc-cy-svg { max-width: 460px; margin: 0 auto; overflow: visible; touch-action: manipulation; }
.tc-cy-panel { min-width: 0; }
.tc-cy-panel > * { margin-top: 0; }
.tc-cy-count { font: 600 .74rem/1.2 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .6) !important; margin-bottom: .4em; }
.stage .tc-cy-title { font: 400 clamp(1.5rem, 3vw, 2rem)/1.15 var(--serif); margin: 0 0 .5em; color: #fff; }
.tc-cy-panel p { font-size: .95rem; }
.stage .tc-cy-cue { font: italic 500 1.15rem/1.4 var(--serif-it); color: var(--glow); border-left: 2px solid rgba(243, 223, 168, .45); padding-left: .8em; }
.stage .tc-cy-tip { font-size: .88rem; color: rgba(255, 255, 255, .66); margin-bottom: 0; }

.cy-orbit { fill: none; stroke: rgba(243, 223, 168, .08); stroke-width: 1; stroke-dasharray: 2 6; }
.cy-track { fill: none; stroke: rgba(243, 223, 168, .18); stroke-width: 1.5; }
.cy-trail { fill: none; stroke: var(--glow); stroke-width: 3; stroke-linecap: round; filter: drop-shadow(0 0 4px rgba(243, 223, 168, .7)); }
.cy-chev { fill: none; stroke: rgba(243, 223, 168, .5); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.cy-node { cursor: pointer; outline: none; }
.cy-hit { fill: #000; fill-opacity: 0; }
.cy-halo { fill: rgba(243, 223, 168, .1); transform-box: fill-box; transform-origin: center; transition: fill .4s; }
.cy-dot { fill: #221F44; stroke: rgba(243, 223, 168, .6); stroke-width: 1.6; transition: fill .4s, stroke .4s; }
.cy-num { font: 400 22px var(--serif); fill: var(--glow); text-anchor: middle; pointer-events: none; transition: fill .4s; }
.cy-lbl { font: 600 18px var(--sans); fill: rgba(255, 255, 255, .72); letter-spacing: .01em; transition: fill .4s; }
.cy-node:hover .cy-halo { fill: rgba(243, 223, 168, .22); }
.cy-node.on .cy-dot { fill: var(--glow); stroke: #fff; }
.cy-node.on .cy-num { fill: var(--night); }
.cy-node.on .cy-lbl { fill: #fff; }
.cy-node.on .cy-halo { fill: rgba(243, 223, 168, .28); animation: tc-pulse 2.6s ease-in-out infinite; }
.cy-node:focus-visible .cy-dot { stroke: #fff; stroke-width: 3.5; }
.cy-light { fill: #FFF6D8; filter: drop-shadow(0 0 8px rgba(243, 223, 168, .95)); pointer-events: none; }
.cy-center { font: italic 500 34px var(--serif-it); fill: var(--glow); text-anchor: middle; }
.cy-sub { font: 600 18px var(--sans); fill: rgba(255, 255, 255, .55); letter-spacing: .12em; text-anchor: middle; }

/* ---------- 2. lesson-plan timeline ---------- */
.tc-lp-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; margin: 6px 0 2px; }
.tc-lp-clock { font: 400 1rem/1 var(--sans); color: rgba(255, 255, 255, .6) !important; margin: 0; }
.tc-lp-clock b { font: 400 clamp(2rem, 5vw, 2.8rem)/1 var(--serif); color: var(--glow); margin-right: .12em; font-variant-numeric: tabular-nums; }
.stage .tc-lp-name { font: italic 500 1.2rem/1.2 var(--serif-it); color: var(--glow); margin: 0; }
.tc-lp-svg { max-width: 860px; margin: 8px auto 2px; }
.lp-track { fill: rgba(255, 255, 255, .04); stroke: rgba(243, 223, 168, .3); stroke-width: 1.2; }
.lp-seg { cursor: pointer; }
.lp-seg rect { stroke: rgba(18, 24, 49, .85); stroke-width: 1.5; transition: filter .3s; }
.lp-seg.on rect { filter: drop-shadow(0 0 6px rgba(243, 223, 168, .6)); }
.lp-in { font: 600 13px var(--sans); fill: #1C1E3E; pointer-events: none; }
.lp-tickline { stroke: rgba(243, 223, 168, .35); stroke-width: 1; }
.lp-tick { font: 500 13px var(--sans); fill: rgba(255, 255, 255, .62); text-anchor: middle; }
.lp-head line { stroke: #FFF6D8; stroke-width: 2; }
.lp-head circle { fill: #FFF6D8; }
.lp-head { filter: drop-shadow(0 0 6px rgba(243, 223, 168, .9)); }

/* part colours: one swatch per kind of practice */
.lp-prayer rect, .tc-lp-item.lp-prayer .sw { fill: #F3DFA8; background: #F3DFA8; }
.lp-warm rect, .tc-lp-item.lp-warm .sw { fill: #A9BC9C; background: #A9BC9C; }
.lp-asana rect, .tc-lp-item.lp-asana .sw { fill: #D98A6F; background: #D98A6F; }
.lp-prana rect, .tc-lp-item.lp-prana .sw { fill: #93A6DA; background: #93A6DA; }
.lp-relax rect, .tc-lp-item.lp-relax .sw { fill: #B9A5D8; background: #B9A5D8; }
.lp-med rect, .tc-lp-item.lp-med .sw { fill: #D9BC6E; background: #D9BC6E; }
.lp-close rect, .tc-lp-item.lp-close .sw { fill: #F6EBCB; background: #F6EBCB; }

.tc-lp-list { list-style: none; padding: 0 !important; margin: 12px 0 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.stage .tc-lp-list li { margin: 0; }
.stage .tc-lp-item { width: 100%; height: 100%; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 3px 8px; padding: .6em .8em; border-radius: 14px; border: 1px solid rgba(243, 223, 168, .18); background: rgba(255, 255, 255, .04); color: rgba(255, 255, 255, .85); font: 400 .82rem/1.3 var(--sans); text-align: left; transition: border-color .3s, background .3s; }
.stage .tc-lp-item:hover { background: rgba(255, 255, 255, .1); color: #fff; border-color: rgba(243, 223, 168, .45); }
.stage .tc-lp-item.on { background: rgba(243, 223, 168, .14); border-color: var(--glow); color: #fff; }
.tc-lp-item .sw { grid-row: span 2; width: 12px; height: 12px; border-radius: 50%; }
.tc-lp-item .t { font-size: .74rem; letter-spacing: .06em; color: rgba(255, 255, 255, .6); }
.tc-lp-item b { grid-column: 2; font-weight: 600; }

/* ---------- 3. voice and body language ---------- */
.tc-vb-svg { max-width: 680px; margin: 8px auto 0; }
.vb-panel { fill: rgba(255, 255, 255, .03); stroke: rgba(243, 223, 168, .16); stroke-width: 1.2; }
.vb-title { font: 600 15px var(--sans); letter-spacing: .14em; }
.vb-title.poor { fill: #E8A48C; }
.vb-title.good { fill: var(--glow); }
.vb-ground { stroke: rgba(243, 223, 168, .25); stroke-width: 1.2; }
.vb-line { fill: none; stroke: rgba(255, 244, 214, .92); stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }
.vb-far { stroke: rgba(255, 244, 214, .42); }
.vb-head { fill: #221F44; stroke: rgba(255, 244, 214, .92); stroke-width: 2.4; }
.vb-eye { fill: rgba(255, 244, 214, .9); }
.vb-hand { fill: rgba(243, 223, 168, .55); }
.vb-gaze { stroke: var(--glow); stroke-width: 1.5; stroke-dasharray: 3 5; stroke-linecap: round; opacity: 0; transition: opacity .4s; }
.vb-gaze.on { opacity: .9; }
.vb-paper { fill: rgba(255, 255, 255, .78); opacity: 0; transition: opacity .4s; }
.vb-paper.on { opacity: 1; }
.vb-ah { fill: #221F44; stroke: rgba(255, 244, 214, .38); stroke-width: 1.8; transition: stroke .35s, fill .35s; }
.vb-ab { fill: none; stroke: rgba(255, 244, 214, .3); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; transition: stroke .35s; }
.vb-aud.on .vb-ah { stroke: var(--glow); fill: rgba(243, 223, 168, .3); filter: drop-shadow(0 0 5px rgba(243, 223, 168, .8)); }
.vb-aud.on .vb-ab { stroke: rgba(243, 223, 168, .8); }
.vb-q { font: 600 22px var(--sans); fill: #E8A48C; text-anchor: middle; opacity: 0; transition: opacity .4s; }
.vb-aud.lost .vb-q { opacity: 1; }
.vb-wave { fill: none; stroke: var(--glow); stroke-width: 2.2; stroke-linecap: round; }
.vb-strip { opacity: 0; transition: opacity .4s; }
.vb-strip.on { opacity: 1; }
.vb-strip rect { fill: rgba(243, 223, 168, .2); }
.vb-strip rect.on { fill: var(--glow); }
.vb-strip line { stroke: #fff; stroke-width: 1.6; }
.tc-vb-notes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 20px; margin-top: 12px; }
.stage .tc-vb-notes p { font-size: .92rem; margin: 0; padding: 10px 14px; border-radius: 12px; background: rgba(255, 255, 255, .04); }
.tc-vb-poor { border-left: 3px solid #E8A48C; }
.tc-vb-good { border-left: 3px solid var(--glow); }
.tc-vb-poor b { color: #E8A48C; }
.tc-vb-good b { color: var(--glow); }

/* ---------- 4. class formation planner ---------- */
.tc-fp-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, .65fr); gap: 16px 28px; align-items: start; margin-top: 8px; }
.tc-fp-svg { max-width: 680px; margin: 0 auto; }
.tc-fp-panel { min-width: 0; }
.tc-fp-panel > * { margin-top: 0; }
.tc-fp-mode { font: 600 .74rem/1.2 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .6) !important; margin-bottom: .3em; }
.stage .tc-fp-title { font: 400 clamp(1.4rem, 2.6vw, 1.8rem)/1.15 var(--serif); color: #fff; margin: 0 0 .6em; }
.stage .tc-fp-dos { padding-left: 1.1em; margin: 0 0 .8em; font-size: .92rem; }
.stage .tc-fp-dos li { margin-bottom: .3em; }
.stage .tc-fp-says { font: italic 500 1.08rem/1.35 var(--serif-it); color: var(--glow); }
.tc-legend { list-style: none; padding: 0 !important; margin: 14px 0 0; display: grid; gap: 6px; font-size: .82rem; }
.stage .tc-legend li { display: flex; align-items: center; gap: 8px; margin: 0; color: rgba(255, 255, 255, .72); }
.tc-legend .k { flex: none; width: 14px; height: 14px; border-radius: 50%; }
.tc-legend .k-t { background: var(--glow); box-shadow: 0 0 8px rgba(243, 223, 168, .8); }
.tc-legend .k-s { background: #FFF4D6; box-shadow: 0 0 0 2px rgba(243, 223, 168, .55); width: 10px; height: 10px; margin: 0 2px; }
.tc-legend .k-b { background: #E8A48C; }
.tc-legend .k-a { background: #A9BC9C; }
.tc-legend .k-line { height: 2px; border-radius: 1px; background: rgba(243, 223, 168, .75); }
.tc-legend .k-reach { border: 1.5px dashed #A9BC9C; background: rgba(123, 143, 110, .18); }

.fp-room { fill: rgba(255, 255, 255, .025); stroke: rgba(243, 223, 168, .5); stroke-width: 1.6; stroke-linejoin: round; }
.fp-window { stroke: rgba(243, 223, 168, .55); stroke-width: 3; stroke-dasharray: 6 6; }
.fp-door { fill: none; stroke: rgba(243, 223, 168, .4); stroke-width: 1.2; stroke-dasharray: 3 4; }
.fp-text { font: 600 14px var(--sans); letter-spacing: .14em; fill: rgba(243, 223, 168, .62); }
.fp-lbl { font: italic 500 19px var(--serif-it); fill: var(--glow); transition: opacity .4s; }
.fp-fan { opacity: 0; transition: opacity .7s; }
.fp-fan.on { opacity: 1; }
.fp-line { stroke: rgba(243, 223, 168, .6); stroke-width: 1.3; stroke-dasharray: 1; stroke-dashoffset: 1; opacity: 0; transition: stroke-dashoffset .8s ease, opacity .3s; }
.fp-line.show { stroke-dashoffset: 0; opacity: 1; }
.fp-line.blocked { stroke: #E8A48C; stroke-width: 1.8; }
.fp-reach { fill: rgba(123, 143, 110, .1); stroke: #A9BC9C; stroke-width: 1.4; stroke-dasharray: 5 6; opacity: 0; transition: opacity .6s; }
.fp-reach.on { opacity: 1; }
.fp-walk { fill: none; stroke: #A9BC9C; stroke-width: 1.8; stroke-dasharray: 2 7; stroke-linecap: round; opacity: 0; transition: opacity .6s; }
.fp-walk.on { opacity: 1; animation: tc-march 1.6s linear infinite; }
.fp-platform { fill: rgba(243, 223, 168, .12); stroke: var(--glow); stroke-width: 1.4; opacity: 0; transform-box: fill-box; transform-origin: center; transform: scale(.8); transition: opacity .6s, transform .6s; }
.fp-platform.on { opacity: 1; transform: none; }
.fp-plat-lbl { opacity: 0; }
.fp-plat-lbl.on { opacity: 1; }
.fp-mat { fill: rgba(123, 143, 110, .28); stroke: rgba(169, 188, 156, .55); stroke-width: 1; }
.fp-ring { fill: none; stroke: rgba(243, 223, 168, 0); stroke-width: 1.6; transition: stroke .4s; }
.fp-sh { fill: #FFF4D6; transition: fill .4s; }
.fp-hd { fill: #221F44; stroke: #FFF4D6; stroke-width: 1.6; transition: stroke .4s; }
.fp-arm { transition: transform .5s ease, opacity .4s; }
.fp-arm line { stroke: #FFF4D6; stroke-width: 2.6; stroke-linecap: round; transition: stroke .4s; }
.fp-arm circle { fill: #FFF4D6; transition: fill .4s; }
.fp-body { transition: opacity .4s; }
.fp-st.blocked .fp-body { opacity: .42; }
.fp-st.blocked .fp-ring { stroke: #E8A48C; }
.fp-st.wrong .fp-arm line { stroke: #E8A48C; }
.fp-st.wrong .fp-arm circle { fill: #E8A48C; }
.fp-t .fp-sh { fill: var(--glow); }
.fp-t .fp-hd { stroke: var(--glow); }
.fp-t .fp-arm line { stroke: var(--glow); }
.fp-t .fp-arm circle { fill: var(--glow); }
.fp-t-glow { fill: rgba(243, 223, 168, .18); transform-box: fill-box; transform-origin: center; animation: tc-pulse 2.8s ease-in-out infinite; }
.fp-as .fp-sh { fill: #A9BC9C; }
.fp-as .fp-hd { stroke: #A9BC9C; }

@keyframes tc-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes tc-pulse { 0%, 100% { transform: scale(.85); opacity: .7; } 50% { transform: scale(1.18); opacity: 1; } }
@keyframes tc-march { to { stroke-dashoffset: -18; } }

@media (max-width: 860px) {
  .tc-fp-grid { grid-template-columns: 1fr; }
  .tc-legend { grid-template-columns: 1fr 1fr; }
  .lp-in, .lp-tick { font-size: 16px; }
}
@media (max-width: 760px) {
  .tc-cy-grid { grid-template-columns: 1fr; }
  .tc-cy-svg { max-width: 400px; }
}
@media (max-width: 600px) {
  .lp-in { display: none; }
  .lp-tick { font-size: 24px; }
  .vb-title { font-size: 24px; }
  .vb-q { font-size: 26px; }
  .fp-lbl { font-size: 24px; }
  .fp-text { font-size: 23px; letter-spacing: .08em; }
  .tc-vb-notes { grid-template-columns: 1fr; }
  .tc-legend { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .stage .tc-swap > *, .cy-node.on .cy-halo, .fp-walk.on, .fp-t-glow { animation: none; }
  .fp-line, .fp-arm, .fp-platform, .fp-fan, .fp-reach, .fp-walk, .vb-gaze, .vb-paper, .vb-strip { transition: none; }
}