Redesign layout: 3-per-row 2-row grid, 6 days, bigger fonts

- Show 6 days in a 3x2 grid (3 columns, 2 rows) with info panel
  spanning the full right column
- Day columns explicitly grid-placed to prevent auto-flow into panel column
- Larger fonts throughout: event cards 14px, day number 26px, clock 52px

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

static/js/app.js

@@ -157,6 +157,12 @@ function eventCardHTML(event) {
     `;
 }
 
+// Grid positions for 6 days arranged 3-per-row, info panel in col 4 spanning both rows
+const DAY_GRID_POSITIONS = [
+    {col: 1, row: 1}, {col: 2, row: 1}, {col: 3, row: 1},
+    {col: 1, row: 2}, {col: 2, row: 2}, {col: 3, row: 2},
+];
+
 function renderDays(data) {
     const grid = document.getElementById('week-grid');
     grid.innerHTML = '';
@@ -164,12 +170,15 @@ function renderDays(data) {
     const todayISO = toISODate(new Date());
     const now = new Date();
 
-    data.days.forEach(day => {
+    data.days.forEach((day, i) => {
         const dayDate = new Date(day.date + 'T00:00:00');
         const events = filterEvents(day.events);
+        const pos = DAY_GRID_POSITIONS[i];
 
         const column = document.createElement('div');
         column.className = 'day-column' + (day.date === todayISO ? ' is-today' : '');
+        column.style.gridColumn = pos.col;
+        column.style.gridRow = pos.row;
         column.innerHTML = `
             <div class="day-header">
                 <div class="day-name">${DAY_LABELS[dayDate.getDay()]}</div>
@@ -188,6 +197,8 @@ function renderDays(data) {
     const minutes = String(now.getMinutes()).padStart(2, '0');
     const panel = document.createElement('div');
     panel.className = 'info-panel';
+    panel.style.gridColumn = '4';
+    panel.style.gridRow = '1 / 3';
     panel.innerHTML = `
         <div id="info-clock" class="info-clock">${hours}:${minutes}</div>
         <div class="info-weekday">${DAY_LABELS[now.getDay()]}</div>