/* ============================================================
   Writing Lesson 3 — Discussion Essay Builder
   Colour tokens only — layout classes reused from w_lesson2.css
   ============================================================ */

/* ── View labels ── */
.wl3-v1 { color: #2dd4bf; font-weight: 700; }   /* teal  — other view */
.wl3-v2 { color: #f59e0b; font-weight: 700; }   /* amber — your view  */

/* ── Para-block label variants ── */
.wl3-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;
}
.wl3-epl-amber {
  font-size: .78rem; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: #f59e0b;
  padding: 4px 10px; margin-bottom: 6px;
  border-left: 3px solid #f59e0b;
}

/* ── Final essay highlight variants ── */
.wl3-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;
}
.wl3-hl-teal:hover { background: rgba(45,212,191,0.28); }

.wl3-hl-amber {
  background: rgba(245,158,11,0.15);
  border-bottom: 2px solid rgba(245,158,11,0.5);
  border-radius: 3px; padding: 1px 4px;
  cursor: pointer; transition: background .15s;
}
.wl3-hl-amber:hover { background: rgba(245,158,11,0.28); }