/* ==========================================================================
   stats.css — DJM statistics UI. Loaded by stats/index, stats/county AND the
   county landing page (its stats + activity blocks reuse these components), so
   it lives in one shared file rather than base app.css (keeps base lean) or a
   duplicated per-page block. Uses base design tokens only.
   ========================================================================== */

/* Section rhythm + headings (mirrors county.css so the two read alike). */
.stat-block { padding-bottom: 26px; }
.stat-h2 {
  font-size: 19px;
  font-weight: 800;
  line-height: 1.25;
  color: var(--ink);
  margin: 0 0 12px;
}

/* Headline tiles — a grid so they stretch to fill the row evenly (flex left them
   packed to the left on wide screens). auto-fit collapses to fewer columns on
   narrow screens. */
.stat-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
  /* L/R must stay `auto` — this is also a `.container`, and a `0` here would
     override its `margin: 0 auto` and left-align the whole tile row. */
  margin: 6px auto 22px;
}
.stat-tile {
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--white);
  padding: 13px 16px;
}
.stat-tile__num {
  display: block;
  font-family: var(--font-mono);
  font-size: 22px;
  font-weight: 700;
  color: var(--navy);
  line-height: 1.1;
}
.stat-tile__num--sm { font-size: 14px; line-height: 1.35; }
.stat-tile__lbl { display: block; font-size: 12px; color: var(--muted); margin-top: 4px; }

/* Monthly bar chart (inline SVG, no JS). */
.stat-chart { margin: 0 0 10px; }
.stat-chart__svg { width: 100%; height: auto; display: block; overflow: visible; }
.stat-chart__bar { fill: var(--navy); }
.stat-chart__axis { stroke: var(--line); stroke-width: 1; }
.stat-chart__tick { fill: var(--muted); font-size: 9px; font-family: var(--font-mono); }
.stat-chart__cap { font-size: 12px; color: var(--muted); margin: 6px 0 0; }

.stat-details { margin-top: 8px; }
.stat-details summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--navy); }
.stat-details[open] summary { margin-bottom: 8px; }

/* Two-up layout for the mix tables. */
.stat-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }

/* Data tables with an optional proportional bar behind the label. */
.stat-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.stat-table th,
.stat-table td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line); }
.stat-table thead th {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  font-weight: 600;
}
.stat-table__num { text-align: right; font-family: var(--font-mono); white-space: nowrap; color: var(--ink); }
.stat-table__cat { position: relative; font-weight: 500; color: var(--ink); }
.stat-table__bar {
  position: absolute;
  left: 0;
  top: 3px;
  bottom: 3px;
  background: var(--navy-tint);
  border-radius: 3px;
  z-index: 0;
}
.stat-table__label { position: relative; z-index: 1; }
.stat-table__label a { color: var(--navy); }

/* CTA block. */
.stat-cta { border-top: 1px solid var(--line); padding-top: 22px; }
.stat-cta p { font-size: 14px; line-height: 1.7; color: var(--text); max-width: 640px; margin: 0 0 14px; }
.stat-cta a.btn { margin-top: 2px; }

/* Recent DJM activity list (county page). Rows link OUT to the official source. */
.stat-activity { list-style: none; margin: 0; padding: 0; }
.stat-activity li {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
  font-size: 13.5px;
}
.stat-activity a { color: var(--ink); text-decoration: none; }
.stat-activity a:hover { color: var(--navy); text-decoration: underline; }
.stat-activity__date { font-family: var(--font-mono); font-size: 12px; color: var(--muted); white-space: nowrap; }
.stat-activity__note { font-size: 12px; color: var(--muted); margin: 10px 0 0; }

@media (max-width: 720px) {
  .stat-cols { grid-template-columns: 1fr; gap: 22px; }
}