From 364928c7932301727d88ea9cf64ae94791eef22d Mon Sep 17 00:00:00 2001
From: Uzma Kalim <uzmakalim@Uzmas-MacBook-Air.local>
Date: Sat, 1 Aug 2026 22:01:48 +0530
Subject: [PATCH] Add expandable 'Why this score?' explanation under match
 score

---
 content.js | 17 +++++++++++++++++
 styles.css | 29 +++++++++++++++++++++++++++++
 2 files changed, 46 insertions(+)

diff --git a/content.js b/content.js
index 81904e9..fa2586d 100644
--- a/content.js
+++ b/content.js
@@ -1653,6 +1653,10 @@
         <div class="jm-score-section" id="jmScoreSection">
           <div class="jm-score-circle" id="jmScoreCircle">--</div>
           <div class="jm-score-label">Match Score</div>
+          <details class="jm-why-score" id="jmWhyScore">
+            <summary class="jm-why-summary">Why this score?</summary>
+            <div class="jm-why-content" id="jmWhyContent"></div>
+          </details>
         </div>
 
         <div class="jm-section" id="jmMatchingSection">
@@ -3078,6 +3082,19 @@
     scoreCircle.className = 'jm-score-circle ' + getScoreClass(score);
     scoreSection.style.display = 'block';
 
+    // Why this score
+    const whyEl = shadowRoot.getElementById('jmWhyContent');
+    if (data.insights && (data.insights.strengths || data.insights.gaps)) {
+      let whyHtml = '';
+      if (data.insights.strengths) {
+        whyHtml += `<p><strong>Why it's strong:</strong> ${escapeHTML(data.insights.strengths)}</p>`;
+      }
+      if (data.insights.gaps) {
+        whyHtml += `<p><strong>What's holding it back:</strong> ${escapeHTML(data.insights.gaps)}</p>`;
+      }
+      whyEl.innerHTML = whyHtml;
+    }
+
     // Matching skills
     const matchingSection = shadowRoot.getElementById('jmMatchingSection');
     const matchingEl = shadowRoot.getElementById('jmMatchingSkills');
diff --git a/styles.css b/styles.css
index 3ef322b..149c41b 100644
--- a/styles.css
+++ b/styles.css
@@ -20,3 +20,32 @@
     width: 100vw !important;
   }
 }
+
+.jm-why-score {
+  margin-top: 8px;
+  font-size: 13px;
+  text-align: left;
+}
+.jm-why-summary {
+  cursor: pointer;
+  color: #2563eb;
+  font-weight: 500;
+  list-style: none;
+}
+.jm-why-summary::-webkit-details-marker {
+  display: none;
+}
+.jm-why-summary::before {
+  content: "▸ ";
+}
+details[open] .jm-why-summary::before {
+  content: "▾ ";
+}
+.jm-why-content {
+  margin-top: 6px;
+  padding: 8px;
+  background: #f9fafb;
+  border-radius: 6px;
+  color: #374151;
+  line-height: 1.5;
+}
\ No newline at end of file