/* ============================================================
   Writing Lesson 5 — Problem & Solution Essay
   Colour tokens only — layout classes reused from w_lesson2.css
   ============================================================ */

/* ── Problem / Solution labels ── */
.wl5-prob { color: #fb923c; font-weight: 700; }
.wl5-sol  { color: #38bdf8; font-weight: 700; }

/* ── Para-block label variants ── */
.wl5-epl-orange {
  font-size: .78rem; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: #fb923c;
  padding: 4px 10px; margin-bottom: 6px;
  border-left: 3px solid #fb923c;
}
.wl5-epl-blue {
  font-size: .78rem; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: #38bdf8;
  padding: 4px 10px; margin-bottom: 6px;
  border-left: 3px solid #38bdf8;
}

/* ── Final essay highlight variants ── */
.wl5-hl-orange {
  background: rgba(251,146,60,0.15);
  border-bottom: 2px solid rgba(251,146,60,0.5);
  border-radius: 3px; padding: 1px 4px;
  cursor: pointer; transition: background .15s;
}
.wl5-hl-orange:hover { background: rgba(251,146,60,0.28); }

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