[Feature]: Redesign the responsive navigation interface #76

Problem or user need

The current route-planning controls, map sizing, route-preference UI, direction cards, colors, and layout are not polished enough for a confident demo. Users need a clear mobile-first flow that feels like indoor navigation, not a form beside an unclear line.

Proposed behavior

Design the phone experience first. Group building, From, To, and route preference controls in a compact planning panel; give the map primary space once a route is selected; present directions as a readable sequence; preserve values and show validation near the relevant control; and make map, current instruction, loading, no-route, preference-no-route, and unexpected-error states understandable. Define accessible theme tokens for university branding without relying on color alone.

Alternatives considered

Do not adopt Tailwind just because a redesign is happening under a short deadline. Use the existing CSS for the demo unless the team explicitly accepts a tooling migration. “Like Google Maps” describes a usability goal, not a requirement to copy its visual styling.

Scope

In scope: mobile-first layout, responsive hierarchy, accessible controls, route/direction presentation, theme tokens, error states, and screenshots or recordings.

Out of scope: Three.js, a full design-system package, native mobile apps, sensor-based navigation, and Tailwind unless separately approved.

Acceptance criteria

• A first-time user can understand the route-planning flow without team explanation.
• The layout is usable on representative phone, tablet, and desktop widths.
• Map and directions have a clear responsive hierarchy.
• Controls have accurate labels and accessible focus states.
• Validation/routing errors are in context and route preference is usable on touch.
• Theme tokens support university branding with sufficient contrast.
• UI does not rely on color alone for route semantics.
• The PR includes agreed viewport screenshots/recording and passing frontend tests.

Mockups or references

Coordinate form semantics with the building/endpoint-selection work and map behavior with the contextual-2D-rendering work.

Confirmation

• I searched existing issues and discussions and this hasn't already been proposed.