/* Neutral data visualisation contract. */

:root {
  --chart-series-primary: var(--color-cobalt);
  --chart-series-comparison: var(--color-text);
  --chart-series-success: var(--color-success);
  --chart-series-warning: var(--color-warning);
  --chart-series-error: var(--color-error);
  --chart-axis-text: var(--color-metadata);
  --chart-axis-title: var(--color-text);
  --chart-grid: var(--color-divider);
  --chart-frame: var(--color-divider);
  --chart-threshold: var(--color-slate);
  --chart-surface: var(--color-canvas);
  --chart-tooltip-background: var(--color-text);
  --chart-tooltip-text: var(--color-canvas);
  --chart-primary-stroke: 2px;
  --chart-structural-stroke: 1px;
  --chart-point-size: 7px;
  --chart-transition-duration: 260ms;
  --chart-transition-easing: cubic-bezier(0.2, 0.65, 0.3, 1);
  --chart-axis-reserve-y: 4rem;
  --chart-tooltip-radius: var(--radius-overlay);
}

.neutral-chart {
  position: relative;
  min-width: 0;
  color: var(--chart-axis-title);
  background: var(--chart-surface);
}

.neutral-chart svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.neutral-chart__frame,
.neutral-chart__grid,
.neutral-chart__axis {
  fill: none;
  stroke: var(--chart-grid);
  stroke-width: var(--chart-structural-stroke);
  vector-effect: non-scaling-stroke;
}

.neutral-chart__frame {
  stroke: var(--chart-frame);
}

.neutral-chart__series-primary {
  fill: none;
  stroke: var(--chart-series-primary);
  stroke-linecap: square;
  stroke-linejoin: miter;
  stroke-width: var(--chart-primary-stroke);
  vector-effect: non-scaling-stroke;
}

.neutral-chart__series-comparison {
  fill: none;
  stroke: var(--chart-series-comparison);
  stroke-dasharray: 4 4;
  stroke-width: var(--chart-structural-stroke);
  vector-effect: non-scaling-stroke;
}

.neutral-chart__threshold {
  stroke: var(--chart-threshold);
  stroke-dasharray: 4 4;
  stroke-width: var(--chart-structural-stroke);
  vector-effect: non-scaling-stroke;
}

.neutral-chart__point {
  fill: var(--chart-surface);
  stroke: var(--chart-series-primary);
  stroke-width: var(--chart-primary-stroke);
  vector-effect: non-scaling-stroke;
}

.neutral-chart__axis-text,
.neutral-chart__value {
  fill: var(--chart-axis-text);
  font-family: var(--font-mono);
  font-size: var(--type-technical-label-size);
  font-weight: var(--font-weight-technical-emphasis);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "liga" 0, "calt" 0;
}

.neutral-chart__axis-title {
  fill: var(--chart-axis-title);
  font-family: var(--font-sans);
  font-size: var(--type-ui-metadata-size);
  font-weight: var(--font-weight-heading);
}

.neutral-chart__hit-area {
  fill: transparent;
  cursor: crosshair;
  pointer-events: all;
}

.neutral-chart__guide {
  stroke: var(--chart-axis-title);
  stroke-width: var(--chart-structural-stroke);
  vector-effect: non-scaling-stroke;
}

.neutral-chart__tooltip {
  position: absolute;
  z-index: 2;
  min-width: 8rem;
  padding: var(--space-2) var(--space-3);
  color: var(--chart-tooltip-text);
  background: var(--chart-tooltip-background);
  border: var(--rule-default) solid var(--chart-frame);
  border-radius: var(--chart-tooltip-radius);
  font-family: var(--font-sans);
  font-size: var(--type-ui-metadata-size);
  font-weight: var(--font-weight-heading);
  pointer-events: none;
}

.neutral-chart__tooltip-value {
  font-family: var(--font-mono);
  font-weight: var(--font-weight-technical-emphasis);
  font-variant-numeric: tabular-nums;
}

.neutral-range-selector {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}

.neutral-range-selector__option {
  min-width: var(--control-height-dense);
  min-height: var(--control-height-dense);
  padding-inline: var(--space-2);
  color: var(--color-metadata);
  background: transparent;
  border: var(--rule-default) solid transparent;
  border-radius: var(--radius-control);
  font-family: var(--font-mono);
  font-size: var(--type-technical-label-size);
  font-weight: var(--font-weight-technical-emphasis);
  cursor: pointer;
}

.neutral-range-selector__option:hover:not(:disabled) {
  color: var(--color-text);
  border-color: var(--color-divider);
}

.neutral-range-selector__option[aria-pressed="true"],
.neutral-range-selector__option[aria-selected="true"] {
  color: var(--color-action-text);
  background: var(--color-action);
  border-color: var(--color-action);
}

.neutral-range-selector__option:focus-visible,
.neutral-chart__hit-area:focus-visible {
  outline: var(--focus-width) solid var(--color-cobalt);
  outline-offset: var(--focus-offset);
}

@media (pointer: coarse) {
  .neutral-range-selector__option {
    min-width: var(--target-touch-min);
    min-height: var(--target-touch-min);
  }
}

@media (prefers-reduced-motion: reduce) {
  .neutral-chart *,
  .neutral-range-selector__option {
    animation-duration: 0ms !important;
    transition-duration: 0ms !important;
  }
}