/* ============================================================
   lesson-sections.css

   Canonical presentation for the three teaching sections every
   topic page should have: Worked Examples, Exam-Style Practice
   Problems, and Practice Problems.

   These rules were lifted verbatim from ch1-separable.html, which
   is the reference page. Every other lesson had drifted: some
   defined their own colours, some were missing .quiz-question,
   .feedback, .quiz-choices and .toggle-icon entirely (they are not
   in styles.css), so their practice sections rendered unstyled.

   This file is linked LAST in <head>, after each page's own inline
   <style>, so it wins at equal specificity and every lesson looks
   the same without having to edit 36 style blocks.
   ============================================================ */

.example-item { background: white; border: 1px solid #e2e8f0; border-radius: 12px; margin: 1.2rem 0; overflow: hidden; }
.example-header { background: linear-gradient(135deg, var(--success), #10b981); color: white; padding: 1rem 1.5rem; cursor: pointer; display: flex; justify-content: space-between; align-items: center; font-weight: 600; user-select: none; transition: background 0.3s ease; }
.example-header:hover { background: linear-gradient(135deg, #047857, #059669); }
.example-header .katex { color: white; }
.example-content { padding: 0; max-height: 0; overflow: hidden; transition: max-height 0.3s ease; }
.example-content.active { max-height: 2000px; padding: 1.5rem; }
.toggle-icon { font-size: 1.2rem; transition: transform 0.3s ease; }
.example-content.active .toggle-icon { transform: rotate(180deg); }
.example-content .katex { font-size: 0.9em; }
.quiz-question { background: white; border-radius: 12px; padding: 1.5rem; margin: 1.5rem 0; border: 1px solid #e2e8f0; }
.quiz-question h4 { margin-bottom: 1rem; color: #333; }
.quiz-choices { display: grid; grid-template-columns: 1fr; gap: 0.8rem; margin-bottom: 1rem; }
.choice-btn { padding: 0.8rem 1rem; text-align: left; background: #f3f4f6; border: 2px solid #d1d5db; border-radius: 6px; cursor: pointer; transition: all 0.3s ease; font-weight: 500; color: #1e293b; }
.choice-btn .katex { color: #1e293b; }
.choice-btn.correct .katex, .choice-btn.incorrect .katex, .choice-btn.selected .katex { color: white; }
.choice-btn:hover { border-color: var(--primary); background: #eff6ff; }
.choice-btn.selected { border-color: var(--primary); background: var(--primary); color: white; }
.choice-btn.correct { border-color: var(--success); background: var(--success); color: white; }
.choice-btn.incorrect { border-color: var(--danger); background: var(--danger); color: white; }
.feedback { margin: 1rem 0; padding: 1rem; border-radius: 6px; display: none; }
.feedback.show { display: block; }
.feedback.correct { background: #d1fae5; color: #065f46; border-left: 4px solid var(--success); }
.feedback.incorrect { background: #fee2e2; color: #991b1b; border-left: 4px solid var(--danger); }

/* Exam-Style Practice headers are purple to distinguish them from the
   green Worked Examples. Set as a class so pages stop repeating an
   inline gradient on every single header. */
.example-header.practice-header {
  background: linear-gradient(135deg, #7c3aed, #6d28d9);
}
.example-header.practice-header:hover {
  background: linear-gradient(135deg, #6d28d9, #5b21b6);
}

/* Intro line under a section heading. */
.section-intro {
  color: #64748b;
  margin-bottom: 1.5rem;
}

/* ---- Lecture worksheet download card (worksheet-link.js) ---- */
.worksheet-card {
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 12px;
  padding: 1rem 1.25rem; margin: 1.25rem 0 1.75rem;
}
.worksheet-card .wc-icon { font-size: 1.8rem; line-height: 1; }
.worksheet-card .wc-body { flex: 1 1 260px; min-width: 0; }
.worksheet-card .wc-title { font-weight: 700; color: #0f172a; font-size: 1rem; }
.worksheet-card .wc-sub { color: #64748b; font-size: 0.86rem; margin-top: 0.15rem; }
.worksheet-card .wc-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.worksheet-card .wc-btn {
  display: inline-block; text-decoration: none; font-size: 0.85rem; font-weight: 600;
  padding: 0.5rem 1rem; border-radius: 8px; background: #2563eb; color: #fff;
  border: 1px solid #2563eb; transition: background 0.15s;
}
.worksheet-card .wc-btn:hover { background: #1d4ed8; }
.worksheet-card .wc-btn.wc-key {
  background: #fff; color: #7c3aed; border-color: #c4b5fd;
}
.worksheet-card .wc-btn.wc-key:hover { background: #f5f3ff; }
