Fix code review: dynamic progress label, CSS classes instead of inline styles

Co-authored-by: cbremer <4009517+cbremer@users.noreply.github.com>

Author: Copilot

index.html

@@ -16,7 +16,7 @@ <h1>Git &amp; GitHub Basics</h1>
       <p class="hero-subtitle">A quick, interactive guide for TPMs — no engineering degree required!</p>
       <div class="progress-bar-container" aria-label="Course progress">
         <div class="progress-bar" id="progressBar"></div>
-        <span class="progress-label" id="progressLabel">0 / 6 topics completed</span>
+        <span class="progress-label" id="progressLabel"></span>
       </div>
     </div>
   </header>

script.js

@@ -72,7 +72,7 @@ function showRepoDetail(key) {
   if (!box) return;
   const d = repoDetails[key];
   if (!d) return;
-  box.innerHTML = `<strong>${d.title}</strong><br/><span style="color:var(--muted)">${d.text}</span>`;
+  box.innerHTML = `<strong>${d.title}</strong><br/><span class="text-muted">${d.text}</span>`;
 }
 
 // ── Commit part highlight ──
@@ -135,7 +135,7 @@ function explainWorkflow(step) {
   const d   = workflowExplanations[step];
   const box = document.getElementById('workflowDetail');
   if (box && d) {
-    box.innerHTML = `<strong>${d.icon} Step ${step}: ${d.title}</strong><br/><span style="color:var(--muted)">${d.text}</span>`;
+    box.innerHTML = `<strong>${d.icon} Step ${step}: ${d.title}</strong><br/><span class="text-muted">${d.text}</span>`;
   }
 }
 
@@ -280,11 +280,11 @@ function showQuizResults() {
 
   container.innerHTML = `
     <div class="quiz-complete">
-      <div style="font-size:2.5rem">${emoji}</div>
+      <div class="quiz-result-emoji">${emoji}</div>
       <div class="score">${score} / ${QUESTIONS.length}</div>
-      <p style="font-size:1.05rem;margin:.5rem 0">${message}</p>
-      <p style="color:var(--muted);font-size:.9rem">Score: ${pct}%</p>
-      <button class="quiz-next-btn" onclick="restartQuiz()" style="margin-top:.75rem">Retry Quiz 🔄</button>
+      <p class="quiz-result-message">${message}</p>
+      <p class="quiz-result-pct">Score: ${pct}%</p>
+      <button class="quiz-next-btn quiz-retry-btn" onclick="restartQuiz()">Retry Quiz 🔄</button>
     </div>
   `;
 }

styles.css

@@ -455,8 +455,11 @@ code {
 }
 .quiz-next-btn:hover { background: var(--primary-dark); }
 .quiz-progress { font-size: .82rem; color: var(--muted); margin-top: .5rem; }
-.quiz-complete { text-align: center; padding: 1rem 0; }
-.quiz-complete .score { font-size: 2rem; font-weight: 700; color: var(--primary); }
+.quiz-result-emoji   { font-size: 2.5rem; }
+.quiz-result-message { font-size: 1.05rem; margin: .5rem 0; }
+.quiz-result-pct     { color: var(--muted); font-size: .9rem; }
+.quiz-retry-btn      { margin-top: .75rem; }
+.text-muted          { color: var(--muted); }
 
 /* ── Footer ── */
 .site-footer {