日期框换成自控输入（原生 date 会吞位）+ 气温图桌面端铺满 + 同行卡片不再被拉伸

三件事都由用户实测反馈，前两件先复现再动手。

一、日期框：敲 20260606 变成 202606/06（用户要「永远解决」）
- **实测复现**：写了个真实按键工具（CDP Input.dispatchKeyEvent 每字符带 text；
  技能里的 `--press` 只给 Enter 带 text，数字敲不进去）。在 /stats 的「起始日期」上敲 20260606：
  敲之前 `INPUT|date|`、attached=false；敲完显示 `202606/06`、`el.value` 是**空**（非法）—— 截图为证。
- **根因**：筛选区的起止日期是原生 `<input type="date">`，而挂载代码只写了
  `querySelectorAll('input[type=datetime-local]')` ⇒ **type=date 从没人管**。
  Chrome 的年段允许超过 4 位数字（年份上限 275760），8 位被切成 年=202606 + 月=06。
  原生分段状态读不到、`setSelectionRange` 对 date 类输入直接抛 ⇒ 修不了，只能换控件
  （用户也说了「如果当前控件无法实现就换别的」）。
- **做法**：`datetime-input.js` 加「只日期」模式（`SPEC.date`：年/月/日三段，输出 `Y-m-d`），
  并提供**统一入口 `attachAll(root)`** 按 `el.type` 分派；`attach` 里先把控件换成 `text`
  （引导会写 `2026-06-` 这种半成品，而原生控件对非法值一律置空）。
  `datetime-input.js` 改为**无条件引入**（公共页筛选区也要用；flatpickr 仍按需加载 ——
  没有它时只挂输入引导、不给日历，省 60 多 KB），挂载在 body 末尾**立刻**跑一次
  （别只等 DOMContentLoaded，否则会先露出原生框再变文本框）。三个后台页改用 `attachAll`，
  顺带覆盖行程筛选的 `mfrom/mto`（date 类走 `enableTime:false`，实测无时间选择器）。
- **验证**：真实按键敲 20260606 → `value="2026-06-06"`；端到端 `from=2025-08-01&to=2025-08-31`
  筛出 **186 次**，与月度图峰值月（186）完全吻合（排除「解析成空导致恒 0」）。
  门禁 `TestDateInputsGoThroughAttachAll`：模板里再出现按 type 挑的选择器即红（做过变异验证）；
  JS 单测补 11 条逐键模拟（45/45）。

二、逐月平均气温图在桌面端很小
- 量出来的：10 个月固定 36px 宽，只占 1042px 里的 **396px**，右边 600 多像素全空。
- 窄屏保持「固定 36px + 横滚」（挤在一起月份标签会糊），宽屏改 `flex: 1 1 36px; max-width: 96px`
  并把轨道从 84px 加到 130px、字号提到 `--fs-sm`。

三、类型分布与一天中的分布同行高度不齐
- grid 默认 `align-items: stretch`，把 256px 的「一天中的分布」拉到与 1411px 的「类型分布」一样高，
  卡片内部留一大片空白。改成 `.grid { align-items: start }`。

回归：./scripts/verify.sh **PASS=349 FAIL=0 SKIP=0**；移动端 390 / 桌面 1440 溢出与改前一致。

⚠️ 两个验证纪律（都写进 details 三十二）：
- 验收跑着的时候别并发跑测试/变异实验（两次踩到，其中一次变异正好被验收抓到，那轮结果作废）。
- **变异验证「内嵌文件」（templates/static）之后必须 `go clean -cache`**：`//go:embed` 的内容
  在「改坏→还原」后，构建缓存会继续给出变异期间编译的那份 —— 实测同一个测试
  `go test ./internal/web/` 绿、`go test ./...` 红，`go clean -testcache` 不管用。

internal/web/static/css/app.css

@@ -244,7 +244,10 @@ b, strong { font-weight: 600; }
   font: inherit; font-size: var(--glyph-xs); line-height: 1;
 }
 .card[data-card] > h2 .card-toggle:hover { color: var(--text); }
-.grid { display: grid; gap: 16px; }
+/* align-items: start 是必须的：grid 默认 stretch，同一行里内容少的那张卡会被拉到与
+   最高的一样高，卡片内部留一大片空白（/stats 的「类型分布」60 多行 vs「一天中的分布」
+   24 根柱就是这么来的）。改成各按自然高度，短的那张下面露的是页面底色，而不是空白卡面。 */
+.grid { display: grid; gap: 16px; align-items: start; }
 /* grid 子项默认 min-width:auto（= 不小于自身 min-content），而卡片里常常放着
    带 min-width 的表格——不加这条，卡片会拒绝收缩、把**整页**顶宽，出现横向滚动条
    （/stats、/report 在手机上整页 692px 就是这么来的）。压到 0 之后由卡片内部的
@@ -355,6 +358,14 @@ a.col:hover { opacity: 1; filter: brightness(1.12); }
 /* 横向可滚动：柱子固定宽，十几二十个月挤在窄屏上也不会把标签压成一团 */
 .temp-strip { display: flex; gap: 4px; overflow-x: auto; padding-bottom: 4px; }
 .temp-col { flex: 0 0 36px; display: flex; flex-direction: column; align-items: center; gap: 3px; cursor: default; }
+/* 宽屏反过来：柱子要跟着卡片长、轨道也要加高。原来固定 36×84，10 个月只占 1042px 里的
+   396px —— 右边 600 多像素全空着，整张图看着就「很小」。上限 96px 是防止只有两三个月时
+   柱子宽得不像柱状图。 */
+@media (min-width: 720px) {
+  .temp-col { flex: 1 1 36px; max-width: 96px; }
+  .temp-col .tc-track { height: 130px; }
+  .temp-col .tc-v, .temp-col .tc-m { font-size: var(--fs-sm); }
+}
 .temp-col .tc-v { font-size: var(--fs-xs); color: var(--text-2); font-variant-numeric: tabular-nums; }
 .temp-col .tc-track { width: 100%; height: 84px; display: flex; align-items: flex-end; }
 .temp-col .tc-bar { width: 100%; border-radius: var(--r-xs) var(--r-xs) 0 0; min-height: 3px; }