/* Stats page styles (extends app.css) */
body { min-height: 100dvh; display: flex; flex-direction: column; }
nav { border-bottom: 1px solid var(--border); }
main { flex: 1; display: flex; flex-direction: column; align-items: center; padding: 64px 24px; text-align: center; }
.eyebrow { font-size: 0.75rem; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--green); margin-bottom: 48px; }
.stats { display: flex; justify-content: center; flex-wrap: wrap; width: 100%; max-width: 900px; }
.stat { flex: 1; min-width: 200px; padding: 40px 32px; border-right: 1px solid var(--border); text-align: center; }
.stat:last-child { border-right: none; }
.num { font-size: clamp(3.5rem, 8vw, 6rem); font-weight: 800; color: var(--green); letter-spacing: -3px; line-height: 1; transition: opacity 0.3s ease; }
.num.loading, .stat-sm-val.loading { background: linear-gradient(90deg, #e5e7eb 25%, #f3f4f6 50%, #e5e7eb 75%); background-size: 200% 100%; animation: shimmer 1.5s infinite; border-radius: 6px; color: transparent; min-width: 80px; display: inline-block; }
@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
.label { font-size: 0.9rem; color: var(--muted); margin-top: 12px; font-weight: 500; line-height: 1.4; }

/* Secondary stats row */
.stats-secondary { display: flex; justify-content: center; gap: 48px; margin-top: 48px; padding-top: 40px; border-top: 1px solid var(--border); width: 100%; max-width: 900px; }
.stat-sm { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.stat-sm-val { font-size: 1.5rem; font-weight: 800; color: var(--text); letter-spacing: -1px; }
.stat-sm-label { font-size: 0.78rem; color: var(--muted); font-weight: 500; }

/* Bar chart */
.chart-section { width: 100%; max-width: 600px; margin-top: 48px; padding-top: 40px; border-top: 1px solid var(--border); }
.chart-title { font-size: 0.85rem; font-weight: 700; color: var(--text); margin-bottom: 24px; letter-spacing: 0; }
.bar-chart { display: flex; align-items: flex-end; justify-content: center; gap: 12px; height: 120px; }
.bar-col { display: flex; flex-direction: column; align-items: center; gap: 6px; flex: 1; }
.bar { width: 100%; max-width: 48px; background: var(--green); border-radius: 6px 6px 0 0; min-height: 4px; transition: height 0.6s ease; }
.bar-count { font-size: 0.72rem; font-weight: 700; color: var(--text); }
.bar-label { font-size: 0.7rem; color: var(--muted); font-weight: 500; }

/* Context line */
.context-line { margin-top: 32px; font-size: 0.88rem; color: var(--muted); font-weight: 500; }
.context-line strong { color: var(--green); font-weight: 800; }

footer { padding: 32px 24px; text-align: center; border-top: 1px solid var(--border); }
footer a { color: var(--green); text-decoration: none; font-weight: 600; font-size: 0.9rem; }

@media (max-width: 600px) {
  .stats { flex-direction: column; }
  .stat { border-right: none; border-bottom: 1px solid var(--border); padding: 28px 24px; }
  .stat:last-child { border-bottom: none; }
  .stats-secondary { flex-direction: column; gap: 20px; align-items: center; }
  .bar-chart { gap: 8px; }
}