Keep the sign-in code card whole, and fix its email and resend lines

A card unmounts the moment the flow moves on, while `<Transition
mode="outin">` still shows it for its exit. Since the input became
rebuildable, the card's `onCleanup` emptied the input host as well, so a
correct code - one that goes on to the password or sign-up card - pulled
the digit boxes out and collapsed the card halfway through its fade. Only
a rebuild detaches them now, and the 300 ms clear after
SESSION_PASSWORD_NEEDED, which could never reach a field any more, is gone.

The masked part of a login email is a bluff spoiler, drawn on a canvas that
needs the spoiler's geometry. It was measured once on the next frame and
then by a ResizeObserver on the spoiler itself - an inline box, which a
ResizeObserver never reports. The code card mounts while the previous card
is still leaving, so its subtitle reached the DOM too late for that one
measure and the spoiler stayed blank for good. The canvas inside is a block
box that gets a size the moment it is rendered, so that is observed
instead; every inline spoiler inserted after its first frame benefits.

The spoiler's letters are inline-blocks, and each is a place a line may
break, so "th*****4@gmail.com" split right after the dots. The pattern is
now an inline-block capped at the line width: it moves to the next line
whole, and only an address too long for any line breaks inside itself.

The countdown to the next delivery method is kept with the sent code, so a
reload carries on with it instead of starting over. With no timeout from
the server the next method is offered at once, as iOS does, instead of
after a minute; a code via Fragment is offered at once regardless, as
Android does - it is there to be picked up the moment it is asked for, and
it used to count down with "You can request an SMS in".

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>