/* Population ratios and a separate, playful comment card. */
.population-stage{container-type:size}
.result #result-caption{font-size:12px;color:#cfdbd1}
.ratio-readout{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:7px 14px;margin:10px auto 0;line-height:1.5}
.ratio-readout strong{display:inline-block;font-size:14px;font-weight:500;letter-spacing:-.3px;padding:5px 12px;border:1px solid #9cb69b42;border-radius:7px;background:#1c342be8;color:#d9e8ce;font-variant-numeric:tabular-nums}
.ratio-readout>span{font-size:10px;color:#b4c5b5}
.result p.ratio-note{font-size:8px;color:#829b91;margin-top:7px}
.type-comment{position:absolute;z-index:2;top:155px;right:3vw;width:250px;padding:16px 18px 11px;border:1px solid #b4b99c38;border-radius:12px;background:#172c29ed;color:#dbe6d7;box-shadow:0 6px 24px #00000012;backdrop-filter:blur(8px);text-align:left}
.comment-header{display:flex;justify-content:space-between;align-items:center;gap:7px;font-size:8px;color:#8ea99b}
.comment-header>span:last-child{color:#d5ac90}
.comment-copy h3{font-size:16px;line-height:1.55;letter-spacing:-.4px;margin:13px 0 7px;font-weight:500;word-break:keep-all;overflow-wrap:anywhere}
.comment-copy p{font-size:10px;line-height:1.8;color:#a3b8aa;margin:0;word-break:keep-all;overflow-wrap:anywhere}
.comment-footer{display:flex;align-items:center;justify-content:space-between;margin-top:11px;padding-top:8px;border-top:1px solid #a2b29a24}
.comment-footer>span{font-size:8px;color:#799484;font-variant-numeric:tabular-nums}
.comment-footer button{font-size:10px;color:#c4d3b7;padding:4px 0 4px 12px}
.type-comment[data-tier=extreme],.type-comment[data-tier=empty]{border-color:#d59b7f66}
.type-comment[data-tier=extreme] .comment-copy h3{color:#e9baa0}
@media(max-width:1150px){.type-comment{top:auto;right:3vw;bottom:105px;width:240px}}
@media(max-width:700px){
 .result #result-caption{font-size:10px}.ratio-readout{gap:5px 10px;margin-top:8px}.ratio-readout strong{font-size:12px;padding:4px 9px}.ratio-readout>span{font-size:9px}.result p.ratio-note{font-size:7px;max-width:320px;line-height:1.6;margin-top:5px}
 .type-comment{left:18px;right:18px;bottom:110px;width:auto;max-width:390px;margin:auto;padding:11px 14px 8px;border-radius:10px;background:#172c29f2}.comment-copy h3{font-size:14px;margin:8px 0 4px}.comment-copy p{font-size:9px;line-height:1.65}.comment-footer{margin-top:7px;padding-top:4px}.comment-header{font-size:7px}.comment-footer button{font-size:9px}
}
@container(max-height:480px){
 .result{top:43px}.result-kicker{margin-bottom:5px}.result-number{font-size:36px}.result #result-caption{font-size:9px;margin-top:5px}.ratio-readout{margin-top:5px;gap:4px 8px}.ratio-readout strong{font-size:11px;padding:3px 8px}.ratio-readout>span{font-size:8px}.result p.ratio-note{display:none}.result details{font-size:8px;margin-top:3px}
 .type-comment{top:auto;bottom:96px;left:18px;right:18px;width:auto;max-width:390px;margin:auto;padding:8px 12px}.comment-header{font-size:7px}.comment-copy h3{font-size:13px;margin:6px 0 0}.comment-copy p{display:none}.comment-footer{position:absolute;right:10px;bottom:8px;border:0;margin:0;padding:0}.comment-footer>span{display:none}.comment-footer button{font-size:0;width:23px;height:23px;padding:0}.comment-footer button:after{content:'↻';font-size:16px}.comment-copy{padding-right:22px}
}
@container(max-height:350px){
 .stage-top{padding-top:9px;padding-bottom:0}.result{top:34px}.result-kicker{display:none}.result-number{font-size:28px}.result-qualifier{font-size:11px}.result-number .unit{font-size:12px}.result #result-caption{font-size:8px;margin-top:3px}.ratio-readout{margin-top:4px}.ratio-readout strong{font-size:10px;padding:2px 7px}.ratio-readout>span{display:none}.result details{margin-top:1px}
 .type-comment{bottom:68px;padding:6px 10px}.comment-header>span:last-child{display:none}.comment-copy h3{font-size:11px;margin-top:3px}.stage-bottom{padding:12px 18px 8px}.scale-card b{font-size:9px}.scale-heading,.scale-note{display:none}.stage-actions button{padding:4px 6px}
}