Migrate ShowStudyGuides component to plain CSS

Migrate ShowStudyGuides.tsx from styled-components to plain CSS:

✅ ShowStudyGuides (StudyGuidesBody)
- Created ShowStudyGuides.css with study-guides-specific styling
- Replaced styled(PopupBody) with direct PopupBody usage + className
- Bind theme background color as CSS variable (--study-guides-bg)
- Convert mobile breakpoint to standard media query (max-width: 75em)
- Preserve print styles (white background, FiltersList padding)
- Export PopupBody as StudyGuidesBody for test compatibility

Migration follows the hybrid approach from PLAIN_CSS_MIGRATION_GUIDE.md

Related: CORE-1704

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

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>

Author: OpenStaxClaude

src/app/content/studyGuides/components/ShowStudyGuides.css

@@ -0,0 +1,27 @@
+/* ShowStudyGuides.css - Plain CSS migration from styled-components */
+
+/* StudyGuidesBody: Extends PopupBody with study-guides-specific styling */
+.study-guides-body {
+  /* Override PopupBody background for study guides */
+  background: var(--study-guides-bg);
+}
+
+/* Mobile responsive styles (max-width: 75em / 1200px) */
+@media screen and (max-width: 75em) {
+  .study-guides-body {
+    text-align: left;
+    padding: 0;
+  }
+}
+
+/* Print styles */
+@media print {
+  .study-guides-body {
+    background: white;
+  }
+
+  /* Nested component styling: FiltersList should have no left padding in print */
+  .study-guides-body .filters-list {
+    padding-left: 0;
+  }
+}

src/app/content/studyGuides/components/ShowStudyGuides.tsx

@@ -1,10 +1,9 @@
 import { HTMLElement } from '@openstax/types/lib.dom';
 import React from 'react';
 import { useDispatch, useSelector } from 'react-redux';
-import styled, { css } from 'styled-components/macro';
+import classNames from 'classnames';
 import GoToTopButton from '../../../components/GoToTopButton';
 import theme from '../../../theme';
-import FiltersList from '../../components/popUp/FiltersList';
 import { loadMoreDistanceFromBottom } from '../../constants';
 import { PopupBody } from '../../styles/PopupStyles';
 import { loadMoreStudyGuides } from '../actions';
@@ -13,22 +12,11 @@ import Filters from './Filters';
 import StudyGuides from './StudyGuides';
 import StudyGuidesCTA from './StudyGuidesCTA';
 import StudyGuidesToasts from './StudyGuidesToasts';
+import './ShowStudyGuides.css';
 
-export const StudyGuidesBody = styled(PopupBody)`
-  background: ${theme.color.neutral.darker};
-  ${theme.breakpoints.mobile(css`
-    text-align: left;
-    padding: 0;
-  `)}
-
-  @media print {
-    background: white;
-
-    ${FiltersList} {
-      padding-left: 0;
-    }
-  }
-`;
+// Export PopupBody as StudyGuidesBody for test compatibility
+// The actual styling is now in ShowStudyGuides.css
+export const StudyGuidesBody = PopupBody;
 
 const ShowStudyGuides = ({topElRef}: {topElRef: React.RefObject<HTMLElement>}) => {
   const ref = React.useRef<HTMLElement>(null);
@@ -68,8 +56,12 @@ const ShowStudyGuides = ({topElRef}: {topElRef: React.RefObject<HTMLElement>}) =
   };
 
   return (
-    <StudyGuidesBody
+    <PopupBody
       ref={ref}
+      className={classNames('study-guides-body')}
+      style={{
+        '--study-guides-bg': theme.color.neutral.darker,
+      } as React.CSSProperties}
       onScroll={() => {
         const refElement = ref.current;
 
@@ -92,7 +84,7 @@ const ShowStudyGuides = ({topElRef}: {topElRef: React.RefObject<HTMLElement>}) =
         onClick={goToTop}
         data-testid='back-to-top-studyguides'
       />}
-    </StudyGuidesBody>
+    </PopupBody>
   );
 };