/* Calorie restriction lesson. All rules scoped under .clr-* */
.clr-sc { position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.clr-note { font-size: 12.5px; color: var(--faint); text-align: center; }
.clr-hero img { width: 280px; max-width: 100%; max-height: 32vh; object-fit: contain; display: block; filter: drop-shadow(0 16px 28px rgba(123,92,253,.3)); }
.clr-hero.sm img { width: 200px; max-height: 20vh; }

/* ---------- the lab ---------- */
.clr-lab { width: 100%; max-width: 360px; display: flex; flex-direction: column; gap: 8px; }
.clr-cages { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.clr-cage { border: 1.5px solid var(--line-strong); border-radius: 12px; padding: 5px 6px 6px; background: rgba(255,255,255,.025); }
.clr-cage.b { border-color: rgba(252,192,80,.55); }
.clr-ct { font: 700 12px var(--sans); color: var(--violet-bright); letter-spacing: .02em; }
.clr-cage.b .clr-ct { color: var(--gold); }
.clr-mice { display: block; width: 100%; height: auto; }
.clr-m { transition: opacity .3s; }
.clr-body, .clr-head, .clr-ear { stroke-width: 0; }
.clr-lab.black .clr-body, .clr-lab.black .clr-head { fill: #3A3744; stroke: #9C95A6; stroke-width: 1; }
.clr-lab.black .clr-ear { fill: #5E5868; }
.clr-lab.brown .clr-body, .clr-lab.brown .clr-head { fill: #8C7462; stroke: #B79E88; stroke-width: .8; }
.clr-lab.brown .clr-ear { fill: #A68A76; }
.clr-eye { fill: #EAE3D7; }
.clr-tail { fill: none; stroke: #C99C9C; stroke-width: 1.4; stroke-linecap: round; }
.clr-mw.dead .clr-m { opacity: .16; }
.clr-bowlnote { display: flex; align-items: center; gap: 6px; font: 600 12px var(--sans); color: var(--dim); margin-top: 2px; }
.clr-pips { display: inline-flex; gap: 2px; }
.clr-pips i { width: 5px; height: 5px; border-radius: 50%; background: rgba(234,227,215,.15); }
.clr-pips i.on { background: #C2A77E; }

.clr-panel { width: 100%; }
.clr-bigbowl, .clr-chart { display: block; width: 100%; height: auto; overflow: visible; }
.clr-bw { fill: #3A3350; stroke: #6B5FA8; stroke-width: 2; }
.clr-brim { fill: #282340; stroke: #8C7FD0; stroke-width: 2; }
.clr-pel { cursor: pointer; }
.clr-pel ellipse { fill: #C2A77E; stroke: #8E7456; stroke-width: 1.5; }
.clr-pel ellipse.hl { fill: rgba(255,240,210,.55); stroke: none; }
.clr-pel.keep { pointer-events: none; }
.clr-hit { fill: transparent; }

.clr-ax { stroke: var(--line-strong); stroke-width: 1.5; }
.clr-tk { fill: var(--dim); paint-order: stroke; stroke: var(--bg); stroke-width: 3px; font: 600 12px var(--sans); }
.clr-half { stroke: var(--line-strong); stroke-width: 1; stroke-dasharray: 4 4; }
.clr-cv { fill: none; stroke-width: 3; stroke-linejoin: round; }
.clr-cv.a { stroke: var(--violet-bright); }
.clr-cv.b { stroke: var(--gold); }
.clr-now { stroke: rgba(234,227,215,.5); stroke-width: 1; }
.clr-md circle { stroke: var(--bg); stroke-width: 2; }
.clr-md.a circle { fill: var(--violet-bright); }
.clr-md.b circle { fill: var(--gold); }
.clr-md text { font: 700 13px var(--sans); text-anchor: middle; paint-order: stroke; stroke: var(--bg); stroke-width: 3px; }
.clr-md.a text { fill: var(--violet-bright); }
.clr-md.b text { fill: var(--gold); }
.clr-skt { fill: var(--faint); font: italic 600 12px var(--sans); text-anchor: end; }

/* ---------- monkeys ---------- */
.clr-photo img { width: 120px; height: 120px; object-fit: cover; object-position: 50% 20%; border-radius: 50%; display: block; border: 2px solid var(--line-strong); }
.clr-studies { width: 100%; max-width: 360px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.clr-st { border: 1.5px solid var(--line-strong); border-radius: 12px; padding: 8px; display: flex; flex-direction: column; gap: 4px; background: rgba(255,255,255,.025); }
.clr-sn { font: 700 13px var(--sans); color: var(--text); }
.clr-row { display: flex; justify-content: space-between; gap: 4px; font: 500 12px var(--sans); color: var(--dim); }
.clr-row b { color: var(--text); font-weight: 700; text-align: right; }
.clr-res { min-height: 18px; }
.clr-res em { font: 700 12.5px var(--sans); font-style: normal; opacity: 0; transition: opacity .4s; }
.clr-st.on .clr-res em { opacity: 1; }
.clr-st.uw .clr-res em { color: var(--mint); }
.clr-st.nia .clr-res em { color: var(--dim); }

/* ---------- people ---------- */
.clr-bars { width: 100%; max-width: 340px; display: flex; flex-direction: column; gap: 6px; }
.clr-br { display: grid; grid-template-columns: 96px 1fr 40px; align-items: center; gap: 8px; font: 700 13px var(--sans); color: var(--text); }
.clr-br i { height: 10px; border-radius: 5px; background: var(--surface); overflow: hidden; }
.clr-br b { display: block; height: 100%; width: var(--w); background: var(--violet-bright); border-radius: 5px; }
.clr-br.got b { width: 0; background: var(--gold); transition: width .7s ease-out; }
.clr-bars.on .clr-br.got b { width: var(--w); }
.clr-br em { font-style: normal; font-size: 13px; color: var(--dim); }
.clr-br.got em { opacity: 0; transition: opacity .4s .5s; }
.clr-bars.on .clr-br.got em { opacity: 1; }
.clr-sig { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-top: 2px; opacity: 0; transition: opacity .4s .7s; }
.clr-bars.on .clr-sig { opacity: 1; }
.clr-sig span { font: 700 12px var(--sans); color: var(--mint); border: 1px solid rgba(63,214,154,.45); border-radius: 999px; padding: 3px 9px; }
.clr-sig span::before { content: '\2193  '; }


@media (max-height: 700px) {
  .clr-hero img { max-height: 26vh; }
  .clr-photo img { width: 88px; height: 88px; }
}