[Team Balance] add info icon and tooltip/flyout for description of balanced versus unbalanced

We need to describe this functionality to our users. It is not very clear what we actually mean by "Balanced" or "Unbalanced".

- [ ] Create an info icon next to the Team Balance filter title
- [ ] On desktop, hovering the icon should change the cursor to indicate a button
- [ ] On desktop, clicking the info icon should show a tooltip/flyout describing two sections (i.e., Balanced and Unbalanced)
- [ ] On mobile (or mobile web), pressing the info icon should show a tooltip/flyout describing two sections (i.e., Balanced and Unbalanced)

Verbiage for tooltip/flyout:
```
Balanced
Attempts to balance the team by role.

Unbalanced
Does not attempt to balance the teams.
```

Start by locating the Team Balance filter in the Next.js UI and identify its existing desktop and mobile interaction patterns. Add the info icon and the specified Balanced and Unbalanced tooltip/flyout text, then verify hover, click, and press behavior on desktop and mobile layouts.

Written by the indexing model from the issue text.