/**
 * statistics.css – public platform statistics page (/alixco/statistics).
 * Audit ref: §9.2. Consumes the global design tokens (tokens.css → var(--c-*));
 * no hard-coded brand colours, so it re-brands and dark-modes with web2.
 * Chart behaviour: resources/statistics.js (Chart.js in resources/chart.min.js).
 */

.stat-wrap{max-width:var(--container-max);margin:0 auto;padding:0 16px}
.stat-section{padding:44px 0}
@media(max-width:768px){.stat-section{padding:32px 0}}

/* ---- Hero ---- */
.stat-hero{background:linear-gradient(180deg,var(--c-bg) 0%,var(--c-card-2) 100%);padding:52px 0 34px;text-align:center}
.stat-eyebrow{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-button);font-weight:700;
  font-size:12.5px;letter-spacing:1.4px;text-transform:uppercase;color:var(--c-blue);background:var(--c-chip);
  border:1px solid var(--c-line);padding:7px 14px;border-radius:var(--r-pill);margin-bottom:16px}
.stat-eyebrow svg{width:16px;height:16px;fill:none;stroke:var(--c-orange);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.stat-hero h1{font-family:var(--font-display);font-weight:700;font-size:36px;line-height:1.14;color:var(--c-text);margin:0 auto 14px;max-width:16ch}
.stat-hero-sub{font-size:18px;line-height:1.6;color:var(--c-body);max-width:60ch;margin:0 auto 18px}
.stat-asof{font-size:15px;color:var(--c-muted);margin:0}
.stat-asof b{color:var(--c-text)}
.stat-period{display:inline-block;margin-left:8px;font-family:var(--font-button);font-weight:700;font-size:12px;
  color:var(--c-blue);background:var(--c-chip);border-radius:var(--r-pill);padding:3px 10px}
@media(max-width:768px){.stat-hero h1{font-size:27px}.stat-hero-sub{font-size:16px}}

/* ---- Section heads ---- */
.stat-sec-head{text-align:center;max-width:700px;margin:0 auto 28px}
.stat-sec-head h2{font-family:var(--font-display);font-weight:700;font-size:26px;color:var(--c-text);margin:0 0 8px}
.stat-sec-head p{font-size:16px;line-height:1.6;color:var(--c-muted);margin:0}

/* ---- KPI cards ---- */
.stat-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
@media(max-width:960px){.stat-kpis{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.stat-kpis{grid-template-columns:1fr}}
.stat-kpi{background:var(--c-card);border:1px solid var(--c-line);border-radius:var(--r-card);
  box-shadow:var(--shadow);padding:26px 20px;text-align:center}
.stat-kpi-v{font-family:var(--font-display);font-weight:700;font-size:32px;line-height:1.1;color:var(--c-text);margin-bottom:8px}
.stat-kpi-l{font-size:14px;line-height:1.45;color:var(--c-muted)}
.stat-kpi-good .stat-kpi-v{color:var(--c-success-text)}
.stat-kpi-hero{grid-column:span 2;background:linear-gradient(135deg,var(--c-blue) 0%,var(--c-blue-variant) 100%);border:none}
.stat-kpi-hero .stat-kpi-v{color:#fff;font-size:38px}
.stat-kpi-hero .stat-kpi-l{color:rgba(255,255,255,.9)}
@media(max-width:520px){.stat-kpi-hero{grid-column:span 1}}
.stat-disclaimer{margin:20px auto 0;max-width:80ch;text-align:center;font-size:12.5px;line-height:1.6;color:var(--c-muted)}

/* ---- Chart ---- */
.stat-band{background:var(--c-bg-muted)}
.stat-chart-card{background:var(--c-card);border:1px solid var(--c-line);border-radius:var(--r-card);
  box-shadow:var(--shadow);padding:20px 20px 12px;max-width:960px;margin:0 auto}
.stat-chart-wrap{position:relative;height:340px}
@media(max-width:600px){.stat-chart-wrap{height:260px}}

/* ---- Table ---- */
.stat-tablewrap{max-width:960px;margin:24px auto 0;overflow-x:auto}
.stat-table{width:100%;border-collapse:collapse;font-size:14.5px;background:var(--c-card);
  border:1px solid var(--c-line);border-radius:var(--r-card);overflow:hidden}
.stat-table th,.stat-table td{padding:12px 16px;text-align:left;border-bottom:1px solid var(--c-line)}
.stat-table thead th{font-family:var(--font-button);font-weight:700;font-size:12px;letter-spacing:.6px;
  text-transform:uppercase;color:var(--c-muted);background:var(--c-bg-muted)}
.stat-table td.num,.stat-table th.num{text-align:right;font-variant-numeric:tabular-nums}
.stat-table tbody tr:last-child td{border-bottom:none}

/* ---- Data / cite ---- */
.stat-data{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;
  background:var(--c-card);border:1px solid var(--c-line);border-radius:var(--r-card);box-shadow:var(--shadow);padding:26px 28px}
.stat-data-copy{flex:1 1 320px}
.stat-data-copy h2{font-family:var(--font-display);font-weight:700;font-size:21px;color:var(--c-text);margin:0 0 6px}
.stat-data-copy p{font-size:15px;line-height:1.6;color:var(--c-body);margin:0;max-width:60ch}
.stat-btn{display:inline-flex;align-items:center;gap:9px;font-family:var(--font-button);font-weight:700;font-size:15px;
  text-decoration:none;min-height:46px;padding:0 22px;border-radius:var(--r-btn);transition:background .2s,transform .2s,box-shadow .2s}
.stat-btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.stat-btn-primary{background:var(--c-green);color:var(--c-btn-text);box-shadow:var(--shadow)}
.stat-btn-primary:hover{background:var(--c-green-hover);transform:translateY(-2px);box-shadow:var(--shadow-hover)}

/* ---- Empty state ---- */
.stat-empty{background:var(--c-card);border:1px dashed var(--c-line);border-radius:var(--r-card);
  padding:40px 24px;text-align:center;color:var(--c-muted);font-size:16px}