/* ============================================================
   Samacheer Kalvi — Content Styles
   Base styles + Interactive Exercise Components
   ============================================================ */

/* ── Base Lesson Content ──────────────────────────────────── */

.lesson-content {
  font-size: var(--text-base);
  line-height: 1.8;
  color: var(--gray-800);
}

.lesson-content h1 {
  font-size: var(--text-3xl);
  font-weight: var(--font-bold);
  color: var(--gray-900);
  margin-top: var(--space-8);
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: 3px solid var(--primary-blue);
}
.lesson-content h1:first-child { margin-top: 0; }

.lesson-content h2 {
  font-size: var(--text-2xl);
  font-weight: var(--font-semibold);
  color: var(--gray-900);
  margin-top: var(--space-6);
  margin-bottom: var(--space-3);
  padding-left: var(--space-3);
  border-left: 4px solid var(--primary-blue);
}

.lesson-content h3 {
  font-size: var(--text-xl);
  font-weight: var(--font-semibold);
  color: var(--gray-900);
  margin-top: var(--space-5);
  margin-bottom: var(--space-3);
}

.lesson-content h4 {
  font-size: var(--text-lg);
  font-weight: var(--font-medium);
  color: var(--gray-800);
  margin-top: var(--space-4);
  margin-bottom: var(--space-2);
}

.lesson-content h5, .lesson-content h6 {
  font-size: var(--text-base);
  font-weight: var(--font-medium);
  color: var(--gray-800);
  margin-top: var(--space-3);
  margin-bottom: var(--space-2);
}

.lesson-content p {
  margin-bottom: var(--space-4);
  text-align: justify;
}
.lesson-content p:last-child { margin-bottom: 0; }

.lesson-content a {
  color: var(--primary-blue);
  text-decoration: underline;
  transition: color var(--transition-base);
}
.lesson-content a:hover { color: var(--primary-dark); }

.lesson-content ul, .lesson-content ol {
  margin-bottom: var(--space-5);
  padding-left: var(--space-8);
}
.lesson-content ul { list-style-type: disc; }
.lesson-content ol { list-style-type: decimal; }
.lesson-content li { margin-bottom: var(--space-2); padding-left: var(--space-2); }
.lesson-content li::marker { color: var(--primary-blue); font-weight: var(--font-semibold); }
.lesson-content ul ul { list-style-type: circle; }
.lesson-content ul ul ul { list-style-type: square; }

.lesson-content blockquote {
  margin: var(--space-6) 0;
  padding: var(--space-5) var(--space-6);
  background-color: var(--gray-50);
  border-left: 4px solid var(--primary-blue);
  border-radius: var(--radius-md);
  font-style: italic;
  color: var(--gray-700);
}
.lesson-content blockquote p:last-child { margin-bottom: 0; }

.lesson-content table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: var(--space-6);
  background-color: var(--white);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}
.lesson-content thead { background-color: var(--primary-blue); color: var(--white); }
.lesson-content th { padding: var(--space-4); text-align: left; font-weight: var(--font-semibold); }
.lesson-content td { padding: var(--space-4); border-bottom: 1px solid var(--gray-200); }
.lesson-content tbody tr:hover { background-color: var(--gray-50); }
.lesson-content tbody tr:last-child td { border-bottom: none; }

.lesson-content img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
  margin: var(--space-6) auto;
  display: block;
  box-shadow: var(--shadow-md);
}

.lesson-content hr {
  border: none;
  height: 2px;
  background: linear-gradient(to right, transparent, var(--gray-300), transparent);
  margin: var(--space-8) 0;
}

.lesson-content strong, .lesson-content b { font-weight: var(--font-bold); color: var(--gray-900); }
.lesson-content em, .lesson-content i { font-style: italic; }
.lesson-content mark {
  background-color: var(--warning);
  color: var(--gray-900);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
}

.lesson-content details {
  margin-bottom: var(--space-4);
  padding: var(--space-4);
  background-color: var(--gray-50);
  border-radius: var(--radius-md);
  border: 1px solid var(--gray-200);
}
.lesson-content summary {
  cursor: pointer;
  font-weight: var(--font-semibold);
  color: var(--primary-blue);
  user-select: none;
}
.lesson-content summary:hover { color: var(--primary-dark); }
.lesson-content details[open] summary { margin-bottom: var(--space-3); }


/* ============================================================
   INTERACTIVE EXERCISE COMPONENTS
   ============================================================ */

.exercise-section {
  margin: 32px 0;
  padding: 24px;
  background: #f8faff;
  border-radius: 12px;
  border: 1px solid #dde8f8;
}

.exercise-section .exercise-title {
  font-size: 1rem;
  font-weight: 700;
  color: #1a3c6e;
  margin-bottom: 16px;
  padding-bottom: 8px;
  border-bottom: 2px solid #2E75B6;
  display: flex;
  align-items: center;
  gap: 8px;
}

.exercise-section .exercise-title .ex-badge {
  background: #2E75B6;
  color: white;
  padding: 2px 10px;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 600;
}

.fill-blank-sentence {
  margin: 12px 0;
  font-size: 1rem;
  line-height: 2.4;
  color: #333;
}

.blank-input {
  display: inline-block;
  width: 140px;
  border: none;
  border-bottom: 2px solid #2E75B6;
  background: transparent;
  padding: 2px 8px;
  font-size: 0.95rem;
  color: #1a3c6e;
  outline: none;
  text-align: center;
  transition: border-color 0.2s, background 0.2s;
  font-family: inherit;
}

.blank-input:focus {
  border-bottom-color: #f59e0b;
  background: #fffbeb;
  border-radius: 4px 4px 0 0;
}

.blank-input::placeholder {
  color: #bbb;
  font-style: italic;
  font-size: 0.85rem;
}

.help-box {
  background: white;
  border: 1px dashed #2E75B6;
  border-radius: 8px;
  padding: 12px 16px;
  margin-bottom: 16px;
  font-size: 0.9rem;
  color: #444;
  line-height: 1.9;
}

.help-box-label {
  font-weight: 700;
  color: #2E75B6;
  margin-right: 8px;
}

.true-false-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 10px 0;
  padding: 12px 16px;
  background: white;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
  transition: box-shadow 0.2s;
}
.true-false-item:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.08); }

.tf-number { font-weight: 700; color: #2E75B6; min-width: 24px; padding-top: 2px; }
.tf-statement { flex: 1; font-size: 0.95rem; color: #333; line-height: 1.6; }
.tf-options { display: flex; gap: 8px; align-items: center; flex-shrink: 0; }

.tf-btn {
  padding: 4px 14px;
  border-radius: 20px;
  border: 2px solid #e2e8f0;
  background: white;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}
.tf-btn.true-btn:hover { background: #dcfce7; border-color: #16a34a; color: #16a34a; }
.tf-btn.false-btn:hover { background: #fee2e2; border-color: #dc2626; color: #dc2626; }

.tf-correction { width: 100%; margin-top: 6px; font-size: 0.85rem; color: #666; font-style: italic; }
.tf-correction .blank-input { width: 200px; font-size: 0.85rem; }

.mcq-item {
  margin: 16px 0;
  padding: 16px;
  background: white;
  border-radius: 10px;
  border: 1px solid #e2e8f0;
}

.mcq-question { font-weight: 600; color: #1a3c6e; margin-bottom: 12px; font-size: 0.95rem; line-height: 1.6; }

.mcq-options { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

.mcq-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  border-radius: 8px;
  border: 2px solid #e2e8f0;
  cursor: pointer;
  transition: all 0.2s;
  font-size: 0.9rem;
  color: #444;
  background: #fafafa;
}
.mcq-option:hover { border-color: #2E75B6; background: #eff6ff; color: #1a3c6e; }
.mcq-option input[type="radio"] { accent-color: #2E75B6; width: 16px; height: 16px; cursor: pointer; }
.option-letter { font-weight: 700; color: #2E75B6; min-width: 20px; }

.match-table { width: 100%; border-collapse: separate; border-spacing: 0; margin: 16px 0; }
.match-table th { background: #2E75B6; color: white; padding: 10px 16px; font-weight: 600; font-size: 0.9rem; }
.match-table th:first-child { border-radius: 8px 0 0 0; }
.match-table th:last-child { border-radius: 0 8px 0 0; }
.match-table td { padding: 10px 16px; border-bottom: 1px solid #e2e8f0; font-size: 0.9rem; vertical-align: middle; }
.match-table tr:nth-child(even) td { background: #f8faff; }

.match-input {
  width: 60px;
  border: none;
  border-bottom: 2px solid #2E75B6;
  background: transparent;
  padding: 2px 8px;
  font-size: 0.9rem;
  text-align: center;
  outline: none;
  color: #1a3c6e;
  font-weight: 600;
  font-family: inherit;
}

.answer-box { margin: 8px 0 16px 0; }
.answer-box textarea {
  width: 100%;
  min-height: 80px;
  border: 2px solid #e2e8f0;
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 0.9rem;
  color: #333;
  resize: vertical;
  outline: none;
  transition: border-color 0.2s;
  font-family: inherit;
  line-height: 1.6;
  box-sizing: border-box;
}
.answer-box textarea:focus { border-color: #2E75B6; }
.answer-box textarea::placeholder { color: #aaa; font-style: italic; }
.answer-box.long textarea { min-height: 140px; }

.glossary-section { margin: 32px 0; }
.glossary-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; margin-top: 16px; }

.glossary-card {
  background: white;
  border-radius: 10px;
  padding: 16px;
  border: 1px solid #dde8f8;
  border-top: 3px solid #2E75B6;
  box-shadow: 0 2px 4px rgba(0,0,0,0.04);
  transition: box-shadow 0.2s, transform 0.2s;
}
.glossary-card:hover { box-shadow: 0 4px 12px rgba(46,117,182,0.15); transform: translateY(-2px); }
.glossary-card .word { font-size: 1rem; font-weight: 700; color: #1a3c6e; margin-bottom: 2px; }
.glossary-card .word-type { font-size: 0.75rem; color: #2E75B6; font-style: italic; font-weight: 600; margin-bottom: 8px; display: block; }
.glossary-card .word-meaning { font-size: 0.88rem; color: #555; line-height: 1.6; }

.do-you-know {
  margin: 24px 0;
  padding: 20px 24px 20px 28px;
  background: linear-gradient(135deg, #eff6ff, #dbeafe);
  border-radius: 12px;
  border-left: 5px solid #2E75B6;
  position: relative;
}
.do-you-know::before { content: "💡"; position: absolute; top: -14px; left: 20px; font-size: 1.4rem; background: white; padding: 2px 6px; border-radius: 50%; box-shadow: 0 2px 6px rgba(0,0,0,0.1); }
.do-you-know .dyk-title { font-weight: 800; color: #1a3c6e; font-size: 0.9rem; margin-bottom: 10px; text-transform: uppercase; letter-spacing: 0.5px; }
.do-you-know p { font-size: 0.9rem; color: #334155; margin-bottom: 8px; line-height: 1.7; }
.do-you-know p:last-child { margin-bottom: 0; }

.poem-container { margin: 24px auto; max-width: 600px; padding: 28px 36px; background: #fffbf5; border-radius: 12px; border: 1px solid #fde68a; box-shadow: 0 2px 8px rgba(0,0,0,0.06); }
.poem-stanza { margin-bottom: 24px; padding-bottom: 24px; border-bottom: 1px dashed #fde68a; }
.poem-stanza:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: none; }
.poem-line { font-size: 1rem; color: #374151; line-height: 2.2; margin: 0; font-style: italic; padding-left: 8px; display: block; }

.dialogue-block { margin: 12px 0; padding: 14px 18px; background: white; border-radius: 10px; border: 1px solid #e2e8f0; border-left: 4px solid #2E75B6; }
.dialogue-block .speaker { font-weight: 700; color: #2E75B6; font-size: 0.88rem; margin-bottom: 6px; display: flex; align-items: center; gap: 6px; }
.dialogue-block .speaker::before { content: "▶"; font-size: 0.6rem; }
.dialogue-block .speech { font-size: 0.95rem; color: #374151; line-height: 1.7; margin: 0; padding-left: 14px; }

.lesson-hero { width: 100%; margin-bottom: 32px; border-radius: 16px; overflow: hidden; box-shadow: 0 8px 32px rgba(0,0,0,0.12); position: relative; }
.lesson-hero img { width: 100%; height: 320px; object-fit: cover; display: block; margin: 0; border-radius: 0; box-shadow: none; }
.lesson-hero .hero-caption { position: absolute; bottom: 0; left: 0; right: 0; padding: 16px 20px; background: linear-gradient(transparent, rgba(0,0,0,0.7)); color: white; font-size: 0.88rem; font-style: italic; }

.about-author { margin: 24px 0; padding: 20px 24px; background: linear-gradient(135deg, #f0fdf4, #dcfce7); border-radius: 12px; border-left: 5px solid #16a34a; display: flex; gap: 20px; align-items: flex-start; }
.about-author .author-icon { font-size: 2.5rem; flex-shrink: 0; }
.about-author .author-title { font-size: 0.75rem; font-weight: 700; color: #16a34a; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 4px; }
.about-author .author-name { font-size: 1.05rem; font-weight: 700; color: #14532d; margin-bottom: 8px; }
.about-author p { font-size: 0.9rem; color: #374151; line-height: 1.6; margin: 0; }
.about-author h3 { font-size: 1rem; font-weight: 700; color: #14532d; margin: 0 0 8px 0; }

.summary-box { margin: 32px 0; padding: 24px; background: linear-gradient(135deg, #fdf4ff, #fae8ff); border-radius: 12px; border-left: 5px solid #9333ea; }
.summary-title { font-size: 1rem; font-weight: 800; color: #581c87; margin-bottom: 12px; display: flex; align-items: center; gap: 8px; }
.summary-box ul { padding-left: 20px; margin: 0; }
.summary-box li { font-size: 0.9rem; color: #374151; margin-bottom: 8px; line-height: 1.6; }

@media (max-width: 767px) {
  .lesson-content table { font-size: var(--text-sm); }
  .lesson-content th, .lesson-content td { padding: var(--space-3); }
  .glossary-grid { grid-template-columns: 1fr; }
  .about-author { flex-direction: column; }
  .lesson-hero img { height: 200px; }
  .mcq-options { grid-template-columns: 1fr; }
  .true-false-item { flex-wrap: wrap; }
}

@media print {
  .lesson-content { font-size: 12pt; line-height: 1.6; color: black; }
  .lesson-content h1, .lesson-content h2, .lesson-content h3 { page-break-after: avoid; }
  .lesson-content img, .lesson-content table, .lesson-content blockquote { page-break-inside: avoid; }
  .blank-input { border-bottom: 1px solid black !important; background: transparent !important; }
  .tf-btn, .mcq-option { border: 1px solid #ccc !important; }
  .answer-box textarea { border: 1px solid #ccc !important; }
}

.lesson-content table { width: 100%; table-layout: auto; }

.vocab-block table,
.diff-block table {
  table-layout: auto !important;
}

.vocab-block table td:first-child,
.diff-block table td:first-child {
  white-space: nowrap;
  width: 1%;
}

.lesson-content td, .lesson-content th { padding: 8px; white-space: normal; overflow-wrap: break-word; word-break: normal; font-family: 'NotoSansTamil', 'Latha', 'Vijaya', sans-serif; }
.lesson-content td { overflow: hidden; }
.lesson-content td .blank-input, .lesson-content td input { display: block; width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; }


/* ============================================================
   NEW ADDITIONS — Samacheer Kalvi Content Styles
   Add these to the bottom of content-styles.css
   ============================================================ */

/* ── Lesson Header (Class / Unit / Type tags) ────────────── */
.lesson-header {
  margin-bottom: 28px;
  padding-bottom: 20px;
  border-bottom: 2px solid #e2e8f0;
}

.lesson-meta {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.meta-tag {
  background: #eff6ff;
  color: #1a3c6e;
  border: 1px solid #bfdbfe;
  padding: 3px 12px;
  border-radius: 20px;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.3px;
}

.lesson-main-title {
  font-size: 1.6rem;
  font-weight: 800;
  color: #1a3c6e;
  margin: 0;
  line-height: 1.3;
}

/* ── Lesson Title Box (gradient hero) ────────────────────── */
.lesson-title {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 24px 28px;
  border-radius: 14px;
  margin-bottom: 24px;
  text-align: center;
  box-shadow: 0 4px 16px rgba(102,126,234,0.3);
}

.lesson-title h1 {
  font-size: 1.6rem;
  font-weight: 800;
  color: white !important;
  margin: 0 0 6px 0;
  border: none !important;
  padding: 0 !important;
}

.lesson-title h2 {
  font-size: 1rem;
  font-weight: 500;
  color: rgba(255,255,255,0.85) !important;
  margin: 0;
  border: none !important;
  padding: 0 !important;
}

/* ── Section Heading (Vocabulary, Grammar, Speaking etc.) ── */
.section-heading {
  margin: 32px 0 18px 0;
  padding: 14px 20px;
  background: linear-gradient(135deg, #a7e9ef 0%, #3498db 100%);
  color: white;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.12);
}

.section-heading h2 {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 700;
  color: white !important;
  border: none !important;
  padding: 0 !important;
}

/* ── Intro Box ───────────────────────────────────────────── */
.intro-box {
  margin: 20px 0;
  padding: 16px 20px;
  background: linear-gradient(135deg, #e1f5fe, #b3e5fc);
  border-radius: 10px;
  border-left: 5px solid #0277bd;
  font-size: 0.95rem;
  color: #01579b;
  line-height: 1.7;
}

.intro-box p {
  margin: 0;
  color: #01579b;
}

/* ── Inline Question (within story text) ─────────────────── */
.inline-question {
  margin: 16px 0;
  padding: 16px 20px;
  background: #fff8e1;
  border: 1px solid #ffe082;
  border-left: 4px solid #f59e0b;
  border-radius: 10px;
}

.inline-question p {
  margin: 0 0 10px 0;
  color: #92400e;
  font-weight: 600;
}

/* ── Content Note (explanations, grammar notes) ──────────── */
.content-note {
  margin: 20px 0;
  padding: 18px 20px;
  background: #f0fdf4;
  border-left: 5px solid #16a34a;
  border-radius: 8px;
}

.content-note h3 {
  color: #14532d !important;
  margin-top: 0 !important;
  font-size: 1rem;
}

.content-note p {
  font-size: 0.92rem;
  color: #374151;
  margin-bottom: 8px;
  line-height: 1.7;
}
.content-note p:last-child { margin-bottom: 0; }

.content-note ul, .content-note ol {
  margin: 8px 0;
  padding-left: 20px;
}

.content-note li {
  font-size: 0.92rem;
  color: #374151;
  margin-bottom: 6px;
  line-height: 1.6;
}

/* ── Example Block ───────────────────────────────────────── */
.example-block {
  margin: 14px 0;
  padding: 14px 18px;
  background: #f3f4f6;
  border-left: 5px solid #6b7280;
  border-radius: 8px;
  font-size: 0.92rem;
  color: #374151;
}

.example-block p { margin: 4px 0; }

/* ── Glossary Item (flat list style) ─────────────────────── */
/* Complements existing .glossary-card for flat list layout  */
.glossary-grid .glossary-item {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 10px 14px;
  background: white;
  border-radius: 8px;
  border-left: 4px solid #2E75B6;
  border: 1px solid #dde8f8;
  border-left: 4px solid #2E75B6;
}

.gl-word {
  font-weight: 700;
  color: #1a3c6e;
  font-size: 0.95rem;
  min-width: 120px;
}

.gl-pos {
  color: #6b7280;
  font-style: italic;
  font-size: 0.82rem;
  min-width: 36px;
}

.gl-meaning {
  color: #374151;
  font-size: 0.88rem;
  line-height: 1.5;
}

/* ── Summary Section ─────────────────────────────────────── */
.summary-section {
  margin: 32px 0 0 0;
  padding: 24px;
  background: linear-gradient(135deg, #fdf4ff, #fae8ff);
  border-radius: 12px;
  border-left: 5px solid #9333ea;
}

.summary-section h3 {
  font-size: 1rem;
  font-weight: 800;
  color: #581c87 !important;
  margin: 0 0 14px 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.summary-list {
  padding-left: 20px;
  margin: 0;
}

.summary-list li {
  font-size: 0.92rem;
  color: #374151;
  margin-bottom: 10px;
  line-height: 1.6;
  padding-left: 4px;
}

.summary-list li::marker {
  color: #9333ea;
  font-weight: 700;
}

/* ── Conversation / Dialogue Exercise ────────────────────── */
.conversation {
  background: #f8faff;
  padding: 16px 20px;
  border-radius: 10px;
  border: 1px solid #dde8f8;
  margin: 12px 0;
}

.conversation p {
  margin: 10px 0;
  line-height: 1.8;
  font-size: 0.93rem;
  color: #334155;
}

.conversation p strong {
  color: #1a3c6e;
}

/* ── Rearrange Item ──────────────────────────────────────── */
.rearrange-item {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 10px 0;
  padding: 10px 14px;
  background: #f8faff;
  border-radius: 8px;
  border: 1px solid #dde8f8;
  font-size: 0.93rem;
  color: #334155;
}

/* ── Exercise Section — Activity variant ─────────────────── */
.exercise-section.activity {
  background: #fff7f0;
  border-color: #fed7aa;
}

.exercise-section.activity .exercise-title {
  border-bottom-color: #ea580c;
  color: #7c2d12;
}

.exercise-section.activity .exercise-title .ex-badge {
  background: #ea580c;
}

/* ── Exercise Table ──────────────────────────────────────── */
.exercise-table {
  width: 100%;
  border-collapse: collapse;
  margin: 14px 0;
  font-size: 0.92rem;
}

.exercise-table th {
  background: #2E75B6;
  color: white;
  padding: 10px 14px;
  text-align: left;
  font-weight: 600;
}

.exercise-table td {
  padding: 10px 14px;
  border-bottom: 1px solid #e2e8f0;
  color: #374151;
  vertical-align: middle;
}

.exercise-table tr:nth-child(even) td {
  background: #f8faff;
}

/* ── Slang / Custom Table variant ────────────────────────── */
.slang-table {
  width: 100%;
  border-collapse: collapse;
  margin: 14px 0;
  font-size: 0.92rem;
}

.slang-table th {
  background: #f1f5f9;
  color: #1a3c6e;
  padding: 10px 14px;
  border: 1px solid #dde8f8;
  font-weight: 600;
  text-align: left;
}

.slang-table td {
  padding: 10px 14px;
  border: 1px solid #dde8f8;
  color: #374151;
  vertical-align: middle;
}

/* ============================================
   LP SECTION BOXES - All Disciplines
   ============================================ */

/* Wrapper for each day */
.lp-day-block {
  background: #fafafa;
  border: 1px solid #e8e8e8;
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 28px;
}

.lp-day-block,
.assessment-block {
  /* navbar (--navbar-height, sticky) + .lp-tab-wrapper's own rendered
     height (~48px: 8px top padding + tab button + 2px border) sit
     stacked above this content when scrolled — verify the ~48px in
     DevTools since it depends on rendered tab button height. */
  scroll-margin-top: calc(var(--navbar-height) + 48px);
}

/* Day heading */
.lp-day-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: #1a3c6e;
  margin-bottom: 6px;
}

/* Day meta info */
.lp-day-meta {
  font-size: 0.85rem;
  color: #666;
  margin-bottom: 16px;
  font-style: italic;
}

/* Section 1 — Opening / Lead Question (Orange left border) */
.lp-section-opening {
  background: #fff8f0;
  border-left: 4px solid #e67e22;
  border-radius: 6px;
  padding: 14px 18px;
  margin-bottom: 16px;
}

.lp-section-opening .lp-section-label {
  color: #e67e22;
  font-weight: 700;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
}

/* Section 2 — Introduction (Blue left border) */
.lp-section-intro {
  background: #f0f6ff;
  border-left: 4px solid #2E75B6;
  border-radius: 6px;
  padding: 14px 18px;
  margin-bottom: 16px;
}

.lp-section-intro .lp-section-label {
  color: #2E75B6;
  font-weight: 700;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
}

/* Section 3 — Main Teaching & Activities (Green left border) */
.lp-section-main {
  background: #f0faf4;
  border-left: 4px solid #27ae60;
  border-radius: 6px;
  padding: 14px 18px;
  margin-bottom: 16px;
}

.lp-section-main .lp-section-label {
  color: #27ae60;
  font-weight: 700;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
}

/* Teacher says block */
.lp-teacher-says {
  background: white;
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  padding: 12px 16px;
  margin: 10px 0;
  font-style: italic;
  color: #444;
}

/* Tamil scaffold block */
.lp-tamil-scaffold {
  background: #fef9f0;
  border: 1px dashed #f0a500;
  border-radius: 6px;
  padding: 12px 16px;
  margin: 10px 0;
  font-size: 0.92rem;
}

/* Time indicator */
.lp-time {
  display: inline-block;
  background: #1a3c6e;
  color: white;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 12px;
  margin-bottom: 8px;
}

/* Section 4 — Student Task (Purple left border) */
.lp-section-student-task {
  background: #f8f0ff;
  border-left: 4px solid #8e44ad;
  border-radius: 6px;
  padding: 14px 18px;
  margin-bottom: 16px;
}

.lp-section-student-task .lp-section-label {
  color: #8e44ad;
  font-weight: 700;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
}

/* Section 5 — Closing (Red left border) */
.lp-section-closing {
  background: #fff0f0;
  border-left: 4px solid #e74c3c;
  border-radius: 6px;
  padding: 14px 18px;
  margin-bottom: 16px;
}

.lp-section-closing .lp-section-label {
  color: #e74c3c;
  font-weight: 700;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
}

/* ── LP Tab Bar ─────────────────────────────────── */
.lp-tab-wrapper {
  position: sticky;
  top: 0;
  z-index: 100;
  background: #fff;
  border-bottom: 2px solid #e8e8e8;
  padding: 8px 0 0 0;
  margin-bottom: 24px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.lp-tab-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 0 16px;
}

.lp-tab {
  background: #f3f4f6;
  border: 1px solid #e8e8e8;
  border-bottom: none;
  border-radius: 6px 6px 0 0;
  padding: 8px 16px;
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: 600;
  color: #555;
  transition: all 0.2s;
}

.lp-tab:hover {
  background: #e0e7ff;
  color: #3730a3;
}

.lp-tab-active {
  background: #8E44AD;
  color: #fff;
  border-color: #8E44AD;
}

.lp-progress {
  font-size: 0.8rem;
  color: #888;
  padding: 4px 16px;
  text-align: right;
}

/* ── LP Stepper ─────────────────────────────────── */
.lp-stepper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  margin-top: 24px;
  border-top: 2px solid #e8e8e8;
  background: #fafafa;
  border-radius: 0 0 8px 8px;
  position: sticky;
  bottom: 0;
}

.lp-prev-btn, .lp-next-btn {
  background: #8E44AD;
  color: white;
  border: none;
  padding: 10px 24px;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 600;
  font-size: 0.95rem;
  transition: background 0.2s;
}

.lp-prev-btn:hover, .lp-next-btn:hover {
  background: #6c3483;
}

.lp-day-counter {
  font-weight: 600;
  color: #555;
  font-size: 0.95rem;
  display: inline-block;
}

.lp-day-counter-pulse {
  animation: lpDayPulse 0.5s ease;
}

@keyframes lpDayPulse {
  0%   { transform: scale(1);    color: #555; }
  40%  { transform: scale(1.12); color: #8E44AD; }
  100% { transform: scale(1);    color: #555; }
}

@media (max-width: 767px) {
  .lp-stepper {
    padding: 10px 8px;
    gap: 8px;
  }

  .lp-prev-btn, .lp-next-btn {
    padding: 8px 0;
    font-size: 0.82rem;
    flex-shrink: 0;
    width: 120px;
    text-align: center;
  }

  .lp-day-counter {
    font-size: 0.82rem;
    text-align: center;
    flex: 1;
    white-space: nowrap;
  }
}

/* ── LP Content Area ────────────────────────────── */
.lp-content-area {
  min-height: 400px;
}

/* ── Formula Box ─────────────────────────────────── */
.formula-box {
  background: #1a1a2e !important;
  color: #ffffff !important;
  padding: 12px;
  border-radius: 6px;
  margin-bottom: 12px;
  font-family: monospace;
}

.lp-content-area .formula-box strong,
body.caramel .lesson-content .formula-box strong,
.formula-box strong {
  color: #ffffff !important;
}

.lp-content-area .formula-box p,
body.caramel .lesson-content .formula-box p,
.formula-box p {
  color: #cccccc !important;
}

/* ── Common Mistakes Box ─────────────────────────── */
.common-mistakes {
  background: #fff3cd !important;
  border-left: 4px solid #ffc107 !important;
  padding: 8px 12px;
  margin-top: 8px;
  border-radius: 4px;
}

.common-mistakes strong {
  color: #856404 !important;
}

.common-mistakes p {
  color: #533f03 !important;
}

/* ── Readability baseline for AI-generated LP/QA content ── */
/* Inherited, not !important — won't fight existing component colors */
.lp-content-area,
.qa-section,
.assessment-block {
  color: #2a2a2a;
}

/* ── Tables nested inside dark formula-box need readable colors ── */
.formula-box .match-table td,
.formula-box .match-table th {
  color: #ffffff;
}
.formula-box .match-table tr:nth-child(even) td {
  background: rgba(255, 255, 255, 0.08);
}

/* ── Diff Block (LP comparison table) ───────────────────── */
.diff-block {
  width: 100%;
  overflow-x: auto;
  margin: 16px 0;
}

.diff-table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
}

.diff-table th,
.diff-table td {
  width: 33.33%;
  padding: 10px 14px;
  border: 1px solid #e2e8f0;
  vertical-align: top;
  word-wrap: break-word;
  overflow-wrap: break-word;
  white-space: normal;
}

.diff-table th {
  background: #8E44AD;
  color: white;
  font-weight: 600;
  text-align: left;
}

.diff-table tr:nth-child(even) td {
  background: #f9f9f9;
}

/* ── LP Vocab & Diff Tables ─────────────────────── */
.vocab-block table,
.diff-block table {
  width: 100% !important;
  table-layout: auto !important;
  border-collapse: collapse;
  margin: 12px 0;
}

.vocab-block table th,
.diff-block table th {
  background: #8E44AD !important;
  color: white !important;
  padding: 10px 14px !important;
  text-align: left !important;
  white-space: nowrap;
}

.vocab-block table td,
.diff-block table td {
  padding: 10px 14px !important;
  border-bottom: 1px solid #e2e8f0 !important;
  vertical-align: top !important;
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
  white-space: normal !important;
  min-width: 80px;
}

.vocab-block table tr:nth-child(even) td,
.diff-block table tr:nth-child(even) td {
  background: #f9f9f9 !important;
}
/* Book-back answer tracker */
.bookback-question-wrap { display: inline-flex; align-items: center; gap: 6px; }
.bookback-answer.bookback-locked { background: #f5f0e8; color: #7a6050; cursor: not-allowed; }
.bookback-status-badge { font-size: 11px; color: #7a6050; white-space: nowrap; }
.bookback-status-submitted { color: #2e7d32; font-weight: 600; }
.bookback-status-error { color: #c0392b; }
.bookback-submit-bar {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 16px; padding: 10px 14px;
  background: #fdf8f0; border: 1px solid #d4b896; border-radius: 8px;
}
.bookback-submit-btn {
  padding: 8px 16px; background: #b8863f; color: #fff; border: none;
  border-radius: 6px; font-weight: 600; cursor: pointer;
}
.bookback-submit-btn:disabled { background: #c9c9c9; cursor: not-allowed; }

/* ============================================================
   CFU / CCQ Blocks — Check for Understanding / Concept Check
   ============================================================ */

.cfu-block {
  background: #ffffff;
  border: 1px solid #dbe7f5;
  border-left: 3px solid #2E75B6;
  padding: 8px 12px;
  margin: 8px 0;
  border-radius: 4px;
}

/* .lp-teacher-says is already styled globally (see above) and applies
   as-is when nested inside .cfu-block — no override needed here. */

.cfu-block .cfu-wait-note {
  font-style: italic;
  font-size: 0.85rem;
  color: #666;
  margin-top: 4px;
}

.ccq-block {
  background: #f5f0ff;
  border-left: 3px solid #8E44AD;
  padding: 8px 12px;
  margin: 8px 0;
  border-radius: 4px;
}

/* .lp-teacher-says is already styled globally (see above) and applies
   as-is when nested inside .ccq-block — no override needed here. */

.ccq-tamil {
  font-family: 'NotoSansTamil', 'Latha', 'Vijaya', sans-serif;
  font-style: italic;
  font-size: 0.85rem;
  color: #555;
  margin-top: 4px;
}

@font-face { font-family: 'Charis SIL'; src: url('/fonts/CharisSIL-Regular.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Charis SIL'; src: url('/fonts/CharisSIL-Bold.ttf') format('truetype'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Charis SIL'; src: url('/fonts/CharisSIL-Italic.ttf') format('truetype'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'Charis SIL'; src: url('/fonts/CharisSIL-BoldItalic.ttf') format('truetype'); font-weight: 700; font-style: italic; font-display: swap; }

/* Reading font for lesson content, Q&A and LP (per TL).
   Tamil glyphs fall through to NotoSansTamil automatically. */
.lesson-content,
.lesson-content * {
  font-family: 'Charis SIL', 'Droid Serif', 'Roboto Serif',
               'NotoSansTamil', 'Latha', 'Vijaya', serif !important;
}

/* Keep monospace where the design needs it */
.lesson-content .board-work,
.lesson-content .board-work *,
.lesson-content pre,
.lesson-content code {
  font-family: monospace !important;
}