feat: replace dot with left border line on park rows/cards

Open parks get a colored left border (green/amber/blue) instead of a dot.
Region headers lose their accent line; distinguished by "— REGION —" format
with higher-contrast text instead.

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

components/MobileCardList.tsx

@@ -24,25 +24,17 @@ export function MobileCardList({ grouped, weekDates, data, today, rideCounts, co
           <div style={{
             display: "flex",
             alignItems: "center",
-            gap: 10,
             marginBottom: 10,
             paddingLeft: 2,
           }}>
-            <div style={{
-              width: 3,
-              height: 14,
-              borderRadius: 2,
-              background: "var(--color-region-accent)",
-              flexShrink: 0,
-            }} />
             <span style={{
-              fontSize: "0.65rem",
+              fontSize: "0.6rem",
               fontWeight: 700,
-              letterSpacing: "0.1em",
+              letterSpacing: "0.14em",
               textTransform: "uppercase",
-              color: "var(--color-text-muted)",
+              color: "var(--color-text-secondary)",
             }}>
-              {region}
+              — {region} —
             </span>
           </div>
 

components/ParkCard.tsx

@@ -31,6 +31,9 @@ export function ParkCard({ park, weekDates, parkData, today, openRideCount, coas
       <div className="park-card" style={{
         background: "var(--color-surface)",
         border: "1px solid var(--color-border)",
+        borderLeft: isOpen
+          ? `3px solid ${isWeatherDelay ? "var(--color-weather-border)" : isClosing ? "var(--color-closing-border)" : "var(--color-open-border)"}`
+          : "1px solid var(--color-border)",
         borderRadius: 12,
         overflow: "hidden",
       }}>

components/WeekCalendar.tsx

@@ -166,17 +166,16 @@ function RegionHeader({ region, colSpan }: { region: string; colSpan: number })
           padding: "10px 14px 6px",
           background: "var(--color-region-bg)",
           borderBottom: "1px solid var(--color-border-subtle)",
-          borderLeft: "3px solid var(--color-region-accent)",
         }}
       >
         <span style={{
-          fontSize: "0.65rem",
+          fontSize: "0.6rem",
           fontWeight: 700,
-          letterSpacing: "0.1em",
+          letterSpacing: "0.14em",
           textTransform: "uppercase",
-          color: "var(--color-text-muted)",
+          color: "var(--color-text-secondary)",
         }}>
-          {region}
+          — {region} —
         </span>
       </td>
     </tr>
@@ -224,6 +223,9 @@ function ParkRow({
         padding: 0,
         borderBottom: "1px solid var(--color-border)",
         borderRight: "1px solid var(--color-border)",
+        borderLeft: isOpen
+          ? `3px solid ${isWeatherDelay ? "var(--color-weather-border)" : isClosing ? "var(--color-closing-border)" : "var(--color-open-border)"}`
+          : "3px solid transparent",
         verticalAlign: "middle",
         background: rowBg,
         transition: "background 120ms ease",
@@ -240,16 +242,6 @@ function ParkRow({
               <span style={{ fontWeight: 500, fontSize: "0.85rem", lineHeight: 1.2, color: "var(--color-text)", whiteSpace: "nowrap" }}>
                 {park.name}
               </span>
-              {isOpen && (
-                <span style={{
-                  width: 7,
-                  height: 7,
-                  borderRadius: "50%",
-                  background: isWeatherDelay ? "var(--color-weather-text)" : isClosing ? "var(--color-closing-text)" : "var(--color-open-text)",
-                  flexShrink: 0,
-                  boxShadow: isWeatherDelay ? "0 0 5px var(--color-weather-text)" : isClosing ? "0 0 5px var(--color-closing-text)" : "0 0 5px var(--color-open-text)",
-                }} />
-              )}
             </div>
             <div style={{ fontSize: "0.7rem", color: "var(--color-text-muted)", marginTop: 2 }}>
               {park.location.city}, {park.location.state}