Phase 4.3: Migrate remaining study guides components to plain CSS

Migrate Filters.tsx and StudyGuides.tsx from styled-components to plain CSS
following the hybrid approach documented in PLAIN_CSS_MIGRATION_GUIDE.md.

Changes:
- Filters.tsx: Migrated StyledColorFilter and RightButtonsWrapper to CSS classes
  - Created Filters.css with study-guides-color-filter and study-guides-right-buttons classes
  - Removed styled-components, replaced with className props

- StudyGuides.tsx: Migrated nested component styling to CSS descendant selectors
  - Created StudyGuides.css targeting HighlightsChapterWrapper, HighlightSection, HighlightWrapper
  - Used :has() selectors to target styled-components by their data-testid attributes
  - Bound theme.color.neutral.darkest as CSS variable for print styles
  - Preserved mobile breakpoint and print styles

Note: StudyGuidesPopUp.tsx and StudyGuidesToasts.tsx do not require migration as they
only use shared components with no study-guides-specific styling.

Related to CORE-1830

Snaps/lint css

Author: OpenStaxClaude

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

@@ -0,0 +1,12 @@
+/* Study Guides Filters Styling */
+
+.study-guides-color-filter {
+  min-width: 29rem;
+}
+
+.study-guides-right-buttons {
+  margin-left: auto;
+  display: flex;
+  align-items: center;
+  overflow: visible;
+}

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

@@ -2,7 +2,6 @@ import { HighlightColorEnum } from '@openstax/highlighter/dist/api';
 import flow from 'lodash/fp/flow';
 import React from 'react';
 import { connect, useSelector } from 'react-redux';
-import styled from 'styled-components/macro';
 import { loggedOut } from '../../../auth/selectors';
 import { useServices } from '../../../context/Services';
 import { AppState, Dispatch } from '../../../types';
@@ -18,6 +17,7 @@ import { printStudyGuides } from '../actions';
 import { highlightStyles } from '../constants';
 import * as selectors from '../selectors';
 import { updateQueryFromFilterChange } from '../utils';
+import './Filters.css';
 
 // converting color to a label is based on "i18n:studyguides:popup:filters:remove:color" from messages.json
 const createColorDataAnalyticsLabel = (color: HighlightColorEnum): string => {
@@ -48,23 +48,12 @@ const ConnectedChapterFilter = connect(
   })
 )(ChapterFilter);
 
-const StyledColorFilter = styled(ColorFilter)`
-  min-width: 29rem;
-`;
-
-const RightButtonsWrapper = styled.div`
-  margin-left: auto;
-  display: flex;
-  align-items: center;
-  overflow: visible;
-`;
-
 const ConnectedColorFilter = connect(
   (state: AppState) => ({
     colorFiltersWithContent: selectors.highlightColorFiltersWithContent(state),
     selectedColorFilters: selectors.summaryColorFilters(state),
   })
-)(StyledColorFilter);
+)(ColorFilter);
 
 const ConnectedFilterList = connect(
   (state: AppState) => ({
@@ -126,6 +115,7 @@ export default () => {
         controlsId='guide-filter-color'
       >
         <ConnectedColorFilter
+          className="study-guides-color-filter"
           id='guide-filter-color'
           disabled={userLoggedOut}
           styles={highlightStyles}
@@ -134,9 +124,9 @@ export default () => {
             updateQueryFromFilterChange(dispatch, state, { colors: change })}
         />
       </FilterDropdown>
-      <RightButtonsWrapper>
+      <div className="study-guides-right-buttons">
         <ConnectedPrintButton studyGuidesButton />
-      </RightButtonsWrapper>
+      </div>
     </FiltersTopBar>
     {!userLoggedOut && <ConnectedFilterList
       className="filters-list"

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

@@ -0,0 +1,71 @@
+/* Study Guides Main Component Styling */
+
+/*
+ * Note: This component styles nested components from SectionHighlights.tsx
+ * (HighlightsChapterWrapper, HighlightSection, HighlightWrapper) which are
+ * styled-components. We target them using descendant selectors based on
+ * their structure and test-ids.
+ */
+
+.study-guides-wrapper {
+  display: contents;
+}
+
+/*
+ * Mobile styles for HighlightsChapterWrapper
+ * Target: div containing h2[data-testid="chapter-title"]
+ */
+@media screen and (max-width: 75em) {
+  .study-guides-wrapper > div:has(h2[data-testid="chapter-title"]) {
+    max-width: 90%;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+}
+
+/*
+ * Mobile styles for HighlightSection
+ * Target: h3 elements with data-testid="section-title"
+ */
+@media screen and (max-width: 75em) {
+  .study-guides-wrapper h3[data-testid="section-title"] {
+    padding-left: 2rem;
+  }
+}
+
+/* Print styles */
+@media print {
+  /*
+   * HighlightsChapterWrapper padding
+   * Target: div containing h2[data-testid="chapter-title"]
+   */
+  .study-guides-wrapper > div:has(h2[data-testid="chapter-title"]) {
+    padding-left: 0;
+  }
+
+  /*
+   * HighlightWrapper margin
+   * Target: divs that don't contain chapter titles (i.e., highlight wrappers)
+   */
+  .study-guides-wrapper > div:not(:has(h2[data-testid="chapter-title"])) {
+    margin-left: 0;
+  }
+
+  /*
+   * HighlightsChapterWrapper + HighlightWrapper margin
+   * Target: div following chapter wrapper
+   */
+  .study-guides-wrapper > div:has(h2[data-testid="chapter-title"]) + div {
+    margin-top: 0;
+  }
+
+  /*
+   * HighlightSection background
+   * Target: h3 elements with data-testid="section-title"
+   * Uses CSS variable bound from theme in component
+   */
+  .study-guides-wrapper h3[data-testid="section-title"] {
+    background: var(--section-bg);
+  }
+}

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

@@ -2,31 +2,27 @@ import { HTMLElement } from '@openstax/types/lib.dom';
 import React from 'react';
 import { FormattedMessage } from 'react-intl';
 import { useSelector } from 'react-redux';
-import styled from 'styled-components/macro';
 import { typesetMath } from '../../../../helpers/mathjax';
 import htmlMessage from '../../../components/htmlMessage';
 import Loader from '../../../components/Loader';
 import { useServices } from '../../../context/Services';
 import theme from '../../../theme';
 import { assertWindow } from '../../../utils';
-import SectionHighlights, {
-  HighlightsChapterWrapper,
-  HighlightSection,
-  HighlightWrapper,
-} from '../../components/SectionHighlights';
+import SectionHighlights from '../../components/SectionHighlights';
 import allImagesLoaded from '../../components/utils/allImagesLoaded';
 import { GeneralCenterText } from '../../highlights/components/HighlightStyles';
 import HighlightsWrapper from '../../styles/HighlightsWrapper';
 import LoaderWrapper from '../../styles/LoaderWrapper';
 import * as selectors from '../selectors';
 import StudyGuidesListElement from './StudyGuidesListElement';
+import './StudyGuides.css';
 
 export const NoStudyGuidesTip = htmlMessage(
   'i18n:studyguides:popup:no-highlights-tip',
   (props) => <span {...props} />
 );
 
-const StudyGuides = ({ className }: { className: string }) => {
+const StudyGuides = () => {
   const orderedStudyGuides = useSelector(selectors.orderedSummaryStudyGuides);
   const isLoading = useSelector(selectors.summaryIsLoading);
   const container = React.useRef<HTMLElement>(null);
@@ -40,7 +36,12 @@ const StudyGuides = ({ className }: { className: string }) => {
   // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [orderedStudyGuides]);
 
-  return <div className={className}>
+  return <div
+    className="study-guides-wrapper"
+    style={{
+      '--section-bg': theme.color.neutral.darkest,
+    } as React.CSSProperties}
+  >
     {isLoading ? <LoaderWrapper><Loader large /></LoaderWrapper> : null}
     {(!isLoading && orderedStudyGuides && orderedStudyGuides.length === 0) ?
       <HighlightsWrapper ref={container}>
@@ -68,39 +69,4 @@ const StudyGuides = ({ className }: { className: string }) => {
   </div>;
 };
 
-export default styled(StudyGuides)`
-  ${HighlightsChapterWrapper} {
-    ${theme.breakpoints.mobile`
-      max-width: 90%;
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
-    `}
-  }
-
-  ${HighlightSection} {
-    ${theme.breakpoints.mobile`
-      padding-left: 2rem;
-    `}
-  }
-
-  @media print {
-    ${HighlightsChapterWrapper} {
-      padding-left: 0;
-
-      & + ${HighlightWrapper} {
-        margin-top: 0;
-      }
-    }
-
-    ${HighlightWrapper} {
-      margin-left: 0;
-    }
-
-    ${HighlightSection} {
-      background: ${theme.color.neutral.darkest};
-    }
-  }
-
-  display: contents;
-`;
+export default StudyGuides;