/* ═══════════════════════════════════════════════════════════════════
   IELTS Lexis — lesson-page blocks.

   The lessons index and lesson chrome reuse the shared rd- classes
   (loaded course-wide), and so do the heading / paragraph / keyrule /
   list blocks. Only table / compare / summary / practice carry lx-
   styling — all rendered on the cream "paper" sheet, so they use the
   --paper-* tokens to match the other IELTS lessons.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Lesson-not-found fallback ───────────────────────────────────── */
.lx-empty {
  text-align: center;
  padding: 3rem 1rem;
  color: var(--ielts-ink, #F2E6CC);
}
.lx-btn {
  display: inline-block;
  padding: .55rem 1.1rem;
  border: 1px solid var(--ielts-honey, #D9A268);
  border-radius: 8px;
  color: var(--ielts-honey, #D9A268);
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 600;
  font-size: .9rem;
  text-decoration: none;
}

/* ── Table ───────────────────────────────────────────────────────── */
.lx-tablewrap { overflow-x: auto; margin: 1.6rem 0 1.8rem; }
.lx-table {
  width: 100%;
  border-collapse: collapse;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: .95rem;
}
.lx-table th, .lx-table td {
  text-align: left;
  padding: .6rem .8rem;
  border: 1px solid rgba(31, 24, 18, .14);
  color: var(--paper-ink, #1F1812);
  vertical-align: top;
  line-height: 1.55;
}
.lx-table th {
  background: rgba(181, 122, 46, .12);
  font-weight: 700;
  font-size: .82rem;
  letter-spacing: .03em;
  color: var(--paper-honey, #B57A2E);
}
.lx-table tbody tr:nth-child(even) td { background: rgba(31, 24, 18, .03); }

/* ── Compare — two columns ───────────────────────────────────────── */
.lx-compare {
  margin: 1.6rem 0 1.8rem;
  border: 1px solid rgba(31, 24, 18, .14);
  border-radius: 8px;
  overflow: hidden;
}
.lx-cmp-head, .lx-cmp-row { display: grid; grid-template-columns: 1fr 1fr; }
.lx-cmp-head span {
  padding: .55rem .9rem;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--paper-honey, #B57A2E);
  background: rgba(181, 122, 46, .1);
}
.lx-cmp-head span:first-child { border-right: 1px solid rgba(31, 24, 18, .14); }
.lx-cmp-cell {
  padding: .85rem .9rem;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: .96rem;
  line-height: 1.55;
  color: var(--paper-ink, #1F1812);
  border-top: 1px solid rgba(31, 24, 18, .14);
}
.lx-cmp-a { border-right: 1px solid rgba(31, 24, 18, .14); }

/* ── Summary — closes every lesson ───────────────────────────────── */
.lx-summary {
  margin: 2rem 0 .5rem;
  padding: 1.2rem 1.4rem 1.3rem;
  background: rgba(181, 122, 46, .08);
  border: 1px solid rgba(181, 122, 46, .28);
  border-radius: 10px;
}
.lx-summary-label {
  display: block;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--paper-honey, #B57A2E);
  margin-bottom: .6rem;
}
.lx-summary-list {
  margin: 0;
  padding-left: 1.15rem;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: .95rem;
  line-height: 1.6;
  color: var(--paper-ink, #1F1812);
}
.lx-summary-list li { margin-bottom: .4rem; }
.lx-summary-list li:last-child { margin-bottom: 0; }

/* ── Practice — reveal-style self-check ──────────────────────────── */
.lx-practice {
  margin: 1.8rem 0;
  padding: 1.3rem 1.4rem 1.4rem;
  background: rgba(255, 255, 255, .55);
  border: 1px solid rgba(31, 24, 18, .16);
  border-radius: 10px;
}
.lx-practice-label {
  display: block;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--paper-honey, #B57A2E);
  margin-bottom: .5rem;
}
.lx-practice-intro {
  margin: 0 0 1.1rem;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: .92rem;
  line-height: 1.55;
  color: var(--paper-ink-soft, #4A3F33);
}
.lx-practice-list {
  margin: 0;
  padding-left: 1.5rem;
  font-family: 'Inter', system-ui, sans-serif;
}
.lx-ex { margin-bottom: 1.05rem; }
.lx-ex:last-child { margin-bottom: 0; }
.lx-ex-prompt {
  font-size: .96rem;
  line-height: 1.55;
  color: var(--paper-ink, #1F1812);
  margin-bottom: .55rem;
}
.lx-ex-summary {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .4rem .85rem;
  font-size: .8rem;
  font-weight: 700;
  color: var(--paper-honey, #B57A2E);
  background: rgba(181, 122, 46, .1);
  border: 1px solid rgba(181, 122, 46, .35);
  border-radius: 7px;
  cursor: pointer;
  list-style: none;
  user-select: none;
  transition: background .15s;
}
.lx-ex-summary:hover { background: rgba(181, 122, 46, .18); }
.lx-ex-summary::-webkit-details-marker { display: none; }
.lx-ex-summary::marker { content: ''; }
.lx-ex-summary::after {
  content: '';
  width: 0; height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
  transition: transform .15s;
}
.lx-ex-reveal[open] .lx-ex-summary::after { transform: rotate(180deg); }
.lx-ex-summary-hide { display: none; }
.lx-ex-reveal[open] .lx-ex-summary-show { display: none; }
.lx-ex-reveal[open] .lx-ex-summary-hide { display: inline; }
.lx-ex-answer {
  margin-top: .55rem;
  padding: .8rem .95rem;
  font-size: .94rem;
  line-height: 1.6;
  color: var(--paper-ink, #1F1812);
  background: rgba(181, 122, 46, .07);
  border: 1px solid rgba(181, 122, 46, .3);
  border-left-width: 3px;
  border-radius: 6px;
}