Challenge 1: Diagnose a Tab-Order Mismatch — Possible Solution
====================================================================

THE SCENARIO
-------------
Visual order (via CSS Grid order values): Name, Email, Phone
HTML source order: Phone, Name, Email

WHAT A KEYBOARD USER EXPERIENCES
------------------------------------
Since tab order follows DOM source order — NOT visual/CSS position, per
this chapter's core point — a keyboard user tabbing through this form
will land on the fields in the ORDER THEY APPEAR IN THE HTML: Phone
first, then Name, then Email. Visually, however, the fields are
displayed as Name, Email, Phone (top to bottom, or however the grid
lays them out).

This creates a genuinely disorienting experience: the user's focus
indicator will jump to the Phone field first — visually the THIRD field
on screen — while Name (visually first) and Email (visually second)
haven't been reached yet. Someone watching the screen while tabbing
through (a sighted keyboard user, or someone using a screen magnifier)
sees the visual focus indicator appear in the "wrong" place relative to
what their eyes expect, since the CSS order property changed how things
LOOK without changing the underlying tab sequence at all.

THE FIX
--------
Reorder the actual HTML elements to match the intended reading/visual
order (Name, Email, Phone in the markup itself), and use CSS Grid
placement properties (like grid-row/grid-column, or simply the natural
grid flow) to achieve the desired visual layout WITHOUT relying on the
order property to rearrange elements whose underlying source order
doesn't match. If a specific visual arrangement is needed that genuinely
can't match a sensible source order, the safer alternative is to accept
that CSS visual layout and DOM/tab order should be kept in alignment as
a hard rule for this kind of interactive content, rather than trying to
force a mismatch to work via CSS alone.

WHY THIS WORKS AS AN ANSWER
------------------------------
This directly reflects the chapter's warning that CSS positioning
properties (Grid's order, flexbox order, absolute positioning) can
visually reposition an element "without changing where it sits in the
tab sequence" — the diagnosis here is recognizing that the VISUAL
layout and the TAB order are two independent things that CSS order
specifically decouples, and the fix is restoring alignment between them
by fixing the actual HTML source order rather than trying to patch it
with more CSS or JavaScript workarounds.