feat(appearance): give the worked-with-this-call dot its own two colours

The dot is drawn over all five cell backgrounds, so it cannot borrow one of
their colours; it defaults to the theme foreground with a background ring and
now takes two overrides of its own, worked and confirmed, alongside the rest of
the matrix palette.

frontend/src/components/AppearancePanel.tsx

@@ -127,6 +127,12 @@ function MatrixColorsSection() {
             <span className="inline-block w-7 h-5 rounded bg-mx-dx-work" />
             <span className="inline-block w-7 h-5 rounded bg-mx-none" />
             <span className="inline-block w-7 h-5 rounded bg-mx-none ring-2 ring-mx-cur ring-inset" />
+            <span className="relative inline-block w-7 h-5 rounded bg-mx-dx-conf">
+              <span className="absolute top-[4px] right-[4px] size-[5px] rounded-full bg-mx-mark-work ring-1 ring-background" />
+            </span>
+            <span className="relative inline-block w-7 h-5 rounded bg-mx-dx-conf">
+              <span className="absolute top-[4px] right-[4px] size-[5px] rounded-full bg-mx-mark-conf ring-1 ring-background" />
+            </span>
           </div>
 
           <button type="button" onClick={reset}

frontend/src/components/BandSlotGrid.tsx

@@ -81,26 +81,32 @@ const STATUS_CLASSES: Record<string, string> = {
 // i18n keys the Appearance panel's colour pickers use, so the two can never
 // disagree about which green is which. swatch = the background class (or a
 // special ring marker for the current-entry cell).
-const LEGEND: { swatch: string; ring?: boolean; mark?: boolean; label: string }[] = [
+const LEGEND: { swatch: string; ring?: boolean; mark?: string; label: string }[] = [
   { swatch: 'bg-mx-call-conf', label: 'mx.callConf' },
   { swatch: 'bg-mx-call-work', label: 'mx.callWork' },
   { swatch: 'bg-mx-dx-conf', label: 'mx.dxConf' },
   { swatch: 'bg-mx-dx-work', label: 'mx.dxWork' },
   { swatch: 'bg-mx-none', label: 'mx.none' },
   { swatch: 'bg-mx-none', ring: true, label: 'mx.current' },
-  { swatch: 'bg-mx-none', mark: true, label: 'mx.thisCall' },
+  { swatch: 'bg-mx-none', mark: 'w', label: 'mx.markWork' },
+  { swatch: 'bg-mx-none', mark: 'c', label: 'mx.markConf' },
 ];
 
 // CallMark — "this callsign has already been worked on this slot".
 //
-// Drawn exactly the same way on every cell, whatever colour the entity status
-// gave it. That is the point: the operator learns one shape, and reads it
-// without first working out what the background means. The dot is the theme
-// foreground with a ring in the theme background, so it stays legible over all
-// five cell colours instead of needing a colour per case.
-function CallMark() {
+// Drawn the same way on every cell, whatever colour the entity status gave it:
+// the operator learns one shape and reads it without first working out what the
+// background means. Only the fill changes, and only with the callsign's own
+// state (worked / confirmed) — never with the entity's. The ring is the theme
+// background, which is what keeps the dot legible over all five cell colours.
+function CallMark({ state = 'w' }: { state?: string }) {
   return (
-    <span className="pointer-events-none absolute top-[4px] right-[4px] size-[5px] rounded-full bg-foreground ring-1 ring-background" />
+    <span
+      className={cn(
+        'pointer-events-none absolute top-[4px] right-[4px] size-[5px] rounded-full ring-1 ring-background',
+        state === 'c' ? 'bg-mx-mark-conf' : 'bg-mx-mark-work',
+      )}
+    />
   );
 }
 
@@ -354,7 +360,7 @@ export function BandSlotGrid({ wb, busy, currentBand, currentMode, bands, hasCal
                         isCurrent && 'ring-2 ring-mx-cur ring-inset',
                       )}
                     >
-                      {mine ? <CallMark /> : null}
+                      {mine ? <CallMark state={mine} /> : null}
                     </td>
                   );
                 })}
@@ -375,7 +381,7 @@ export function BandSlotGrid({ wb, busy, currentBand, currentMode, bands, hasCal
                 l.ring && 'ring-2 ring-mx-cur ring-inset',
               )}
             >
-              {l.mark ? <CallMark /> : null}
+              {l.mark ? <CallMark state={l.mark} /> : null}
             </span>
             {t(l.label)}
           </span>