Motivation

• Make public/capabilities.html feel more interactive and polished by adding subtle transparent hover and focus states without changing layout, copy, or JS behavior.
• Improve keyboard accessibility by providing clear focus-visible styling and preserve mobile/touch behavior by scoping lift effects to fine-pointer devices.

Description

• Added page-local CSS tokens (--hover-bg, --hover-border, --hover-shadow, --focus-ring) and a small set of transitions to public/capabilities.html to standardize hover/focus treatments.
• Applied hover/focus refinements to capability cards (.cap-card with :focus-within and :hover), verb pills (.cap-pill with :hover/:focus-visible), buttons/action controls (.btn, .build-action, .cap-action, .clear-plan, .verb-close), modal action buttons (.verb-actions .cap-action), and internal card links (a.cap-action).
• Added a subtle lift/translate effect on hover for pointer devices under @media (hover: hover) and (pointer: fine) and a visible keyboard focus ring replacement to preserve accessibility.
• No JavaScript or markup structure changes were made and schema/download link IDs, hrefs, and download attributes were left intact.

Testing

• Ran a selector sanity check with rg to confirm injected selectors were present and matched expected targets, which succeeded.
• Verified file staging state with git status --short, which showed M public/capabilities.html as expected.
• Committed the change with a normal git commit which completed successfully.
• Confirmed no JS logic was modified by inspecting the page script block and ensuring handlers and id attributes for schema/download buttons were unchanged.

Codex Task