Make compact view visually distinct; v1.0.9

Add qa-cards--compact class to container when active. Compact mode now
tightens padding, reduces font sizes, hides related questions, and
reduces card gaps — making the density difference obvious.

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

src/App.css

@@ -6367,6 +6367,42 @@
   box-shadow: 0 0 0 1px rgba(201,168,76,0.15);
 }
 
+/* ── Compact mode ── */
+.qa-cards--compact {
+  gap: 0.5rem;
+}
+
+.qa-cards--compact .qa-question-header {
+  padding: 0.65rem 0.85rem 0.55rem;
+}
+
+.qa-cards--compact .qa-card-face {
+  padding: 0.15rem 0.85rem 0.75rem;
+}
+
+.qa-cards--compact .qa-question-text {
+  font-size: 0.96rem;
+}
+
+.qa-cards--compact .qa-answer-text {
+  font-size: 0.93rem;
+  line-height: 1.52;
+}
+
+.qa-cards--compact .qa-card-actions {
+  padding: 0.3rem 0.85rem;
+  gap: 0.4rem;
+}
+
+.qa-cards--compact .qa-related-wrap {
+  display: none;
+}
+
+.qa-cards--compact .qa-answer-byline {
+  font-size: 0.74rem;
+  margin-top: 0.5rem;
+}
+
 .qa-pinned-badge {
   font-size: 0.85em;
   margin-right: 0.15rem;

src/components/QASection.tsx

@@ -861,7 +861,7 @@ export default function QASection() {
                     ))}
                   </aside>
 
-                  <div className="qa-cards">
+                  <div className={`qa-cards${compactMode ? ' qa-cards--compact' : ''}`}>
                     <div ref={resultsTopRef} aria-hidden="true" />
                     {pagedQuestions.map(question => {
                       const relatedQuestions = getRelatedQuestions(question)