- Shipped
- September 6, 2026 at 12:23 AM UTC
- Author
- Kamo
- Commit
- 3b3e3bb
The /team and /member screens were two near-identical slabs of glass stacked with a gap, a MUI Stepper in its default grey, and a progress pill floating inside the header. Everything that carried meaning was carried by size alone. The header and the wizard are now ONE surface. The line that separates them is the progress indicator: full-bleed, and it fills as you advance, so the divider the layout needed anyway is doing the second job instead of a bar parked above it. The header came out ~25px SHORTER than the pair it replaced, which the pane gives straight back to the form. The brand line used to be REPLACED by the step name from step two onward, so a white-labelled signup lost whose signup it was for the rest of the funnel. Both hold their own line now — who you are joining above, where you are in joining below — and the step counter comes with it, which is what lets the phone layout drop the left column entirely rather than degrade it to a lone "Step 1 of 7". The rail is hand-built because the states are four, not the Stepper's two: `visited` — filled in, then walked back from — was previously indistinguishable from a step never reached. Solid brand up to the step on screen, lighter as far as you have ever got, faint beyond: the column reads as a level gauge. Each row draws its own half-segments, so the track stays unbroken at any pane height. A node is always a numbered disc and only its fill and size change, so advancing reads as a transition rather than one control swapped for another. The active row sits on a raised white pill that SLIDES between rows on a step change. No colour here is its own. Every organization ships a globals.css into the theme bucket that redefines --color-primary, so each tint is mixed from whatever the tenant supplied and the whole chrome re-tints per org; the fallbacks under @supports are neutral rather than absent. Verified in brown, blue and the grey platform default. Also fixed, found while measuring: - A tenant wordmark five times as wide as it is tall took a phone's entire header row and wrapped the title to three lines. The logo is bounded on BOTH axes now and keeps its ratio inside that box. - Completed step labels were underlined, which reads as a link, not as done. - The buttons shouted in MUI's uppercase default and hovered to a hardcoded grey that stayed grey whatever an org had branded itself. - "Sign in here" now says what it does: "Sign in". Ribbon clearance re-measured by hit-testing the painted band at 13 viewports from 320x700 to 1440x900: nothing runs under it, and nothing scrolls sideways. Motion is guarded in both CSS and JS; the rail's rows are real buttons with aria-current and a visible focus ring.