/* ============================================================================
   charts.css — styling for the shared SVG chart engine in charts.js.
   Used by /ev/dashboard and the blog posts.

   The page supplies the design tokens (--accent, --text, --bg2 and friends).
   The two tokens charts add on top are declared here so a page only has to
   link this file:
     --grid     hairline gridline colour, one step off the surface
     --series2  the second series hue, for multi-series charts
     --surface  the colour painted into 2px mark gaps and marker rings; must
                match the card background or the gaps show as holes
   ========================================================================== */

:root{
  --grid:rgba(255,255,255,0.10);
  --series2:#9b8cff;          /* validated against #0b0f0d: CVD dE 22.5 vs accent */
  --surface:#0b0f0d;
}
html[data-theme="light"]{
  --grid:rgba(16,30,22,0.12);
  --series2:#6d4bd6;          /* validated against #ffffff: all checks pass */
  --surface:#ffffff;
}

.plot{margin-top:22px; position:relative;}
.plot svg{display:block; width:100%; height:auto; overflow:visible;}

.axis{fill:var(--faint); font-size:12px; font-family:'Plus Jakarta Sans',system-ui,sans-serif;}
.vlab{fill:var(--text); font-size:12.5px; font-weight:600; font-family:'Plus Jakarta Sans',system-ui,sans-serif;}
.clab{fill:var(--muted); font-size:13px; font-family:'Plus Jakarta Sans',system-ui,sans-serif;}
.gridline{stroke:var(--grid); stroke-width:1;}   /* solid hairline, never dashed */

.bar{fill:var(--accent);}
.bar.dim{fill:var(--accent); opacity:.45;}

.hit{fill:transparent; cursor:pointer;}
.hit:focus-visible{outline:2px solid var(--accent-ring); outline-offset:2px;}

.tip{position:absolute; pointer-events:none; opacity:0; transform:translate(-50%,-100%);
  padding:10px 13px; border-radius:12px; border:1px solid var(--border-strong); background:var(--bg2);
  box-shadow:0 10px 30px rgba(0,0,0,.28); font-size:13px; line-height:1.45; white-space:nowrap;
  transition:opacity .12s; z-index:5;}
.tip .tv{font-family:'Sora',sans-serif; font-size:16px; font-weight:700; color:var(--text); letter-spacing:-.02em;}
.tip .tk{margin-top:3px; color:var(--muted); display:flex; align-items:center; gap:7px;}
/* Line keys, not filled boxes — at tooltip density a swatch is too much ink. */
.tip .tk i{width:14px; height:2px; border-radius:2px; background:var(--accent); display:inline-block; flex:none;}
.tip .tk b{color:var(--text); font-weight:700; margin-left:auto; padding-left:10px;}

.legend{margin-top:14px; display:flex; flex-wrap:wrap; gap:8px 20px; font-size:13.5px; color:var(--muted);}
.legend span{display:inline-flex; align-items:center; gap:8px;}
.legend i{width:14px; height:3px; border-radius:2px; display:inline-block; flex:none;}

.foot{margin-top:18px; display:flex; flex-wrap:wrap; gap:8px 18px; align-items:center;
  font-size:13px; color:var(--faint);}
.foot .partial{display:inline-flex; align-items:center; gap:7px;}
.foot .partial i{width:9px; height:9px; border-radius:50%; border:2px solid var(--accent); display:inline-block;}

.tablebtn{background:none; border:0; padding:0; color:var(--muted); font-family:inherit; font-size:13px;
  font-weight:600; cursor:pointer; text-decoration:underline; text-underline-offset:3px;}
.tablebtn:hover{color:var(--text);}
.dtable{margin-top:16px; overflow-x:auto;}
.dtable table{border-collapse:collapse; width:100%; font-size:13.5px;}
.dtable th,.dtable td{text-align:left; padding:9px 14px; border-bottom:1px solid var(--border); white-space:nowrap;}
.dtable th{color:var(--muted); font-weight:600;}
.dtable td.num{text-align:right; font-variant-numeric:tabular-nums;}
.dtable[hidden]{display:none;}