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>

frontend/src/lib/i18n.tsx

@@ -127,7 +127,7 @@ const en: Dict = {
   'mx.tipCallConf': 'This callsign confirmed', 'mx.tipCallWork': 'This callsign worked (not confirmed)',
   'mx.tipDxConf': 'Entity confirmed (other callsign)', 'mx.tipDxWork': 'Entity worked (other callsign)',
   'mx.tipNone': 'Never worked', 'mx.tipClick': 'click to list the QSOs',
-  'mx.thisCall': 'this callsign',
+  'mx.markWork': 'This callsign worked', 'mx.markConf': 'This callsign confirmed',
   'mx.tipThisCall': 'already worked with this callsign',
   'mx.tipThisCallConf': 'already confirmed with this callsign',
   // FTx decodes panel (Tools -> FT decodes)
@@ -616,7 +616,7 @@ const fr: Dict = {
   'mx.tipCallConf': 'Cet indicatif est confirmé', 'mx.tipCallWork': 'Cet indicatif est contacté (non confirmé)',
   'mx.tipDxConf': 'Entité confirmée (autre indicatif)', 'mx.tipDxWork': 'Entité contactée (autre indicatif)',
   'mx.tipNone': 'Jamais contacté', 'mx.tipClick': 'cliquer pour lister les QSO',
-  'mx.thisCall': 'cet indicatif',
+  'mx.markWork': 'Cet indicatif contacté', 'mx.markConf': 'Cet indicatif confirmé',
   'mx.tipThisCall': 'déjà contacté avec cet indicatif',
   'mx.tipThisCallConf': 'déjà confirmé avec cet indicatif',
   // Panneau des decodes FTx (Outils -> Decodes FT)

frontend/src/lib/matrixColors.ts

@@ -14,9 +14,11 @@ export type MatrixColors = {
   entity_worked: string;
   not_worked: string;
   current_entry: string;
+  mark_worked: string;
+  mark_confirmed: string;
 };
 
-// The six settings fields and the CSS custom property each one drives. Also the
+// The settings fields and the CSS custom property each one drives. Also the
 // display order — the same order the legend under the matrix reads in, so the
 // settings panel and the grid can never disagree about which green is which.
 export const MATRIX_VARS: { key: keyof Omit<MatrixColors, 'enabled'>; cssVar: string; label: string }[] = [
@@ -26,12 +28,15 @@ export const MATRIX_VARS: { key: keyof Omit<MatrixColors, 'enabled'>; cssVar: st
   { key: 'entity_worked',    cssVar: '--mx-dx-work',   label: 'mx.dxWork' },
   { key: 'not_worked',       cssVar: '--mx-none',      label: 'mx.none' },
   { key: 'current_entry',    cssVar: '--mx-cur',       label: 'mx.current' },
+  { key: 'mark_worked',      cssVar: '--mx-mark-work', label: 'mx.markWork' },
+  { key: 'mark_confirmed',   cssVar: '--mx-mark-conf', label: 'mx.markConf' },
 ];
 
 export const emptyMatrixColors = (): MatrixColors => ({
   enabled: false,
   call_confirmed: '', call_worked: '', entity_confirmed: '',
   entity_worked: '', not_worked: '', current_entry: '',
+  mark_worked: '', mark_confirmed: '',
 });
 
 // applyMatrixColors stamps (or clears) the overrides on <html>. Safe to call as

frontend/src/style.css

@@ -91,6 +91,11 @@
      be recoloured on its own without dragging every other warning in the app
      with it (Appearance → matrix colours). */
   --mx-cur: var(--warning);
+  /* The "worked with this callsign" dot. Declared ONCE, like --mx-cur: it is
+     drawn over every one of the five cell colours, so it follows the theme's own
+     foreground/background pair rather than a per-theme colour of its own. */
+  --mx-mark-work: var(--foreground);
+  --mx-mark-conf: var(--foreground);
 
   --scrollbar-thumb: #b8a880;
   --scrollbar-thumb-hover: #968455;
@@ -981,6 +986,8 @@
   --color-mx-dx-work: var(--mx-dx-work);
   --color-mx-none: var(--mx-none);
   --color-mx-cur: var(--mx-cur);
+  --color-mx-mark-work: var(--mx-mark-work);
+  --color-mx-mark-conf: var(--mx-mark-conf);
 
   --radius: 0.5rem;