A11y: red selection-fg + dark-mode selection bg & hairline

Tester reported that the new dark-gold selection-fg (the previous iteration) made selected and unselected rows hard to tell apart, even though both passed AA against the bg. Switching to red — Total Commander style — adds a strong hue cue on top of the luminance step, and in dark mode the row also picks up a slightly darker bg + a faint hairline between consecutive selected rows so dense selections stay countable.

- `--color-selection-fg-primary`: `#b60000` (light) and `#ff8c8c` (dark). Light goes from 1.80 → 2.48 diff vs unselected text, with strong hue separation. Dark stays at 1.83 — luminance-wise it's tight, but the new bg and hairline carry the rest of the differentiation.
- `--color-selection-bg`: dark mode only, `#141414` (a touch darker than `--color-bg-primary`). Light keeps the pane bg under selected text.
- `--color-selection-border`: dark mode only, faint fixed gray `rgba(255,255,255,0.10)`. Drawn as an `inset` box-shadow between consecutive selected rows — zero layout impact (row height stays exact). Skipped when the row is under the cursor (cursor is already the strong signal there).
- Zebra stripes auto-disabled on selected rows: `.is-selected`'s `background-color` already wins over `.is-striped` by cascade order.
- Both `FullList.svelte` and `BriefList.svelte` get the new rules.
- Removed `scripts/check-a11y-contrast/red_pick_test.go` (one-shot picker that surfaced the chosen reds; the decision is captured in `app.css` and the candidate evaluator is now in `diff_test.go::TestRedCandidates`).

Author: vdavid

apps/desktop/src/app.css

@@ -133,17 +133,28 @@
   --pane-tint-fg-pct: 10%;
 
   /* === Selection ===
-   * Selected-row text reads `--color-selection-fg`. The primary value carries
-   * the gold "this row is selected" identity. The fallback drops back to
-   * `--color-text-primary` for the few cases where the row bg is hostile
-   * enough that no recognizable gold can clear AA on top — specifically
-   * dark mode + a pane tint + cursor-active (yellow accent over a tinted
-   * dark surface). The CSS rule that switches between them lives further
-   * down in this file (search for "selection-fg fallback"). The contrast
-   * checker's `row_state_matrix.go` synthesizer mirrors that rule. */
-  --color-selection-fg-primary: #5a4000;
+   * Selected-row text reads `--color-selection-fg`. Inspired by Total
+   * Commander, we use red for selection — distinct enough from the
+   * default text color (black on light, white on dark) by hue and
+   * luminance to read clearly. The primary value carries the identity
+   * across the full row-state matrix; the fallback drops back to
+   * `--color-text-primary` for the dark + tinted + cursor-active corner
+   * where no AA-clearing red exists. The CSS rule that switches between
+   * them lives further down (search for "selection-fg fallback"). The
+   * contrast checker's `row_state_matrix.go` synthesizer mirrors it. */
+  --color-selection-fg-primary: #b60000;
   --color-selection-fg-fallback: var(--color-text-primary);
   --color-selection-fg: var(--color-selection-fg-primary);
+  /* Selection background and border — dark mode only (the light-mode
+   * red on white reads cleanly enough without a bg layer). The bg is a
+   * touch darker than `--color-bg-primary`, applied via a scoped rule
+   * in `FullList.svelte`. The border is a faint fixed gray (no accent
+   * relationship) that draws as an inset `box-shadow` between
+   * consecutive selected rows — purely there to keep dense selections
+   * visually countable. Both default to transparent so they're a no-op
+   * in light mode. */
+  --color-selection-bg: transparent;
+  --color-selection-border: transparent;
 
   /* === Git portal ===
      * Distinct from `--color-accent` to keep the "you're in history-land" feel
@@ -497,9 +508,14 @@
     /* === Focus ring shadow === */
     --shadow-focus-contrast: 0 0 0 4px color-mix(in srgb, white, transparent 92%);
 
-    /* === Selection (dark) === see light mode for primary/fallback rationale */
-    --color-selection-fg-primary: #d4a82a;
+    /* === Selection (dark) === see light mode for primary/fallback rationale.
+       In dark mode we also paint a slightly darker bg on selected rows and a
+       faint hairline between consecutive selected rows; the tokens default
+       to transparent in light so they're effectively dark-mode-only. */
+    --color-selection-fg-primary: #ff8c8c;
     --color-selection-fg-fallback: var(--color-text-primary);
+    --color-selection-bg: #141414;
+    --color-selection-border: rgba(255, 255, 255, 0.1);
 
     /* Git portal: brighter teal in dark mode for readability against
        the dark background. */

apps/desktop/src/lib/file-explorer/views/BriefList.svelte

@@ -999,6 +999,20 @@
         background-color: var(--color-bg-stripe);
     }
 
+    /* Selected rows: darker bg (dark mode only — see FullList.svelte and
+       app.css). Cursor rules win by specificity, so cursor-on-selected
+       still shows the cursor highlight. */
+    .file-entry.is-selected {
+        background-color: var(--color-selection-bg);
+    }
+
+    /* Faint hairline between two consecutive selected rows. `box-shadow:
+       inset` draws on top of `background-color` and takes zero layout
+       space. Skipped when the row is under the cursor. */
+    .file-entry.is-selected + .file-entry.is-selected:not(.is-under-cursor) {
+        box-shadow: inset 0 1px 0 var(--color-selection-border);
+    }
+
     .file-entry.is-under-cursor {
         background-color: var(--color-cursor-inactive);
     }

apps/desktop/src/lib/file-explorer/views/FullList.svelte

@@ -1003,6 +1003,24 @@
         background-color: var(--color-bg-stripe);
     }
 
+    /* Selected rows: darker bg (dark mode only — tokens default to
+       transparent in light) overrides the stripe so the selection reads
+       as a single block. Cursor rules win by specificity (see below), so
+       cursor-on-selected still shows the cursor highlight. */
+    .file-entry.is-selected {
+        background-color: var(--color-selection-bg);
+    }
+
+    /* Faint hairline between two consecutive selected rows so dense
+       selections stay countable. `box-shadow: inset` draws on top of
+       `background-color` and takes zero layout space, so row height
+       doesn't jump. Skipped when the row is under the cursor — cursor
+       is already a strong visual signal, no need for the divider on
+       top of it. */
+    .file-entry.is-selected + .file-entry.is-selected:not(.is-under-cursor) {
+        box-shadow: inset 0 1px 0 var(--color-selection-border);
+    }
+
     .file-entry.is-under-cursor {
         background-color: var(--color-cursor-inactive);
     }

scripts/check-a11y-contrast/diff_test.go

@@ -60,8 +60,8 @@ func TestSelectionDiff(t *testing.T) {
 }
 
 // TestRedCandidates checks each candidate red against TWO constraints:
-//   1. WCAG AA (≥4.5:1) on the worst-case row bg for its mode.
-//   2. Differentiation ratio (≥some target) against `--color-text-primary`.
+//  1. WCAG AA (≥4.5:1) on the worst-case row bg for its mode.
+//  2. Differentiation ratio (≥some target) against `--color-text-primary`.
 //
 // Worst-case bgs are sampled from the existing matrix output; we don't
 // recompute them here.