/* ---------- chart strip ----------
   One .chart per PAGE.charts entry; contents are built by js/ui/charts.js. */
.charts{display:grid; grid-template-columns:repeat(4,1fr); grid-template-rows:1fr; gap:1px; background:var(--line); border-top:1px solid var(--line); height:150px; min-height:0}
.chart{background:var(--bg1); position:relative; min-width:0; min-height:0}
.chart canvas{position:absolute; inset:0; display:block; width:100%; height:100%}
.chart .ctitle{position:absolute; left:10px; top:7px; font-size:11px; color:var(--ink2); letter-spacing:.02em; pointer-events:none}
.chart .ctitle .cval{margin-left:7px; font-family:var(--mono); font-size:12px; font-weight:700}   /* def.titleValue */
.chart .cleg{position:absolute; right:8px; top:6px; display:flex; gap:8px; pointer-events:none}
.chart .cleg span{display:inline-flex; align-items:center; gap:3px; font-size:10.5px; color:var(--muted); font-family:var(--mono)}
.chart .cleg i{width:8px;height:8px;border-radius:2px}

/* hover tooltip, positioned in viewport coordinates */
#ctip{position:fixed; z-index:20; pointer-events:none; background:rgba(12,14,20,.96); border:1px solid var(--line2);
  border-radius:7px; padding:7px 9px; font-size:11.5px; color:var(--ink); display:none; box-shadow:0 6px 20px rgba(0,0,0,.5)}
#ctip .tt{color:var(--muted); margin-bottom:3px; font-variant-numeric:tabular-nums}
#ctip .row{display:flex; align-items:center; gap:6px; font-family:var(--mono)}
#ctip .row i{width:8px;height:8px;border-radius:2px}

@media (max-width:880px){
  .charts{grid-template-columns:repeat(2,1fr); grid-template-rows:repeat(2,1fr); height:240px}
}