/* /syllabus/body.html: the three body animations (systems explorer, homeostasis loop, senses and
   elements) and a few page tables. The night stage, buttons, tabs and captions come from course.css. */

/* ---------- shared SVG language: thin gold lines, serif labels ---------- */
.sys-svg text, .hs-loop text, .hs-body text, .sn-svg text { font-family: var(--serif-it); font-style: italic; font-weight: 500; fill: var(--glow); }
.sys-svg text.sans, .hs-body .hs-small, .sn-svg .sn-small { font-family: var(--sans); font-style: normal; font-weight: 500; fill: rgba(255, 255, 255, .72); letter-spacing: .02em; }
.hit { fill: transparent; stroke: transparent; }
.stage h3 { margin-top: 0; }
.stage .stage-cap { min-height: 3em; }
.hs-loop .hs-unit { font-size: 22px; fill: rgba(255, 255, 255, .75); }
html:not(.js) .stage-controls, html:not(.js) .sys-tabs { display: none; }
[role="button"].hs-node, [role="button"].sn-icon { cursor: pointer; outline: none; }

/* ---------- 1 · body systems explorer ---------- */
.sys-tabs { justify-content: center; }
.sys-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(240px, 330px); gap: 20px 36px; align-items: center; max-width: 900px; margin: 0 auto; }
.sys-svg { max-width: 420px; margin: 0 auto; }
.sys-svg text { font-size: 15px; }
.sys-svg text.sans { font-size: 13px; }
.sys-body { fill: rgba(243, 223, 168, .03); stroke: var(--glow); stroke-opacity: .5; stroke-width: 1.3; stroke-linejoin: round; }
.sys-layer { opacity: 0; transition: opacity .6s ease; pointer-events: none; }
.sys-layer.on { opacity: 1; }
.sys-layer path, .sys-layer ellipse, .sys-layer line { fill: none; stroke: var(--glow); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.sys-layer .draw { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.6s ease; }
.sys-layer.on .draw { stroke-dashoffset: 0; }
html:not(.js) .sys-layer .draw { stroke-dashoffset: 0; }
.sx-lab line { stroke: var(--glow); stroke-opacity: .35; stroke-width: 1; }
.sys-svg .sys-track { stroke: none; }
.sx-muscle { fill: rgba(196, 101, 74, .22) !important; stroke: #E7BC94 !important; stroke-opacity: .6; stroke-width: 1 !important; }
.sx-spine { stroke-width: 5 !important; stroke-dasharray: 4 3; stroke-linecap: butt !important; }
.sx-joints circle { fill: var(--night); stroke: #fff; stroke-width: 1.2; }
.rs-lung { fill: rgba(243, 223, 168, .14) !important; stroke-opacity: .85; }
.rs-rings { stroke-opacity: .6; stroke-width: 1 !important; }
.rs-dia { stroke: #E7BC94 !important; stroke-width: 2.2 !important; }
.rs-air circle { fill: #fff; opacity: .85; }
.cv-art { stroke: #EFA07F !important; stroke-opacity: .75; }
.cv-vein { stroke: #A9B4F2 !important; stroke-opacity: .75; }
.cv-pul { stroke-opacity: .55; }
.cv-heart { fill: rgba(196, 101, 74, .55) !important; stroke: #F6CBB9 !important; }
.cv-dots circle.a { fill: #FFD9C7; }
.cv-dots circle.v { fill: #CBD2FF; }
.sys-layer .ns-brain { fill: #F3DFA8; fill-opacity: .1; }
.ns-gyri { stroke-opacity: .5; stroke-width: 1 !important; }
.ns-cord { stroke-width: 3 !important; }
.ns-nerve { stroke-opacity: .6; stroke-width: 1 !important; }
.ns-imp circle { fill: #fff; stroke: none !important; }
.ns-imp .ns-halo { fill: rgba(243, 223, 168, .35); }
.dg-organ { fill: rgba(196, 101, 74, .25) !important; stroke: #E7BC94 !important; }
.dg-si { stroke-width: 3 !important; stroke-opacity: .8; }
.dg-li { stroke-width: 5 !important; stroke-opacity: .45; }
.dg-bolus { fill: #FFF4D6; stroke: none !important; }
.en-faint { stroke-opacity: .25 !important; stroke-dasharray: 2 3; }
.en-gland { fill: var(--glow) !important; stroke: none !important; }
.en-halo { fill: rgba(243, 223, 168, .5) !important; stroke: none !important; opacity: .15; transition: opacity .5s; }
.en-g.on .en-halo { opacity: 1; }
.sx-lab[data-gland] text { opacity: .55; transition: opacity .5s; }
.sx-lab[data-gland].on text { opacity: 1; fill: #fff; }
.sys-panels [role="tabpanel"] { padding: 4px 2px; }
.sys-panels [role="tabpanel"]:focus-visible { outline: 2px solid var(--glow); outline-offset: 4px; border-radius: 8px; }
.sys-panels h4 { font: 400 1.6rem/1.15 var(--serif); color: #fff; letter-spacing: 0; text-transform: none; margin: 0 0 .3em; }
.sys-num { font: italic 500 1.2rem/1.3 var(--serif-it); color: var(--glow) !important; margin: 0 0 .8em; }
.sys-panels p, .sys-panels li { font-size: .92rem; }
.sys-panels ul { padding-left: 1.1em; margin: 0 0 .6em; }
.sys-now { min-height: 1.5em; font: italic 500 1.08rem/1.35 var(--serif-it); color: var(--glow) !important; }
html:not(.js) .sys-panels [role="tabpanel"] + [role="tabpanel"] { margin-top: 1.2em; padding-top: 1em; border-top: 1px solid rgba(255, 255, 255, .15); }

/* ---------- 2 · homeostasis loop ---------- */
.hs-modes { margin: 0 0 6px; }
.hs-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 8px 24px; align-items: center; max-width: 960px; margin: 0 auto; }
.hs-loop { max-width: 470px; margin: 0 auto; }
.hs-body { max-width: 420px; margin: 0 auto; }
.hs-loop text { font-size: 18px; }
.hs-loop .hs-kicker, .hs-loop .hs-set { font-family: var(--sans); font-style: normal; font-size: 15px; fill: rgba(255, 255, 255, .7); }
.hs-loop .hs-read { font-family: var(--serif); font-style: normal; font-size: 42px; fill: #fff; }
.hs-body text { font-size: 15px; }
.hs-body .hs-small { font-size: 13px; }
.hs-ring { fill: none; stroke: var(--glow); stroke-opacity: .28; stroke-width: 1.4; }
.hs-trail { fill: none; stroke: var(--glow); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 0 700; opacity: .9; }
.hs-chev path { fill: none; stroke: var(--glow); stroke-opacity: .55; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.hs-dot { fill: var(--night); stroke: var(--glow); stroke-width: 1.6; transition: fill .3s; }
.hs-halo { opacity: 0; transition: opacity .4s; }
.hs-node text { transition: fill .3s; }
.hs-node.on .hs-dot { fill: var(--glow); }
.hs-node.on .hs-halo { opacity: 1; }
.hs-node.on text, .hs-node:hover text { fill: #fff; }
.hs-node:focus-visible .hit { stroke: #fff; stroke-width: 1.5; }
.hs-node:focus-visible text { text-decoration: underline; }
.hs-pcore { fill: #fff; }
.hs-pulse.idle { opacity: .35; }
.hs-fig { fill: none; stroke: var(--glow); stroke-opacity: .8; stroke-width: 1.8; stroke-linejoin: round; }
.hs-skin { fill: #E9876A; opacity: 0; stroke: none; }
.hs-sweat path { fill: #BFE3FF; }
.hs-sweat, .hs-shiver { opacity: 0; }
.hs-shiver path { fill: none; stroke: #CFE3FF; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.hs-sun circle { fill: #F3C65A; }
.hs-sun path { stroke: #F3C65A; stroke-width: 2; stroke-linecap: round; }
.hs-snow path { fill: none; stroke: #CFE3FF; stroke-width: 2; stroke-linecap: round; }
.hs-sun, .hs-snow { opacity: .25; }
.hs-mag { fill: none; stroke: var(--glow); stroke-width: 1.6; }
.hs-mag-lead { stroke: var(--glow); stroke-opacity: .45; stroke-width: 1; }
.hs-tissue { fill: rgba(233, 135, 106, .16); }
.hs-air { fill: rgba(18, 24, 49, .7); }
.hs-surface { fill: none; stroke: #F6CBB9; stroke-width: 2; }
.hs-gland { fill: none; stroke: #BFE3FF; stroke-opacity: .7; stroke-width: 1.4; stroke-linecap: round; }
.hs-drop { fill: #BFE3FF; opacity: 0; }
.hs-heat { fill: none; stroke: #F6CBB9; stroke-width: 1.4; stroke-linecap: round; opacity: 0; }
.hs-vessel { fill: rgba(196, 101, 74, .7); stroke: #F6CBB9; stroke-width: 1.2; }
.hs-cells circle { fill: #FFD9C7; }
.hs-blood { fill: rgba(196, 101, 74, .55); }
.hs-gdots circle { fill: #fff; }
.hs-uptake { fill: none; stroke: var(--glow); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; opacity: 0; }
.hs-cell { fill: rgba(123, 143, 110, .35); stroke: #CFE0C2; stroke-width: 1.4; }
.hs-store { fill: var(--glow); opacity: .75; }
.hs-liver, .hs-stomach { fill: #C4654A; fill-opacity: .3; stroke: #E7BC94; stroke-width: 1.4; }
.hs-pancreas { fill: #F3DFA8; fill-opacity: .35; stroke: var(--glow); stroke-width: 1.4; }
.hs-lab line { stroke: var(--glow); stroke-opacity: .4; stroke-width: 1; }
.hs-food circle { fill: #FFF4D6; opacity: 0; }
.hs-insulin path { fill: var(--glow); opacity: 0; }
.hs-glucagon path { fill: #F2A65A; opacity: 0; }
.hs-release circle { fill: #fff; opacity: 0; }
.hs-tube { fill: rgba(18, 24, 49, .8); stroke: var(--glow); stroke-opacity: .7; stroke-width: 1.2; }
.hs-bulb { fill: #E9876A; stroke: var(--glow); stroke-opacity: .7; stroke-width: 1.2; }
.hs-level { fill: #E9876A; }
#hs-stage[data-mode="gluc"] .hs-bulb, #hs-stage[data-mode="gluc"] .hs-level { fill: #F3DFA8; }
.hs-band { fill: rgba(157, 179, 138, .55); }
.hs-scale path { fill: none; stroke: rgba(255, 255, 255, .6); stroke-width: 1.2; }
.hs-scale .hs-setline { stroke: var(--glow); stroke-dasharray: 2 3; }
#hs-stage[data-mode="temp"] .hs-g-only, #hs-stage[data-mode="gluc"] .hs-t-only { display: none; }
.hs-steps { list-style: none; counter-reset: hs; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; max-width: 960px; margin: 14px auto 0; padding: 0; }
.hs-steps li { counter-increment: hs; margin: 0; padding: 10px 12px; border-radius: 14px; border: 1px solid rgba(255, 255, 255, .16); font-size: .8rem; line-height: 1.35; transition: border-color .4s, background .4s; }
.hs-steps li b { display: block; font: 600 .74rem/1.3 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--glow); margin-bottom: .2em; }
.hs-steps li b::before { content: counter(hs) " · "; }
.hs-steps li.on { border-color: var(--glow); background: rgba(243, 223, 168, .1); }
.hs-range { display: inline-flex; align-items: center; gap: 10px; font: 600 .85rem/1 var(--sans); color: rgba(255, 255, 255, .85); padding: .35em .9em; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .3); }
.hs-range input { width: 150px; max-width: 40vw; accent-color: #F3C65A; }
.hs-range output { min-width: 3.4em; color: var(--glow); }
#hs-stage[data-mode="gluc"] label.hs-t-only, #hs-stage[data-mode="temp"] button.hs-g-only { display: none; }
.hs-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; max-width: 760px; margin: 10px auto 0; font-size: .8rem; line-height: 1.3; color: rgba(255, 255, 255, .78) !important; }
.hs-legend span { display: inline-flex; align-items: center; gap: 7px; }
.hs-legend i { flex: none; display: inline-block; width: 10px; height: 10px; border-radius: 50%; }
.hs-legend .k-drop { background: #BFE3FF; border-radius: 50% 0 50% 50%; transform: rotate(-45deg); }
.hs-legend .k-line { width: 16px; height: 2px; border-radius: 1px; }
.hs-legend .k-heat { background: #F6CBB9; }
.hs-legend .k-shiver { background: #CFE3FF; }
.hs-legend .k-vessel { width: 20px; height: 8px; border-radius: 4px; background: rgba(196, 101, 74, .85); border: 1px solid #F6CBB9; }
.hs-legend .k-dot { background: #fff; }
.hs-legend .k-dia { width: 8px; height: 8px; border-radius: 1px; transform: rotate(45deg); }
.hs-legend .k-ins { background: var(--glow); }
.hs-legend .k-gcg { background: #F2A65A; }
.hs-legend .k-cell { width: 14px; height: 14px; background: radial-gradient(circle, var(--glow) 0 30%, rgba(123, 143, 110, .45) 32%); border: 1.4px solid #CFE0C2; }

/* ---------- 3 · senses and elements ---------- */
.sn-svg { max-width: 460px; margin: 4px auto 0; }
.sn-svg .sn-name { font-size: 18px; }
.sn-svg .sn-small { font-size: 15px; }
.sn-svg .sn-el { font-size: 21px; fill: #fff; }
.sn-orbit { fill: none; stroke: var(--glow); stroke-opacity: .14; stroke-dasharray: 2 6; }
.sn-inner { opacity: .2; }
.sn-fig ellipse, .sn-fig path { fill: none; stroke: var(--glow); stroke-opacity: .85; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.sn-fig circle { fill: var(--glow); opacity: .7; }
.sn-brow { fill: #fff; opacity: .3; }
.sn-disc { fill: var(--night); stroke: var(--glow); stroke-opacity: .5; stroke-width: 1.3; transition: stroke .4s, stroke-opacity .4s; }
.sn-glyph { fill: none; stroke: var(--glow); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.sn-pupil { fill: var(--glow); }
.sn-rays line { stroke: var(--glow); stroke-opacity: .45; stroke-width: 1.6; stroke-linecap: round; stroke-dasharray: 4 5; }
.sn-icon.on .sn-disc { stroke: var(--el, var(--glow)); stroke-opacity: 1; stroke-width: 2; }
.sn-icon.on .sn-rays line { stroke: var(--el, var(--glow)); stroke-opacity: 1; }
.sn-icon.on .sn-glyph { stroke: #fff; }
.sn-icon:hover .sn-disc { stroke-opacity: 1; }
.sn-icon:focus-visible .sn-disc { stroke: #fff; stroke-width: 2.4; }
.sn-icon:focus-visible .sn-name { text-decoration: underline; }
.sn-t-shell { fill: rgba(123, 143, 110, .35); stroke: #CFE0C2; stroke-width: 1.3; }
.sn-t-mark { fill: none; stroke: #CFE0C2; stroke-opacity: .6; stroke-width: 1; }
.sn-t-limb { fill: rgba(123, 143, 110, .5); stroke: #CFE0C2; stroke-width: 1.1; }
.sn-chain { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; padding: 0; margin: 10px auto 0; max-width: 620px; }
.sn-chain li { position: relative; margin: 0; text-align: center; }
.sn-chain li + li::before { content: "→"; position: absolute; left: -17px; top: 50%; color: var(--glow); opacity: .6; }
.sn-chain span { display: block; font: 600 .72rem/1.3 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: rgba(255, 255, 255, .6); }
.sn-chain b { font: italic 500 1.12rem/1.3 var(--serif-it); color: var(--glow); }

/* ---------- page tables ---------- */
.fx-table { min-width: 680px !important; font-size: .88rem; }
.fx-table td:first-child { white-space: nowrap; }
.fx-table td a { text-decoration-thickness: 1px; }

@media (max-width: 860px) {
  .sys-grid, .hs-grid { grid-template-columns: 1fr; gap: 10px; }
  .sys-panels { max-width: 520px; margin: 0 auto; }
  .hs-steps { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
}
@media (max-width: 480px) {
  .hs-steps { grid-template-columns: 1fr 1fr; }
  .hs-steps li:last-child { grid-column: 1 / -1; }
  .sn-chain { gap: 8px 20px; }
  .hs-range input { width: 120px; }
}
@media (prefers-reduced-motion: reduce) {
  .sys-layer, .sys-layer .draw, .en-halo, .sx-lab[data-gland] text, .hs-dot, .hs-halo, .hs-node text, .hs-steps li, .sn-disc { transition: none; }
}