/* =============================================================
   Extra styles for the BPD course player — layered on top of
   learn.css. Kept in its own file so the other two courses'
   shared learn.css is untouched.
   ============================================================= */

/* Persistent crisis-line reminder in the top bar */
.app-crisis {
  display: inline-flex; align-items: center; gap: var(--s-2);
  padding: 4px 10px; border-radius: 99px;
  background: var(--orange-tint); color: var(--orange);
  font-family: var(--font-mono); font-size: var(--fs-100);
  text-decoration: none; white-space: nowrap; border: 1px solid rgba(249,115,22,0.35);
}
.app-crisis:hover { background: rgba(249,115,22,0.18); }

/* Safety lesson */
.safety-block { max-width: var(--reading); }
.safety-block .safety-body p { color: var(--slate); margin: 0 0 var(--s-5); white-space: pre-line; }
.safety-block .safety-body ul.lesson-list { margin: 0 0 var(--s-5); }

/* Bulleted lesson content (About / Lesson Summary blocks) */
.lesson-body ul.lesson-list {
  margin: 0 0 var(--s-5); padding-left: 1.3em; color: var(--slate); display: grid; gap: var(--s-2);
}
.lesson-body ul.lesson-list li { padding-left: 2px; }
.safety-crisis {
  border: 1.5px solid rgba(249,115,22,0.4); background: var(--orange-tint);
  border-radius: var(--r); padding: var(--s-5);
}
.safety-crisis p { margin: 0 0 var(--s-3); color: var(--heading-ink); }
.safety-crisis p:last-of-type { margin-bottom: var(--s-4); }

/* Exercise lesson */
.exercise-block { max-width: var(--reading); }
.exercise-disclaimer {
  border-left: 3px solid var(--orange); background: var(--orange-tint);
  border-radius: 0 var(--r) var(--r) 0; padding: var(--s-4) var(--s-5);
  color: var(--heading-ink); margin: 0 0 var(--s-5);
}
.exercise-intro { color: var(--slate); font-weight: 500; margin: 0 0 var(--s-4); }
.exercise-examples {
  border: 1px solid var(--line); border-radius: var(--r); background: var(--paper);
  padding: var(--s-4) var(--s-5); margin: 0 0 var(--s-5);
}
.exercise-examples-label {
  font-family: var(--font-mono); font-size: var(--fs-100); text-transform: uppercase;
  letter-spacing: .08em; color: var(--muted-light); margin: 0 0 var(--s-2);
}
.exercise-examples ul { margin: 0; padding-left: 1.2em; color: var(--slate); }
.exercise-examples li { margin-bottom: var(--s-2); }
.exercise-prompts { display: grid; gap: var(--s-5); }
.exercise-prompt label { display: block; font-weight: 600; color: var(--heading-ink); margin-bottom: var(--s-2); }
.exercise-prompt textarea {
  width: 100%; box-sizing: border-box; padding: 10px 14px; border: 1.5px solid var(--line);
  border-radius: 6px; background: var(--white); color: var(--heading-ink);
  font-family: var(--font-body); font-size: 0.9rem; resize: vertical;
}
.exercise-prompt textarea:focus { outline: none; border-color: var(--teal-deep); }

@media (max-width: 768px) {
  .app-crisis .crisis-label { display: none; }
}