/* IC50 lesson. All rules scoped under .ic-* */

.ic-sc { position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.ic-hero { width: min(76%, 290px); }
.ic-hero img { width: 100%; display: block; }
.ic-note { font-size: 12px; color: var(--faint); }

.ic-chart { display: block; width: 100%; max-width: 410px; height: auto; overflow: visible; }
.ic-ax { stroke: var(--line-strong); stroke-width: 1.5; }
.ic-half { stroke: var(--gold); stroke-width: 1.2; stroke-dasharray: 4 4; opacity: .7; }
.ic-yl { font: 700 12px var(--mono); fill: var(--dim); text-anchor: end; }
.ic-yl.ic-hl { fill: var(--gold); }
.ic-yt { font: 700 12px var(--sans); fill: var(--dim); }
.ic-tk { font: 700 12px var(--mono); fill: var(--dim); text-anchor: middle; }
.ic-xt { font: 700 12px var(--sans); fill: var(--dim); text-anchor: end; }

.ic-curve { fill: none; stroke-width: 3; stroke-linecap: round; transition: opacity .3s; }
.ic-curve.ic-a { stroke: var(--violet-bright); }
.ic-curve.ic-b { stroke: #4FC3F7; }
.ic-curve.ic-d { stroke: #F0955A; }
.ic-cl { font: 800 15px var(--sans); text-anchor: end; transition: opacity .3s; }
.ic-cl.ic-a { fill: var(--violet-bright); } .ic-cl.ic-b { fill: #4FC3F7; } .ic-cl.ic-d { fill: #F0955A; }
.ic-chart.ic-dimab .ic-a, .ic-chart.ic-dimab .ic-drop.ic-a { opacity: .3; }

.ic-drop line { stroke-width: 1.5; stroke-dasharray: 3 3; }
.ic-drop circle { stroke: #fff; stroke-width: 2; }
.ic-drop rect { stroke: none; }
.ic-drop text { font: 800 12px var(--mono); fill: #10131f; text-anchor: middle; }
.ic-drop.ic-a line { stroke: var(--violet-bright); } .ic-drop.ic-a circle, .ic-drop.ic-a rect { fill: var(--violet-bright); }
.ic-drop.ic-b line { stroke: #4FC3F7; } .ic-drop.ic-b circle, .ic-drop.ic-b rect { fill: #4FC3F7; }
.ic-drop.ic-d line { stroke: #F0955A; } .ic-drop.ic-d circle, .ic-drop.ic-d rect { fill: #F0955A; }
.ic-drop.ic-end line { display: none; }
.ic-drop.ic-end circle { r: 7; }
.ic-drop { animation: icIn .35s ease-out both; }
@keyframes icIn { from { opacity: 0; } }

.ic-cross line { stroke: var(--text); stroke-width: 1.2; stroke-dasharray: 3 3; opacity: .7; }
.ic-cross circle { fill: #fff; stroke: var(--violet-bright); stroke-width: 3; }
.ic-cross .ic-tag { fill: var(--raised); stroke: var(--line-strong); }
.ic-cross .ic-tt { font: 800 13px var(--mono); fill: var(--text); text-anchor: middle; }
.ic-cross.ic-at circle { fill: var(--gold); stroke: var(--gold-deep); }
.ic-cross.ic-at .ic-tag { fill: var(--gold); stroke: var(--gold-deep); }
.ic-cross.ic-at .ic-tt { fill: #2A1B00; }

.ic-band rect { animation: icIn .4s ease-out both; }
.ic-band.ic-good rect:first-child { fill: rgba(63, 214, 154, .16); }
.ic-band.ic-good .ic-span { fill: var(--mint); }
.ic-band.ic-bad rect:first-child { fill: rgba(216, 85, 85, .16); }
.ic-band.ic-bad .ic-span { fill: var(--red); }
.ic-bl { font: 800 12px var(--mono); animation: icIn .4s ease-out both; }
.ic-band.ic-live rect, .ic-band.ic-live .ic-bl { animation: none; }
.ic-band.ic-good .ic-bl { fill: var(--mint); }
.ic-band.ic-bad .ic-bl { fill: #FF8A8A; }

.ic-labs { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; width: 100%; }
.ic-lab { padding: 16px 12px; border-radius: 18px; background: var(--surface); border: 1px solid var(--line-strong); display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; }
.ic-lab small { font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--dim); }
.ic-lab b { font: 800 40px var(--serif); color: var(--gold); line-height: 1.1; }
.ic-lab span { font-size: 14px; color: var(--dim); }

@media (max-height: 700px) {
  .ic-chart { max-width: 340px; }
  .ic-hero { width: min(60%, 210px); }
}