Kiosk UI/UX overhaul: dark landscape mode with hero countdowns and full-width layout

Redesign the landscape orientation for kiosk readability at 3-10m distance:

- Add dark kiosk background (#1a1a2e) with high-contrast light text
- Replace 2-column grid with 5-row full-width stacking layout
- Add compact weather bar (temp + sunrise/sunset) replacing full widget
- Enlarge countdown to 2em hero size in landscape
- Replace time ranges with next 2-3 absolute departure times
- Add 3-tier urgency colors: Nu (green), 1-2min (red), 3-5min (orange)
- Make site headers full-width blue gradient bars in landscape
- Tighten card spacing (65px min-height, 8px gap) for 4-stop visibility
- Add scrolling news ticker with /api/ticker fallback messages
- Fix daylight bar from position:fixed to relative in landscape grid
- Hide background overlay in landscape for maximum contrast
- Fix weather-section HTML missing closing div tags

All changes scoped behind body.landscape CSS selectors; other orientations unaffected.

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

public/css/main.css

@@ -14,6 +14,8 @@
     --color-text-muted-dark: #aaa;
     --color-urgent: #c41e3a;
     --color-urgent-dark: #ff6b6b;
+    --color-soon: #e67e22;
+    --color-soon-dark: #f39c12;
     --color-now: #00a651;
     --color-now-dark: #4ecdc4;
     --color-border: #ddd;
@@ -27,6 +29,11 @@
     --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1);
     --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.2);
     --gradient-blue: linear-gradient(135deg, #0061a1 0%, #004d80 100%);
+    --kiosk-gap: 8px;
+    --kiosk-countdown-size: 2em;
+    --ticker-height: 36px;
+    --ticker-speed: 30s;
+    --ticker-bg: rgba(0, 0, 0, 0.85);
 }
 
 /* ========================================
@@ -138,17 +145,24 @@ body.normal .departure-container {
 }
 
 /* ========================================
-   Orientation: Landscape
+   Orientation: Landscape (Kiosk Mode)
    ======================================== */
 body.landscape {
     max-width: 100%;
-    padding: 20px 40px;
+    padding: 10px 20px 0 20px;
+    background-color: #1a1a2e;
+    color: var(--color-text-light);
+}
+
+/* Hide background overlay in landscape for maximum contrast */
+body.landscape #background-overlay {
+    display: none !important;
 }
 
 body.landscape #content-wrapper {
     display: grid;
-    grid-template-rows: auto 1fr;
-    gap: 20px;
+    grid-template-rows: auto auto 1fr auto auto;
+    gap: var(--kiosk-gap);
     height: 100vh;
     max-height: 100vh;
     overflow: hidden;
@@ -159,23 +173,32 @@ body.landscape .clock-container {
     margin-bottom: 0;
 }
 
-body.landscape .main-content-grid {
+/* Compact weather bar sits in row 2 */
+body.landscape #compact-weather-bar {
     grid-row: 2;
-    display: grid;
-    grid-template-columns: 1fr 380px;
-    gap: 20px;
+}
+
+body.landscape .main-content-grid {
+    grid-row: 3;
+    display: block;
     overflow: hidden;
     min-height: 0;
 }
 
+/* Hide the full weather widget in landscape */
+body.landscape .weather-section {
+    display: none;
+}
+
 body.landscape .departure-container {
     display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(450px, 1fr));
-    gap: 15px;
+    grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
+    gap: var(--kiosk-gap);
     overflow-y: auto;
     overflow-x: hidden;
-    padding-right: 10px;
+    padding-right: 4px;
     min-height: 0;
+    height: 100%;
 }
 
 body.landscape .weather-container {
@@ -188,12 +211,14 @@ body.landscape .weather-container {
 }
 
 body.landscape .departure-card {
-    min-height: 120px;
+    min-height: 65px;
+    background-color: rgba(255, 255, 255, 0.08);
+    border: 1px solid rgba(255, 255, 255, 0.06);
 }
 
 body.landscape .line-number-box {
-    min-width: 120px;
-    width: 120px;
+    min-width: 90px;
+    width: 90px;
 }
 
 body.landscape .line-number-large {
@@ -201,12 +226,65 @@ body.landscape .line-number-large {
 }
 
 body.landscape .site-container {
-    margin-bottom: 15px;
+    margin-bottom: 6px;
 }
 
 body.landscape .site-header {
     font-size: 1em;
-    padding: 8px 12px;
+    padding: 0;
+    margin-bottom: 6px;
+}
+
+/* News ticker sits in row 4 */
+body.landscape #news-ticker {
+    grid-row: 4;
+}
+
+/* Daylight bar sits in row 5 */
+body.landscape #daylight-hours-bar {
+    grid-row: 5;
+}
+
+/* Dark card surfaces for landscape */
+body.landscape .direction-destination {
+    color: var(--color-text-light);
+}
+
+body.landscape .countdown-large {
+    color: var(--color-text-light);
+}
+
+body.landscape .time-range,
+body.landscape .next-departures {
+    color: #bbb;
+}
+
+/* Tighter card spacing in landscape */
+body.landscape .directions-wrapper {
+    padding: 4px 8px;
+    gap: 2px;
+}
+
+body.landscape .direction-row {
+    min-height: 28px;
+    gap: 6px;
+}
+
+/* Hero countdown in landscape */
+body.landscape .countdown-large {
+    font-size: var(--kiosk-countdown-size);
+}
+
+body.landscape .times-container {
+    min-width: 130px;
+    max-width: 160px;
+}
+
+body.landscape .next-departures {
+    font-size: 0.7em;
+    color: #bbb;
+    white-space: nowrap;
+    letter-spacing: 0.5px;
 }
 
 /* ========================================