Records: month and year records with the period as the headline

- Wettest/driest/hottest/coldest/windiest month and wettest/hottest/coldest/windiest year,
  each naming the period (e.g. 'September 2026') and flagging partial periods
- Average-based records prefer complete periods; counterparts say what they're waiting for
- 'Records by calendar month (any year)' table with the date/year of each record

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

app/public/dashboard-ui.css

@@ -122,3 +122,12 @@ a { color: var(--ui); }
 .chart-ctl select { font: inherit; font-size: 0.76rem; padding: 0.25rem 0.4rem; min-height: 30px; border-radius: 8px; border: 1px solid var(--border); background: var(--paper); color: var(--ink); }
 @media (pointer: coarse) { .chart-ctl select { font-size: 16px; min-height: 40px; } }
 .chart-card .chart-title { flex-wrap: wrap; row-gap: 0.4rem; }
+
+/* Month / year record cards: the period is the headline */
+.record-period { font-size: 0.92rem; font-weight: 800; color: var(--ink); letter-spacing: -0.005em; margin-top: 0.1rem; }
+.rec-sub { text-transform: none; letter-spacing: 0; font-weight: 400; opacity: .75; }
+.rec-cal td { vertical-align: top; line-height: 1.25; }
+.rec-cal td b { display: block; font-variant-numeric: tabular-nums; }
+.rec-yr { display: block; font-size: 0.68rem; color: var(--ink-light); font-weight: 600; white-space: nowrap; }
+
+.rec-cal tr.empty { opacity: .4; }