fix(frontend): registration form says what is missing in its own voice

[sabinem]

Somebody signing up for a hackathon left the T-shirt size unanswered and got told off by their browser, not by us. The message came out as a grey system tooltip in a system font — "Please select an item in the list." — pinned over the form, in a page that otherwise puts every label in mono and every warning in the theme's danger colour. Now the same mistake is reported in the app's own voice: a short line under the field ("Choose one of the options.", "Tick this to carry on."), the field's border in danger, and the cursor moved back to the first field that needs an answer. Fix one and its complaint disappears as you answer it.

Before this, the message was literally unstyleable. The tooltip is drawn outside the page by the browser — Chrome removed the pseudo-elements that once reached it, and Firefox and Safari never had any — so no amount of CSS could touch it. The only route to a themed message is to stop the browser from speaking and ask the same validation API ourselves, which is what this does.

• novalidate is set on the form from JavaScript, not written into the markup. A visitor whose JS never ran keeps the native bubble — ugly, but present — rather than losing the client-side check entirely.
• Nothing about enforcement changed: every required attribute stays where it was, and the backend refuses a submission with an unanswered mandatory question exactly as before. This only decides who says it and how it looks.
• The invalid styling keys off aria-invalid, not :user-invalid. With novalidate the browser never runs its own check, so a control the person never touched — the untouched select this was written for — never counts as "user-invalid". The attribute is set by whoever renders the message, so border and sentence cannot disagree.