/* teach.css — teach mode UI bits (toolbar + per-word affordances) */

/* Teach toolbar container (shown only when TEACH_MODE enabled) */
#teachToolbar{
  display: none;
  margin-bottom: 10px;
  padding: 10px;
  border: 1px solid #5a3a10;
  border-radius: 12px;
  background: rgba(46,27,8,0.55);
}

/* The training script tokens already have spans (.w). Teach mode makes them feel tappable. */
#scriptText.teach-mode .w{
  cursor: pointer;
}

#scriptText.teach-mode .w:hover{
  outline: 1px solid rgba(201,162,39,0.35);
  border-radius: 999px;
}

/* Highlight replaced words (teach mode keeps them highlighted so you can audit) */
#scriptText .w.teach-replaced{
  background: rgba(201,162,39,0.14);
  box-shadow: 0 0 0 1px rgba(201,162,39,0.25) inset;
  border-radius: 6px;
  padding: 0 4px;
}

/* Teach modal tweaks (inherits from modals.css) */
#teachModal .modal{
  max-width: 620px;
}

/* Ensure the replacement input always has a real click/focusable box (some mobile layouts were collapsing it). */
#teachModal .field{
  display: block;
  width: 100%;
}

#teachModal #teachTo{
  display: block;
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  box-sizing: border-box;
  font-size: 16px; /* iOS Safari: prevents tiny/odd focus behavior */
}

#teachModal b{
  color: #f0d060;
}