/* ============================================================
   Writing Lesson 6 — Cause & Effect Essay
   Colour tokens only — layout classes reused from w_lesson2.css
   ============================================================ */

/* ── Cause / Effect labels ── */
.wl6-cause { color: #a78bfa; font-weight: 700; }
.wl6-effect { color: #2dd4bf; font-weight: 700; }

/* ── Para-block label variants ── */
.wl6-epl-purple {
  font-size: .78rem; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: #a78bfa;
  padding: 4px 10px; margin-bottom: 6px;
  border-left: 3px solid #a78bfa;
}
.wl6-epl-teal {
  font-size: .78rem; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: #2dd4bf;
  padding: 4px 10px; margin-bottom: 6px;
  border-left: 3px solid #2dd4bf;
}

/* ── Final essay highlight variants ── */
.wl6-hl-purple {
  background: rgba(167,139,250,0.15);
  border-bottom: 2px solid rgba(167,139,250,0.5);
  border-radius: 3px; padding: 1px 4px;
  cursor: pointer; transition: background .15s;
}
.wl6-hl-purple:hover { background: rgba(167,139,250,0.28); }

.wl6-hl-teal {
  background: rgba(45,212,191,0.15);
  border-bottom: 2px solid rgba(45,212,191,0.5);
  border-radius: 3px; padding: 1px 4px;
  cursor: pointer; transition: background .15s;
}
.wl6-hl-teal:hover { background: rgba(45,212,191,0.28); }