Configure stylelint to lint both styled-components and plain CSS files

Added dual stylelint configuration to support the hybrid migration approach
where styled-components (.tsx) and plain CSS (.css) coexist during the
transition period.

Changes:
- Created .stylelintrc.css.json for plain CSS files
  - Uses stylelint-config-standard without styled-components processor
  - Maintains same linting rules as .stylelintrc for consistency

- Updated package.json scripts:
  - lint:css now runs both lint:css:tsx and lint:css:plain
  - lint:css:tsx: Lints .tsx files with styled-components (existing)
  - lint:css:plain: Lints .css files with new config

This addresses Copilot's review comment about Modal.css not being covered
by CI stylelint. Now both legacy styled-components and new plain CSS files
will be linted during the build process.

Eventually, when all styled-components are migrated to plain CSS, we can
simplify to a single stylelint configuration for .css files only.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Fix remaining CSS lint errors across the codebase

Addressed all remaining stylelint errors and warnings identified in review #21:

1. src/index.css:
   - Moved @import statements to top of file (lines 1-2) to fix no-invalid-position-at-import-rule errors

2. src/app/components/Checkbox.css:
   - Added stylelint-disable comment for intentional duplicate outline (webkit fallback)
   - Added stylelint-disable block for no-descending-specificity warnings (focus-within selectors intentionally override input state selectors for proper CSS cascade)

3. src/app/components/ScrollLock.css:
   - Added stylelint-disable comment for !important on overflow (must override scroll lock for printing)

4. src/app/content/components/ContentPane.css:
   - Added stylelint-disable comments for !important on padding-left (must override responsive padding when sidebar is closed)
   - Added stylelint-disable block for BEM modifier class names with double dashes

5. src/app/components/Typography/Links.css:
   - Added stylelint-disable block for BEM modifier class names with double dashes

All lint disables include explanatory comments. These intentional overrides are necessary for proper functionality (focus states, print styles, responsive behavior, BEM naming convention).

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Fix (most) css lint issues

Fix stylelint errors in Modal.css

Fixed all stylelint errors identified in lint.output:
- Added empty lines before comments (comment-empty-line-before)
- Converted hex colors to lowercase (#027EB5 → #027eb5, #0064A0 → #0064a0)
- Removed trailing zeros from rem values (3.0rem → 3rem)

All changes are formatting/style-only and don't affect functionality.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

accommodate BEM patterns

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Co-Authored-By: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>

Author: 3 people

src/app/components/Modal/Modal.css

@@ -30,6 +30,7 @@
   width: 40rem;
   background-color: white;
   box-shadow: 0 0 2rem rgba(0, 0, 0, 0.05), 0 0 4rem rgba(0, 0, 0, 0.08);
+
   /* bodyCopyRegularStyle - font-size: 1.6rem, line-height: 2.5rem, color from theme */
   font-size: 1.6rem;
   line-height: 2.5rem;
@@ -38,21 +39,21 @@
 
 /* Link styling inside modal card - mirrors bodyCopyRegularStyle link behavior */
 .modal-card a {
-  color: var(--link-color, #027EB5);
+  color: var(--link-color, #027eb5);
   cursor: pointer;
   text-decoration: underline;
 }
 
 .modal-card a:hover {
-  color: var(--link-hover-color, #0064A0);
+  color: var(--link-hover-color, #0064a0);
 }
 
 /* Modal header */
 .modal-header {
   display: flex;
   align-items: center;
   margin-bottom: 1.5rem; /* modalPadding * 0.5 = 3.0 * 0.5 */
-  padding: 1.5rem 3.0rem; /* modalPadding * 0.5, modalPadding */
+  padding: 1.5rem 3rem; /* modalPadding * 0.5, modalPadding */
   background: var(--header-bg, #f1f1f1);
   border-bottom: solid 0.1rem var(--header-border, #fafafa);
   justify-content: space-between;
@@ -67,6 +68,7 @@
   padding: 1rem 0 1rem 0;
   margin: 0;
   color: var(--text-color, #424242);
+
   /* Additional heading styles */
   display: flex;
   align-items: center;
@@ -88,6 +90,7 @@
   letter-spacing: -0.02rem;
   margin: 0;
   color: var(--text-color, #424242);
+
   /* Additional styles from BodyHeading */
   font-weight: 400;
   padding: 1.5rem 0; /* modalPadding * 0.5 */
@@ -105,7 +108,7 @@
 .modal-body {
   display: flex;
   flex-direction: column;
-  padding: 0 3.0rem; /* modalPadding */
+  padding: 0 3rem; /* modalPadding */
 }
 
 /* Special case: when Card.Header + Body, remove top margin */
@@ -128,7 +131,7 @@
 .modal-footer {
   display: flex;
   justify-content: space-between;
-  padding: 3.0rem; /* modalPadding */
+  padding: 3rem; /* modalPadding */
 }
 
 /* Close modal icon button */
@@ -137,6 +140,7 @@
   height: 2rem;
   width: 2rem;
   padding: 0.4rem;
+
   /* Base button styles */
   cursor: pointer;
   margin-right: 0;
@@ -146,6 +150,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
+
   /* toolbarIconColor.lighter */
   color: var(--icon-color-lighter, #c5c5c5);
 }