fix(finder): colour the index badge with the shared helper

The badge painted the entry colour straight into the background and left
the text colour fixed, so a light entry colour rendered an unreadable
number. Every other place that tints an element by entry colour goes
through getAccessibleColour, which picks the text colour to match.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01DzALEq9gGWwFmwTdgAiFcY

apps/client/src/views/editor/finder/Finder.module.scss

@@ -86,7 +86,8 @@
 
   .index {
     grid-area: index;
-    background-color: var(--color, $gray-1000);
+    // background and text colour come from getAccessibleColour, which keeps the
+    // number legible whatever colour the user gave the entry
     border-radius: 2px;
     padding-block: 0.25rem;
     width: 3.5rem;

apps/client/src/views/editor/finder/Finder.tsx

@@ -4,6 +4,7 @@ import { KeyboardEvent, PointerEvent, useDeferredValue, useEffect, useRef, useSt
 import Input from '../../../common/components/input/input/Input';
 import Kbd from '../../../common/components/kbd/Kbd';
 import Modal from '../../../common/components/modal/Modal';
+import { getAccessibleColour } from '../../../common/utils/styleUtils';
 import useFinder, { FinderResult } from './useFinder';
 
 import style from './Finder.module.scss';
@@ -146,7 +147,7 @@ export default function Finder({ isOpen, onClose }: FinderProps) {
                   onPointerMove={(event) => handlePointerMove(event, entry.id)}
                 >
                   <div className={style.data}>
-                    <div className={style.index} style={{ '--color': entry.colour }}>
+                    <div className={style.index} style={getAccessibleColour(entry.colour)}>
                       {entry.eventIndex ?? '-'}
                     </div>
                     <div className={style.cue}>{entry.cue}</div>