/* The analytics page (/analytics/). Loaded only there, after site.css, and built from the same colour tokens, so light and dark both follow the theme.
   Charts are inline SVG on a 360 unit canvas with text of 13.5 units: shown at 343 px on a phone that is 12.8 px, so never shrink the text or widen the canvas. */
:root {
  --h0: #eceef1; --h1: #f4d8d2; --h2: #e9b0a4; --h3: #d97560; --h4: #c93a1c;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --h0: #252c36; --h1: #442a2a; --h2: #733a32; --h3: #a14b3a; --h4: #ff6b4a; }
}
:root[data-theme="dark"] { --h0: #252c36; --h1: #442a2a; --h2: #733a32; --h3: #a14b3a; --h4: #ff6b4a; }

.chart-nav { display: flex; flex-wrap: wrap; gap: 0 20px; margin-top: -24px; }
.chart-nav a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }

.records { margin: 0; display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr)); }
.rec { border: 1px solid var(--rule); background: var(--surface); padding: 14px 16px; min-width: 0; }
.rec dt { font: 600 0.78rem/1.3 var(--font-data); text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); }
.rec dd { margin: 4px 0 0; }
.rec-v { display: block; font: 800 1.9rem/1.15 var(--font-display); font-variant-numeric: tabular-nums; }
.rec-n { display: block; margin-top: 4px; font-size: 0.9rem; color: var(--muted); }

.chart-group { display: grid; gap: 40px; grid-template-columns: minmax(0, 1fr); }
.chart-group > header { display: grid; gap: 6px; border-bottom: 2px solid var(--fg); padding-bottom: 10px; }
.chart-intro { margin: 0; color: var(--muted); max-width: 68ch; }
.chart-omitted { margin: 0; }
.chart { gap: 14px; grid-template-columns: minmax(0, 1fr); }
.chart > h3 { font-size: 1.3rem; max-width: 40ch; }
.chart-detail { margin: 0; max-width: 62ch; }
.chart-fig { margin: 0; display: grid; gap: 12px 32px; grid-template-columns: minmax(0, 30rem) minmax(0, 1fr); align-items: start; }
.chart-plot { min-width: 0; border-top: 1px solid var(--rule); padding-top: 10px; }
.chart-fig figcaption { font-size: 0.95rem; color: var(--muted); max-width: 52ch; }
.chart-n { display: block; margin-bottom: 6px; font: 700 0.95rem/1.4 var(--font-data); color: var(--fg); }
.chart-caveat { margin: 8px 0 0; }
.chart-data { max-width: none; }
.chart-data .tablewrap { margin-top: 10px; }
@media (max-width: 52rem) { .chart-fig { grid-template-columns: minmax(0, 1fr); } }

.chart-svg { display: block; width: 100%; height: auto; }
.chart-svg text { font-family: var(--font-body); font-size: 13.5px; }
.chart-svg .ch-t { fill: var(--fg); }
.chart-svg .ch-tm { fill: var(--muted); }
.chart-svg .ch-tb { font-weight: 700; fill: var(--fg); }
.chart-svg .tw { fill: var(--signal); }
.chart-svg .tx { fill: var(--bad); }
.chart-svg .ch-track { fill: var(--bar-bg); }
.chart-svg .ch-main { fill: var(--accent); }
.chart-svg .ch-alt { fill: var(--bar); }
.chart-svg .ch-axis { stroke: var(--muted); stroke-width: 1; }
.chart-svg .ch-grid { stroke: var(--rule); stroke-width: 1; }
.chart-svg .ch-link { stroke: var(--bar); stroke-width: 3; }
.chart-svg .ch-hollow { fill: var(--surface); stroke: var(--fg); stroke-width: 2; }
.chart-svg .ch-dash { fill: var(--surface); stroke: var(--fg); stroke-width: 2; stroke-dasharray: 4 2; }
.chart-svg .ch-blank { fill: none; stroke: var(--rule); stroke-width: 1; }
.chart-svg .ch-own { fill: none; stroke: var(--fg); stroke-width: 2; }
.chart-svg .hv0 { fill: var(--h0); } .chart-svg .hv1 { fill: var(--h1); } .chart-svg .hv2 { fill: var(--h2); } .chart-svg .hv3 { fill: var(--h3); } .chart-svg .hv4 { fill: var(--h4); }
.chart-svg .ht0, .chart-svg .ht1, .chart-svg .ht2, .chart-svg .ht3 { fill: var(--fg); }
.chart-svg .ht4 { fill: var(--accent-ink); }
.chart-svg .st-ok { fill: var(--good-bg); stroke: var(--rule); }
.chart-svg .st-warn { fill: var(--signal-bg); }
.chart-svg .st-bad { fill: var(--bad-bg); }
.chart-svg .st-none { fill: none; stroke: var(--rule); stroke-dasharray: 3 2; }

/* version 2 charts: wave strips, estimate lines and the shaded calibrated Jams */
.chart-svg .ch-ink { fill: var(--fg); }
.chart-svg .ch-band { fill: var(--h0); }
.chart-svg .ch-one { stroke: var(--fg); stroke-width: 1.5; stroke-dasharray: 5 3; }
.chart-svg .ch-box { fill: var(--bar-bg); stroke: var(--bar); stroke-width: 1; }
.chart-svg .ch-median { stroke: var(--fg); stroke-width: 2.5; }
.chart-svg .ch-dot { fill: var(--accent); stroke: var(--surface); stroke-width: 0.8; }
.chart-svg .se0 { fill: var(--accent); } .chart-svg .se1 { fill: var(--fg); } .chart-svg .se2 { fill: var(--signal); } .chart-svg .se3 { fill: var(--bad); }
.chart-svg .sl0, .chart-svg .sl1, .chart-svg .sl2, .chart-svg .sl3 { fill: none; stroke-width: 1.8; stroke-linejoin: round; }
.chart-svg .sl0 { stroke: var(--accent); } .chart-svg .sl1 { stroke: var(--fg); } .chart-svg .sl2 { stroke: var(--signal); } .chart-svg .sl3 { stroke: var(--bad); }