/* Comparison primitives — js/charts/compare.js
   Everything is scoped to [data-vz-compare] so it can never reach another
   agent's chart. Colour comes from tokens.css only. Light theme, no gridlines,
   hairline axes, quiet footer strip. */

[data-vz-compare]{
  --vzc-surface:var(--bg-1);
  position:relative;
  display:block;
  width:100%;
  color:var(--ink-2);
  font-family:var(--sans);
}
[data-vz-compare] *{box-sizing:border-box}

/* ── head / plot / foot ─────────────────────────────────────────────────── */

[data-vz-compare] .vzc-head{
  display:flex; align-items:baseline; gap:10px;
  margin:0 0 10px;
}
[data-vz-compare] .vzc-title{
  font-size:12.5px; font-weight:600; letter-spacing:-.005em; color:var(--ink);
}
[data-vz-compare] .vzc-plot{
  position:relative; width:100%;
}
[data-vz-compare] .vzc-svg{
  display:block; width:auto; max-width:100%; height:auto; overflow:visible;
  font-family:var(--sans); font-variant-numeric:tabular-nums;
}
[data-vz-compare] .vzc-plot-empty{
  display:flex; align-items:center; justify-content:center;
  border:1px dashed var(--line-2); border-radius:var(--r);
  background:var(--bg-2);
}
[data-vz-compare] .vzc-empty{
  font-size:11.5px; color:var(--ink-3); letter-spacing:.01em;
}
[data-vz-compare] .vzc-foot{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  margin-top:12px; padding-top:10px; border-top:1px solid var(--line);
  min-height:26px;
}
[data-vz-compare] .vzc-cap{
  font-size:11px; line-height:1.45; color:var(--ink-3); letter-spacing:.005em;
}
[data-vz-compare] .vzc-pill{
  flex:0 0 auto;
  display:inline-flex; align-items:center; gap:6px;
  padding:5px 11px; border:1px solid var(--line-2); border-radius:999px;
  background:var(--bg-1); color:var(--ink-2);
  font-size:11px; font-weight:600; white-space:nowrap;
  transition:border-color .16s var(--ease), color .16s var(--ease), background .16s var(--ease);
}
[data-vz-compare] .vzc-pill:hover{
  border-color:var(--brand-soft); color:var(--brand-dark); background:var(--brand-tint);
}
[data-vz-compare] .vzc-chev{font-size:12px; line-height:1; opacity:.7}

/* ── shared type ────────────────────────────────────────────────────────── */

[data-vz-compare] text{font-variant-numeric:tabular-nums}
[data-vz-compare] .vzc-ax-t{fill:var(--ink-3)}
[data-vz-compare] .vzc-ax-l{fill:var(--ink-3); font-weight:600; letter-spacing:.05em; text-transform:uppercase}
[data-vz-compare] .vzc-leg-t{fill:var(--ink-2)}
[data-vz-compare] .vzc-leg-v{fill:var(--ink); font-weight:600}
[data-vz-compare] .vzc-leg-p{fill:var(--ink-3)}
[data-vz-compare] .num{font-family:var(--serif); letter-spacing:-.015em}

/* hairlines */
[data-vz-compare] .vzc-axis{stroke:var(--line-2); stroke-width:1}
[data-vz-compare] .vzc-tick{stroke:var(--line-2); stroke-width:1}
[data-vz-compare] .vzc-guide{stroke:var(--line); stroke-width:1}
[data-vz-compare] .vzc-stag{stroke:var(--line); stroke-width:1}
[data-vz-compare] .vzc-track{fill:var(--bg-3); fill-opacity:.62}
[data-vz-compare] .vzc-hit{fill:transparent}
[data-vz-compare] .vzc-sw{shape-rendering:geometricPrecision}

/* ── marks: hover, focus, selection ─────────────────────────────────────── */

[data-vz-compare] .vzc-mark{cursor:pointer; outline:none}
[data-vz-compare] .vzc-mark .vzc-ring{
  fill:none; stroke:var(--focus); stroke-width:1.8; opacity:0;
  transition:opacity .14s var(--ease);
}
[data-vz-compare] .vzc-mark:focus-visible .vzc-ring,
[data-vz-compare] .vzc-mark:focus .vzc-ring{opacity:1}
[data-vz-compare] .vzc-mark .vzc-ring-r,
[data-vz-compare] .vzc-mark .vzc-ring-p,
[data-vz-compare] .vzc-mark .vzc-ring-c{stroke-width:1.6}
[data-vz-compare] .vzc-mark .vzc-ring-p{fill:none}

/* de-emphasise the rest while one mark is hot */
[data-vz-compare].vzc-hot .vzc-mark{opacity:.42; transition:opacity .16s var(--ease)}
[data-vz-compare].vzc-hot .vzc-mark.is-on{opacity:1}

/* ── tooltip ────────────────────────────────────────────────────────────── */

[data-vz-compare] .vzc-tip{
  position:absolute; z-index:6; left:0; top:0;
  transform:translate(-50%,-100%);
  min-width:118px; max-width:250px;
  display:flex; flex-direction:column; gap:3px;
  padding:8px 10px 9px;
  background:var(--bg-1); border:1px solid var(--line);
  border-radius:8px; box-shadow:var(--shadow-1);
  pointer-events:none;
}
[data-vz-compare] .vzc-tip[hidden]{display:none}
[data-vz-compare] .vzc-tip.vzc-tip-below{transform:translate(-50%,0)}
[data-vz-compare] .vzc-tip-t{
  font-size:11px; font-weight:600; color:var(--ink); line-height:1.3;
  margin-bottom:2px;
}
[data-vz-compare] .vzc-tip-r{
  display:flex; align-items:baseline; justify-content:space-between; gap:14px;
  font-size:11px; color:var(--ink-3); white-space:nowrap;
}
[data-vz-compare] .vzc-tip-r b{
  color:var(--ink); font-weight:600; font-variant-numeric:tabular-nums;
}
[data-vz-compare] .vzc-tip-s{
  margin-top:3px; font-size:10px; color:var(--ink-3); white-space:normal; line-height:1.35;
}

/* ── scatter ────────────────────────────────────────────────────────────── */

.vz-scatter .vzc-quad{fill:var(--brand-tint); fill-opacity:.42}
.vz-scatter .vzc-med{stroke:var(--line-2); stroke-width:1; stroke-dasharray:3 4}
.vz-scatter .vzc-med-t{fill:var(--ink-3); letter-spacing:.09em; text-transform:uppercase; font-weight:600}
.vz-scatter .vzc-bub{
  fill-opacity:.58; stroke:var(--bg-1); stroke-width:1.25;
  transition:fill-opacity .16s var(--ease);
}
.vz-scatter .vzc-mark:hover .vzc-bub,
.vz-scatter .vzc-mark:focus .vzc-bub{fill-opacity:.9}
.vz-scatter .vzc-pt-l{fill:var(--ink-2)}
.vz-scatter .vzc-lg-c{fill:none; stroke:var(--line-2); stroke-width:1}
.vz-scatter .vzc-lg-l{stroke:var(--line-2); stroke-width:1; stroke-dasharray:2 3}
.vz-scatter .vzc-lg-t{fill:var(--ink-3)}
.vz-scatter .vzc-lg-h{fill:var(--ink-3); font-weight:600; letter-spacing:.01em}

/* ── bullet ─────────────────────────────────────────────────────────────── */

.vz-bullet .vzc-b-l{fill:var(--ink); font-weight:600}
.vz-bullet .vzc-b-v{fill:var(--ink); font-weight:600; font-family:var(--serif); letter-spacing:-.015em}
.vz-bullet .vzc-band{fill:var(--ink)}
.vz-bullet .vzc-band-0{fill-opacity:.105}
.vz-bullet .vzc-band-1{fill-opacity:.062}
.vz-bullet .vzc-band-2{fill-opacity:.032}
.vz-bullet .vzc-band-o{fill:none; stroke:var(--line); stroke-width:1}
.vz-bullet .vzc-b-bar{transition:fill-opacity .16s var(--ease)}
.vz-bullet .vzc-mark:hover .vzc-b-bar{fill-opacity:.85}
.vz-bullet .vzc-b-tgt{fill:var(--ink)}
.vz-bullet .vzc-b-tl{fill:var(--ink-2); font-weight:600}

/* ── radial ─────────────────────────────────────────────────────────────── */

.vz-radial .vzc-svg,
.vz-pie .vzc-svg,
.vz-donutfigure .vzc-svg{margin-inline:auto}
.vz-radial .vzc-r-track{fill:none; stroke:var(--bg-3)}
.vz-radial .vzc-r-arc{fill:none; transition:stroke-opacity .16s var(--ease)}
.vz-radial .vzc-mark:hover .vzc-r-arc{stroke-opacity:.82}
.vz-radial .vzc-r-fig{fill:var(--ink)}
.vz-radial .vzc-r-lab{fill:var(--ink-2); font-weight:600}
.vz-radial .vzc-r-sub{fill:var(--ink-3)}

/* ── ranked bars ────────────────────────────────────────────────────────── */

.vz-rankedbars .vzc-rb-l{fill:var(--ink-2)}
.vz-rankedbars .vzc-rb-bar{transition:fill-opacity .16s var(--ease)}
.vz-rankedbars .vzc-mark:hover .vzc-rb-bar{fill-opacity:.85}
.vz-rankedbars .vzc-rb-v{fill:var(--ink); font-weight:600}
.vz-rankedbars .vzc-rb-v.vzc-in{fill:var(--bg-1)}
.vz-rankedbars .vzc-rb-d{font-weight:600}
.vz-rankedbars .vzc-up{fill:var(--pos)}
.vz-rankedbars .vzc-down{fill:var(--neg-ink)}
.vz-rankedbars .vzc-flat{fill:var(--ink-3)}

/* ── grouped bars ───────────────────────────────────────────────────────── */

.vz-groupedbars .vzc-gb-bar{transition:fill-opacity .16s var(--ease)}
.vz-groupedbars .vzc-mark:hover .vzc-gb-bar{fill-opacity:.82}
.vz-groupedbars .vzc-gb-v{fill:var(--ink-2); font-weight:600}
.vz-groupedbars .vzc-cat{fill:var(--ink-3)}

/* ── area / line ────────────────────────────────────────────────────────── */

.vz-arealine .vzc-band{fill:var(--brand-tint); fill-opacity:.5}
.vz-arealine .vzc-band-e{stroke:var(--brand-pale); stroke-width:1}
.vz-arealine .vzc-tgt{stroke:var(--ink-3); stroke-width:1; stroke-dasharray:4 4; opacity:.75}
.vz-arealine .vzc-tgt-t{fill:var(--ink-3); font-weight:600}
.vz-arealine .vzc-leg-tgt{stroke:var(--ink-3); stroke-width:1.4; stroke-dasharray:4 3}
.vz-arealine .vzc-line{stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round}
.vz-arealine .vzc-dash{stroke-dasharray:5 4; stroke-opacity:.85}
.vz-arealine .vzc-pt{stroke:var(--bg-1); stroke-width:1.3; opacity:.9; transition:opacity .14s var(--ease)}
.vz-arealine .vzc-pt-last{stroke-width:1.8; opacity:1}
.vz-arealine .vzc-mark:hover .vzc-pt{opacity:1}
.vz-arealine .vzc-last-v{fill:var(--ink); font-weight:600}

/* ── pie / donut ────────────────────────────────────────────────────────── */

.vz-pie .vzc-arc,
.vz-donutfigure .vzc-arc{
  stroke:var(--bg-1); stroke-width:1.5; fill-opacity:.92;
  transition:fill-opacity .16s var(--ease);
}
.vz-pie .vzc-mark:hover .vzc-arc,
.vz-donutfigure .vzc-mark:hover .vzc-arc{fill-opacity:1}
.vz-donutfigure .vzc-c-fig{fill:var(--ink)}
.vz-donutfigure .vzc-c-lab{fill:var(--ink-3); letter-spacing:.07em; text-transform:uppercase; font-weight:600}

/* ── on a tinted ground ─────────────────────────────────────────────────── */

.on-ground [data-vz-compare]{--vzc-surface:var(--bg)}

@media (prefers-reduced-motion:reduce){
  [data-vz-compare] *{transition:none!important}
}

.vz-arealine .vzc-leg-d{stroke-width:2; stroke-dasharray:5 3; stroke-linecap:round}