/* T cell lesson. All rules scoped under .tcl-* */

.tcl-sc { position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.tcl-sc > svg { display: block; width: 100%; height: auto; overflow: visible; }
.tcl-note { font-size: 12.5px; color: var(--faint); text-align: center; line-height: 1.35; max-width: 320px; }
.tcl-hero { width: min(80%, 320px); }
.tcl-hero img { width: 100%; display: block; }
.tcl-t { fill: var(--text); font: 600 14px var(--sans); text-anchor: middle; transition: opacity .3s; }
.tcl-t.dim { fill: var(--dim); font-size: 13px; }
.tcl-t.start { text-anchor: start; }

/* beads */
.tcl-bd { stroke: #0A0E1A; stroke-width: 1; }
.tcl-bd.g, .tcl-bh i.g { fill: var(--gold); background: var(--gold); }
.tcl-bd.r, .tcl-bh i.r { fill: #FB9679; background: #FB9679; }
.tcl-bd.v, .tcl-bh i.v { fill: var(--violet-bright); background: var(--violet-bright); }
.tcl-bd.m, .tcl-bh i.m { fill: var(--mint); background: var(--mint); }
.tcl-bd.b, .tcl-bh i.b { fill: #7FC8FF; background: #7FC8FF; }
.tcl-bh { display: inline-flex; gap: 3px; vertical-align: middle; padding: 3px 5px; border-radius: 999px; background: rgba(234,227,215,.08); }
.tcl-bh i { width: 14px; height: 14px; border-radius: 50%; display: block; }
.tcl-hold { fill: none; stroke: var(--text); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }

/* one cell, chopping */
.tcl-big { fill: rgba(123,92,253,.12); stroke: var(--violet-bright); stroke-width: 2.5; }
.tcl-bone { stroke: var(--dim); stroke-width: 3; transition: opacity .3s; }
.tcl-cellv.chop .tcl-bone { opacity: 0; }
.tcl-vir { fill: rgba(251,150,121,.3); stroke: #FB9679; stroke-width: 2; }
.tcl-vin { transition: opacity .4s; }
.tcl-cellv.chop .tcl-vin { opacity: 0; }
.tcl-cellv.shown .tcl-hold { stroke: var(--gold); }
.tcl-sick .tcl-hold { stroke: #FB9679; }
.tcl-steps { display: flex; align-items: center; justify-content: center; gap: 8px; }
.tcl-steps span { font-size: 13px; font-weight: 700; color: var(--faint); padding: 6px 12px; border-radius: 999px; border: 1.5px solid var(--line); transition: color .3s, border-color .3s; }
.tcl-steps span.on { color: var(--gold); border-color: var(--gold); }
.tcl-steps i { color: var(--faint); font-style: normal; }

/* be the T cell */
.tcl-badge { fill: var(--surface); stroke: var(--gold); stroke-width: 1.5; }
.tcl-c { cursor: pointer; transition: opacity .4s; }
.tcl-hit { fill: transparent; }
.tcl-cb { fill: rgba(123,92,253,.14); stroke: var(--violet-bright); stroke-width: 2; transition: fill .3s, stroke .3s; }
.tcl-nu { fill: rgba(169,155,255,.3); }
.tcl-c.dead .tcl-cb { fill: rgba(251,150,121,.12); stroke: #FB9679; stroke-dasharray: 5 4; }
.tcl-c.dead .tcl-nu { opacity: .2; }
.tcl-c.spared .tcl-cb { stroke: var(--red); fill: rgba(216,85,85,.16); }
.tcl-done .tcl-c:not(.dead) { opacity: .45; }
.tcl-count { font-size: 14px; color: var(--dim); font-weight: 600; }
.tcl-count b { color: var(--gold); font-size: 17px; }

/* the thymus */
.tcl-rand { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; width: 100%; padding-top: 14px; }
.tcl-rand > span { display: grid; place-items: center; padding: 18px 0; border-radius: 50%; aspect-ratio: 1; max-width: 92px; margin: 0 auto; width: 100%; background: rgba(123,92,253,.14); border: 2px solid var(--violet-bright); }
.tcl-cl { display: block; font: 600 14px var(--sans); color: var(--dim); }
.sortcard .tcl-bh i { width: 22px; height: 22px; }
.sortcard .tcl-bh { padding: 5px 8px; gap: 5px; margin: 0 auto; }
.tcl-dots { display: grid; grid-template-columns: repeat(10, 16px); gap: 6px; justify-content: center; padding-top: 6px; }
.tcl-dots i { width: 16px; height: 16px; border-radius: 50%; background: rgba(234,227,215,.14); }
.tcl-dots i.ok { background: var(--mint); }
.tcl-keys { display: flex; gap: 16px; justify-content: center; font-size: 13px; color: var(--dim); font-weight: 600; }
.tcl-keys span { display: inline-flex; align-items: center; gap: 6px; }
.tcl-keys b { width: 12px; height: 12px; border-radius: 50%; background: rgba(234,227,215,.14); display: inline-block; }
.tcl-keys b.ok { background: var(--mint); }

/* helpers */
.tcl-hc { fill: rgba(252,192,80,.2); stroke: var(--gold); stroke-width: 2.5; transition: opacity .5s; }
.tcl-kc, .tcl-bc { fill: rgba(123,92,253,.14); stroke: var(--violet-bright); stroke-width: 2; transition: opacity .5s; }
.tcl-sig { stroke: var(--gold); stroke-width: 3; stroke-dasharray: 6 5; stroke-linecap: round; transition: opacity .5s; }
.tcl-hiv .tcl-hc, .tcl-hiv .tcl-sig { opacity: .15; }
.tcl-hiv .tcl-kc, .tcl-hiv .tcl-bc { opacity: .5; }

/* hiding */
.tcl-hx { transition: opacity .5s; }
.tcl-hx.c1 .tcl-cb, .tcl-hx.c2 .tcl-cb { fill: rgba(216,85,95,.16); stroke: #D8555F; }
.tcl-kill .tcl-hx.c1 { opacity: .25; }
.tcl-kill .tcl-hx.c2 .tcl-cb { stroke-width: 3; }
.tcl-k { transition: opacity .3s; }

@media (max-height: 700px) {
  .tcl-hero { width: min(62%, 240px); }
  .tcl-grid { max-height: 224px; }
  .tcl-dots { grid-template-columns: repeat(10, 13px); gap: 5px; }
  .tcl-dots i { width: 13px; height: 13px; }
  .tcl-rand > span { max-width: 76px; }
}
.tcl-pc { transition: transform .4s ease-out; }
.tcl-cellv.chop .tcl-pc[data-k="0"] { transform: translateX(-12px); }
.tcl-cellv.chop .tcl-pc[data-k="2"] { transform: translateX(12px); }
.tcl-yt { cursor: pointer; }
.tcl-rel.out .tcl-rl, .tcl-rel.out > .tcl-bd { opacity: .35; }
.tcl-rel .tcl-c { cursor: default; }
.tcl-tap { animation: tclPulse 1.4s ease-in-out 3; }
@keyframes tclPulse { 50% { stroke-width: 4; } }