/* Glial cell lesson. All rules scoped under .gli-* */
.gli-sc { position: relative; width: 100%; display: flex; justify-content: center; }
.gli-full { flex: 1; align-items: center; }
.gli-svg { width: 100%; max-width: 340px; height: auto; max-height: 40vh; overflow: visible; }
.gli-tis { max-height: 58vh; }
.gli-tis.small { max-height: 34vh; }
.gli-lab { font: 600 14px var(--sans); fill: var(--dim); text-anchor: middle; }
.gli-lab-l { text-anchor: start; }
.gli-lab-d { fill: #2A1C00; font-weight: 700; }

/* cells */
.gli-nd, .gli-na { fill: none; stroke: var(--gold); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.gli-ns { fill: var(--gold); stroke: #FFE9A8; stroke-width: 2; }
.gli-nn { fill: var(--gold-deep); }
.gli-n.fire .gli-ns { fill: #fff; }
.gli-n.fire .gli-nd, .gli-n.fire .gli-na { stroke: #FFF3CC; filter: drop-shadow(0 0 4px var(--gold)); }
.gli-aa { fill: none; stroke: var(--violet-bright); stroke-width: 3.5; stroke-linecap: round; }
.gli-ab { fill: var(--violet); stroke: var(--violet-bright); stroke-width: 2; }
.gli-ma { fill: none; stroke: var(--mint); stroke-width: 2.4; stroke-linecap: round; }
.gli-mb { fill: #1F9E6E; stroke: var(--mint); stroke-width: 2; }
.gli-oa { fill: none; stroke: #E9DCC0; stroke-width: 3; stroke-linecap: round; }
.gli-ow { fill: #F4EEE2; }
.gli-ob { fill: #B9A88A; stroke: #F4EEE2; stroke-width: 2; }

/* the patch of brain: glia dim until the reader's tap lights them */
.gli-tis .gli-glia { opacity: .1; transition: opacity 1.2s ease; }
.gli-tis.lit .gli-glia { opacity: 1; }
.gli-ns-all .gli-n { cursor: pointer; }

/* the blender */
.gli-jar { fill: rgba(234, 227, 215, .07); stroke: rgba(234, 227, 215, .55); stroke-width: 2.5; }
.gli-brain path:first-child { fill: #F0A3B4; stroke: #C9637C; stroke-width: 2; }
.gli-fold { fill: none; stroke: #C9637C; stroke-width: 2; stroke-linecap: round; }
.gli-blade path { stroke: #E9DCC0; stroke-width: 4; stroke-linecap: round; }
.gli-soup { fill: rgba(240, 163, 180, .55); }
.gli-base { fill: var(--raised); stroke: var(--line-strong); stroke-width: 2; }
.gli-knob { fill: var(--gold); }
.gli-cn { fill: var(--gold); }
.gli-cg { fill: var(--violet-bright); }
.gli-ct { font: 600 13.5px var(--sans); fill: var(--dim); }
.gli-count.on .gli-ct { fill: var(--text); font-weight: 800; }

/* the star cell and the gap */
.gli-end { fill: #4A3A9A; stroke: var(--violet-bright); stroke-width: 2.5; }
.gli-end + .gli-lab { fill: var(--text); }
.gli-next { fill: var(--gold); }
.gli-next.fire { animation: gliBuzz .24s ease-out; }
@keyframes gliBuzz { 0% { fill: #FFF3CC; } 100% { fill: var(--gold); } }
.gli-dot { fill: #FFE08A; }
.gli-hit, .gli-hit2 { fill: transparent; }
.gli-star, .gli-hit2 { cursor: pointer; }
.gli-arm { fill: none; stroke: var(--violet-bright); stroke-width: 5; stroke-linecap: round; stroke-dasharray: 140; stroke-dashoffset: 140; transition: stroke-dashoffset .5s ease; }
.gli-arm.on { stroke-dashoffset: 0; }

/* microglia */
.gli-field { fill: rgba(234, 227, 215, .03); stroke: var(--line); stroke-width: 1.5; }
.gli-dead path { fill: #6E6960; stroke: #A69F93; stroke-width: 1.5; }
.gli-mg .gli-m { transition: transform .5s; }
.gli-mg.eat .gli-mb { fill: var(--mint); }

/* the wrapped wire */
.gli-wire { stroke: var(--gold); stroke-width: 7; stroke-linecap: round; }
.gli-band { fill: #F4EEE2; opacity: 0; transition: opacity .6s; }
.gli-ol { opacity: 0; transition: opacity .6s; }
.gli-wrap.wrapped .gli-band, .gli-wrap.wrapped .gli-ol { opacity: 1; }
.gli-ol .gli-ob { fill: #B9A88A; }
.gli-sig { fill: #fff; filter: drop-shadow(0 0 5px var(--gold)); }

/* the three glia as answers */
.gli-crew { width: 100%; }
.gli-ic { width: 100%; height: auto; max-height: 90px; }

.gli-pic { margin: 0; width: 100%; display: flex; justify-content: center; }
.gli-pic img { width: 100%; max-width: 340px; max-height: 34vh; object-fit: contain; }
.gli-ox { stroke: var(--gold); stroke-width: 5; stroke-linecap: round; }
.gli-lab-w { fill: var(--text); }
.gli-ring { fill: none; stroke: transparent; stroke-width: 3; transition: stroke .3s; }
.gli-ring.ok { stroke: var(--mint); }
.gli-ring.no { stroke: var(--red); }