From efd43dcbb5fbd4b65fb9d22c6637e43cef8c7437 Mon Sep 17 00:00:00 2001
From: Emi Griffith <emerytgriffith@gmail.com>
Date: Sat, 11 Jul 2026 12:04:30 -0700
Subject: [PATCH] Center the metric selectors and category-totals strip on
 desktop (#38)

- Calendar: the 'Color the calendar by' selector shrinks to its tabs and sits
  centered over the month grid beyond phone widths (scoped under .metric-block
  so the Compare basis toggle keeps filling its param cell).
- Calendar: the category-totals strip widens to 960px and centers in the
  content column.
- Weekly: the chart metric switch likewise shrinks to its tabs and centers
  over the trend chart. Phone layouts (full-width 4-per-row toggles) are
  untouched.
---
 static/style.css | 14 +++++++++++++-
 1 file changed, 13 insertions(+), 1 deletion(-)

diff --git a/static/style.css b/static/style.css
index f2584e3..2ddc7df 100644
--- a/static/style.css
+++ b/static/style.css
@@ -209,6 +209,11 @@ main { max-width: 1200px; margin: 0 auto; padding: 20px 24px 60px; }
   cursor: pointer; font-size: 13.5px; font-weight: 600; min-height: 40px;
 }
 .chart-toggle button + button { border-left: 1px solid var(--border); }
+/* Beyond phones the switch shrinks to its tabs and sits centered over the chart
+   (phones keep the full-width 4-per-row grid from the 640px rules). */
+@media (min-width: 641px) {
+  .chart-toggle { width: fit-content; margin-left: auto; margin-right: auto; }
+}
 .chart-toggle button.active[data-metric="tmax"] { background: var(--very-hot); color: #1a1206; }
 .chart-toggle button.active[data-metric="tmin"] { background: var(--cold); color: #10222f; }
 .chart-toggle button.active[data-metric="feels"] { background: var(--accent); color: #1a1206; }
@@ -323,6 +328,13 @@ main { max-width: 1200px; margin: 0 auto; padding: 20px 24px 60px; }
 /* Metric selector block — sits below the time filters, labeling the grid it colors. */
 .metric-block { margin: 0 0 18px; }
 .metric-block .cal-filter-label { display: block; margin: 0 0 8px; }
+/* Beyond phones the selector shrinks to its tabs and sits centered over the
+   month grid (scoped under .metric-block — the Compare page's basis toggle
+   shares .metric-toggle and must keep filling its param cell). */
+@media (min-width: 641px) {
+  .metric-block { display: flex; flex-direction: column; align-items: center; }
+  .metric-block .cal-filter-label { text-align: center; }
+}
 
 /* Month/year range picker (calendar). 16px inputs avoid iOS zoom-on-focus. */
 .cal-range { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; }
@@ -833,7 +845,7 @@ main { max-width: 1200px; margin: 0 auto; padding: 20px 24px 60px; }
    "Show count" is ticked, in that category's own status color) above a thin status-
    colored line rising from a shared baseline (height ∝ share). Every category draws
    a line — including the neutral "Normal" center of the temperature scale. */
-.cal-totals { max-width: 720px; margin: 0 0 18px; }
+.cal-totals { max-width: 960px; margin: 0 auto 18px; }
 /* Header row: the "N days shown — by X" title, with the share/count toggle at the
    far end. Wraps to its own line on narrow screens rather than crushing the title. */
 .ct-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px 16px; flex-wrap: wrap; }