fix(ui): close 5 P0 audit findings (ingredients, cost, routing, mobile slots)

Sprint 1 of the UI/UX audit (Review/ui-nielsen-audit.md).

- RecipeDetail: drop .trim() on ingredient line so unit and name no longer fuse
  ('2 canBlack Beans' -> '2 can Black Beans').
- MealDetail: align ingredient field name to backend ('qty' not 'quantity'),
  add 'ingredient.name' fallback for the missing nested name from API.
- MealDetail: '$N/A per serving' -> '$X.XX' or 'No estimate'.
- App: add /recommended alias to /recipes/recommended, plus a catch-all
  NotFound page so unrecognised URLs no longer render blank.
- Dashboard: remove 'hidden md:*' on empty meal slots so mobile users can
  tap Generate. Bump empty-slot button to 44px min-height (a11y).
- EmptyState: accept an optional 'to' prop for Link-wrapped actions.
- types: extend RecipeIngredient with optional notes and nested ingredient.

frontend/src/pages/RecipeDetail.tsx

@@ -158,7 +158,7 @@ export default function RecipeDetail() {
               <li key={i} className="flex items-start gap-2 text-sm text-surface-700">
                 <span className="w-2 h-2 rounded-full bg-primary-400 mt-1.5 flex-shrink-0" />
                 <span>
-                  {ing.qty != null && `${ing.qty} ${ing.unit || ''} `.trim()}
+                  {ing.qty != null && `${ing.qty}${ing.unit ? ` ${ing.unit}` : ''} `}
                   {ing.name || 'Unknown ingredient'}
                 </span>
               </li>