/*
 * Horizontal splitter between the chart and the data inspector. The row-axis
 * mirror of ResizeHandle: a 6px-tall full-width hit target with a thin centered
 * grip, tracking the design tokens so it reads identically to the pane handles.
 */
.handle {
  flex: 0 0 6px;
  position: relative;
  cursor: row-resize;
  background: var(--border);
  touch-action: none; /* let pointer drags own the gesture, not scroll */
  transition: background var(--dur-fast) var(--ease);
}

.handle:hover,
.handle:focus-visible {
  background: var(--accent);
  outline: none;
}

/* A short centered grip line (horizontal), so the handle reads as a draggable divider. */
.grip {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 24px;
  height: 2px;
  transform: translate(-50%, -50%);
  background: var(--border-strong);
  border-radius: var(--radius);
}

.handle:hover .grip,
.handle:focus-visible .grip {
  background: var(--accent-contrast);
}