fix: lunch before dinner in columns, responsive mobile layout

- models.py: ORDER BY CASE so lunch always appears before dinner in the
  dashboard table (was alphabetical, putting dinner first).
- style.css: add @media (max-width: 600px) with mobile-friendly layout:
  stacked navbar, full-width dashboard header, reduced padding/margins,
  larger touch targets for chips/buttons, stacked manage forms, and
  compact table cells.

models.py

@@ -272,7 +272,7 @@ def ensure_meal_periods(for_date: date) -> list[dict]:
             (date_str,),
         )
         rows = db.execute(
-            "SELECT id, date, meal_type FROM meal_periods WHERE date = ? ORDER BY meal_type",
+            "SELECT id, date, meal_type FROM meal_periods WHERE date = ? ORDER BY CASE meal_type WHEN 'lunch' THEN 1 WHEN 'dinner' THEN 2 END",
             (date_str,),
         ).fetchall()
         return [dict(r) for r in rows]