/* CAR T cell lesson. All rules scoped under .ct-* */

.ct-sc { position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.ct-sc > svg { display: block; width: 100%; height: auto; max-height: 42vh; overflow: visible; }
.ct-note { font-size: 12.5px; color: var(--faint); text-align: center; line-height: 1.35; max-width: 320px; }
.ct-hero { width: min(86%, 320px); }
.ct-hero img { width: 100%; display: block; }
.ct-t { fill: var(--text); font: 600 13px var(--sans); text-anchor: middle; }
.ct-t.dim { fill: var(--dim); }
.ct-t.sm { font-size: 12px; fill: var(--dim); }

/* the ID check */
.ct-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; width: 100%; }
.ct-cell {
  display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 2px 8px;
  background: var(--surface); border: 2px solid var(--line); border-radius: 14px; color: inherit; cursor: pointer;
  transition: border-color .25s, background .25s;
}
.ct-body { width: 34px; height: 34px; border-radius: 50%; background: rgba(123,92,253,.18); border: 2px solid var(--violet-bright); }
.ct-id { font-size: 11.5px; font-weight: 800; letter-spacing: .04em; color: var(--faint); min-height: 15px; }
.ct-cell.ct-seen .ct-id { color: var(--mint); }
.ct-name { font-size: 12px; font-weight: 700; color: var(--dim); }
.ct-cell.ct-bad { border-color: var(--red); background: rgba(216,85,85,.12); }
.ct-cell.ct-bad .ct-body { border-color: #FF8A8A; background: rgba(216,85,85,.2); }
.ct-cell.ct-bad .ct-name { color: #FF8A8A; }

/* the receptor */
.ct-tcell { fill: rgba(123,92,253,.12); stroke: var(--violet-bright); stroke-width: 2; }
.ct-stem { fill: #6F6A9A; }
.ct-grip { fill: none; stroke: var(--gold); stroke-width: 4; stroke-linecap: round; opacity: 0; transition: opacity .5s; }
.ct-trig { fill: rgba(63,214,154,.2); stroke: var(--mint); stroke-width: 2.5; opacity: 0; transition: opacity .5s .2s; }
.ct-build.ct-on .ct-grip, .ct-build.ct-on .ct-trig { opacity: 1; }
.ct-build.ct-on .ct-stem { fill: var(--violet); }
.ct-opts .choice { flex-direction: column; align-items: flex-start; gap: 0; }
.ct-p { display: flex; align-items: center; gap: 7px; font-size: 13.5px; line-height: 1.3; }
.ct-p + .ct-p { margin-top: 6px; }
.ct-p b { width: 12px; height: 12px; border-radius: 3px; flex: none; }
.ct-ab b { background: var(--gold); }
.ct-tr b { background: var(--mint); }
.ct-sh b { background: #FF8A8A; }

/* grip, kill, multiply */
.ct-tc { fill: rgba(123,92,253,.18); stroke: var(--violet-bright); stroke-width: 2.5; }
.ct-hook { fill: none; stroke: var(--gold); stroke-width: 3; stroke-linecap: round; }
.ct-cc { fill: rgba(216,85,85,.18); stroke: #FF8A8A; stroke-width: 2.5; transition: opacity .5s, transform .5s; transform-box: fill-box; transform-origin: center; }
.ct-cd { fill: var(--gold); transition: opacity .5s; }
.ct-t.cc { fill: #FF8A8A; }
.ct-kill.ct-dead .ct-target { opacity: .25; transition: opacity .6s; }
.ct-kill.ct-dead .ct-cc { transform: scale(.7); }
.ct-sg { opacity: 0; transform-box: fill-box; transform-origin: center; }
.ct-sg.on { animation: ctPop .3s ease-out both; }
@keyframes ctPop { from { opacity: 0; transform: scale(.3); } to { opacity: 1; transform: scale(1); } }

/* what else wears the marker */
.ct-pool { display: grid; grid-template-columns: repeat(8, minmax(0, 26px)); gap: 10px; justify-content: center; }
.ct-pool i { width: 26px; height: 26px; border-radius: 50%; transition: opacity .4s, transform .4s, background .4s; }
.ct-cancer { background: rgba(216,85,85,.3); border: 2px solid #FF8A8A; }
.ct-bcell { background: rgba(252,192,80,.22); border: 2px solid var(--gold); }
.ct-other { background: rgba(110,105,96,.2); border: 2px solid var(--faint); }
.ct-pool i.ct-gone { opacity: .18; transform: scale(.6); }
.ct-keys { display: flex; flex-wrap: wrap; gap: 10px 14px; justify-content: center; font-size: 12.5px; font-weight: 600; color: var(--dim); }
.ct-keys span { display: inline-flex; align-items: center; gap: 6px; }
.ct-keys b { width: 12px; height: 12px; border-radius: 50%; display: inline-block; }
.ct-kc { background: rgba(216,85,85,.3); border: 2px solid #FF8A8A; }
.ct-kb { background: rgba(252,192,80,.22); border: 2px solid var(--gold); }
.ct-ko { background: rgba(110,105,96,.2); border: 2px solid var(--faint); }

/* the storm */
.ct-storm { width: 100%; display: flex; flex-direction: column; gap: 12px; }
.ct-sbar span { font-size: 12.5px; font-weight: 700; color: var(--dim); }
.ct-st { margin-top: 5px; height: 14px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); overflow: hidden; }
.ct-st i { display: block; height: 100%; width: 0; border-radius: 999px; background: var(--violet); }
.ct-fev .ct-st i { background: #FF8A8A; }
.ct-il6 .ct-st i { background: var(--gold); }
.ct-storm.ct-il6hot .ct-il6 span { color: var(--gold); }
.ct-storm.ct-il6hot .ct-il6 .ct-st { box-shadow: 0 0 0 2px rgba(252,192,80,.4); }

/* pick a target */
.ct-marks { width: 100%; display: flex; flex-direction: column; gap: 8px; }
.ct-mark {
  display: flex; flex-direction: column; gap: 2px; padding: 9px 12px; border-radius: 14px;
  background: var(--surface); border: 2px solid var(--line); transition: border-color .3s, opacity .3s;
}
.ct-mark b { font-size: 13.5px; font-weight: 800; color: var(--text); }
.ct-mark span { font-size: 12.5px; color: var(--dim); }
.ct-mark .ct-else { color: var(--faint); }
.ct-mark.ct-no { border-color: var(--red); opacity: .65; }
.ct-mark.ct-yes { border-color: var(--mint); }
.ct-three .choice { text-align: left; }

@media (max-height: 700px) {
  .ct-sc > svg { max-height: 38vh; }
  .ct-hero { width: min(70%, 240px); }
  .ct-pool { grid-template-columns: repeat(8, minmax(0, 22px)); gap: 8px; }
  .ct-pool i { width: 22px; height: 22px; }
  .ct-body { width: 28px; height: 28px; }
}

.ct-flab { transition: opacity .3s; }
.ct-flab.ct-hide { opacity: 0; }