Spectrum Work Style Preferences Team Block for React

Edit SPECTRA at the top of the file. A spectrum has a question, two ends, five steps (the words for 1 to 5), her answer as mine and a list of the team's answers. The median, the dot and the ring positions, the words in the text and the "steps from the median" sentence are all worked out from those numbers. An even number of teammates can give a median half a step between two answers, which is drawn between two ticks and read as "Between … and …".

A score turns a preference into a ranking, and a type turns it into a label somebody lives with. Four lines with a dot and a ring only say where this person is and where the team is, so a teammate can choose a meeting time or a way to give feedback. The copy says so out loud in the header.

The drawn tracks are hidden from assistive technology; every cell carries the same facts as visible text: the question as a heading, her answer in words with its number ("Mostly async (2 of 5)"), the team median and the gap. Nothing needs a mouse or a keyboard, because nothing is interactive.

A slider invites you to move it, and this line is a record, not a control: a focusable, adjustable track would imply that the answer can be changed. The line is drawn with a solid dot and a hollow ring in plain elements, and the text beside it is the accessible version.

Yes. The line and its two end labels sit in one box that keeps its own reading direction, so "Early bird" stays at the end that matches the dot's position; the question and the text under it follow the page's direction, and each "2 of 5" is wrapped so its digits stay together.

The four cells stack in one column and keep their hairlines. Each line scales with the cell, and its end labels sit under it so they never squeeze the line. Nothing scrolls sideways at 320 pixels.