/* ============================================================
   Writing Lesson 4 — Advantages & Disadvantages Essay
   Colour tokens only — layout classes reused from w_lesson2.css
   ============================================================ */

/* ── Advantage / Disadvantage labels ── */
.wl4-adv { color: #4ade80; font-weight: 700; }
.wl4-dis { color: #f87171; font-weight: 700; }

/* ── Para-block label variants ── */
.wl4-epl-green {
  font-size: .78rem; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: #4ade80;
  padding: 4px 10px; margin-bottom: 6px;
  border-left: 3px solid #4ade80;
}
.wl4-epl-red {
  font-size: .78rem; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: #f87171;
  padding: 4px 10px; margin-bottom: 6px;
  border-left: 3px solid #f87171;
}

/* ── Final essay highlight variants ── */
.wl4-hl-green {
  background: rgba(74,222,128,0.15);
  border-bottom: 2px solid rgba(74,222,128,0.5);
  border-radius: 3px; padding: 1px 4px;
  cursor: pointer; transition: background .15s;
}
.wl4-hl-green:hover { background: rgba(74,222,128,0.28); }

.wl4-hl-red {
  background: rgba(248,113,113,0.15);
  border-bottom: 2px solid rgba(248,113,113,0.5);
  border-radius: 3px; padding: 1px 4px;
  cursor: pointer; transition: background .15s;
}
.wl4-hl-red:hover { background: rgba(248,113,113,0.28); }