Remove !important declarations from component CSS

[ravisuhag]

Summary

Several component CSS modules use !important declarations to override specificity conflicts. This is a code smell indicating underlying CSS architecture issues and makes styles harder to override for consumers.

Goal

Eliminate all !important declarations by fixing the underlying specificity issues through proper CSS cascade, selector specificity, or CSS Modules scoping.

Affected Components

Component	Issue	Details
Search (#632)	item 1	Two !important flags (lines 17, 21) — specificity conflicts
FilterChip (#616)	item 1	11 !important declarations — heavy specificity issues
CodeBlock (#606)	item 1	!important on .token.comment color in syntax theme
Calendar (#602)	item 3	.calendarPopover uses !important for padding and border

Common Fixes

1. Increase selector specificity — use CSS Modules' :local scoping or add a parent class
2. Reorder CSS — ensure component styles load after base/reset styles
3. Use @layer — CSS cascade layers to control specificity without !important
4. Flatten selectors — reduce nesting that causes specificity wars

Acceptance Criteria

• Zero !important declarations in component CSS modules
• Styles still render correctly without !important
• Consumer style overrides work without needing !important