polish: clarify parks open badge; improve timezone display

- "parks open" → "parks open this week" for clarity
- Week calendar cells: stack hours above tz abbreviation (smaller,
  dimmer) instead of inline to avoid overflow in tight 130px columns
- Mobile park cards: tz abbreviation inline but smaller/dimmer (60% opacity)
- Month calendar: same two-line stacking in compact day cells

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

app/page.tsx

@@ -135,7 +135,7 @@ export default async function HomePage({ searchParams }: PageProps) {
             color: visibleParks.length > 0 ? "var(--color-open-hours)" : "var(--color-text-muted)",
             fontWeight: 600,
           }}>
-            {visibleParks.length} of {PARKS.length} parks open
+            {visibleParks.length} of {PARKS.length} parks open this week
           </span>
         </div>
 

components/ParkCard.tsx

@@ -154,7 +154,10 @@ export function ParkCard({ park, weekDates, parkData, today, openRideCount, coas
                         ? "var(--color-today-text)"
                         : "var(--color-open-hours)",
                     }}>
-                      {dayData.hoursLabel} {tzAbbr}
+                      {dayData.hoursLabel}{" "}
+                      <span style={{ fontSize: "0.68rem", fontWeight: 400, opacity: 0.6 }}>
+                        {tzAbbr}
+                      </span>
                     </span>
                   </div>
                 </div>

components/ParkMonthCalendar.tsx

@@ -187,7 +187,10 @@ export function ParkMonthCalendar({ parkId, year, month, monthData, today, timez
                         Passholder
                       </div>
                       <div style={{ fontSize: "0.65rem", color: "var(--color-ph-hours)", marginTop: 2 }}>
-                        {dayData.hoursLabel} {tzAbbr}
+                        {dayData.hoursLabel}
+                      </div>
+                      <div style={{ fontSize: "0.58rem", color: "var(--color-ph-label)", opacity: 0.75, marginTop: 1, letterSpacing: "0.04em" }}>
+                        {tzAbbr}
                       </div>
                     </div>
                   ) : isOpen ? (
@@ -198,7 +201,10 @@ export function ParkMonthCalendar({ parkId, year, month, monthData, today, timez
                       padding: "3px 6px",
                     }}>
                       <div style={{ fontSize: "0.65rem", color: "var(--color-open-hours)" }}>
-                        {dayData.hoursLabel} {tzAbbr}
+                        {dayData.hoursLabel}
+                      </div>
+                      <div style={{ fontSize: "0.58rem", color: "var(--color-open-hours)", opacity: 0.6, marginTop: 1, letterSpacing: "0.04em" }}>
+                        {tzAbbr}
                       </div>
                     </div>
                   ) : (

components/WeekCalendar.tsx

@@ -100,7 +100,15 @@ function DayCell({
             letterSpacing: "-0.01em",
             whiteSpace: "nowrap",
           }}>
-            {dayData.hoursLabel} {tzAbbr}
+            {dayData.hoursLabel}
+          </span>
+          <span style={{
+            color: "var(--color-ph-label)",
+            fontSize: "0.6rem",
+            fontWeight: 500,
+            letterSpacing: "0.04em",
+          }}>
+            {tzAbbr}
           </span>
         </div>
       </td>
@@ -113,12 +121,14 @@ function DayCell({
         background: "var(--color-open-bg)",
         border: "1px solid var(--color-open-border)",
         borderRadius: 6,
-        padding: "6px 4px",
+        padding: "4px",
         textAlign: "center",
         height: "100%",
         display: "flex",
+        flexDirection: "column",
         alignItems: "center",
         justifyContent: "center",
+        gap: 2,
         transition: "filter 150ms ease",
       }}>
         <span style={{
@@ -128,7 +138,16 @@ function DayCell({
           letterSpacing: "-0.01em",
           whiteSpace: "nowrap",
         }}>
-          {dayData.hoursLabel} {tzAbbr}
+          {dayData.hoursLabel}
+        </span>
+        <span style={{
+          color: "var(--color-open-hours)",
+          fontSize: "0.6rem",
+          fontWeight: 500,
+          opacity: 0.6,
+          letterSpacing: "0.04em",
+        }}>
+          {tzAbbr}
         </span>
       </div>
     </td>