Preserve diff meaning in forced-colors mode

Keep added and removed diff lines distinguishable in forced-colors mode through system colors, borders, and existing textual markers.

EasyResilient CSS

30 min0% acceptance

Description

Keep added and removed diff lines distinguishable in forced-colors mode through system colors, borders, and existing textual markers. Implement the learner-facing contract completely and satisfy every observable requirement without relying on hidden infrastructure.

Requirements

Keep the shared challenge shell free of horizontal overflow.
Make added and removed challenge-item rows visually distinguishable in normal colors.
Use forced-color system colors that remain visible against Canvas.
Keep different border or text treatment for added and removed rows in forced-colors mode.
Do not hide the existing plus and minus text markers.
Keep a visible challenge-control focus indicator in forced-colors mode.

Normal mode

Input

View added and removed rows

Expected output

The two states use distinct styling and signs

Explanation

Keep the shared challenge shell free of horizontal overflow.

Forced colors

Input

Activate a high-contrast palette

Expected output

System colors, borders, and signs retain the distinction

Explanation

Make added and removed challenge-item rows visually distinguishable in normal colors.

Constraints

Edit CSS only and keep the supplied shared fixture class names
Support narrow and wide viewports without horizontal page overflow
Preserve visible keyboard focus and readable text in every tested mode

Hints

Hint 1

Start with the shell-readable-layout behavior and make its observable result deterministic.

Hint 2

Model default-diff-distinction independently before combining it with the remaining states.

Hint 3

Verify the boundary described by control-focus-visible without changing caller-owned input.

CSSforced colorsdiff