Add optional query statistics

Off by default (stats in jarl.yaml). When enabled, Jarl adds a loopback
statistics channel and a response log to named's configuration (merged
into existing logging/statistics-channels statements) and switches
response logging with rndc responselog, because the responselog option
only counts when named starts. jarld polls named's counters every minute
and tails the response log (resuming after restarts and across
rotation). It stores aggregates, never individual queries, in a separate
SQLite database: per-minute, hourly and daily counters (queries, result
codes, record types, views, zones, cache hits, upstream latency, DNSSEC)
and hourly/daily top lists (names, clients, NXDOMAIN and SERVFAIL names,
refused clients), each with its own retention. Clients can be anonymized
or excluded.

- Web UI: Statistics page with KPI tiles, queries and failed answers over
  time, a weekday x hour heatmap, top lists and breakdowns; SVG charts
  with hover/keyboard readouts, a table view and light/dark palettes
  validated for colour-vision deficiency.
- CLI: jarl stats status|summary|top|timeline|heatmap|breakdown.
- API: /api/v1/stats/*, behind a new "stats" permission resource.
- jarld brings named's configuration up to date with jarl.yaml at
  startup (engine.SyncConfig), never overwriting hand-edited files.
- resync now refuses to overwrite drifted files without force, as
  documented.
- tmpfiles.d creates /var/log/named (allowed by named's AppArmor profile
  on Debian 13 and Ubuntu).
- The e2e harness runs named with -f like the Debian unit.
- docs/stats.md, plus API, CLI, configuration, permissions and README
  updates.

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

internal/web/static/assets/style.css

@@ -232,3 +232,114 @@ button:disabled { opacity: 0.5; cursor: not-allowed; }
   .form-grid .help { grid-column: 1; }
   header.top form.search input { width: 140px; }
 }
+
+/* ---- Statistics charts. Colors from the validated reference palette
+   (categorical slots 1-3, sequential blue), checked against this UI's
+   panel surfaces in both themes. */
+:root {
+  --series-1: #2a78d6;
+  --series-2: #eb6834;
+  --series-3: #1baf7a;
+  --chart-grid: #eceef2;
+  --chart-axis: #c9cfd8;
+  /* Sequential ramp, low to high (blue 100 -> 700). */
+  --heat-0: #cde2fb; --heat-1: #9ec5f4; --heat-2: #6da7ec; --heat-3: #3987e5;
+  --heat-4: #256abf; --heat-5: #184f95; --heat-6: #0d366b;
+}
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme="light"]) {
+    --series-1: #3987e5;
+    --series-2: #d95926;
+    --series-3: #199e70;
+    --chart-grid: #272c34;
+    --chart-axis: #3a414d;
+    /* In dark, low values recede into the surface: the ramp runs dark -> light. */
+    --heat-0: #0d366b; --heat-1: #184f95; --heat-2: #256abf; --heat-3: #3987e5;
+    --heat-4: #6da7ec; --heat-5: #9ec5f4; --heat-6: #cde2fb;
+  }
+}
+:root[data-theme="dark"] {
+  --series-1: #3987e5;
+  --series-2: #d95926;
+  --series-3: #199e70;
+  --chart-grid: #272c34;
+  --chart-axis: #3a414d;
+  --heat-0: #0d366b; --heat-1: #184f95; --heat-2: #256abf; --heat-3: #3987e5;
+  --heat-4: #6da7ec; --heat-5: #9ec5f4; --heat-6: #cde2fb;
+}
+
+.refreshing { opacity: 0.6; transition: opacity 0.2s; }
+.filter-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
+.segmented { display: inline-flex; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; background: var(--panel); }
+.segmented a { padding: 4px 12px; color: var(--text); border-right: 1px solid var(--border); text-decoration: none; font-variant-numeric: tabular-nums; }
+.segmented a:last-child { border-right: none; }
+.segmented a:hover { background: var(--info-soft); }
+.segmented a.active { background: var(--accent); color: var(--accent-text); font-weight: 600; }
+.card.stat .value.big { font-size: 26px; font-weight: 600; line-height: 1.2; }
+
+.chart-card { margin: 0 0 14px; }
+.chart-head { display: flex; align-items: flex-start; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
+.chart-head .grow { flex: 1; min-width: 200px; }
+.chart-head h2 { margin: 0; font-size: 16px; }
+.chart-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 0 14px; }
+.chart-grid > .panel h2 { margin: 0; font-size: 16px; }
+.list-sub { margin: 2px 0 8px; }
+
+.chart { position: relative; outline: none; }
+.chart:focus-visible { box-shadow: 0 0 0 2px var(--accent); border-radius: var(--radius); }
+.chart svg { display: block; overflow: visible; }
+.chart .grid { stroke: var(--chart-grid); stroke-width: 1; }
+.chart .axis { stroke: var(--chart-axis); stroke-width: 1; }
+.chart .tick, .chart .end-label { fill: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; }
+.chart .end-label { fill: var(--text); }
+.chart .line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
+.chart .area { stroke: none; fill-opacity: 0.1; }
+.chart .dot { stroke: var(--panel); stroke-width: 2; }
+.chart .crosshair { stroke: var(--muted); stroke-width: 1; }
+.chart .hit { fill: transparent; cursor: crosshair; }
+.chart .s1, .key.s1 { stroke: var(--series-1); }
+.chart .s2, .key.s2 { stroke: var(--series-2); }
+.chart .s3, .key.s3 { stroke: var(--series-3); }
+.chart .area.s1, .chart .dot.s1 { fill: var(--series-1); }
+.chart .area.s2, .chart .dot.s2 { fill: var(--series-2); }
+.chart .area.s3, .chart .dot.s3 { fill: var(--series-3); }
+.key.line { display: inline-block; width: 14px; height: 0; border-top: 2px solid; vertical-align: middle; margin-right: 6px; }
+.key.line.s1 { border-color: var(--series-1); }
+.key.line.s2 { border-color: var(--series-2); }
+.key.line.s3 { border-color: var(--series-3); }
+.chart-legend { list-style: none; display: flex; gap: 14px; margin: 2px 0 0; padding: 0; font-size: 13px; color: var(--text); flex-wrap: wrap; }
+
+.chart-tip { position: absolute; z-index: 5; pointer-events: none; background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius);
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.16); padding: 6px 10px; font-size: 13px; white-space: nowrap; }
+.chart-tip .tip-head { color: var(--muted); font-size: 12px; margin-bottom: 2px; }
+.chart-tip .tip-row strong { font-variant-numeric: tabular-nums; }
+.chart-table .scroll, .chart-table .table-wrap { max-height: 360px; overflow: auto; }
+td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
+
+.heatmap-wrap { position: relative; }
+.heatmap { display: grid; grid-template-columns: 36px repeat(24, minmax(10px, 1fr)); gap: 2px; outline: none; }
+.heatmap:focus-visible { box-shadow: 0 0 0 2px var(--accent); }
+.hm-corner, .hm-col, .hm-row { font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }
+.hm-row { display: flex; align-items: center; }
+.hm-cell { height: 22px; border-radius: 3px; }
+.hm-cell:hover, .hm-cell:focus { outline: 2px solid var(--text); outline-offset: -1px; }
+.hm-cell.empty, .hm-swatch.empty { background: transparent; box-shadow: inset 0 0 0 1px var(--chart-grid); }
+.heat-0 { background: var(--heat-0); } .heat-1 { background: var(--heat-1); } .heat-2 { background: var(--heat-2); }
+.heat-3 { background: var(--heat-3); } .heat-4 { background: var(--heat-4); } .heat-5 { background: var(--heat-5); }
+.heat-6 { background: var(--heat-6); }
+.hm-scale { display: flex; align-items: center; gap: 2px; margin-top: 10px; flex-wrap: wrap; }
+.hm-scale .muted { margin: 0 6px; }
+.hm-swatch { display: inline-block; width: 18px; height: 10px; border-radius: 2px; }
+
+.bar-list { list-style: none; margin: 0; padding: 0; }
+.bar-list li { padding: 4px 0; }
+.bar-text { display: flex; gap: 8px; justify-content: space-between; font-size: 13px; }
+.bar-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--mono); font-size: 12.5px; min-width: 0; }
+.bar-value { white-space: nowrap; font-variant-numeric: tabular-nums; }
+.bar-track { height: 6px; margin-top: 3px; }
+.bar-fill { height: 6px; background: var(--series-1); border-radius: 0 3px 3px 0; min-width: 2px; }
+@media (max-width: 700px) {
+  .heatmap { grid-template-columns: 30px repeat(24, minmax(6px, 1fr)); gap: 1px; }
+  .hm-cell { height: 16px; }
+  .chart-grid { grid-template-columns: 1fr; }
+}