/* Harry Harlow lesson. All rules scoped under .hh-* */

.hrl-sc { position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.hrl-note { font-size: 12px; color: var(--faint); text-align: center; }

/* the old answer */
.hrl-chain { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; }
.hrl-chain > i { color: var(--dim); font-style: normal; font-size: 20px; }
.hrl-link { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 92px; padding: 12px 6px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); }
.hrl-link b { font: 700 13px var(--sans); color: var(--text); }
.hrl-ico { width: 52px; height: 52px; display: grid; place-items: center; font-size: 34px; line-height: 1; }
.hrl-ico img { width: 52px; height: 52px; object-fit: contain; }
.hrl-ico svg { width: 30px; height: 52px; }
.hrl-gold { border-color: var(--gold); }
.hrl-gold .hrl-ico { color: #F07A9A; }
.hrl-quote { width: 100%; max-width: 340px; padding: 14px 16px; border-radius: 16px; background: var(--raised); border-left: 3px solid var(--gold); }
.hrl-quote q { display: block; font: 600 17px/1.35 var(--serif); color: var(--text); }
.hrl-quote span { display: block; margin-top: 8px; font-size: 12px; color: var(--dim); }

/* the cage */
.hrl-cage { display: block; width: 100%; max-width: 380px; height: auto; max-height: 36vh; overflow: visible; }
.hrl-wall { fill: #1E1A33; }
.hrl-floor { fill: #2E2744; }
.hrl-hit { fill: transparent; stroke: transparent; stroke-width: 2; }
.hrl-cage.hrl-ask .hrl-mom { cursor: pointer; }
.hrl-cage.hrl-ask .hrl-hit { stroke: var(--gold); stroke-dasharray: 6 5; }
.hrl-tag { font: 700 13px var(--sans); fill: var(--dim); text-anchor: middle; }
.hrl-bottle rect { fill: #EAF2FF; fill-opacity: .9; stroke: #9FB4D8; stroke-width: 1.5; }
.hrl-bottle .hrl-milk { fill: #FFFFFF; stroke: none; }
.hrl-bottle .hrl-cap { fill: #F2B45A; stroke: none; }
.hrl-bottle .hrl-teat { fill: #E9A36A; }
.hrl-bpos { transform: translate(170px, 64px); }
.hrl-bscale { transform: scale(1.1); }
.hrl-kid { transition: transform .32s cubic-bezier(.4, 0, .2, 1); }
.hrl-cage.hrl-nokid .hrl-kid { display: none; }

/* the day strip */
.hrl-strip { display: block; width: 100%; max-width: 380px; height: auto; touch-action: none; cursor: pointer; }
.hrl-rail { fill: var(--surface); stroke: var(--line-strong); stroke-width: 1; }
.hrl-s.cloth { fill: var(--gold); }
.hrl-s.wire { fill: #9AA6C0; }
.hrl-s.floor { fill: #6E5BB8; }
.hrl-hr { font: 600 12px var(--sans); fill: var(--dim); }
.hrl-hr.m { text-anchor: middle; }
.hrl-hr.e { text-anchor: end; }
.hrl-thumb circle { fill: #fff; stroke: var(--gold); stroke-width: 3; }
.hrl-thumb path { stroke: #B9A77A; stroke-width: 1.5; }
.hrl-grab { fill: transparent; }
.hrl-tally { display: flex; gap: 6px; justify-content: center; }
.hrl-tl { display: flex; align-items: center; gap: 5px; padding: 4px 8px; border-radius: 999px; background: var(--surface); font-size: 12px; white-space: nowrap; color: var(--dim); }
.hrl-tl i { width: 10px; height: 10px; border-radius: 3px; }
.hrl-tl b { color: var(--text); font-variant-numeric: tabular-nums; min-width: 26px; }
.hrl-tcloth i { background: var(--gold); }
.hrl-twire i { background: #9AA6C0; }
.hrl-tfloor i { background: #6E5BB8; }

/* the scare */
.hrl-scare { display: flex; align-items: center; justify-content: center; gap: 10px; font-size: 13px; color: var(--dim); }
.hrl-scare img { width: 52px; height: 54px; object-fit: contain; }
.hrl-bear { transform-origin: 50% 100%; }
.hrl-bear.on { animation: hhDrum .18s ease-in-out 6; }
@keyframes hhDrum { 50% { transform: rotate(-9deg) translateY(-3px); } }

/* the box */
.hrl-box { width: 180px; height: 180px; border-radius: 10px; background: #0E0C18; border: 2px solid #3A3452; display: grid; place-items: end center; padding-bottom: 14px; }
.hrl-box img { width: 80px; opacity: .8; filter: saturate(.4); }

@media (max-height: 700px) {
  .hrl-cage { max-height: 27vh; }
}