[enaboapps]

Closes #1001

What

• Layer scope: the brace closing @layer components { (opened near the top of src/ui/app.css) sat after the max-height media query, unlabelled. Everything appended after it was unlayered: the aria-disabled button styles, the sidebar account entry, the Account page, and the wide-window layout. Unlayered CSS outranks layered CSS regardless of specificity. The layer now closes at the end of the file, labelled /* end @layer components */.

• High Contrast fix: the forced-colours rule that greys aria-disabled buttons was less specific than the normal aria-disabled rule, so it never applied. It now sits right after that rule, with the same selector.

• Pending sign-in: on wide windows, the step that waits for a code (band and code form only) uses one full-width column instead of leaving the right half empty.

• Review fix (hover): the newly layered aria-disabled rule was outranked by .btn.secondary.danger:hover (0,4,0), so hovering a busy Delete account… showed the hover background. A :hover form of the rule now outranks variant hover rules. A hover probe on a secondary danger aria-disabled button shows the same disabled background idle and hovered.

• Review fix (forced-colours hover): the forced-colours GrayText rule gains the same :hover form, so it ties with the normal rule and wins by order. A probe with forced colours off and on shows identical idle and hover colours: disabled grey normally, GrayText in High Contrast.

Validation

• npm run lint, npm test (290 passed) and npm run build. The CSS brace structure was checked with a script: the layer closes on the last line, with nothing unmatched.
• Normal rendering is unchanged. Every page (Home, Switches, Scanning, Mouse, Mobile, Switch Forwarding, all Settings tabs, Help, Account) was captured before and after in headless Chrome at 2048px and 920px, in dark and light themes. With the clock-dependent sync time pinned, the screenshots are byte-identical.
• High Contrast, checked with a computed-style probe under emulated forced colours on an aria-disabled button: main gives rgb(255, 255, 255) (ButtonText), and this branch gives rgb(63, 242, 63) (GrayText). In the light palette, GrayText renders dark red, as seen in the forced-colours screenshot.
• Pending sign-in at 2048px: the band and code card span the full width.

🤖 Generated with Claude Code