/* One population, two arrangements. The icons carry the explanation. */
.team-formation{margin:48px 0 26px;padding-top:24px;border-top:1px solid #bdd8eb30}
.formation-heading{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:24px}
.formation-heading h3,.formation-team-size{font:inherit;font-size:.82rem;letter-spacing:0;color:#b6c7d5}
.formation-heading strong{font-weight:500;color:#eef5fb}
.formation-team-size{display:flex;align-items:baseline;gap:5px}
.person-definition{position:absolute;width:0;height:0;overflow:hidden}
.formation-stage{--team-columns:4;--team-rows:4;--team-gap:14px;--team-height:76px;--grid-columns:12;position:relative;height:calc(var(--team-rows)*var(--team-height) + (var(--team-rows) - 1)*var(--team-gap))}
.formation-art{position:relative;width:100%;height:100%;display:grid;grid-template-columns:repeat(12,1fr);align-content:center;justify-items:center;gap:20px 0;padding:30px}
.person{display:block;width:22px;height:32px;color:#c4d6e4}
.person svg{display:block;width:100%;height:100%;fill:currentColor}
.team-outline{display:none;position:absolute;inset:0 auto auto 0;pointer-events:none}
.formation-stage.is-ready .formation-art{display:block;padding:0}
.formation-stage.is-ready .person{position:absolute;left:0;top:0;transform:translate(var(--grid-x),var(--grid-y));transition:transform 1.1s cubic-bezier(.22,.68,0,1) var(--person-delay),color .7s ease}
.formation-stage.is-ready .team-outline{display:block;transform:translate(var(--tile-x),var(--tile-y))}
.team-formation[data-phase="teams"] .person{transform:translate(var(--team-x),var(--team-y));color:#e3f0fa}
.formation-stage.is-measuring .person{transition:none!important}
.formation-controls{display:flex;justify-content:flex-end;margin-top:8px;min-height:44px}
.formation-replay{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border:0;border-radius:50%;background:transparent;color:#bacddb;cursor:pointer;font:inherit;transition:background .2s,color .2s}
.formation-replay[hidden]{display:none}
.formation-replay:hover{background:#c1def014;color:#f2f8ff}
.formation-replay:focus-visible{outline:2px solid #d5eaff;outline-offset:2px}
.formation-replay:disabled{opacity:.4;cursor:default}
.formation-replay>span{font-size:1.2rem;line-height:1}
@media(max-width:760px){
 .team-formation{margin-top:32px;padding-top:20px}
 .formation-heading{margin-bottom:20px;gap:12px}
 .formation-heading h3,.formation-team-size{font-size:.75rem}
 .formation-stage{--team-columns:2;--team-rows:8;--team-gap:10px;--team-height:59px;--grid-columns:10}
 .formation-art{grid-template-columns:repeat(10,1fr);gap:18px 0;padding:0}
 .person{width:17px;height:25px}
}
@media(prefers-reduced-motion:reduce){.formation-stage .person{transition:none!important}}