/* Rapamycin lesson. All rules scoped under .rpm-* */
.rpm-sc { position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.rpm-note { font-size: 12.5px; color: var(--faint); text-align: center; }
.rpm-photo img { display: block; width: 100%; max-width: 340px; max-height: 36vh; object-fit: cover; border-radius: 18px; box-shadow: 0 14px 30px rgba(0,0,0,.35); }
.rpm-lab { fill: var(--dim); font: 600 13px var(--sans); text-anchor: middle; }

/* ---------- the dish ---------- */
.rpm-dish { display: block; width: 100%; max-width: 360px; height: auto; overflow: visible; }
.rpm-mem { fill: rgba(123,92,253,.12); stroke: var(--violet-bright); stroke-width: 2.5; }
.rpm-nuc { fill: rgba(169,155,255,.22); stroke: rgba(169,155,255,.7); stroke-width: 1.5; }
.rpm-sw rect { fill: var(--raised); stroke: var(--line-strong); stroke-width: 2; transition: fill .3s, stroke .3s; }
.rpm-knob { fill: var(--dim); transition: fill .3s; }
.rpm-sw.on rect { fill: rgba(63,214,154,.3); stroke: var(--mint); }
.rpm-sw.on .rpm-knob { fill: var(--mint); }
.rpm-sw.jam rect { stroke: var(--gold); }
.rpm-swl { fill: var(--text); font: 700 14px var(--sans); text-anchor: middle; letter-spacing: .04em; }
.rpm-food { cursor: pointer; }
.rpm-fd { fill: var(--gold); stroke: #FFE3A6; stroke-width: 1.5; }
.rpm-fd.in { opacity: .85; }
.rpm-fdh { fill: #FFF2D0; opacity: .8; }
.rpm-hit { fill: transparent; }
.rpm-dr { fill: #F4D35E; stroke: #FFF1B8; stroke-width: 1.5; }
.rpm-dr.lit { filter: drop-shadow(0 0 6px rgba(252,192,80,.9)); }
.rpm-sw.shake { animation: rpmShake .3s; }
.rpm-tci.shake { animation: rpmShake .3s; }
@keyframes rpmShake { 25% { transform: translateX(-3px); } 75% { transform: translateX(3px); } }

/* ---------- the body ---------- */
.rpm-body { display: block; width: 100%; max-width: 360px; height: auto; overflow: visible; }
.rpm-blood { fill: rgba(216,85,85,.06); stroke: var(--line); stroke-width: 1.5; transition: fill .5s, stroke .5s; }
.rpm-body.drug .rpm-blood { fill: rgba(244,211,94,.1); stroke: rgba(244,211,94,.5); }
.rpm-kid path:first-child { fill: #C8736B; stroke: #F0A49A; stroke-width: 2; transition: fill .6s; }
.rpm-kid .rpm-cut { fill: none; stroke: #FFD5CC; stroke-width: 2.5; stroke-linecap: round; opacity: 0; transition: opacity .5s; }
.rpm-kid.hurt path:first-child { fill: #7E3A3A; }
.rpm-kid.hurt .rpm-cut { opacity: 1; }
.rpm-tcb { fill: #5B8CFF; stroke: #BFD2FF; stroke-width: 1.5; }
.rpm-tcs { stroke: #BFD2FF; stroke-width: 2; stroke-linecap: round; }
.rpm-vb { fill: #E0607A; stroke: #FFB3C2; stroke-width: 1.2; }
.rpm-vs { stroke: #FFB3C2; stroke-width: 1.6; stroke-linecap: round; }
.rpm-count { fill: #BFD2FF; font: 700 14px var(--sans); }
.rpm-count.v { fill: #FFB3C2; text-anchor: end; }

/* ---------- aging ---------- */
.rpm-cages { width: 100%; max-width: 360px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.rpm-cage { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 8px 8px 10px; text-align: center; }
.rpm-cage.b { border-color: rgba(244,211,94,.5); }
.rpm-ct { font-size: 13px; font-weight: 700; color: var(--text); margin-bottom: 4px; }
.rpm-cage.b .rpm-ct { color: var(--gold); }
.rpm-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 2px 4px; }
.rpm-grid img { width: 100%; max-width: 30px; height: auto; margin: 0 auto; transition: opacity .35s, filter .35s; }
.rpm-grid img.gone { opacity: .14; filter: grayscale(1); }
.rpm-alive { font-size: 13px; font-weight: 700; color: var(--dim); margin-top: 4px; }

/* ---------- people ---------- */
.rpm-costs { width: 100%; max-width: 340px; display: flex; flex-direction: column; gap: 8px; }
.rpm-cost { display: flex; align-items: center; gap: 10px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; font-size: 15px; font-weight: 600; color: var(--text); }
.rpm-cost i { width: 10px; height: 10px; border-radius: 50%; background: var(--red); flex: none; }

@media (max-height: 700px) {
  .rpm-photo img { max-height: 30vh; }
  .rpm-dish, .rpm-body { max-width: 320px; }
  .rpm-cost { padding: 9px 12px; font-size: 14px; }
}