fix: TOC mobile toggle not visible due to CSS cascade order

The _toc.css component file (loaded last) set display:none on
.toc-mobile-toggle/backdrop/sidebar by default, overriding the
@media responsive rules in _layout.css (loaded earlier).

Move the responsive display overrides into _toc.css so they appear
after the default rules and win in the cascade when the media query
matches. This fixes the TOC being completely invisible on viewports
< 1100px (including HF Spaces iframe at ~968px).

Made-with: Cursor

frontend/src/styles/_layout.css

@@ -39,18 +39,6 @@
     display: none;
   }
 
-  .toc-mobile-toggle {
-    display: flex;
-  }
-
-  .toc-mobile-backdrop {
-    display: block;
-  }
-
-  .toc-mobile-sidebar {
-    display: flex;
-  }
-
   .footer-inner {
     grid-template-columns: 1fr;
     gap: 16px;

frontend/src/styles/components/_toc.css

@@ -221,3 +221,22 @@
   color: var(--primary-color);
   text-decoration: underline;
 }
+
+/* ============================================================================ */
+/* Responsive: show mobile TOC elements on small viewports                      */
+/* Must be AFTER default display:none rules to win in the cascade               */
+/* ============================================================================ */
+
+@media (--bp-content-collapse) {
+  .toc-mobile-toggle {
+    display: flex;
+  }
+
+  .toc-mobile-backdrop {
+    display: block;
+  }
+
+  .toc-mobile-sidebar {
+    display: flex;
+  }
+}