/* Lactate dehydrogenase lesson. All rules scoped under .ldh-* */

.ldh-sc { position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.ldh-sc > svg { display: block; width: 100%; height: auto; max-width: 400px; overflow: visible; }
.ldh-hero { width: min(80%, 300px); }
.ldh-hero img { width: 100%; display: block; }
.ldh-note { font-size: 13px; color: var(--dim); text-align: center; }

/* the cycle */
.ldh-chip rect { fill: var(--surface); stroke: var(--line-strong); stroke-width: 1.5; }
.ldh-chip text { font: 700 16px var(--sans); fill: var(--text); text-anchor: middle; }
.ldh-arr { stroke: var(--dim); stroke-width: 2.5; fill: none; }
.ldh-ahd { fill: var(--dim); }
.ldh-cap { font: 700 13px var(--sans); fill: var(--dim); text-anchor: middle; }
.ldh-gold { fill: var(--gold); }
.ldh-r { text-anchor: end; }
.ldh-l { fill: #F0955A; font-size: 15px; text-anchor: start; }
.ldh-coin circle { fill: var(--gold); stroke: var(--gold-deep); stroke-width: 2; }
.ldh-coin text { font: 800 12px var(--sans); fill: #2A1B00; text-anchor: middle; }
.ldh-used { opacity: .9; }
.ldh-back { stroke: var(--gold); stroke-width: 2; stroke-dasharray: 5 4; fill: none; }
.ldh-path { opacity: .12; transition: opacity .5s; }
.ldh-cycle.ldh-on .ldh-path { opacity: 1; }
.ldh-lac rect { stroke: #F0955A; }

/* the sprint */
.ldh-runrow { position: relative; width: 100%; display: flex; justify-content: center; }
.ldh-run { width: 170px; --sp: 0; }
.ldh-run img { width: 100%; display: block; transform: translateX(calc(var(--sp) * 6px - 12px)) rotate(calc(var(--sp) * 2deg)); transition: transform .3s; }
.ldh-run.ldh-still img { transform: none; opacity: .75; }
.ldh-badge { position: absolute; right: 0; top: 8px; padding: 6px 12px; border-radius: 999px; background: rgba(240, 149, 90, .16); border: 1.5px solid #F0955A; color: #F6B488; font-size: 13px; font-weight: 800; transition: background .3s, color .3s, border-color .3s; }
.ldh-badge.off { background: var(--raised); border-color: var(--line-strong); color: var(--dim); text-decoration: line-through; }
.ldh-gauges { width: 100%; display: flex; flex-direction: column; gap: 10px; }
.ldh-en .gt i { background: var(--gold); }
.ldh-lg .gt i { background: #F0955A; }
.ldh-tag { font-size: 13px; font-weight: 700; color: var(--dim); padding: 5px 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); }

/* the dish */
.ldh-liquid { fill: rgba(150, 190, 230, .07); stroke: rgba(170, 200, 240, .3); stroke-width: 2; }
.ldh-mem { fill: rgba(140, 120, 255, .16); stroke: var(--violet-bright); stroke-width: 2; }
.ldh-nuc { fill: rgba(140, 120, 255, .35); }
.ldh-hit { fill: transparent; }
.ldh-e { fill: #F0955A; }
.ldh-cell .ldh-mem { transition: stroke-dasharray .3s, opacity .4s; }
.ldh-cell.torn .ldh-mem { stroke-dasharray: 30 12; opacity: .45; }
.ldh-cell.torn .ldh-nuc { opacity: .3; }
.ldh-dish.ldh-ask .ldh-cell:not(.torn) { cursor: pointer; }
.ldh-dish.ldh-ask .ldh-cell:not(.torn) .ldh-mem { stroke-dasharray: 5 3; stroke: #B7A8FF; }
.ldh-key { font-size: 13px; font-weight: 700; color: var(--dim); display: flex; align-items: center; gap: 6px; }
.ldh-key i { width: 10px; height: 10px; border-radius: 50%; background: #F0955A; display: inline-block; }
.ldh-sc > .gauge { width: 100%; }

/* the test wells */
.ldh-wells { display: flex; justify-content: center; gap: 26px; padding-top: 8px; }
.ldh-well { position: relative; width: 74px; height: 74px; border-radius: 50%; border: 2.5px solid rgba(200, 214, 240, .45); box-shadow: inset 0 3px 8px rgba(0, 0, 0, .45); margin-bottom: 26px; }
.ldh-wl { position: absolute; inset: 5px; border-radius: 50%; background: rgb(255, 244, 214); }
.ldh-well small { position: absolute; left: 50%; top: calc(100% + 6px); transform: translateX(-50%); white-space: nowrap; font-size: 13px; font-weight: 700; color: var(--dim); }

/* sealed death */
.ldh-cup { fill: none; stroke: rgba(200, 214, 240, .45); stroke-width: 2.5; }
.ldh-shrink { transform-box: fill-box; transform-origin: center; animation: ldhShrink 1.6s ease-in-out var(--d) both; }
@keyframes ldhShrink { from { transform: scale(1.25); } }

/* the tube */
.ldh-glass { fill: rgba(150, 30, 40, .28); stroke: rgba(230, 200, 210, .5); stroke-width: 2; }
.ldh-cap2 { fill: #6B7894; stroke: #8A96B0; stroke-width: 1.5; }
.ldh-rbc ellipse { fill: #D8454F; stroke: #F07A80; stroke-width: 1; transition: opacity .4s var(--d), transform .4s var(--d); transform-box: fill-box; transform-origin: center; }
.ldh-rbc .ldh-pop { opacity: 0; transition: opacity .3s var(--d); }
.ldh-tube.burst .ldh-rbc:nth-child(3n) ellipse, .ldh-tube.burst .ldh-rbc:nth-child(3n+1) ellipse { opacity: .15; transform: scale(1.3); }
.ldh-tube.burst .ldh-rbc:nth-child(3n) .ldh-pop, .ldh-tube.burst .ldh-rbc:nth-child(3n+1) .ldh-pop { opacity: 1; }

@media (max-height: 700px) {
  .ldh-hero { width: min(64%, 220px); }
  .ldh-run { width: 128px; }
  .ldh-sc { gap: 8px; }
  .ldh-sc > svg.ldh-dish { max-width: 300px; }
  .ldh-gauges { gap: 6px; }
}