/* Vagus nerve lesson. All rules scoped under .vag-* */
.vag-sc { position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.vag-note { font-size: 12.5px; color: var(--faint); text-align: center; max-width: 300px; }
.vag-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)); }
.vag-hero.wide img { width: 290px; max-height: 26vh; }
.vag-hero.sm img { width: 160px; max-height: 22vh; }

/* ---------- the body map ---------- */
.vag-body { display: block; width: 100%; max-width: 360px; height: auto; overflow: visible; }
.vag-paths path { fill: none; stroke: none; }
.vag-cable { fill: none; stroke: #E8C77A; stroke-width: 4; stroke-linecap: round; opacity: .55; }
.vag-brain { transition: opacity .6s; }
.vag-brain.dim { opacity: .3; }
.vag-dia { fill: none; stroke: var(--faint); stroke-width: 1.5; stroke-dasharray: 5 5; }
.vag-lab { fill: var(--dim); font: 600 13px var(--sans); text-anchor: middle; }
.vag-bpm { fill: var(--text); font: 800 24px var(--sans); text-anchor: middle; }
.vag-heart path { fill: #E0556A; stroke: #FF9AAA; stroke-width: 1.5; }
.vag-heart { transform-origin: 0 17px; transform-box: view-box; }
.vag-heart.beat { animation: vagBeat .22s ease-out; }
@keyframes vagBeat { 40% { transform: scale(1.14); } }
.vag-stom { fill: rgba(229, 138, 154, .45); stroke: rgba(240, 170, 182, .7); stroke-width: 1.5; }
.vag-gut { fill: rgba(229, 138, 154, .3); stroke: rgba(240, 170, 182, .6); stroke-width: 1.5; }
.vag-dot.dn { fill: var(--gold); }
.vag-dot.up { fill: var(--mint); }
.vag-drop { fill: #B8F06A; }
.vag-cut path { stroke: var(--red); stroke-width: 3.5; stroke-linecap: round; }
.vag-aim circle { fill: none; stroke: var(--red); stroke-width: 2; stroke-dasharray: 3 3; }
.vag-aim text { fill: var(--red); font: 700 13px var(--sans); }

/* ---------- meters, bars, fibers ---------- */
.vag-meter { width: 100%; max-width: 300px; display: grid; grid-template-columns: 100px 1fr; align-items: center; gap: 10px; font-size: 13px; font-weight: 700; color: var(--text); }
.vag-meter i { height: 12px; border-radius: 6px; background: var(--surface); overflow: hidden; }
.vag-meter b { display: block; height: 100%; width: 0; background: #B8F06A; border-radius: 6px; transition: width .7s ease-out; }
.vag-bars { width: 100%; max-width: 330px; display: flex; flex-direction: column; gap: 7px; }
.vag-bt { font-size: 12.5px; color: var(--dim); text-align: center; }
.vag-br { display: grid; grid-template-columns: 130px 1fr 18px; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: var(--text); }
.vag-br i { height: 12px; border-radius: 6px; background: var(--surface); overflow: hidden; }
.vag-br b { display: block; height: 100%; width: 0; background: var(--gold); border-radius: 6px; transition: width .7s ease-out; }
.vag-br em { font-style: normal; color: var(--gold); font-weight: 800; }
.vag-cablex { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.vag-bundle { display: grid; grid-template-columns: repeat(5, 44px); gap: 8px; padding: 14px; border-radius: 50%; border: 3px solid rgba(232, 199, 122, .6); background: rgba(232, 199, 122, .06); }
.vag-fb { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--surface); border: 2px solid var(--line-strong); transition: background .25s, border-color .25s; }
.vag-fb svg { width: 22px; height: 22px; opacity: 0; transition: opacity .25s; }
.vag-fb path { fill: none; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.vag-fb.up { border-color: var(--mint); background: rgba(63, 214, 154, .14); }
.vag-fb.up svg { opacity: 1; }
.vag-fb.up path { stroke: var(--mint); }
.vag-fb.dn { border-color: var(--gold); background: rgba(252, 192, 80, .14); }
.vag-fb.dn svg { opacity: 1; transform: rotate(180deg); }
.vag-fb.dn path { stroke: var(--gold); }
.vag-legend { display: flex; gap: 16px; font-size: 12.5px; font-weight: 700; }
.vag-legend .up { color: var(--mint); }
.vag-legend .dn { color: var(--gold); }
.vag-facts { display: flex; gap: 10px; }
.vag-fact { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 12px; border-radius: 14px; background: var(--surface); border: 1.5px solid var(--line-strong); font-size: 12.5px; color: var(--dim); }
.vag-fact b { font-size: 14px; }
.vag-fact.yes b { color: var(--mint); }
.vag-fact.no b { color: var(--dim); }

@media (max-height: 700px) {
  .vag-body { max-width: 300px; }
  .vag-bundle { grid-template-columns: repeat(5, 40px); gap: 6px; }
  .vag-fb { width: 40px; height: 40px; }
}