/* OrbevaViz — token-only styles for the data-representation toolkit (UI System Spec §L5-viz).
   Self-contained: defines the shared .ov-empty-chart + .ov-chart-table (visually-hidden a11y data
   table) so it does NOT depend on orbeva-charts.css. Colours on the marks come from the
   SVG's inline var(--viz-*) fills/strokes; this file handles chrome/typography/geometry only. */

/* Data-viz series tokens (Tier-3, UI System Spec §L1). Defined HERE — in the viz layer's own CSS —
   not in the global tokens.css, so only pages that load the toolkit pay for them (zero first-load
   weight on non-viz surfaces). Each defaults to a semantic token; tone-carrying series use --pos/
   --neg/--warn directly. Identical block in orbeva-graph.css — safe to load either/both. */
:root{
  --viz-1:var(--info);   --viz-2:var(--accent);  --viz-3:var(--pos);
  --viz-4:var(--warn);   --viz-5:var(--violet);  --viz-6:var(--teal);
  --viz-grid:var(--line);        --viz-axis:var(--ink-faint);      --viz-track:var(--line-strong);
}

/* Treemap (squarify) */
.ov-tm-cell rect { stroke: var(--surface); stroke-width: 1; }
.ov-tm-label { fill: var(--accent-ink); font-size: var(--text-3xs); font-weight: 800; }
.ov-tm-val { fill: color-mix(in oklch, var(--accent-ink) 78%, transparent); font-size: var(--text-3xs); font-variant-numeric: tabular-nums; }

/* Sankey */
.ov-sk-link { fill: none; stroke: var(--viz-grid, var(--line-strong)); stroke-opacity: .4; }
.ov-sk-node rect { stroke: var(--surface); stroke-width: 1; }
.ov-sk-label { fill: var(--ink-dim); font-size: var(--text-3xs); font-weight: 700; }

/* Shared chart primitives (also in orbeva-graph.css — identical; safe to load either/both). */
.ov-empty-chart { padding: 14px 10px; color: var(--ink-dim); font-size: var(--text-xs); text-align: center; }
.ov-chart-table {
  display: block !important;
  position: absolute !important;
  inline-size: 1px !important;
  block-size: 1px !important;
  max-inline-size: 1px !important;
  max-block-size: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.ov-viz-shell { position: relative; min-width: 0; }
.ov-viz-shell svg { display: block; max-width: 100%; height: auto; }
.ov-viz-cap { margin-top: 4px; text-align: center; font-size: var(--text-3xs); color: var(--ink-dim); font-weight: 800; }

/* Sparkline */
.ov-spark-line { fill: none; stroke-width: 1.75; stroke-linejoin: round; stroke-linecap: round; }
.ov-spark-area { opacity: .14; }
.ov-spark-dot { stroke: var(--surface); stroke-width: 1.25; }

/* Ring / radial gauge */
.ov-ring-track { fill: none; stroke: var(--line-strong); }
.ov-ring-fill { fill: none; stroke-linecap: round; transition: stroke-dashoffset var(--dur-amb) var(--ease-out); }
.ov-ring-value { fill: var(--ink); font-size: var(--text-md); font-weight: 900; font-variant-numeric: tabular-nums slashed-zero; }
@media (prefers-reduced-motion: reduce) { .ov-ring-fill { transition: none; } }

/* Donut */
.ov-donut-arc { fill: none; stroke-linecap: butt; }
.ov-donut-center { fill: var(--ink); font-size: var(--text-md); font-weight: 900; font-variant-numeric: tabular-nums; }
.ov-viz-legend { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 5px; }
.ov-viz-legend li { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--text-xs); color: var(--ink-dim); min-width: 0; }
.ov-viz-legend li i { flex: none; width: 10px; height: 10px; border-radius: 3px; }
.ov-viz-legend li b { margin-left: auto; color: var(--ink); font-variant-numeric: tabular-nums; }

/* LineArea */
.ov-la-line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.ov-la-area { opacity: .13; }
.ov-la-base { stroke: var(--line); stroke-width: 1; }
.ov-la-dot { stroke: var(--surface); stroke-width: 1.5; }
/* WG-SERIES fan band + projection (Interaction Grammar §6 V1). The band polygons carry the series
   tone as an inline currentColor; each nested pair fills via color-mix at DESCENDING alpha (the
   BoE fan: outer intervals fade out) — token-only, no hex. The projected tail is a SEPARATE dashed
   polyline; the V1 refusal chip renders when a projection arrives without uncertainty data. */
.ov-la-band { stroke: none; }
.ov-band-1 { fill: color-mix(in oklch, currentColor 22%, transparent); }
.ov-band-2 { fill: color-mix(in oklch, currentColor 13%, transparent); }
.ov-band-3 { fill: color-mix(in oklch, currentColor 7%, transparent); }
.ov-la-future { stroke-dasharray: 5 4; stroke-width: 1.75; }
.ov-la-compare { stroke-dasharray: 4 4; stroke-width: 1.65; opacity: .9; }
.ov-la-legend { display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:6px;color:var(--ink-faint);font-size:var(--text-2xs);font-weight:700; }
.ov-la-legend span { display:inline-flex;align-items:center;gap:5px; }
.ov-la-key { display:inline-block;width:18px;height:0;border-top:2px solid currentColor; }
.ov-la-key--compare { border-top-style:dashed; }
.ov-la-mark { fill: var(--ink-faint); stroke: var(--surface); stroke-width: 1; }
/* FH7 §2 axis grammar (opt-in `axis:true`): dashed --tick gridline whispers at the observed hi/lo,
   a dashed zero baseline when the range crosses 0, and 10px --faint axis text — month names under
   the line from the payload's own keys, compact values on the right. Static ink (no motion; the
   line's M6 draw-on via chart-enhance settle is untouched). */
.ov-la-grid { stroke: var(--tick, var(--line)); stroke-width: 1; stroke-dasharray: 3 3; }
.ov-la-zero { stroke: var(--tick, var(--line-strong)); stroke-width: 1.25; stroke-dasharray: 2 3; }
/* Canon graph treatment: the series' own start value as a dashed reference baseline. */
.ov-la-base { stroke: var(--tick, var(--line)); stroke-width: 1; stroke-dasharray: 5 4; opacity: .8; }
.ov-la-xlab, .ov-la-ylab { fill: var(--viz-axis, var(--ink-faint)); font-size: var(--text-3xs, 10px); font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.ov-viz-assumptions { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; min-width: 0; }
.ov-viz-chip {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 2px 8px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--ink-dim);
  font-size: var(--text-3xs);
  font-weight: 700;
}
.ov-viz-chip--refusal { border-color: color-mix(in oklch, var(--warn) 32%, transparent); color: var(--warn); background: color-mix(in oklch, var(--warn) 9%, transparent); }

/* CalendarHeatmap */
.ov-cal-cell { stroke: var(--surface); stroke-width: .5; }

/* Timeline */
.ov-tl-axis { stroke: var(--line-strong); stroke-width: 2; }
.ov-tl-ev circle { stroke: var(--surface); stroke-width: 1.5; }
.ov-tl-label { fill: var(--ink); font-size: var(--text-3xs); font-weight: 800; }
.ov-tl-sub { fill: var(--ink-faint); font-size: var(--text-3xs); }

/* Radar / spider */
.ov-radar-grid { fill: none; stroke: var(--line); stroke-width: 1; }
.ov-radar-spoke { stroke: var(--line); stroke-width: 1; }
.ov-radar-area { fill-opacity: .18; stroke-width: 2; stroke-linejoin: round; }
.ov-radar-label { fill: var(--ink-dim); font-size: var(--text-3xs); font-weight: 800; }

/* Dumbbell — you vs typical */
.ov-db-label { fill: var(--ink-dim); font-size: var(--text-2xs); font-weight: 700; }
.ov-db-track { stroke: var(--line-strong); stroke-width: 2; stroke-linecap: round; }
.ov-db-typical { fill: var(--ink-faint); stroke: var(--surface); stroke-width: 1; }
.ov-db-you { fill: var(--accent); stroke: var(--surface); stroke-width: 1.5; }

/* Stacked / 100% bar */
.ov-stack { display: flex; height: 14px; border-radius: var(--r-pill); overflow: hidden; border: 1px solid var(--line-strong); background: var(--surface-2); }
.ov-stack-seg { display: block; height: 100%; min-width: 2px; }
.ov-stack-seg + .ov-stack-seg { box-shadow: inset 1px 0 0 var(--surface); }

/* Waterfall */
.ov-wf-bar { transition: filter var(--dur-fast) var(--ease-out); }
.ov-wf-label { fill: var(--ink-faint); font-size: var(--text-3xs); font-weight: 700; }
@media (hover: hover) { .ov-wf-bar:hover { filter: brightness(1.1); } }
@media (prefers-reduced-motion: reduce) { .ov-wf-bar { transition: none; } }

/* ---- ex-OrbevaCharts renderers (S8.4 engine fold) — histogram / paretoBars / bulletBars.
   Byte-ported from the retired orbeva-charts.css; the shared .ov-empty-chart/.ov-chart-table
   already live above. ONE css source for the toolkit. ---- */
.ov-hist-shell,
.ov-pareto-shell,
.ov-bullet-shell { position: relative; min-width: 0; }

.ov-hist-bars {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(34px, 1fr));
  align-items: end;
  gap: 8px;
  min-height: 132px;
  padding: 10px 2px 2px;
}

.ov-hist-bar {
  min-width: 0;
  min-height: 8px;
  border-radius: 10px 10px 5px 5px;
  /* P50 (F10 lesson, R3 audit): a DATA fill is one solid tone — gradients are material, never data */
  background: var(--info);
  border: 1px solid color-mix(in oklch, var(--info) 42%, transparent);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  gap: 5px;
  padding: 7px 4px 6px;
  color: var(--ink);
}

.ov-hist-bar.latest { background: var(--accent); }

.ov-hist-bar.muted {
  background: var(--surface-2);
  border-style: dashed;
  color: var(--ink-faint);
  opacity: .72;
}

.ov-hist-bar.tone-warn,
.ov-pareto-row.tone-warn .ov-pareto-track i,
.ov-bullet-row.tone-warn .ov-bullet-track i { background: var(--warn); }

.ov-hist-bar.tone-neg,
.ov-pareto-row.tone-neg .ov-pareto-track i,
.ov-bullet-row.tone-neg .ov-bullet-track i { background: var(--neg); }

.ov-hist-bar.tone-pos,
.ov-pareto-row.tone-pos .ov-pareto-track i,
.ov-bullet-row.tone-pos .ov-bullet-track i { background: var(--pos); }

.ov-hist-value {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: var(--text-3xs);
  line-height: 1;
  font-weight: 900;
  font-variant-numeric: tabular-nums slashed-zero;
}

.ov-hist-bar b {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 10px;
  line-height: 1;
  color: color-mix(in oklch, currentColor 76%, transparent);
  font-weight: 900;
}

.ov-pareto-shell,
.ov-bullet-shell { display: grid; gap: 10px; }

.ov-pareto-row,
.ov-bullet-row { min-width: 0; }

.ov-pareto-top,
.ov-bullet-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  min-width: 0;
  margin-bottom: 5px;
}

.ov-pareto-top b,
.ov-bullet-top b {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--ink);
  font-size: var(--text-sm);
  font-weight: 900;
}

.ov-pareto-top span,
.ov-bullet-top span {
  flex: none;
  color: var(--pos);
  font-size: var(--text-sm);
  font-weight: 950;
  font-variant-numeric: tabular-nums slashed-zero;
}

.ov-pareto-row.tone-warn .ov-pareto-top span,
.ov-bullet-row.tone-warn .ov-bullet-top span { color: var(--warn); }

.ov-pareto-row.tone-neg .ov-pareto-top span,
.ov-bullet-row.tone-neg .ov-bullet-top span { color: var(--neg); }

.ov-pareto-track,
.ov-bullet-track {
  position: relative;
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--surface-2);
  border: 1px solid var(--line);
}

.ov-pareto-track i,
.ov-bullet-track i {
  display: block;
  height: 100%;
  max-width: 100%;
  border-radius: 999px;
  /* P50: solid default fill — tone-* rows above override with their own single tone */
  background: var(--info);
}

.ov-bullet-track {
  overflow: visible;
  background:
    linear-gradient(90deg,
      color-mix(in oklch, var(--pos) 14%, transparent) 0 30%,
      color-mix(in oklch, var(--warn) 13%, transparent) 30% 70%,
      color-mix(in oklch, var(--neg) 13%, transparent) 70% 100%),
    var(--surface-2);
}

.ov-bullet-track i { height: 8px; }

.ov-bullet-track em {
  position: absolute;
  top: -4px;
  bottom: -4px;
  width: 2px;
  transform: translateX(-1px);
  border-radius: 999px;
  background: var(--ink-faint);
  box-shadow: 0 0 0 2px var(--surface);
}

.ov-pareto-sub,
.ov-bullet-sub {
  margin-top: 4px;
  color: var(--ink-dim);
  font-size: var(--text-3xs);
  line-height: 1.25;
}