/* Chemotherapy lesson. All rules scoped under .chm-* */
.chm-sc { position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.chm-note { font-size: 12.5px; color: var(--faint); text-align: center; line-height: 1.35; max-width: 320px; }
.chm-hero img { width: 280px; max-width: 100%; max-height: 34vh; object-fit: contain; display: block; filter: drop-shadow(0 16px 28px rgba(123,92,253,.3)); }
.chm-svg { display: block; width: 100%; height: auto; }
.chm-t { fill: var(--text); font: 700 13px var(--sans); text-anchor: middle; }
.chm-t.dim { fill: var(--dim); font-weight: 600; font-size: 12px; }
.chm-t.red { fill: #FF8A8A; font-size: 12px; }
.chm-t.start { text-anchor: start; }
.chm-t.end { text-anchor: end; }
.chm-t.lab { fill: var(--dim); font-size: 13.5px; }
.chm-chart .chm-t, .chm-chart .chm-t.lab { font-size: 16px; }
.chm-body .chm-t { font-size: 14px; }

/* blood */
.chm-lens { fill: rgba(234,227,215,.04); stroke: var(--line-strong); stroke-width: 1.5; }
.chm-red { fill: rgba(216,85,85,.42); stroke: rgba(255,138,138,.5); stroke-width: 1; }
.chm-white circle { fill: rgba(169,155,255,.3); stroke: var(--violet-bright); stroke-width: 1.5; }
.chm-white circle.k { fill: var(--violet-bright); stroke: none; }
.chm-key { display: flex; flex-wrap: wrap; gap: 6px 14px; justify-content: center; font-size: 12.5px; font-weight: 600; color: var(--dim); }
.chm-key span { display: inline-flex; align-items: center; gap: 6px; }
.chm-key b { display: inline-block; width: 11px; height: 11px; border-radius: 50%; }
.chm-kw { background: var(--violet-bright); }
.chm-kr { background: rgba(216,85,85,.7); }
.chm-kc { background: rgba(255,138,138,.8); }
.chm-kh { background: rgba(169,155,255,.7); }
.chm-kd { width: 18px !important; background: radial-gradient(circle at 25% 50%, var(--gold) 4px, transparent 5px), radial-gradient(circle at 75% 50%, var(--gold) 4px, transparent 5px); }
.chm-wash { fill: rgba(123,92,253,.2); }

/* cells */
.chm-b { fill: rgba(169,155,255,.15); stroke: var(--violet-bright); stroke-width: 1.6; transition: opacity .6s, stroke .3s, fill .3s; }
.chm-n { fill: rgba(169,155,255,.45); transition: opacity .6s; }
.chm-cell.ca .chm-b { fill: rgba(216,85,85,.16); stroke: #FF8A8A; }
.chm-cell.ca .chm-n { fill: rgba(255,138,138,.5); }
.chm-cell.div .chm-b { stroke: var(--gold); stroke-width: 2; }
.chm-cell.dead .chm-b { stroke-dasharray: 3 3; opacity: .28; }
.chm-cell.dead .chm-n { opacity: 0; }

/* body */
.chm-fig circle, .chm-fig path { fill: rgba(169,155,255,.14); stroke: rgba(169,155,255,.5); stroke-width: 2; }
.chm-fig .lim { fill: none; stroke: rgba(169,155,255,.35); stroke-width: 16; stroke-linecap: round; }
.chm-fig .hair { fill: none; stroke: rgba(169,155,255,.7); stroke-width: 5; stroke-linecap: round; }
.chm-leads line { stroke: var(--line-strong); stroke-width: 1.5; }
.chm-leads circle { fill: var(--dim); }
.chm-pill { cursor: pointer; }
.chm-pr { fill: var(--surface); stroke: var(--line-strong); stroke-width: 1.5; transition: fill .3s, stroke .3s; }
.chm-pill .fx { opacity: 0; font-size: 13.5px; font-weight: 700; transition: opacity .3s; }
.chm-pill.on .chm-pr { fill: rgba(63,214,154,.16); stroke: var(--mint); }
.chm-pill.on .fx { opacity: 1; fill: var(--mint); }
.chm-pill.off { opacity: .45; }
.chm-pill.off .fx { opacity: 1; fill: var(--dim); }
.chm-pill.shake { transform-box: fill-box; transform-origin: center; }
.chm-hit { fill: transparent; }
.chm-count { font-size: 14px; font-weight: 700; color: var(--dim); }
.chm-count b { color: var(--mint); }

/* the number */
.chm-stat { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 18px 12px; text-align: center; }
.chm-stat b { font: 700 54px var(--serif); color: var(--gold); line-height: 1; }
.chm-stat span { font-size: 15px; color: var(--dim); max-width: 290px; line-height: 1.4; }

/* the rounds chart */
.chm-axis { stroke: var(--line-strong); stroke-width: 1.5; }
.chm-start { stroke: var(--line-strong); stroke-width: 1; stroke-dasharray: 4 4; }
.chm-floor { stroke: #FF8A8A; stroke-width: 1.5; stroke-dasharray: 5 4; }
.chm-tp { fill: none; stroke: #FF8A8A; stroke-width: 2.5; stroke-linejoin: round; }
.chm-bp { fill: none; stroke: var(--mint); stroke-width: 2.5; stroke-linejoin: round; }
.chm-doses path { fill: var(--violet-bright); }
.chm-stop line { stroke: #FF8A8A; stroke-width: 2; stroke-dasharray: 2 3; }
.chm-status { font-size: 14px; font-weight: 700; text-align: center; min-height: 20px; }
.chm-status.ok { color: var(--mint); }
.chm-status.bad { color: #FF8A8A; }

@media (max-height: 700px) {
  .chm-hero img { max-height: 30vh; }
  .chm-body { max-height: 236px; }
  .chm-chart { max-height: 172px; }
  .chm-status { font-size: 13px; }
  .chm-stat { padding: 8px 12px; }
  .chm-stat b { font-size: 44px; }
}