diff --git a/static/style.css b/static/style.css
index 1598ff7..e1cc59b 100644
--- a/static/style.css
+++ b/static/style.css
@@ -1520,6 +1520,14 @@ td.rec-date { color: var(--muted); font-size: 13px; }
 /* The date each record occurred, folded under its value so the month/season tables
    stay 3 columns and fit a phone without horizontal scroll. */
 .rec-on { display: block; font-size: 11px; font-weight: 400; color: var(--muted); margin-top: 1px; }
+/* Month/season records: each metric cell carries two extremes — ▲ warmest and
+   ▼ coldest it has ever been — as tinted chips, each with the date it occurred. */
+.rec-ext { margin: 4px 0; }
+.rec-arrow { display: inline-block; width: 12px; font-size: 10px; }
+.rec-arrow.up { color: var(--very-hot); }
+.rec-arrow.down { color: var(--very-cold); }
+.records-ext .t-inline { font-weight: 700; }
+.records-ext .rec-on { margin: 1px 0 2px 12px; font-size: 10.5px; }
 .t-rec-cold  { background: color-mix(in srgb, var(--rec-cold) 26%, var(--surface)); }
 .t-very-cold { background: color-mix(in srgb, var(--very-cold) 26%, var(--surface)); }
 .t-cold      { background: color-mix(in srgb, var(--cold) 28%, var(--surface)); }