/* Major histocompatibility complex lesson. All rules scoped under .mhc-* */

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

/* beads, holders */
.mhc-bd { stroke: #0A0E1A; stroke-width: 1; }
.mhc-bd.g, .mhc-bh i.g, .mhc-pk.g { fill: var(--gold); background: var(--gold); }
.mhc-bd.r, .mhc-bh i.r, .mhc-pk.r { fill: #FB9679; background: #FB9679; }
.mhc-bd.v, .mhc-bh i.v, .mhc-pk.v { fill: var(--violet-bright); background: var(--violet-bright); }
.mhc-bd.m, .mhc-bh i.m, .mhc-pk.m { fill: var(--mint); background: var(--mint); }
.mhc-bd.b, .mhc-bh i.b, .mhc-pk.b { fill: #7FC8FF; background: #7FC8FF; }
.mhc-bh { display: inline-flex; gap: 4px; vertical-align: middle; padding: 4px 6px; border-radius: 999px; }
.mhc-bh i { width: 20px; height: 20px; border-radius: 50%; display: block; }
.mhc-cup { fill: none; stroke: var(--text); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.mhc-mem { fill: none; stroke: var(--violet-bright); stroke-width: 3; opacity: .6; }
.mhc-arr { stroke: var(--dim); stroke-width: 1.5; stroke-dasharray: 3 4; fill: none; }
.mhc-held .mhc-cup { stroke: var(--gold); }
.mhc-opts .choice { justify-content: center; }

/* two kinds */
.mhc-cell { fill: rgba(123,92,253,.12); stroke: var(--violet-bright); stroke-width: 2.5; }
.mhc-cell.eat { fill: rgba(94,234,179,.08); stroke: var(--mint); }
.mhc-nu { fill: rgba(169,155,255,.3); }
.mhc-bug { fill: rgba(251,150,121,.3); stroke: #FB9679; stroke-width: 2; }
.mhc-red { fill: rgba(216,85,95,.35); stroke: #E0626D; stroke-width: 2.5; }
.mhc-redin { fill: rgba(216,85,95,.25); }
.mhc-para circle { fill: rgba(94,234,179,.4); stroke: var(--mint); stroke-width: 1.5; }
.mhc-tc { fill: rgba(252,192,80,.16); stroke: var(--gold); stroke-width: 2.5; }
.mhc-q { opacity: 0; transition: opacity .4s; }
.mhc-past .mhc-q { opacity: 1; }

/* yours vs a friend's */
.mhc-h.full .mhc-in { opacity: 0; transition: opacity .3s; }
.mhc-h.full.on .mhc-in { opacity: 1; }
.mhc-h.full.on .mhc-cup { stroke: var(--gold); }
.mhc-go .mhc-h.empty .mhc-cup { stroke: var(--faint); }
.mhc-vp { opacity: 1; }

/* HIV */
.mhc-hiv { width: 100%; max-width: 340px; display: flex; flex-direction: column; gap: 18px; padding-top: 8px; }
.mhc-hr { display: grid; grid-template-columns: 1fr auto; gap: 6px 10px; align-items: center; }
.mhc-hr span { grid-column: 1 / -1; font: 600 14px var(--sans); color: var(--dim); }
.mhc-hr b { font: 700 16px var(--sans); color: var(--gold); }
.mhc-dots { display: flex; gap: 5px; }
.mhc-dots i { width: 14px; height: 14px; border-radius: 50%; background: rgba(234,227,215,.14); }
.mhc-dots i.on { background: var(--gold); }
.mhc-pct { height: 14px; border-radius: 7px; background: rgba(234,227,215,.14); overflow: hidden; }
.mhc-pct i { display: block; height: 100%; background: var(--gold); }

/* the name */
.mhc-graft { max-width: 300px; }
.mhc-h.theirs .mhc-cup { stroke: #FB9679; }
.mhc-grid { display: grid; grid-template-columns: repeat(10, 12px); gap: 5px; justify-content: center; }
.mhc-grid i { width: 12px; height: 12px; border-radius: 50%; background: rgba(234,227,215,.14); transition: background .3s; }
.mhc-grid i.on { background: #FB9679; }

/* siblings */
.mhc-fam { width: 100%; max-width: 340px; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.mhc-par { display: flex; gap: 24px; }
.mhc-par > div, .mhc-you { display: flex; align-items: center; gap: 6px; }
.mhc-par span, .mhc-you span { font: 600 14px var(--sans); color: var(--dim); margin-right: 4px; }
.mhc-you { padding: 6px 12px; border: 2px solid var(--gold); border-radius: 12px; }
.mhc-ch { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; font: 800 15px var(--sans); color: #0A0E1A; }
.mhc-ch.A { background: #A99BFF; } .mhc-ch.B { background: #6E5BD8; color: #fff; }
.mhc-ch.C { background: var(--gold); } .mhc-ch.D { background: #C98A2E; }
.mhc-kids { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; width: 100%; }
.mhc-kid { height: 46px; border-radius: 12px; border: 1.5px dashed var(--line); display: flex; align-items: center; justify-content: center; gap: 4px; opacity: .6; }
.mhc-kid.in { border-style: solid; opacity: 1; }
.mhc-kid.same { border: 2px solid var(--gold); background: rgba(252,192,80,.1); }

@media (max-height: 700px) {
  .mhc-hero { width: min(62%, 240px); }
  .mhc-var { max-height: 230px; }
  .mhc-one { max-height: 240px; }
  .mhc-grid { grid-template-columns: repeat(10, 10px); gap: 4px; }
  .mhc-grid i { width: 10px; height: 10px; }
}