/* Enteroendocrine cell lesson. All rules scoped under .eec-* */
.eec-sc { position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.eec-note { font-size: 12.5px; color: var(--faint); text-align: center; max-width: 300px; }
.eec-hero img { display: block; width: 290px; max-width: 100%; max-height: 34vh; object-fit: contain; margin: 0 auto; filter: drop-shadow(0 18px 30px rgba(123, 92, 253, .3)); }
.eec-t { fill: var(--dim); font: 700 13px var(--sans); text-anchor: middle; }
.eec-t.sm { font-size: 12.5px; }
.eec-t.lt { text-anchor: start; }
.eec-t.end { text-anchor: end; }
.eec-t.gold { fill: var(--gold); }
.eec-t.vio { fill: var(--violet-bright); }

.eec-panc { fill: #E9C07A; stroke: #F6DCA4; stroke-width: 1.5; transition: filter .3s; }
.eec-lin.panc-on .eec-panc { filter: drop-shadow(0 0 8px #FCC050); }

/* ---------- the lining ---------- */
.eec-lin { display: block; width: 100%; max-width: 380px; height: auto; overflow: visible; }
.eec-lum { fill: rgba(20, 14, 30, .92); }
.eec-cell { fill: #E58A9A; stroke: #F3B3BE; stroke-width: 1; }
.eec-nuc { fill: #B85A70; }
.eec-ee path:first-child { stroke-width: 1.5; transition: filter .3s, fill .3s; }
.eec-ee .tip { fill: none; stroke-width: 2; stroke-linecap: round; }
.eec-ee.L path:first-child { fill: #F2C96B; stroke: #FFE3A0; }
.eec-ee.L .tip { stroke: #FFE3A0; }
.eec-ee.L .gr { fill: #B07A12; }
.eec-ee.on path:first-child { filter: drop-shadow(0 0 8px #FFFFFF); }
.eec-bv { fill: none; stroke: #B3263A; stroke-width: 14; stroke-linecap: round; }
.eec-bv-in { fill: none; stroke: #E0485E; stroke-width: 5; stroke-linecap: round; }
.eec-sug { fill: #FFFFFF; stroke: #9AA3B8; stroke-width: 1; }
.eec-glp { fill: var(--gold); stroke: #7A5200; stroke-width: 1; }
.eec-guide { fill: none; stroke: none; }
.eec-bag rect { fill: rgba(255, 255, 255, .14); stroke: #CFD6E6; stroke-width: 1.5; }
.eec-bag path { stroke: #CFD6E6; stroke-width: 2; }
.eec-labs { display: none; }
.eec-lin.labels .eec-labs { display: inline; }
.eec-labs path { stroke: var(--gold); stroke-width: 1.5; }
.eec-labs text { fill: var(--gold); }
.eec-g { width: 100%; max-width: 300px; }
.eec-g .gt i { background: var(--gold); }
.eec-g.ghost { opacity: .55; }

/* ---------- a day ---------- */
.eec-day { display: block; width: 100%; max-width: 360px; height: auto; overflow: visible; }
.eec-ax { stroke: var(--line-strong); stroke-width: 1.5; }
.eec-nat { fill: none; stroke: var(--gold); stroke-width: 3; stroke-linejoin: round; }
.eec-drug { fill: none; stroke: var(--violet-bright); stroke-width: 4; stroke-linecap: round; }
.eec-day .eec-t.vio { opacity: 0; transition: opacity .4s .6s; }
.eec-day.drug .eec-t.vio { opacity: 1; }
@media (max-height: 700px) { .eec-lin { max-width: 318px; } .eec-sc { gap: 6px; } }