Cursor rule

1---
2description: crit — frontend css
3globs: web/style.css,web/theme.css
4alwaysApply: false
5---
6 
7# CSS Rules
8 
9## Theming (Stylelint catches hardcoded colors; check-css-vars.sh catches undefined vars)
10- When adding themed elements, define color values in ALL 4 theme blocks in theme.css: `:root` (dark fallback), `prefers-color-scheme: light`, `[data-theme="dark"]`, `[data-theme="light"]`.
11 
12## Responsive & Touch
13- Mobile layout rules go inside `@media (max-width: 768px)`. Touch affordances go inside `@media (pointer: coarse)`. Desktop-only hover interactions go inside `@media (pointer: fine)`.
14- Hover-only interactive elements (`.line-add`, `.diff-comment-btn`) must be `display: none` by default and `display: flex` inside `@media (pointer: fine)`. This prevents flash-on-tap on touch devices where `.drag-endpoint` briefly applies.
15- Touch targets must be ≥ 44×44px under `@media (pointer: coarse)` (WCAG 2.5.5).
16- Comment textarea and reply input must be `font-size: 16px` under mobile to suppress iOS Safari focus-zoom.
17 
18## Selectors
19- After renaming a CSS class or DOM element ID, search for and remove ALL references to the old name in CSS AND JS.
20- Check that all CSS selectors referenced in JS (`querySelector`, `classList.contains`) match actual class names in CSS.
21