Fix CSS selectors to correctly target nested styled-components

Address Copilot review comments by fixing CSS selectors that were
incorrectly using direct child combinator (>) from .study-guides-wrapper.

Since .study-guides-wrapper has display:contents, the styled-components
(HighlightsChapterWrapper, HighlightWrapper) are nested inside
HighlightsWrapper, not direct children.

Changes:
- Remove > from .study-guides-wrapper > div selectors
- Use div:has(> h2[...]) to precisely target HighlightsChapterWrapper
- Use div:has(> h3[...]) to precisely target HighlightWrapper
- Update comments to clarify the DOM structure and targeting approach

Fixes all four issues identified in the review:
1. Mobile styles for HighlightsChapterWrapper (line 21)
2. Print padding for HighlightsChapterWrapper (line 45)
3. Print margin-left for HighlightWrapper (line 54)
4. Print margin-top for adjacent siblings (line 63)

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

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

Author: 2 people

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

@@ -13,10 +13,12 @@
 
 /*
  * Mobile styles for HighlightsChapterWrapper
- * Target: div containing h2[data-testid="chapter-title"]
+ * Target: div containing h2[data-testid="chapter-title"] as direct child
+ * Note: .study-guides-wrapper has display:contents, so HighlightsChapterWrapper
+ * is inside HighlightsWrapper, which is the direct child
  */
 @media screen and (max-width: 75em) {
-  .study-guides-wrapper > div:has(h2[data-testid="chapter-title"]) {
+  .study-guides-wrapper div:has(> h2[data-testid="chapter-title"]) {
     max-width: 90%;
     white-space: nowrap;
     overflow: hidden;
@@ -38,25 +40,27 @@
 @media print {
   /*
    * HighlightsChapterWrapper padding
-   * Target: div containing h2[data-testid="chapter-title"]
+   * Target: div containing h2[data-testid="chapter-title"] as direct child
    */
-  .study-guides-wrapper > div:has(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)
+   * Target: divs that contain h3[data-testid="section-title"] (HighlightWrapper)
+   * These are descendants of HighlightsWrapper, not direct children of .study-guides-wrapper
    */
-  .study-guides-wrapper > div:not(:has(h2[data-testid="chapter-title"])) {
+  .study-guides-wrapper div:has(> h3[data-testid="section-title"]) {
     margin-left: 0;
   }
 
   /*
    * HighlightsChapterWrapper + HighlightWrapper margin
-   * Target: div following chapter wrapper
+   * Target: Any div immediately following a div that contains h2[data-testid="chapter-title"]
+   * These are siblings inside HighlightsWrapper
    */
-  .study-guides-wrapper > div:has(h2[data-testid="chapter-title"]) + div {
+  .study-guides-wrapper div:has(> h2[data-testid="chapter-title"]) + div {
     margin-top: 0;
   }