diff --git a/app/public/dashboard-records.js b/app/public/dashboard-records.js
new file mode 100644
index 0000000..2e78ae6
--- /dev/null
+++ b/app/public/dashboard-records.js
@@ -0,0 +1,217 @@
+/* Records tab: plain-language station records. Reads /api/station/records and /api/station/daily. */
+(() => {
+  const root = document.getElementById('recordsRoot');
+  if (!root) return;
+
+  const esc = (s) => String(s).replace(/[&<>"]/g, (c) => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;' }[c]));
+  const DAY_MS = 86400000;
+  const dayMs = (d) => Date.parse(d + 'T12:00:00Z');
+  const fmtDay = (d) => new Date(dayMs(d)).toLocaleDateString('en-US', { weekday: 'short', month: 'short', day: 'numeric', year: 'numeric', timeZone: 'UTC' });
+  const fmtTime = (ts) => new Date(ts).toLocaleTimeString('en-US', { hour: 'numeric', minute: '2-digit' });
+  const localDayKey = (ts) => new Date(ts).toLocaleDateString('en-CA');
+  const today = () => localDayKey(Date.now());
+  const daysBetween = (d) => Math.round((dayMs(today()) - dayMs(d)) / DAY_MS);
+  const agoText = (d) => {
+    const n = daysBetween(d);
+    if (n <= 0) return 'today';
+    if (n === 1) return 'yesterday';
+    if (n < 14) return n + ' days ago';
+    if (n < 60) return Math.round(n / 7) + ' weeks ago';
+    return Math.round(n / 30.4) + ' months ago';
+  };
+
+  // Plain-English labels for numbers people can't judge on their own
+  const gustLabel = (v) => v < 19 ? 'Breezy' : v < 32 ? 'Windy' : v < 47 ? 'Strong wind' : v < 64 ? 'Gale' : v < 74 ? 'Storm force' : 'Hurricane force';
+  const uvLabel = (v) => v < 3 ? 'Low' : v < 6 ? 'Moderate' : v < 8 ? 'High' : v < 11 ? 'Very high' : 'Extreme';
+  const rateLabel = (v) => v < 0.1 ? 'Light rain' : v < 0.3 ? 'Moderate rain' : v < 2 ? 'Heavy rain' : 'Violent downpour';
+
+  const deg = (v) => v.toFixed(1) + '°F';
+  const inch = (v) => v.toFixed(2) + '"';
+  const mph = (v) => v.toFixed(1) + ' mph';
+
+  // Each record: where it comes from, how to say it, and what it means to someone new to weather data.
+  // field/kind drive the "runner-up" line and "today vs record" line from the per-day table.
+  const RECORDS = [
+    { theme: 'Temperature', icon: '🔥', title: 'Hottest', why: 'The highest air temperature your station has measured.', field: 'hi', kind: 'max', fmt: deg, today: 'high' },
+    { theme: 'Temperature', icon: '🥶', title: 'Coldest', why: 'The lowest air temperature your station has measured.', field: 'lo', kind: 'min', fmt: deg, today: 'low' },
+    { theme: 'Temperature', icon: '🌤', title: 'Coolest daytime high', why: 'The day that never warmed up: its high was the lowest of any day.', field: 'hi', kind: 'min', fmt: deg, day: (r) => r.notable?.coolestHigh },
+    { theme: 'Temperature', icon: '🌙', title: 'Warmest night', why: 'The night that never cooled off: its low was the highest of any day.', field: 'lo', kind: 'max', fmt: deg, day: (r) => r.notable?.warmestLow },
+
+    { theme: 'Rain', icon: '🌧', title: 'Wettest day', why: 'The most rain that fell in a single day (midnight to midnight).', field: 'rain', kind: 'max', fmt: inch, day: (r) => r.notable?.wettestDay, today: 'rain' },
+    { theme: 'Rain', icon: '⛈', title: 'Heaviest downpour', why: 'How fast rain fell at its hardest moment, in inches per hour.', field: 'rate', kind: 'max', fmt: (v) => v.toFixed(2) + ' in/hr', tag: rateLabel, val: (r) => r.highRainRate, ts: (r) => r.highRainRateDate },
+
+    { theme: 'Wind', icon: '💨', title: 'Strongest gust', why: 'The fastest short burst of wind. Gusts last only a few seconds.', field: 'gust', kind: 'max', fmt: mph, tag: gustLabel, val: (r) => r.highGust, ts: (r) => r.highGustDate, today: 'gust' },
+
+    { theme: 'Sun', icon: '☀️', title: 'Strongest sunshine', why: 'Peak sunlight power. Around 1,000 W/m² is about the most you get on a clear summer day.', field: 'solar', kind: 'max', fmt: (v) => Math.round(v).toLocaleString() + ' W/m²', val: (r) => r.highSolar, ts: (r) => r.highSolarDate },
+    { theme: 'Sun', icon: '🧴', title: 'Highest UV index', why: 'How strong the sun\'s burning rays were. 3 and up is when sunscreen starts to matter.', field: 'uv', kind: 'max', fmt: (v) => String(Math.round(v)), tag: uvLabel, val: (r) => r.highUV, ts: (r) => r.highUVDate },
+
+    { theme: 'Air pressure', icon: '📈', title: 'Highest pressure', why: 'High pressure usually means calm, clear weather.', field: 'pmax', kind: 'max', fmt: (v) => v.toFixed(2) + ' inHg', val: (r) => r.highPressure, ts: (r) => r.highPressureDate },
+    { theme: 'Air pressure', icon: '📉', title: 'Lowest pressure', why: 'Low pressure usually comes with storms and rain. The lower it goes, the stronger the storm.', field: 'pmin', kind: 'min', fmt: (v) => v.toFixed(2) + ' inHg', val: (r) => r.lowPressure, ts: (r) => r.lowPressureDate },
+
+    { theme: 'Humidity', icon: '💧', title: 'Most humid', why: 'How much moisture was in the air. 100% means the air can\'t hold any more (fog, dew, or a muggy day).', field: 'hmax', kind: 'max', fmt: (v) => Math.round(v) + '%', val: (r) => r.highHumidity, ts: (r) => r.highHumidityDate },
+    { theme: 'Humidity', icon: '🏜', title: 'Driest air', why: 'The lowest moisture in the air. Under 30% feels dry: static shocks and dry skin.', field: 'hmin', kind: 'min', fmt: (v) => Math.round(v) + '%', val: (r) => r.lowHumidity, ts: (r) => r.lowHumidityDate },
+  ];
+
+  // Resolve a record definition to concrete numbers/dates (or null when the station hasn't measured it yet)
+  function resolve(def, r) {
+    if (def.day) {
+      const o = def.day(r);
+      return o ? { value: o.value, day: o.day, ts: null } : null;
+    }
+    const value = def.val ? def.val(r) : (def.field === 'hi' ? r.highTemp : def.field === 'lo' ? r.lowTemp : null);
+    const ts = def.ts ? def.ts(r) : (def.field === 'hi' ? r.highTempDate : r.lowTempDate);
+    if (value == null || !ts) return null;
+    return { value, ts, day: localDayKey(ts) };
+  }
+
+  function runnersUp(def, daily, bestDay) {
+    const rows = daily.filter((d) => d[def.field] != null && d.d !== bestDay);
+    rows.sort((a, b) => (def.kind === 'max' ? b[def.field] - a[def.field] : a[def.field] - b[def.field]));
+    return rows.slice(0, 2);
+  }
+
+  function todayLine(def, rec, daily) {
+    if (!def.today || !daily.length) return '';
+    const row = daily[daily.length - 1];
+    if (row.d !== today()) return '';
+    const key = { high: 'hi', low: 'lo', rain: 'rain', gust: 'gust' }[def.today];
+    const v = row[key];
+    if (v == null) return '';
+    const diff = Math.abs(rec.value - v);
+    const gap = def.fmt === deg ? diff.toFixed(1) + '°' : def.fmt === inch ? diff.toFixed(2) + '"' : diff.toFixed(1) + ' mph';
+    const beyond = def.kind === 'max' ? v >= rec.value : v <= rec.value;
+    const where = beyond ? 'at the record' : (def.kind === 'max' ? gap + ' below the record' : gap + ' above the record');
+    const label = { high: 'Today\'s high so far', low: 'Today\'s low so far', rain: 'Rain so far today', gust: 'Today\'s strongest gust' }[def.today];
+    return `<div class="rc-today">${label}: <b>${def.fmt(v)}</b> · ${where}</div>`;
+  }
+
+  function card(def, r, daily) {
+    const rec = resolve(def, r);
+    if (!rec) return null;
+    const isNew = daysBetween(rec.day) <= 14;
+    const when = rec.ts && def.field !== 'rain'
+      ? `${fmtDay(rec.day)} at ${fmtTime(rec.ts)}`
+      : fmtDay(rec.day);
+    const ru = runnersUp(def, daily, rec.day);
+    const ruLine = ru.length
+      ? `<div class="rc-next">Next closest: ${ru.map((x) => `${def.fmt(x[def.field])} <span>(${new Date(dayMs(x.d)).toLocaleDateString('en-US', { month: 'short', day: 'numeric', timeZone: 'UTC' })})</span>`).join(' · ')}</div>`
+      : '';
+    return `<div class="rc${isNew ? ' rc-new' : ''}">
+      <div class="rc-top"><span class="rc-ico" aria-hidden="true">${def.icon}</span><span class="rc-title">${def.title}</span>${isNew ? '<span class="rc-badge">NEW</span>' : ''}</div>
+      <div class="rc-val">${def.fmt(rec.value)}${def.tag ? `<span class="rc-tag">${def.tag(rec.value)}</span>` : ''}</div>
+      <div class="rc-when">${when}<span> · ${agoText(rec.day)}</span></div>
+      <div class="rc-why">${def.why}</div>
+      ${todayLine(def, rec, daily)}${ruLine}
+    </div>`;
+  }
+
+  function monthStrip(r) {
+    const have = new Set((r.months || []).map((m) => +m.month.slice(5, 7)));
+    const names = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
+    return `<div class="rc-months" role="img" aria-label="Months with recorded data">${names.map((n, i) => `<span class="${have.has(i + 1) ? 'on' : ''}">${n}</span>`).join('')}</div>`;
+  }
+
+  function intro(r) {
+    const missing = 12 - new Set((r.months || []).map((m) => +m.month.slice(5, 7))).size;
+    return `<div class="rec-intro">
+      <h2>Your station's records</h2>
+      <p><b>A record is the most extreme weather your station has measured.</b> Your station has been recording for <b>${r.daysRecorded} days</b> (since ${fmtDay(r.firstDay)}), so these are records <i>so far</i>. They will change as the seasons go by.</p>
+      ${monthStrip(r)}
+      <p class="rec-note">${missing > 0 ? `Highlighted months have data. The other ${missing} will fill in over time, so winter cold and summer heat records are not final until your station has been through those seasons. ` : ''}A <span class="rc-badge">NEW</span> badge means the record was set in the last 14 days.</p>
+    </div>`;
+  }
+
+  function monthTable(r) {
+    const months = r.months || [];
+    if (!months.length) return '';
+    const P = r.periods?.months || {};
+    const chips = {};
+    if (months.length >= 2) {
+      const add = (rec, chip) => { if (rec) (chips[rec.key] = chips[rec.key] || []).push(chip); };
+      add(P.hottest, '🔥 hottest month'); add(P.coldest, '❄️ coldest month');
+      add(P.wettest, '🌧 wettest month'); add(P.driest, '🏜 driest month');
+    }
+    const lo = Math.min(...months.map((m) => m.lo).filter((v) => v != null));
+    const hi = Math.max(...months.map((m) => m.hi).filter((v) => v != null));
+    const maxRain = Math.max(0.01, ...months.map((m) => m.rain));
+    const span = Math.max(1, hi - lo);
+    const dim = (ym) => new Date(+ym.slice(0, 4), +ym.slice(5, 7), 0).getDate();
+    const longMonth = (m) => new Date(m + '-15T12:00:00Z').toLocaleDateString('en-US', { month: 'long', year: 'numeric', timeZone: 'UTC' });
+    const LIMIT = 12;
+    const rows = [...months].reverse().map((m, idx) => {
+      const total = dim(m.month), partial = m.days < total * 0.9;
+      const left = m.lo != null ? ((m.lo - lo) / span) * 100 : 0;
+      const width = m.lo != null && m.hi != null ? Math.max(3, ((m.hi - m.lo) / span) * 100) : 0;
+      return `<tr${idx >= LIMIT ? ' class="rec-extra" hidden' : ''}>
+        <td><b>${longMonth(m.month)}</b>${(chips[m.month] || []).map((c) => `<span class="rec-chip">${c}</span>`).join('')}${partial ? `<span class="rec-yr">${m.days} of ${total} days so far</span>` : ''}</td>
+        <td>${m.avg != null ? m.avg.toFixed(1) + '°F' : '—'}</td>
+        <td class="rec-rng"><span>${m.lo != null ? Math.round(m.lo) : '—'}° to ${m.hi != null ? Math.round(m.hi) : '—'}°</span><i class="rec-track"><i style="left:${left.toFixed(1)}%;width:${width.toFixed(1)}%"></i></i></td>
+        <td class="rec-rain"><span>${m.rain.toFixed(2)}"</span><i class="rec-track r"><i style="width:${((m.rain / maxRain) * 100).toFixed(1)}%"></i></i></td>
+        <td>${m.gust != null ? Math.round(m.gust) + ' mph' : '—'}</td></tr>`;
+    }).join('');
+    return `<h3 class="rec-h2">Month by month</h3>
+      <p class="rec-sub2">How each month compared. The temperature bar shows the coldest to hottest reading that month, on one shared scale.</p>
+      <div class="rec-scroll"><table class="rec-table2"><thead><tr><th>Month</th><th>Average temp</th><th>Coldest to hottest</th><th>Total rain</th><th>Strongest gust</th></tr></thead><tbody>${rows}</tbody></table></div>${months.length > LIMIT ? `<button type="button" class="rec-more" data-more="month">Show all ${months.length} months</button>` : ''}`;
+  }
+
+  function yearBlock(r) {
+    const years = r.years || [];
+    if (!years.length) return '';
+    if (years.length === 1) {
+      const y = years[0];
+      return `<h3 class="rec-h2">${y.year} so far</h3>
+        <p class="rec-sub2">${y.days} days recorded: hottest <b>${y.hi != null ? deg(y.hi) : '—'}</b>, coldest <b>${y.lo != null ? deg(y.lo) : '—'}</b>, <b>${y.rain.toFixed(2)}"</b> of rain, strongest gust <b>${y.gust != null ? Math.round(y.gust) + ' mph' : '—'}</b>. Year-against-year comparisons appear once there is a second year of data.</p>`;
+    }
+    const rows = [...years].reverse().map((y) => `<tr><td><b>${y.year}</b><span class="rec-yr">${y.days} days</span></td><td>${y.avg != null ? y.avg.toFixed(1) + '°F' : '—'}</td><td>${y.hi != null ? deg(y.hi) : '—'}</td><td>${y.lo != null ? deg(y.lo) : '—'}</td><td>${y.rain.toFixed(2)}"</td><td>${y.gust != null ? Math.round(y.gust) + ' mph' : '—'}</td></tr>`).join('');
+    return `<h3 class="rec-h2">Year by year</h3><div class="rec-scroll"><table class="rec-table2"><thead><tr><th>Year</th><th>Average temp</th><th>Hottest</th><th>Coldest</th><th>Total rain</th><th>Strongest gust</th></tr></thead><tbody>${rows}</tbody></table></div>`;
+  }
+
+  // Only meaningful once a calendar month has been seen in more than one year
+  function sameMonthTable(r) {
+    const cm = (r.calendarMonths || []).map((c, i) => ({ c, i })).filter((x) => x.c.years > 1);
+    if (!cm.length) return '';
+    const mn = (i) => new Date(Date.UTC(2001, i, 15)).toLocaleDateString('en-US', { month: 'long', timeZone: 'UTC' });
+    const cell = (x, f) => x ? `<b>${f(x.value)}</b><span class="rec-yr">${fmtDay(x.day)}</span>` : '—';
+    const rows = cm.map(({ c, i }) => `<tr><td><b>${mn(i)}</b><span class="rec-yr">${c.years} years of data</span></td><td>${cell(c.hi, deg)}</td><td>${cell(c.lo, deg)}</td><td>${cell(c.wettestDay, inch)}</td><td>${cell(c.gust, mph)}</td></tr>`).join('');
+    return `<h3 class="rec-h2">Records for each month of the year</h3>
+      <p class="rec-sub2">The most extreme day for each calendar month, from any year. For example, the hottest July ever recorded.</p>
+      <div class="rec-scroll"><table class="rec-table2"><thead><tr><th>Month</th><th>Hottest day</th><th>Coldest</th><th>Wettest day</th><th>Strongest gust</th></tr></thead><tbody>${rows}</tbody></table></div>`;
+  }
+
+  async function load() {
+    try {
+      const [rr, dr] = await Promise.all([fetch('/api/station/records'), fetch('/api/station/daily').catch(() => null)]);
+      if (!rr.ok) { root.innerHTML = '<div class="status">No records yet.</div>'; return; }
+      const r = await rr.json();
+      if (!r) { root.innerHTML = '<div class="status">No data recorded yet.</div>'; return; }
+      let daily = [];
+      try { if (dr && dr.ok) daily = await dr.json(); } catch {}
+
+      const themes = [...new Set(RECORDS.map((d) => d.theme))];
+      const empty = [];
+      const groups = themes.map((t) => {
+        const cards = RECORDS.filter((d) => d.theme === t).map((d) => {
+          const html = card(d, r, daily);
+          if (!html) empty.push(d.title);
+          return html;
+        }).filter(Boolean);
+        return cards.length ? `<h3 class="rec-h2">${t}</h3><div class="rc-grid">${cards.join('')}</div>` : '';
+      }).join('');
+
+      root.innerHTML = intro(r) + groups
+        + (empty.length ? `<p class="rec-note">Not measured yet: ${empty.join(', ')}. These show up once the station records something for them.</p>` : '')
+        + monthTable(r) + yearBlock(r) + sameMonthTable(r)
+        + `<div class="rec-actions"><a href="/api/station/backup.jsonl" download>⬇ Download all readings</a><a href="/api/station/records-backup.json" download>⬇ Download records</a></div>`;
+      root.querySelectorAll('.rec-more').forEach((b) => b.addEventListener('click', () => {
+        const open = b.dataset.open !== '1';
+        b.dataset.open = open ? '1' : '';
+        root.querySelectorAll('.rec-extra').forEach((tr) => { tr.hidden = !open; });
+        b.textContent = open ? 'Show fewer months' : b.dataset.label;
+      }));
+      root.querySelectorAll('.rec-more').forEach((b) => { b.dataset.label = b.textContent; });
+    } catch {
+      root.innerHTML = '<div class="status error">Failed to load records.</div>';
+    }
+  }
+  load();
+})();
diff --git a/app/public/dashboard-ui.css b/app/public/dashboard-ui.css
index b6023f9..76f3b0e 100644
--- a/app/public/dashboard-ui.css
+++ b/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; }
diff --git a/app/public/dashboard.html b/app/public/dashboard.html
index 558626b..54327be 100644
--- a/app/public/dashboard.html
+++ b/app/public/dashboard.html
@@ -574,21 +574,8 @@ input, select, textarea { font-size: 16px; } /* stops iOS zooming in on focus */
   <div class="tab-pane" data-pane="rain" id="rainTab"><div class="status">Loading rain…</div></div>
 
   <div class="tab-pane" data-pane="records">
-  <!-- Records -->
-  <details class="settings-panel" id="recordsPanel" style="margin-top:1.5rem">
-    <summary>All-Time Station Records</summary>
-    <div class="settings-body" id="recordsBody">
-      <div class="status">Loading records…</div>
-    </div>
-  </details>
-
-  <!-- Monthly Summary -->
-  <details class="settings-panel" id="monthlyPanel" style="margin-top:1rem">
-    <summary>Monthly Summary</summary>
-    <div class="settings-body" id="monthlyBody">
-      <div class="status">Loading…</div>
-    </div>
-  </details>
+  <!-- Records (rendered by dashboard-records.js) -->
+  <div id="recordsRoot" class="rec2"><div class="status">Loading records…</div></div>
 
   <div id="calendarCard" class="section-card" style="margin-top:1rem"><div class="status">Loading calendar…</div></div>
 
@@ -1814,5 +1801,6 @@ setInterval(updateTrends, 120000);
 setInterval(loadAlerts, 5 * 60 * 1000);
 </script>
 <script src="/dashboard-ui.js"></script>
+<script src="/dashboard-records.js"></script>
 </body>
 </html>