/* ============================================================
   TrainerBjörn — :::decide widget
   A question, option buttons, a revealed panel — plus an optional
   hand-sketched triangle whose corner lights up with your choice.
   ============================================================ */

.lesson-decide {
  border: 1.5px solid var(--lesson-line, rgba(0, 0, 0, 0.16));
  border-radius: 14px; background: #fff;
  padding: 1.1rem 1.3rem 1.2rem; margin: 1.6rem 0;
  box-shadow: 2px 3px 0 rgba(0, 0, 0, 0.05);
}
.lesson-decide-kicker {
  font-family: 'Caveat', cursive; font-weight: 700; font-size: 1.3rem;
  color: var(--lesson-orange, #e76844); margin: 0;
}
.lesson-decide-q {
  font-family: 'Kalam', cursive; font-weight: 700; font-size: 1.15rem;
  color: var(--lesson-ink, #2b2b2b); margin: 0.2rem 0 0.9rem;
}

/* Sketched triangle */
.lesson-decide-triangle {
  display: block; width: min(280px, 70%); margin: 0.4rem auto 1rem;
}
.lesson-decide-tri-line {
  fill: none; stroke: var(--lesson-ink, #2b2b2b); stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round; opacity: 0.55;
}
.lesson-decide-corner circle {
  fill: #fff; stroke: var(--lesson-teal, #0ea5a4); stroke-width: 2;
  transition: fill 0.2s, r 0.2s;
}
.lesson-decide-corner text {
  font-family: 'Kalam', cursive; font-size: 13px;
  fill: var(--lesson-ink, #2b2b2b); opacity: 0.8;
}
.lesson-decide-corner.is-active circle { fill: var(--lesson-teal, #0ea5a4); }
.lesson-decide-corner.is-active text {
  fill: var(--lesson-teal, #0ea5a4); opacity: 1; font-weight: 700;
}

/* Option buttons */
.lesson-decide-opts { display: flex; flex-direction: column; gap: 0.55rem; }
.lesson-decide-opt {
  font-family: 'Kalam', cursive; font-size: 1.02rem; text-align: left; width: 100%;
  border: 1.5px solid var(--lesson-line, rgba(0, 0, 0, 0.16)); border-radius: 12px;
  padding: 0.7rem 0.95rem; background: #fff; color: var(--lesson-ink, #2b2b2b);
  cursor: pointer; transition: border-color 0.15s, background 0.15s, transform 0.1s;
  display: flex; align-items: center; gap: 0.6em;
}
.lesson-decide-opt::before {
  content: ""; flex: 0 0 auto; width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid var(--lesson-line, rgba(0, 0, 0, 0.16));
}
.lesson-decide-opt:hover { border-color: var(--lesson-teal, #0ea5a4); transform: translateX(2px); }
.lesson-decide-opt.is-active { border-color: var(--lesson-teal, #0ea5a4); background: rgba(14, 165, 164, 0.1); }
.lesson-decide-opt.is-active::before {
  content: "✓"; border-color: var(--lesson-teal, #0ea5a4); background: var(--lesson-teal, #0ea5a4);
  color: #fff; display: flex; align-items: center; justify-content: center; font-size: 12px;
}

/* Revealed panel: a sticky note that unfolds */
.lesson-decide-panel {
  margin-top: 0.9rem; padding: 0.9rem 1.1rem; border-radius: 12px;
  background: #fffceb; border: 1.5px dashed rgba(232, 184, 48, 0.8);
  font-family: 'Kalam', cursive; line-height: 1.55; color: var(--lesson-ink, #2b2b2b);
  transform: rotate(-0.3deg);
}
.lesson-decide-panel > :first-child { margin-top: 0; }
.lesson-decide-panel > :last-child { margin-bottom: 0; }
.lesson-decide-panel[hidden] { display: none; }