/* ENOK Charts Kit — five forms (bar · line · donut · sparkline · stat), zero
   deps, CSP-safe. Standalone: carries its own theme root, and the shared vars
   (--chk-bg / panel / line / ink / ink2) are byte-identical to ENOK Patterns
   Waves 1–3, so one theme skins all of them and loading any combination is safe.

   House rules: no gradients, no glow, hairline grid, thin marks, earthy palette.
   Flip [data-chk-theme="dark"] on .chk-root for the Studio dark palette.

   The six categorical slots are NOT hand-picked. They were snapped to the
   nearest passing step of the ENOK hue families (adobe blue · terracotta ·
   moss · plum · ochre · pine) and validated per mode: OKLCH lightness band,
   chroma floor 0.10, adjacent CVD separation under protanopia/deuteranopia
   (Machado-Oliveira-Fernandes 2009, severity 1.0), a normal-vision floor, and
   >= 3:1 contrast against the surface. Light clears CVD dE 11.8 / normal 20.4;
   dark clears 11.4 / 22.8; every slot clears 3:1 in its own mode. Re-run the
   check before changing any value here — see README "Changing the palette". */
.chk-root{
  --chk-bg:#FBF8F1; --chk-panel:#FFFFFF; --chk-line:#E5DECF; --chk-grid:#EFE9DC;
  --chk-ink:#2A2622; --chk-ink2:#7A7266; --chk-ink3:#9C9384; --chk-r:16px;
  /* categorical — fixed order, assigned in sequence, never cycled */
  --chk-c1:#02578b; --chk-c2:#923719; --chk-c3:#47944c;
  --chk-c4:#893365; --chk-c5:#ab7d0c; --chk-c6:#036f4f;
  /* status — reserved meaning, never used as "series 7" */
  --chk-good:#3F6B2F; --chk-warn:#8A5A00; --chk-crit:#9C2A20;
  font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  color:var(--chk-ink); line-height:1.5;
}
.chk-root[data-chk-theme="dark"]{
  --chk-bg:#191713; --chk-panel:#221F1A; --chk-line:#3A352C; --chk-grid:#2C2822;
  --chk-ink:#F2EDE2; --chk-ink2:#A79D8C; --chk-ink3:#877E70;
  --chk-c1:#0a71b1; --chk-c2:#a94c2e; --chk-c3:#57a45b;
  --chk-c4:#a04879; --chk-c5:#b98918; --chk-c6:#0b7252;
  --chk-good:#8FBF77; --chk-warn:#D9A441; --chk-crit:#DE8171;
}

/* ── figure shell ─────────────────────────────────────────────────────── */
.chk-fig{background:var(--chk-panel);border:1px solid var(--chk-line);
  border-radius:var(--chk-r);padding:20px 20px 16px;margin:0;position:relative;}
.chk-fig + .chk-fig{margin-top:16px;}
.chk-head{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:2px;}
.chk-title{font-size:15px;font-weight:650;margin:0;}
.chk-sub{font-size:12px;color:var(--chk-ink2);margin:2px 0 14px;}
.chk-plot{position:relative;}
.chk-plot svg{display:block;width:100%;height:auto;overflow:visible;}
.chk-plot:focus-visible{outline:2px solid var(--chk-c1);outline-offset:4px;border-radius:8px;}

/* Recessive chrome. Gridlines and axes are SOLID hairlines, one shade off the
   surface — a dashed grid reads as "threshold" when it is only a grid. */
.chk-grid-line{stroke:var(--chk-grid);stroke-width:1;shape-rendering:crispEdges;}
.chk-axis-line{stroke:var(--chk-line);stroke-width:1;shape-rendering:crispEdges;}
.chk-tick{fill:var(--chk-ink2);font-size:11px;font-variant-numeric:tabular-nums;}
.chk-tick-x{fill:var(--chk-ink2);font-size:11px;}
.chk-axis-note{fill:var(--chk-ink2);font-size:10.5px;font-style:italic;}
.chk-empty{fill:var(--chk-ink2);font-size:13px;}
.chk-nodata{fill:var(--chk-ink3);font-size:10px;}

/* Marks. Thin, rounded only at the data end, 2px surface gap between fills —
   a gap, never a border drawn around the mark. */
.chk-bar{stroke:var(--chk-panel);stroke-width:0;}
.chk-line-mark{fill:none;stroke-width:2;stroke-linejoin:round;stroke-linecap:round;}
.chk-area{stroke:none;opacity:.12;}
.chk-marker{stroke:var(--chk-panel);stroke-width:2;}
.chk-marker-cross{fill:none;stroke-width:2.5;stroke-linecap:round;}
.chk-hit{fill:transparent;stroke:none;cursor:default;}
.chk-cursor{stroke:var(--chk-ink3);stroke-width:1;shape-rendering:crispEdges;}
.chk-seg{stroke:var(--chk-panel);stroke-width:2;}
.chk-seg-rest{fill:var(--chk-grid);}
/* Text wears ink tokens, never the series colour — the mark beside it carries
   identity. Direct labels are the one exception nobody misreads: they sit ON
   the series, so they take its hue and nothing else does. */
.chk-direct{font-size:11px;font-weight:600;}
.chk-value{fill:var(--chk-ink);font-size:11px;font-variant-numeric:tabular-nums;}
.chk-center-v{fill:var(--chk-ink);font-size:22px;font-weight:650;}
.chk-center-l{fill:var(--chk-ink2);font-size:11px;}

/* ── legend ───────────────────────────────────────────────────────────── */
.chk-legend{display:flex;flex-wrap:wrap;gap:6px 18px;margin:12px 0 0;padding:0;list-style:none;
  font-size:12px;color:var(--chk-ink2);}
.chk-legend li{display:flex;align-items:center;gap:7px;}
.chk-legend .swatch{width:12px;height:12px;border-radius:3px;flex:none;display:block;}
.chk-legend .swatch svg{display:block;}
.chk-legend b{color:var(--chk-ink);font-weight:600;}
.chk-legend .val{font-variant-numeric:tabular-nums;}

/* ── readout / tooltip ────────────────────────────────────────────────── */
.chk-tip{position:absolute;pointer-events:none;opacity:0;transform:translate(-50%,-100%);
  background:var(--chk-panel);border:1px solid var(--chk-line);border-radius:10px;
  padding:8px 10px;font-size:12px;color:var(--chk-ink);white-space:nowrap;
  box-shadow:0 8px 24px rgba(0,0,0,.10);transition:opacity .12s;z-index:2;}
.chk-tip[data-on]{opacity:1;}
.chk-tip .k{color:var(--chk-ink2);}
.chk-tip .row{display:flex;align-items:center;gap:7px;margin-top:4px;}
.chk-tip .row:first-child{margin-top:0;}
.chk-tip .dot{width:8px;height:8px;border-radius:2px;flex:none;}
.chk-tip .v{margin-left:auto;padding-left:14px;font-variant-numeric:tabular-nums;font-weight:600;}

/* ── footer: table toggle + notes ─────────────────────────────────────── */
.chk-foot{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:12px;
  padding-top:12px;border-top:1px solid var(--chk-line);}
.chk-note{font-size:11.5px;color:var(--chk-ink2);margin:0;}
.chk-toggle{font:inherit;font-size:12px;border:1px solid var(--chk-line);background:var(--chk-panel);
  color:var(--chk-ink2);border-radius:999px;padding:5px 13px;cursor:pointer;margin-left:auto;
  transition:border-color .15s,color .15s;}
.chk-toggle:hover{border-color:var(--chk-c1);color:var(--chk-ink);}
.chk-toggle[aria-expanded="true"]{color:var(--chk-ink);border-color:var(--chk-ink3);}

/* The table twin. Present in the DOM and in the accessibility tree ALWAYS —
   the toggle only changes whether sighted readers see it. A chart whose values
   live only in a tooltip is a chart most people cannot read. */
.chk-table-wrap{margin-top:12px;}
.chk-table-wrap[hidden]{display:none;}
.chk-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;}
table.chk-table{border-collapse:collapse;width:100%;font-size:12px;}
table.chk-table caption{text-align:left;color:var(--chk-ink2);font-size:11.5px;padding-bottom:6px;}
table.chk-table th,table.chk-table td{border-bottom:1px solid var(--chk-line);
  padding:6px 10px 6px 0;text-align:left;font-weight:400;}
table.chk-table thead th{color:var(--chk-ink2);font-size:11px;letter-spacing:.3px;
  text-transform:uppercase;}
table.chk-table td{font-variant-numeric:tabular-nums;}
table.chk-table tbody th{color:var(--chk-ink);font-weight:600;}
table.chk-table td.chk-gap{color:var(--chk-ink3);}

/* ── sparkline ────────────────────────────────────────────────────────── */
.chk-spark{display:inline-flex;align-items:center;gap:10px;}
.chk-spark svg{display:block;overflow:visible;}
.chk-spark .chk-spark-v{font-size:13px;font-weight:650;font-variant-numeric:tabular-nums;}
.chk-spark .chk-spark-empty{font-size:12px;color:var(--chk-ink2);}

/* ── stat tile ────────────────────────────────────────────────────────── */
.chk-stat{background:var(--chk-panel);border:1px solid var(--chk-line);
  border-radius:var(--chk-r);padding:18px 20px;}
.chk-stat .chk-stat-l{font-size:12px;color:var(--chk-ink2);margin:0 0 6px;}
/* Proportional figures on the hero number: tabular-nums makes 121 look loose
   at display sizes. Same sans as everything else — no display face. */
.chk-stat .chk-stat-v{font-size:clamp(26px,3.4vw,34px);font-weight:650;line-height:1.1;
  letter-spacing:-.015em;margin:0;font-variant-numeric:proportional-nums;}
.chk-stat .chk-stat-d{font-size:12.5px;margin:8px 0 0;display:flex;align-items:center;gap:6px;}
.chk-stat .chk-stat-d .arrow{font-size:11px;}
.chk-stat .chk-stat-d[data-dir="up"]{color:var(--chk-ink);}
.chk-stat .chk-stat-d[data-dir="down"]{color:var(--chk-ink);}
.chk-stat .chk-stat-d[data-tone="good"]{color:var(--chk-good);}
.chk-stat .chk-stat-d[data-tone="bad"]{color:var(--chk-crit);}
.chk-stat .chk-stat-n{font-size:11.5px;color:var(--chk-ink2);margin:8px 0 0;}
.chk-stat .chk-spark{margin-top:12px;}

@media (prefers-reduced-motion: reduce){
  .chk-tip{transition:none;}
  .chk-toggle{transition:none;}
}