/* Metastasis lesson. All rules scoped under .met-* */
.met-sc { position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.met-note { font-size: 12.5px; color: var(--faint); text-align: center; line-height: 1.35; max-width: 320px; }
.met-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)); }

/* ---------- the trip ---------- */
.met-trip { width: 100%; max-width: 360px; display: flex; flex-direction: column; gap: 8px; }
.met-trackw { position: relative; width: 100%; }
.met-track { display: block; width: 100%; height: auto; overflow: visible; }
.met-cv { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; }
.met-lung { fill: rgba(240,140,150,.1); stroke: rgba(240,140,150,.55); stroke-width: 1.5; }
.met-vessel { fill: rgba(224,71,76,.14); stroke: #E0474C; stroke-width: 1.5; }
.met-tum circle { fill: rgba(192,106,224,.4); stroke: #C06AE0; stroke-width: 1.2; }
.met-num circle { fill: var(--raised); stroke: var(--line-strong); stroke-width: 1.2; }
.met-num text { fill: var(--text); font: 700 12px var(--sans); text-anchor: middle; }
.met-lab { fill: var(--dim); font: 600 12px var(--sans); text-anchor: middle; }
.met-tally { display: flex; justify-content: space-between; font-size: 13px; color: var(--dim); padding: 0 4px; }
.met-tally b { font-family: var(--mono); color: var(--text); font-weight: 600; }
.met-tally span:last-child b { color: var(--gold); }
.met-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px 8px; }
.met-step { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.met-step i { position: relative; width: 26px; height: 30px; border-radius: 4px; background: var(--surface); border: 1px solid var(--line); overflow: hidden; }
.met-step i b { position: absolute; left: 0; right: 0; bottom: 0; height: 0; background: #A69F93; }
.met-step span { font-size: 12.5px; font-weight: 700; color: var(--text); white-space: nowrap; }
.met-step em { font-style: normal; color: var(--faint); margin-right: 4px; font-family: var(--mono); }

/* ---------- rounds and strips ---------- */
.met-rt { grid-column: 1 / -1; font-size: 12.5px; color: var(--dim); text-align: center; }
.met-rounds { grid-template-columns: repeat(5, 1fr); }
.met-rounds .met-step span { color: var(--faint); }
.met-rounds .met-step.on span { color: var(--text); }
.met-rounds .met-step i b { background: var(--gold); transition: height .5s ease-out; }
.met-strips { display: flex; flex-direction: column; gap: 6px; animation: metIn .4s ease-out; }
.met-sr { display: grid; grid-template-columns: 64px 1fr; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 700; color: var(--text); }
.met-sr div { display: grid; grid-template-columns: repeat(20, 1fr); gap: 2px; }
.met-sr i, .met-key i { width: 9px; height: 9px; border-radius: 50%; background: #C9A8FF; justify-self: center; }
.met-sr i.g, .met-key i.g { background: var(--gold); }
.met-key { display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 12.5px; color: var(--dim); }
@keyframes metIn { from { opacity: 0; transform: translateY(6px); } }

/* ---------- liver and spleen ---------- */
.met-organs { margin-bottom: 4px; }
.met-liver { fill: rgba(176,84,60,.22); stroke: #C06048; stroke-width: 1.5; }
.met-spleen { fill: rgba(150,90,200,.18); stroke: #9A6AD0; stroke-width: 1.5; }
.met-pag { width: 100%; max-width: 340px; display: flex; flex-direction: column; gap: 6px; }
.met-pr { display: grid; grid-template-columns: 58px 1fr 76px; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: var(--text); }
.met-pr i { height: 10px; border-radius: 5px; background: var(--surface); overflow: hidden; }
.met-pr b { display: block; height: 100%; width: 0; background: var(--gold); border-radius: 5px; transition: width .7s ease-out; }
.met-pr em { font-style: normal; font-size: 12.5px; color: var(--dim); font-weight: 600; }
.met-tl { display: flex; flex-direction: column; gap: 8px; width: 100%; max-width: 360px; }
.met-tl div { display: flex; gap: 12px; align-items: baseline; padding: 10px 12px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); }
.met-tl b { font: 700 14px var(--mono); color: var(--gold); min-width: 92px; }
.met-tl span { font-size: 14px; color: var(--text); line-height: 1.35; }
.met-tl .now { border-color: var(--gold); }