/* Charts, Arc-style (piece 23, 2026-10-29).
 *
 * The chart engines are not rewritten. Their canvases take the shared
 * palette from the tokens in script (chart_kit.js getTheme, pipeline_charts.js
 * palette/theme): series 1–4 from --arc-series-*, a hairline grid in
 * --arc-border-subtle, axis labels at 11px in muted ink, and one Chart.js
 * tooltip look. This file gives the DOM parts the same look:
 *
 * - one tooltip (Arc tooltip): raised surface, 8px corners, the floating
 *   shadow, a hairline edge, 12px tabular figures, the date in secondary ink;
 * - the measure readout in the same bubble;
 * - the in-place text-label field that replaced the native prompt;
 * - tabular figures in the pipeline mini cards and chart legends.
 */

html body:is(body, #oc-arc):is(body, #oc-arc-2) {
  --ck-tooltip-bg: var(--arc-surface-raised);
  --ck-tooltip-border: var(--arc-border);
  --ck-tooltip-text: var(--arc-foreground);
  --ck-tooltip-muted: var(--arc-text-secondary);
}

html body:is(body, #oc-arc):is(body, #oc-arc-2) :is(.ck-tooltip, .ck-measure-hud) {
  border-radius: var(--arc-radius-control);
  border: 1px solid var(--arc-border);
  background: var(--arc-surface-raised);
  box-shadow: var(--arc-shadow-floating);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  color: var(--arc-foreground);
  font-size: var(--arc-text-xs);
  font-weight: var(--arc-weight);
  font-variant-numeric: tabular-nums;
}
html body:is(body, #oc-arc):is(body, #oc-arc-2) .ck-tooltip {
  transition: opacity var(--arc-dur-instant) var(--arc-ease);
}
html body:is(body, #oc-arc):is(body, #oc-arc-2) .ck-tooltip-date {
  color: var(--arc-text-secondary);
  font-weight: var(--arc-weight-strong);
  letter-spacing: 0;
}
html body:is(body, #oc-arc):is(body, #oc-arc-2) .ck-tooltip-row .ck-tk {
  color: var(--arc-text-secondary);
  font-weight: var(--arc-weight);
}
html body:is(body, #oc-arc):is(body, #oc-arc-2) .ck-tooltip-row .ck-tv {
  font-weight: var(--arc-weight-strong);
}
html body:is(body, #oc-arc):is(body, #oc-arc-2) .ck-tooltip-ch {
  border-top-color: var(--arc-border-subtle);
}

/* The text label is typed in place where the chart was clicked. */
.ck-text-ask {
  position: absolute;
  z-index: 9;
  transform: translate(6px, -50%);
  width: 12rem;
  max-width: calc(100% - 12px);
  height: var(--arc-control-sm);
  padding: 0 var(--arc-space-2);
  border: 1px solid var(--arc-border-strong);
  border-radius: var(--arc-radius-control);
  background: var(--arc-surface-raised);
  box-shadow: var(--arc-shadow-floating);
  color: var(--arc-foreground);
  font: inherit;
  font-size: var(--arc-text-xs);
  pointer-events: auto;
  animation: ck-text-ask-in var(--arc-dur) var(--arc-ease-enter) both;
}
.ck-text-ask:focus-visible,
.ck-text-ask:focus {
  outline: 2px solid var(--arc-focus);
  outline-offset: 1px;
}
@keyframes ck-text-ask-in {
  from { opacity: 0; transform: translate(6px, calc(-50% + 3px)); }
  to { opacity: 1; transform: translate(6px, -50%); }
}

html body:is(body, #oc-arc):is(body, #oc-arc-2) :is(.pc-mini__value, .pc-mini__delta, .pc-bullet__value, .pub-chart-legend, .ck-legend, .ck-status-range) {
  font-variant-numeric: tabular-nums;
}
html body:is(body, #oc-arc):is(body, #oc-arc-2) :is(.pc-mini__asof, .pc-caption) {
  color: var(--arc-text-muted);
  font-size: var(--arc-text-2xs);
}

@media (prefers-reduced-motion: reduce) {
  .ck-text-ask { animation: none; }
}