Layout Toggle Team Block for React

Edit ENGINEERS at the top of the file. An engineer is a name, a role, a city and a lead flag: set it to true to give them the outline Lead badge. The figures in the header and the toolbar's count are counted from the same list, so adding someone needs no other change.

It is a group of two toggle buttons named Layout. One is always pressed: pressing the pressed one keeps it, and pressing the other moves the choice. The same ten rows re-lay between one-pixel hairlines, one per row in the list and two across in the grid, and a polite status line says what changed ("10 engineers, shown as a grid"). The state is a single value, so the list's markup never changes.

The source was a flat list on a dark background. This version keeps the URL and replaces the darkness with structure: a tinted Frame shell around a raised panel with a ring and a soft shadow, which reads as lifted on a light page and on a dark one alike. Nothing is a fixed colour.

Below sm the toggle is hidden and the roster is always the list: names and roles in rows, without the cities, and the header's figures are left out so the first row starts within the first screen. From sm the toggle appears and the grid is two columns. Nothing scrolls sideways at 320 pixels.

The spine's rails and top rule come from Guides. The framed panel is wrapped in its own Guides, with sides, overshoot past the corners and a + on each corner, set 8 pixels away from the frame. Inside the panel, the roster is a one-pixel gap on a border-coloured background with background-coloured cells, so the hairlines are the same in both layouts.

The header and the frame fade up once when the page loads, off with reduced motion. Switching layouts changes the arrangement at once, with no animation.