/* ===== Math Base: Definitions, Theorems, Properties ===== */

:root {
  /* Definition — indigo family, close in spirit to lesson_theory */
  --def_bg: #eef2ff;
  --def_border: #6366f1;
  --def_label: #4338ca;
  --def_title: #312e81;
  --def_text: #1e293b;

  /* Theorem — navy, more formal */
  --thm_bg: #f8fafc;
  --thm_border: #1F2A44;
  --thm_label: #1F2A44;
  --thm_title: #1F2A44;
  --thm_text: #1e293b;

  --thm_proof_bg: #ffffff;
  --thm_proof_border: #cbd5e1;
  --thm_proof_label: #64748b;

  /* Property — teal, lighter weight than a theorem */
  --prop_bg: #ecfeff;
  --prop_border: #0e7490;
  --prop_label: #0e7490;
  --prop_title: #0e7490;
  --prop_text: #1e293b;

  --math_radius: 10px;
}

/* ---------- Shared label pill ---------- */
.lesson_math_definition_label,
.lesson_math_theorem_label,
.lesson_math_property_label {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 3px 12px;
  border-radius: 100px;
  margin-bottom: 8px;
}

/* ================= DEFINITION ================= */
.lesson_math_definition {
  background: var(--def_bg);
  border-left: 4px solid var(--def_border);
  border-radius: var(--math_radius);
  padding: 16px 20px;
  margin: 20px 0;
}

.lesson_math_definition_label {
  color: #ffffff;
  background: var(--def_label);
}

.lesson_math_definition_title {
  margin: 0 0 8px 0;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--def_title);
}

.lesson_math_definition_text {
  margin: 0;
  font-size: 1.02rem;
  line-height: 1.6;
  color: var(--def_text);
}

.lesson_math_definition_text + .lesson_math_definition_text {
  margin-top: 10px;
}

/* ================= THEOREM ================= */
.lesson_math_theorem {
  background: var(--thm_bg);
  border: 2px solid var(--thm_border);
  border-radius: var(--math_radius);
  padding: 18px 22px;
  margin: 22px 0;
}

.lesson_math_theorem_label {
  color: #ffffff;
  background: var(--thm_label);
}

.lesson_math_theorem_title {
  margin: 0 0 10px 0;
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--thm_title);
}

.lesson_math_theorem_text {
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.62;
  color: var(--thm_text);
  font-style: italic;
}

.lesson_math_theorem_text + .lesson_math_theorem_text {
  margin-top: 10px;
}

/* ---- Proof sub-block ---- */
.lesson_math_proof {
  background: var(--thm_proof_bg);
  border: 1px dashed var(--thm_proof_border);
  border-radius: 8px;
  padding: 14px 18px;
  margin-top: 14px;
}

.lesson_math_proof_label {
  display: block;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--thm_proof_label);
  margin-bottom: 6px;
}

.lesson_math_proof_text {
  margin: 0;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--thm_text);
}

.lesson_math_proof_text + .lesson_math_proof_text {
  margin-top: 8px;
}

/* QED mark at the end of the last proof paragraph */
.lesson_math_proof_text:last-of-type::after {
  content: "\25A0"; /* ∎ */
  margin-left: 6px;
  color: var(--thm_border);
  font-size: 0.85em;
}

/* Optional: proof as a collapsible <details> instead of always-open */
details.lesson_math_proof > summary.lesson_math_proof_label {
  cursor: pointer;
  list-style: none;
}
details.lesson_math_proof > summary.lesson_math_proof_label::-webkit-details-marker {
  display: none;
}
details.lesson_math_proof > summary.lesson_math_proof_label::before {
  content: "\25B8  "; /* small triangle, rotates on open */
  display: inline-block;
  transition: transform 0.15s ease;
}
details.lesson_math_proof[open] > summary.lesson_math_proof_label::before {
  transform: rotate(90deg);
}

/* ================= PROPERTY ================= */
.lesson_math_property {
  background: var(--prop_bg);
  border-left: 4px solid var(--prop_border);
  border-radius: var(--math_radius);
  padding: 14px 20px;
  margin: 18px 0;
}

.lesson_math_property_label {
  color: #ffffff;
  background: var(--prop_label);
}

.lesson_math_property_title {
  margin: 0 0 6px 0;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--prop_title);
}

.lesson_math_property_text {
  margin: 0;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--prop_text);
}

.lesson_math_property_text + .lesson_math_property_text {
  margin-top: 8px;
}

/* ---------- Mobile adaptation ---------- */
@media (max-width: 480px) {
  .lesson_math_definition,
  .lesson_math_property {
    padding: 12px 14px;
  }
  .lesson_math_theorem {
    padding: 14px 16px;
  }
  .lesson_math_theorem_title,
  .lesson_math_definition_title {
    font-size: 1.05rem;
  }
}