/* ==========================================================================
   Charts — recessive chrome, thin marks, colour only where it means something
   ========================================================================== */

.chart {
  position: relative;
  width: 100%;
  touch-action: pan-y;
  user-select: none;
}

.chart svg {
  display: block;
  overflow: visible;
}

.chart-text {
  font: 400 11.5px/1 var(--font-text);
  fill: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
.chart-text--strong { fill: var(--ink); font-weight: 600; }
.chart-text--accent { fill: var(--accent); font-weight: 600; }

.chart-grid { stroke: var(--chart-grid); stroke-width: 1; }
.chart-axis { stroke: var(--line-2); stroke-width: 1; }

.chart-line {
  fill: none;
  stroke: var(--chart-ink);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.chart-line--mute { stroke: var(--chart-mute); }
.chart-line--accent { stroke: var(--accent-vivid); }

.chart-dot { fill: var(--chart-ink); stroke: var(--surface); stroke-width: 2.5; }
.chart-dot.is-accent { fill: var(--accent-vivid); }

.chart-target { stroke: var(--accent-vivid); stroke-width: 1.5; stroke-dasharray: 5 5; }
.chart-cross { stroke: var(--line-3); stroke-width: 1; pointer-events: none; }
.chart-guide { stroke: var(--line-3); stroke-width: 1; stroke-dasharray: 2 4; pointer-events: none; }

.chart-handle {
  fill: var(--surface-raised);
  stroke: var(--ink);
  stroke-width: 2.5;
  cursor: grab;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.18));
  transition: r var(--t-2) var(--ease-out);
}
.chart.is-dragging .chart-handle { cursor: grabbing; r: 11px; }
.chart.is-dragging { cursor: grabbing; }
.chart-handle:focus-visible { outline: none; stroke: var(--accent-vivid); stroke-width: 3.5; }
.chart--drag { cursor: ew-resize; touch-action: none; }

.chart-flag rect { fill: var(--ink); }
.chart-flag__text { font: 600 12.5px/1 var(--font-text); fill: var(--bg); font-variant-numeric: tabular-nums; }

.chart-pin { cursor: pointer; }
.chart-pin__line { stroke: var(--accent-vivid); stroke-width: 1.5; stroke-dasharray: 3 5; }

.chart-bar { fill: var(--chart-mute); transition: fill var(--t-3) var(--ease-out), opacity var(--t-2); }
.chart-bar.is-accent { fill: var(--accent-vivid); }
.chart-bar.is-hover { opacity: 0.72; }
.chart-hit { outline: none; }
.chart-hit:focus-visible { stroke: var(--ink); stroke-width: 1.5; }

.chart-tip {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
  padding: 8px 11px;
  border-radius: 10px;
  background: var(--ink);
  color: var(--bg);
  font: 400 12px/1.35 var(--font-text);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--t-2) var(--ease-out);
}
.chart-tip.is-in { opacity: 1; }
.chart-tip strong { display: block; font: 600 13.5px/1.3 var(--font-text); font-variant-numeric: tabular-nums; }
.chart-tip span { opacity: 0.7; }

.spark { display: block; }