Duration Table Methodology Block for React

Edit PHASES at the top of the file: each has a name, a work sentence, tools and a number of weeks. The total in the heading, the bar's columns (one fraction per week), the "Week 3–4" spans in the table and the ruler's end are all computed from that list, so changing a phase's weeks re-scales everything. Fractions of a week work too; the labels read best in whole weeks.

Yes. It's a grid with one column per phase, sized in fractions equal to the weeks, so a two-week phase is exactly twice as wide as a one-week one at any screen width. The ruler under it is drawn as text ("Start", the midpoint, the end) because a tick for every week would crowd a phone.

The bar is an ordered list labelled with the number of weeks, one item per phase with its name and length; the coloured segments and their numbers are decorative. The table is a real table named by its label, with a header row and each phase's name in the first column, so a reader can ask for "Check, tools" and get the answer. The tools are a list inside their cell.

The bar stays whole but shrinks its labels to the phase numbers, which the table explains right below. The table is wider than the screen on purpose, so it scrolls sideways inside its frame; the frame is a focusable region named like the table, so keyboard and switch users can scroll it too. Nothing else moves sideways at 320 pixels.

No, on purpose. A time scale reads in one direction, so the bar and its ruler keep their order. The table, the header and the text do flip, and the weeks stay in reading order inside their own wrapper.

The header, the bar and the table fade up once on load. With reduced motion they simply appear. The table has no hover effect and the bar no animation.