/* Enteric nervous system lesson. All rules scoped under .ens-* */
.ens-sc { position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.ens-note { font-size: 12.5px; color: var(--faint); text-align: center; max-width: 300px; }
.ens-hero img { display: block; width: 230px; max-width: 100%; max-height: 34vh; object-fit: contain; margin: 0 auto; filter: drop-shadow(0 18px 30px rgba(123, 92, 253, .3)); }
.ens-hero.wide img { width: 320px; }
.ens-hero.sm img { width: 170px; max-height: 26vh; }

/* ---------- the tube ---------- */
.ens-tube { display: block; width: 100%; max-width: 380px; height: auto; overflow: visible; }
.ens-lumen { fill: rgba(20, 14, 30, .9); }
.ens-wall { fill: rgba(229, 138, 154, .38); stroke: rgba(240, 170, 182, .55); stroke-width: 1; }
.ens-ring { fill: none; stroke: #C79BD8; stroke-width: 9; stroke-linecap: round; transition: stroke .2s; }
.ens-ring.sq { stroke: var(--gold); stroke-width: 11; }
.ens-ring.rx { stroke: var(--mint); }
.ens-ring.sw { stroke: #FF8A6A; }
.ens-ring.dead { stroke: #6E6A78; }
.ens-ring.shake { animation: ensShake .3s; }
@keyframes ensShake { 25% { transform: translateX(-3px); } 75% { transform: translateX(3px); } }
.ens-dot circle { fill: var(--gold); stroke: rgba(0,0,0,.35); stroke-width: .8; transition: fill .3s; }
.ens-dot.dead circle, .ens-tube.off .ens-dot circle { fill: #4A4656; stroke: #6E6A78; }
.ens-dot.hot circle { animation: ensHot .7s ease-out; }
@keyframes ensHot { 0% { fill: #FFFFFF; filter: drop-shadow(0 0 6px #FCC050); } 100% { fill: var(--gold); } }
.ens-lump { fill: #8A5A3A; stroke: #C28A5E; stroke-width: 2; }
.ens-hit, .ens-hitl { fill: transparent; cursor: pointer; }
.ens-lab { fill: var(--dim); font: 600 12px var(--sans); text-anchor: middle; }
.ens-lab.dead { fill: #A9A4B5; }
.ens-lab.flip { fill: var(--gold); }
.ens-lab.end.l { text-anchor: start; }
.ens-lab.end.r { text-anchor: end; }
.ens-brk { fill: none; stroke-width: 1.5; }
.ens-brk.dead { stroke: #A9A4B5; }
.ens-brk.flip { stroke: var(--gold); }
.ens-arw { fill: none; stroke: var(--violet-bright); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.ens-arw.flip { stroke: var(--gold); }

.ens-steps { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--text); }
.ens-steps span { padding: 5px 10px; border-radius: 999px; background: var(--surface); border: 1.5px solid var(--line-strong); }
.ens-steps span.sq { border-color: var(--gold); color: var(--gold); }
.ens-steps span.rx { border-color: var(--mint); color: var(--mint); }
.ens-steps i { font-style: normal; color: var(--faint); }

.ens-key { display: flex; gap: 16px; font-size: 12.5px; color: var(--dim); }
.ens-key span { display: inline-flex; align-items: center; gap: 6px; }
.ens-kd { width: 9px; height: 9px; border-radius: 50%; background: #4A4656; border: 1px solid #6E6A78; }
.ens-kr { width: 6px; height: 16px; border-radius: 4px; border: 2.5px solid #C79BD8; }