/* 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-vir { fill: rgba(251,150,121,.3); stroke: #FB9679; stroke-width: 2; }
.tcl-sick .tcl-hold { stroke: #FB9679; }

/* 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-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); }

@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-yt { cursor: pointer; }
.tcl-kc { fill: rgba(123,92,253,.14); stroke: var(--violet-bright); stroke-width: 2; }
.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; } }