Dashboard Records tab: plain-language records

Replaces the collapsed panel of look-alike cards with a guided view: an intro explaining what a record is
(and that records are 'so far' with a 12-month coverage strip), cards grouped by theme with a plain
explanation, date/time, how long ago, descriptors (gust/UV/rain intensity), today-vs-record and
next-closest days, NEW badges for records set in the last 14 days, one month-by-month table with
temperature-range and rain bars (latest 12, show all), and year / same-month tables only when
there is more than a year of data. Removes duplicate cards and the redundant Monthly Summary panel.

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

app/public/dashboard-ui.css

@@ -155,3 +155,54 @@ a { color: var(--ui); }
 /* Performance on phones: blur only the two big fixed bars, lightly */
 .logout, .range-btn, .refresh-btn, .chart-card, .stat, .today-bar { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
 .header, .tabbar { -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
+
+/* ── Records tab (plain-language) ── */
+.rec2 { max-width: 1100px; margin: 0 auto; }
+.rec-intro { background: var(--paper-dark); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.1rem 1.2rem; margin-top: 1rem; }
+.rec-intro h2 { font-size: 1.15rem; margin-bottom: 0.45rem; }
+.rec-intro p { font-size: 0.9rem; line-height: 1.55; color: var(--ink-mid); }
+.rec-note { font-size: 0.8rem !important; color: var(--ink-light) !important; margin-top: 0.7rem; line-height: 1.5; }
+.rec2 > .rec-note { margin: 0.9rem 0.2rem 0; }
+.rc-months { display: grid; grid-template-columns: repeat(12, 1fr); gap: 4px; margin-top: 0.85rem; }
+.rc-months span { text-align: center; font-size: 0.68rem; font-weight: 600; padding: 0.3rem 0; border-radius: 6px; background: var(--paper-darker); color: var(--ink-light); opacity: 0.55; }
+.rc-months span.on { background: var(--accent); color: #fff; opacity: 1; }
+.rec-h2 { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-light); margin: 1.6rem 0.2rem 0.6rem; }
+.rec-sub2 { font-size: 0.85rem; line-height: 1.55; color: var(--ink-mid); margin: -0.2rem 0.2rem 0.7rem; }
+.rc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 0.75rem; }
+.rc { background: var(--paper-dark); border: 1px solid var(--border); border-radius: var(--radius); padding: 0.95rem 1.05rem; display: flex; flex-direction: column; gap: 0.3rem; min-width: 0; }
+.rc-new { border-color: #d4a017; box-shadow: 0 0 0 1px #d4a01766; }
+.rc-top { display: flex; align-items: center; gap: 0.5rem; }
+.rc-ico { font-size: 1.15rem; line-height: 1; }
+.rc-title { font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-mid); }
+.rc-badge { font-size: 0.62rem; font-weight: 800; letter-spacing: 0.08em; padding: 0.12rem 0.4rem; border-radius: 999px; background: #d4a017; color: #1b1400; }
+.rc-top .rc-badge { margin-left: auto; }
+.rc-val { font-size: 1.9rem; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.2rem 0.6rem; }
+.rc-tag { font-size: 0.74rem; font-weight: 700; padding: 0.15rem 0.5rem; border-radius: 999px; background: var(--paper-darker); color: var(--ink-mid); }
+.rc-when { font-size: 0.82rem; font-weight: 600; color: var(--ink); }
+.rc-when span { font-weight: 400; color: var(--ink-light); }
+.rc-why { font-size: 0.8rem; line-height: 1.5; color: var(--ink-light); }
+.rc-today, .rc-next { font-size: 0.78rem; color: var(--ink-mid); padding-top: 0.45rem; margin-top: 0.15rem; border-top: 1px dashed var(--border); }
+.rc-next { border-top: none; padding-top: 0; margin-top: 0; color: var(--ink-light); }
+.rc-next span { opacity: 0.8; }
+.rec-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; background: var(--paper-dark); border: 1px solid var(--border); border-radius: var(--radius); }
+.rec-table2 { width: 100%; border-collapse: collapse; font-size: 0.86rem; }
+.rec-table2 th, .rec-table2 td { text-align: left; padding: 0.7rem 0.9rem; border-bottom: 1px solid var(--border); vertical-align: middle; }
+.rec-table2 tr:last-child td { border-bottom: none; }
+.rec-table2 th { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-light); font-weight: 700; white-space: nowrap; }
+.rec-table2 td { font-variant-numeric: tabular-nums; }
+.rec-table2 td:first-child { min-width: 9.5rem; }
+.rec-table2 .rec-yr { display: block; font-size: 0.72rem; color: var(--ink-light); font-weight: 400; margin-top: 0.15rem; }
+.rec-chip { display: inline-block; margin: 0.25rem 0.3rem 0 0; font-size: 0.68rem; font-weight: 600; padding: 0.12rem 0.5rem; border-radius: 999px; background: var(--paper-darker); color: var(--ink-mid); white-space: nowrap; }
+.rec-rng, .rec-rain { min-width: 9rem; }
+.rec-rng > span, .rec-rain > span { display: block; margin-bottom: 0.35rem; }
+.rec-track { display: block; position: relative; height: 7px; border-radius: 99px; background: var(--paper-darker); }
+.rec-track > i { position: absolute; top: 0; bottom: 0; border-radius: 99px; background: linear-gradient(90deg, var(--cool), var(--accent)); }
+.rec-track.r > i { left: 0; background: var(--cool); }
+@media (max-width: 640px) {
+  .rc-grid { grid-template-columns: 1fr; }
+  .rc-val { font-size: 1.7rem; }
+  .rec-table2 th, .rec-table2 td { padding: 0.6rem 0.65rem; }
+}
+
+.rec-extra[hidden] { display: none; }
+.rec-more { display: block; margin: 0.7rem auto 0; min-height: 40px; padding: 0 1.1rem; border: 1px solid var(--border); border-radius: 999px; background: var(--paper-dark); color: var(--ink); font: inherit; font-size: 0.82rem; font-weight: 600; cursor: pointer; }