/* Strange situation lesson. All rules scoped under .ss-* */

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

/* the room */
.ss-room { display: block; width: 100%; height: auto; max-height: 46vh; border-radius: 16px; overflow: hidden; }
.ss-wall { fill: #221C3A; }
.ss-floor { fill: #3A2C24; }
.ss-rug { fill: #4A3B7A; opacity: .55; }
.ss-toys rect { fill: #E5484D; }
.ss-toys .b { fill: #FCC050; }
.ss-toys .c { fill: #4CC38A; }
.ss-toys .d { fill: #6FA8F5; }
.ss-chair rect { fill: #5A4A3E; }
.ss-frame { fill: #16122A; stroke: #6A5F8E; stroke-width: 2; }
.ss-leaf { fill: #7A5A42; stroke: #93704F; stroke-width: 1; transform-box: fill-box; transform-origin: 100% 50%; transition: transform .35s ease; }
.ss-knob { fill: #FCC050; transition: opacity .2s; }
.ss-room.open .ss-leaf { transform: scaleX(.18); }
.ss-room.open .ss-knob { opacity: 0; }
.ss-hit { fill: transparent; cursor: default; }
.ss-room.ss-ask .ss-hit { cursor: pointer; }
.ss-room.ss-ask .ss-frame { stroke: var(--gold); stroke-dasharray: 5 4; animation: ssAsk 1s ease-in-out 4; }
@keyframes ssAsk { 50% { stroke: var(--gold-deep); stroke-width: 3.5; } }

.ss-fig { transition: transform .8s cubic-bezier(.4, 0, .2, 1), opacity .35s; }
.ss-kb { transition: transform .3s ease; }
.ss-room.ss-still .ss-fig, .ss-room.ss-still .ss-kb, .ss-room.ss-still .ss-leaf { transition: none; }
.ss-tag { font: 700 13px var(--sans); fill: var(--dim); text-anchor: middle; }
.ss-kidwrap .ss-tag { fill: var(--gold); }

.ss-pb .ss-leg { fill: #3B3560; }
.ss-mom .ss-torso { fill: #C0799A; }
.ss-mom .ss-phead, .ss-stranger .ss-phead { fill: #E8B894; }
.ss-stranger .ss-torso { fill: #6F7A8C; }
.ss-stranger .ss-leg { fill: #3A4150; }

.ss-kid .ss-kbody { fill: #7FB4E8; }
.ss-kid .ss-khead { fill: #F2C7A2; }
.ss-kid .ss-hair { fill: #6A4A32; }
.ss-kid .ss-eye { fill: #2A1E16; }
.ss-kid .ss-mouth { fill: none; stroke: #2A1E16; stroke-width: 1.6; stroke-linecap: round; }
.ss-kid.cry .ss-mouth { fill: #6A2020; }
.ss-kid .ss-arm { stroke: #F2C7A2; stroke-width: 4; stroke-linecap: round; opacity: 0; transition: opacity .2s; }
.ss-kid.reach .ss-arm { opacity: 1; }
.ss-kid .ss-tear { fill: #8EC9FF; opacity: 0; transition: opacity .2s; }
.ss-kid.cry .ss-tear { opacity: 1; }
.ss-kid .ss-wail path { fill: none; stroke: #8EC9FF; stroke-width: 2; stroke-linecap: round; opacity: 0; transition: opacity .2s; }
.ss-kid.cry .ss-wail path:first-child, .ss-kid.wail .ss-wail path { opacity: .9; }

/* heart rate, drawn on the wall */
.ss-hr { opacity: 0; transition: opacity .3s; }
.ss-room.ss-hr-on .ss-hr { opacity: 1; }
.ss-room.ss-hr-on .ss-tag { opacity: 0; }
.ss-hr-t { font: 700 13px var(--sans); fill: #F07A7E; }
.ss-hr-k { font: 700 12px var(--sans); fill: var(--dim); }
.ss-hr-m { stroke: var(--line-strong); stroke-width: 1; stroke-dasharray: 3 3; }
.ss-hr-l { fill: none; stroke: #F07A7E; stroke-width: 3; stroke-linejoin: round; stroke-dasharray: 300; stroke-dashoffset: 300; }
.ss-room.ss-hr-on .ss-hr-l { transition: stroke-dashoffset 1.1s ease-out; stroke-dashoffset: 0; }

/* the dial caption */
.ss-cap { display: flex; gap: 8px; align-items: baseline; font-size: 15px; font-weight: 700; color: var(--text); min-height: 22px; }
.ss-cap b { font: 800 17px var(--serif); color: var(--gold); white-space: nowrap; }
.ss-eps { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; width: 100%; }
.ss-eps i { height: 8px; border-radius: 4px; background: var(--surface); border: 1px solid var(--line); transition: background .2s; }
.ss-eps i.on { background: var(--violet-bright); border-color: var(--violet-bright); }
.ss-eps i.ss-re.on { background: var(--gold); border-color: var(--gold); }

/* observer's notes */
.ss-notes { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; width: 100%; min-height: 66px; align-content: flex-start; }
.ss-n { padding: 5px 10px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); font-size: 13px; font-weight: 700; color: var(--faint); transition: color .2s, border-color .2s, background .2s; }
.ss-n.on { color: var(--text); border-color: var(--violet-bright); background: rgba(140, 110, 255, .16); }

/* three babies */
.ss-three { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; width: 100%; }
.ss-card { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px 6px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); text-align: center; }
.ss-card b { font: 800 17px var(--serif); color: var(--gold); }
.ss-card span { font-size: 13px; line-height: 1.3; color: var(--dim); font-weight: 600; }
.ss-ico { width: 72px; height: 70px; display: block; }

/* mom, then dad */
.ss-bonds { display: flex; flex-direction: column; gap: 10px; width: 100%; }
.ss-bond { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); }
.ss-bond .ss-ico { width: 52px; height: 50px; }
.ss-bond span { flex: 1; font-size: 16px; color: var(--dim); }
.ss-bond span b { color: var(--text); }
.ss-bond em { font: 800 18px var(--serif); font-style: normal; color: var(--mint); }
.ss-b2 em { color: var(--faint); }
.ss-b2.on em { color: var(--gold); }

/* two curves */
.ss-curves { display: block; width: 100%; height: auto; max-height: 34vh; }
.ss-cv { opacity: 0; transition: opacity .6s; }
.ss-curves.on .ss-cv { opacity: 1; }
.ss-c-in { fill: rgba(160, 150, 190, .28); stroke: #A096BE; stroke-width: 2; }
.ss-c-se { fill: rgba(252, 192, 80, .22); stroke: var(--gold); stroke-width: 2; }
.ss-axis { stroke: var(--line-strong); stroke-width: 2; }
.ss-ax { font: 700 13px var(--sans); fill: var(--dim); text-anchor: middle; }
.ss-leg { display: flex; gap: 14px; justify-content: center; font-size: 13px; font-weight: 700; color: var(--dim); }
.ss-leg span::before { content: ''; display: inline-block; width: 11px; height: 11px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.ss-l-se::before { background: var(--gold); }
.ss-l-in::before { background: #A096BE; }

/* spot it */
.ss-claim { width: 100%; padding: 20px; border-radius: 20px; background: var(--surface); border: 1px solid var(--line-strong); position: relative; }
.ss-claim::before { content: '\201C'; position: absolute; top: -8px; left: 14px; font: 800 54px var(--serif); color: var(--violet-bright); opacity: .6; }
.ss-claim p { margin: 0; font: 600 20px/1.35 var(--serif); color: var(--text); }

@media (max-height: 700px) {
  .ss-room { max-height: 40vh; }
  .ss-notes { min-height: 60px; }
  .ss-ico { width: 60px; height: 58px; }
  .ss-claim p { font-size: 18px; }
}