/* ============================================================================
   Reports — the report draws itself.
   Chart lines stroke on and numbers count up from values that are counted
   on this page. Loaded by reports.html only. Tokens from css/deep.css.
   ========================================================================== */

.rep-chart{ position:relative; aspect-ratio:2/1; min-height:160px; }
.rep-chart svg{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.rep-chart .bar{ fill: rgba(var(--accent-rgb), .22); stroke: rgba(var(--accent-rgb), .45); stroke-width:1; transform-box:fill-box; transform-origin:bottom center; }
.rep-chart .line{ fill:none; stroke: var(--accent); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.rep-chart .dot{ fill: var(--accent); }
.rep-chart .axis{ stroke: rgba(var(--accent-rgb), .18); stroke-width:1; }
.rep-chart .lab{ font: 600 9.5px var(--mono); fill: rgba(191,238,255,.55); letter-spacing:.08em; text-transform:uppercase; }
.rep-chart .val{ font: 600 10px var(--mono); fill: var(--accent); }
.rep-nojs{ margin:0; padding:24px 0; font-size:14px; color:#a8c4d5; }

.rep-tiles{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; margin-top:16px; }
.rep-tile{
  padding:12px 12px 10px; border-radius:10px; min-width:0;
  border:1px solid rgba(var(--accent-rgb), .13); background: rgba(255,255,255,.025);
}
.rep-tile b{
  display:block; font-family:var(--font-display); font-weight:800; letter-spacing:-.03em; line-height:1;
  font-size:clamp(1.35rem, 2.2vw, 1.9rem); color:#eaf4fa; font-variant-numeric:tabular-nums;
}
.rep-tile b small{ font-size:.55em; font-weight:600; color: rgba(191,238,255,.6); margin-left:3px; }
.rep-tile span{
  display:block; margin-top:6px; font:600 9.5px/1.4 var(--mono); letter-spacing:.1em; text-transform:uppercase;
  color: rgba(191,238,255,.55);
}
.rep-read{
  display:flex; flex-wrap:wrap; gap:6px 18px; justify-content:space-between; margin-top:14px;
  font:600 10.5px/1.5 var(--mono); letter-spacing:.12em; text-transform:uppercase;
  color: rgba(191,238,255,.62);
}

@media (max-width:900px){
  .rep-tiles{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin-top:12px; }
  .rep-tile{ padding:10px 10px 8px; }
  .rep-chart{ aspect-ratio:2.2/1; min-height:120px; }
}