/* Immunology lesson. All rules scoped under .imy-* */

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

/* sort cards */
.imy-card { display: block; font: 700 17px var(--sans); color: var(--text); }

@media (max-height: 700px) {
  .imy-hero { width: min(62%, 240px); }
}

/* Medawar's mice */
.imy-t.sm { font-size: 12.5px; }
.imy-lab { max-width: 360px; }
.imy-trk { fill: var(--raised); }
.imy-win { fill: rgba(169,155,255,.55); transition: fill .4s; }
.imy-closed .imy-win { fill: rgba(169,155,255,.18); }
.imy-wl { fill: var(--violet-bright); transition: fill .4s; }
.imy-closed .imy-wl { fill: var(--faint); }
.imy-mk { fill: var(--gold); stroke: #0A0E1A; stroke-width: 2; transition: cx .4s; }
.imy-subs { transition: transform .4s; }
.imy-tail { fill: none; stroke: #F4A6B8; stroke-width: 3; stroke-linecap: round; }
.imy-don { cursor: pointer; }
.imy-hit { fill: transparent; stroke: transparent; stroke-width: 2; transition: stroke .3s; }
.imy-ask .imy-hit { stroke: var(--gold); stroke-dasharray: 5 5; }
.imy-don.imy-chosen .imy-hit { stroke: var(--gold); }
.imy-solo .imy-don:not(.imy-chosen) { opacity: .35; }
.imy-list rect { fill: var(--surface); stroke: var(--line); stroke-width: 1.5; transition: stroke .3s; }
.imy-list.grew rect { stroke: var(--gold); }
.imy-lt { font-size: 14px; }
.imy-add { fill: var(--gold); }
.imy-dot { stroke: #0A0E1A; stroke-width: 1; transition: opacity .35s, fill .3s; }
.imy-dot.bad { fill: #FF6B6B; }
.imy-dot.gone { opacity: 0; }
.imy-pt { transition: transform .9s ease-in, opacity .9s; }
.imy-pt rect { stroke: #0A0E1A; stroke-width: 1; transition: fill .4s; }
.imy-pt.kept rect { stroke: var(--mint); stroke-width: 2; }
.imy-pt.rej rect { fill: #7A2F2F; }
.imy-pt.rej { transform: translate(0, 34px); opacity: 0; transition-delay: .4s; }

/* peanut */
.imy-pea { display: flex; gap: 18px; justify-content: center; width: 100%; }
.imy-grp { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.imy-gd { display: grid; grid-template-columns: repeat(10, 11px); gap: 3px; }
.imy-gd i { width: 11px; height: 11px; border-radius: 2px; background: var(--raised); transition: background .2s; }
.imy-gd i.al { background: #FF6B6B; }
.imy-grp b { font-size: 13px; color: var(--text); }
.imy-grp em { font: 600 13px var(--mono); font-style: normal; color: #FF8A8A; min-height: 18px; }