feat: UI redesign with park detail pages and ride status

Visual overhaul:
- Warmer color system with amber accent for Today, better text hierarchy
- Row hover highlighting, sticky column shadow on horizontal scroll
- Closed cells replaced with dot (·) instead of "Closed" text
- Regional grouping (Northeast/Southeast/Midwest/Texas & South/West)
- Two-row header with park count badge and WeekNav on separate lines
- Amber "Today" button in WeekNav when off current week
- Mobile card layout (< 1024px) with 7-day grid per park; table on desktop
- Skeleton loading state via app/loading.tsx

Park detail pages (/park/[id]):
- Month calendar view with ← → navigation via ?month= param
- Live ride status fetched from Six Flags API (cached 1h)
- Ride hours only shown when they differ from park operating hours
- Fallback to nearest upcoming open day when today is dropped by API,
  including cross-month fallback for end-of-month edge case

Data layer:
- Park type gains region field; parks.ts exports groupByRegion()
- db.ts gains getParkMonthData() for single-park month queries
- sixflags.ts gains scrapeRidesForDay() returning RidesFetchResult
  with rides, dataDate, isExact, and parkHoursLabel

Removed: CalendarGrid.tsx, MonthNav.tsx (dead code)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

app/page.tsx

@@ -1,6 +1,9 @@
 import { WeekCalendar } from "@/components/WeekCalendar";
+import { MobileCardList } from "@/components/MobileCardList";
 import { WeekNav } from "@/components/WeekNav";
-import { PARKS } from "@/lib/parks";
+import { Legend } from "@/components/Legend";
+import { EmptyState } from "@/components/EmptyState";
+import { PARKS, groupByRegion } from "@/lib/parks";
 import { openDb, getDateRange } from "@/lib/db";
 
 interface PageProps {
@@ -11,7 +14,6 @@ function getWeekStart(param: string | undefined): string {
   if (param && /^\d{4}-\d{2}-\d{2}$/.test(param)) {
     const d = new Date(param + "T00:00:00");
     if (!isNaN(d.getTime())) {
-      // Snap to Sunday
       d.setDate(d.getDate() - d.getDay());
       return d.toISOString().slice(0, 10);
     }
@@ -29,114 +31,121 @@ function getWeekDates(sundayIso: string): string[] {
   });
 }
 
+function getCurrentWeekStart(): string {
+  const today = new Date();
+  today.setDate(today.getDate() - today.getDay());
+  return today.toISOString().slice(0, 10);
+}
+
 export default async function HomePage({ searchParams }: PageProps) {
   const params = await searchParams;
   const weekStart = getWeekStart(params.week);
   const weekDates = getWeekDates(weekStart);
   const endDate = weekDates[6];
+  const today = new Date().toISOString().slice(0, 10);
+  const isCurrentWeek = weekStart === getCurrentWeekStart();
 
   const db = openDb();
   const data = getDateRange(db, weekStart, endDate);
   db.close();
 
-  // Count how many days have any scraped data (to show empty state)
   const scrapedCount = Object.values(data).reduce(
     (sum, parkData) => sum + Object.keys(parkData).length,
     0
   );
 
-  // Only show parks that have at least one open day this week
   const visibleParks = PARKS.filter((park) =>
     weekDates.some((date) => data[park.id]?.[date]?.isOpen)
   );
 
+  const grouped = groupByRegion(visibleParks);
+
   return (
     <div style={{ minHeight: "100vh", background: "var(--color-bg)" }}>
-      {/* Header */}
+      {/* ── Header ─────────────────────────────────────────────────────────── */}
       <header style={{
-        borderBottom: "1px solid var(--color-border)",
-        padding: "16px 24px",
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "space-between",
-        gap: 16,
         position: "sticky",
         top: 0,
         zIndex: 20,
         background: "var(--color-bg)",
+        borderBottom: "1px solid var(--color-border)",
       }}>
-        <div style={{ display: "flex", alignItems: "baseline", gap: 10 }}>
-          <span style={{ fontSize: "1rem", fontWeight: 700, color: "var(--color-text)", letterSpacing: "-0.02em" }}>
+        {/* Row 1: Title + park count */}
+        <div style={{
+          padding: "12px 24px 10px",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "space-between",
+          gap: 12,
+        }}>
+          <span style={{
+            fontSize: "1.1rem",
+            fontWeight: 700,
+            color: "var(--color-text)",
+            letterSpacing: "-0.02em",
+          }}>
             Six Flags Calendar
           </span>
-          <span style={{ fontSize: "0.75rem", color: "var(--color-text-muted)" }}>
+
+          <span style={{
+            background: "var(--color-surface)",
+            border: "1px solid var(--color-border)",
+            borderRadius: 20,
+            padding: "3px 10px",
+            fontSize: "0.7rem",
+            color: "var(--color-text-muted)",
+            fontWeight: 500,
+          }}>
             {visibleParks.length} of {PARKS.length} parks open
           </span>
         </div>
 
-        <WeekNav weekStart={weekStart} weekDates={weekDates} />
-
-        <Legend />
+        {/* Row 2: Week nav + legend */}
+        <div style={{
+          padding: "8px 24px 10px",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "space-between",
+          gap: 16,
+          borderTop: "1px solid var(--color-border-subtle)",
+        }}>
+          <WeekNav
+            weekStart={weekStart}
+            weekDates={weekDates}
+            isCurrentWeek={isCurrentWeek}
+          />
+          <Legend />
+        </div>
       </header>
 
-      {/* Calendar */}
-      <main style={{ padding: "0 24px 40px" }}>
+      {/* ── Main content ───────────────────────────────────────────────────── */}
+      <main style={{ padding: "0 24px 48px" }}>
         {scrapedCount === 0 ? (
           <EmptyState />
         ) : (
-          <WeekCalendar parks={visibleParks} weekDates={weekDates} data={data} />
+          <>
+            {/* Mobile: card list (hidden on lg+) */}
+            <div className="lg:hidden">
+              <MobileCardList
+                grouped={grouped}
+                weekDates={weekDates}
+                data={data}
+                today={today}
+              />
+            </div>
+
+            {/* Desktop: week table (hidden below lg) */}
+            <div className="hidden lg:block">
+              <WeekCalendar
+                parks={visibleParks}
+                weekDates={weekDates}
+                data={data}
+                grouped={grouped}
+              />
+            </div>
+          </>
         )}
       </main>
     </div>
   );
 }
-
-function Legend() {
-  return (
-    <div style={{ display: "flex", alignItems: "center", gap: 16, fontSize: "0.72rem", color: "var(--color-text-muted)" }}>
-      <span style={{ display: "flex", alignItems: "center", gap: 5 }}>
-        <span style={{
-          display: "inline-block", width: 28, height: 14, borderRadius: 3,
-          background: "var(--color-open-bg)", border: "1px solid var(--color-open-border)",
-        }} />
-        Open
-      </span>
-      <span style={{ display: "flex", alignItems: "center", gap: 5 }}>
-        <span style={{ color: "var(--color-text-dim)" }}>Closed</span>
-        <span style={{ color: "var(--color-border)" }}>·</span>
-        <span style={{ color: "var(--color-text-dim)" }}>— no data</span>
-      </span>
-    </div>
-  );
-}
-
-function EmptyState() {
-  return (
-    <div style={{
-      display: "flex",
-      flexDirection: "column",
-      alignItems: "center",
-      justifyContent: "center",
-      padding: "80px 24px",
-      gap: 12,
-      color: "var(--color-text-muted)",
-    }}>
-      <div style={{ fontSize: "2rem" }}>📅</div>
-      <div style={{ fontSize: "1rem", fontWeight: 600, color: "var(--color-text)" }}>No data scraped yet</div>
-      <div style={{ fontSize: "0.85rem", textAlign: "center", lineHeight: 1.6 }}>
-        Run the following to populate the calendar:
-      </div>
-      <pre style={{
-        background: "var(--color-surface)",
-        border: "1px solid var(--color-border)",
-        borderRadius: 8,
-        padding: "12px 20px",
-        fontSize: "0.8rem",
-        color: "var(--color-text)",
-        lineHeight: 1.8,
-      }}>
-        npm run discover{"\n"}npm run scrape
-      </pre>
-    </div>
-  );
-}